JSONPlaceholder搭建本地数据接口制作一个 vue的简单实例实现增删改查

vue

1--》JSONPlaceholder：

http://jsonplaceholder.typicode.com/

上面一部分是可以供页面直接使用的json串，在页面直接调用相应的url就可以获得数据，最下面一个是搭建自己的服务器，自己自定义字段和数据。步骤如下：

1，新建一个文件在这个目录运行 npm install -g json-server

2.初始化得到node_modules npm init

3.局部安装 npm install json-server --save(--save是把安装的内容写入package.json)

以上得到所有需要的东西

4.配置启动指令

5.新建一个名字为db.json的文件，自己写需要的json串

6.启动 json-server --watch db.json

resources就是数据（在浏览器打开可看到数据），home是主页(显示了所有数据源及可以使用的请求方式及其他)

也可以根据条件筛选数据（见github文档部分)

这样接口和数据就搭建好了，接下来使用接口测试工具测试一下增删改查是否可用

2--》postman

post是一个接口测试工具，一般的 get请求可以在浏览器模拟测试，而post/delete等请求就不行了。

分别验证一下增（post）,删（delete），改（patch）,查（get）

1.get查询请求(查询名字为lily的用户)

2.新增一条数据

新增成功后会自动生成相应的id排列并到数据末尾，可以到 db.json查看是否新增成功

body部分的参数raw表示，可以上传任意格式的文本，可以上传text、json、xml、html等,

因为现在数据是json格式，headers也是json格式，所以要选择raw

3.修改一条数据（修改ID为6 age为10的数据，name改为elisa）

接口传参的路由规则详见的路由部分(Routes部分)

https://github.com/typicode/json-server

4删除一条数据（删除id为5的数据）

接口调试成功

3.vue的增删改查

此部分代码已经上传到github,一些语法说明查看注释以及readme页面和文件