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页面和文件


Logo

前往低代码交流专区

更多推荐