JSONPlaceholder搭建本地数据接口制作一个 vue的简单实例实现增删改查
1--》JSONPlaceholder:http://jsonplaceholder.typicode.com/上面一部分是可以供页面直接使用的json串,在页面直接调用相应的url就可以获得数据,最下面一个是搭建自己的服务器,自己自定义字段和数据。步骤如下:1,新建一个文件 在这个目录运行npm install -g json-server2.初始化得到node_modulesnpm i...
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页面和文件
更多推荐
所有评论(0)