博主微信:jiayou321xiaoyu 加微信,备注:前端Tree

前端开发之如何快速提供一个测试接口(json-server包的用法)

vue框架 admin 275℃ 0评论

以前的前端叫做网页设计师,只需要写写静态页面即可,而现在从事前端开发的工作程度跟后端差不多,也需要很多逻辑在里面,ajax的使用让前端开发的工作量更大,同时前端开发的地位也得到了不小的提升。

作为一名前端开发工程师,会使用ajax是必不可少的技能,在vue中前端开发需要后端提供数据接口,而现在前后端分离,一般都是同时在开发,前端有的时候就需要自己先模拟数据,因此我们可以使用node.js,json-server包自动生成测试数据接口或者使用mock.js。

说明: json-server 提供的接口是 REST API
REST API:
1 查询数据 GET
2 添加数据 POST
3 删除数据 DELETE
4 修改数据 PUT 或 PATCH

使用步骤:
1 全局安装: npm i -g json-server
2 准备 json 文件( todos.json )
3 执行命令: json-server todos.json

通过以上三个步骤,就可以得到一个 增删改查、分页、跨域 等功能的接口

测试案例:

测试接口

1 查询
请求方式:GET
接口地址:http://localhost:3000/todos 查询所有数据
接口地址:http://localhost:3000/todos/2 查询id为2的数据

2 添加
请求方式:POST
接口地址:http://localhost:3000/todos
说明:不需要提供 id, id会自动生成

3 删除
请求方式:DELETE
接口地址:http://localhost:3000/todos/2 删除id为2的数据

4 修改
请求方式:PUT 或 PATCH
接口地址:http://localhost:3000/todos/3 更新id为3的数据
*PATCH请求,只需要提供要更新的属性即可
PUT请求,需要提供所有的属性,才能正确修改数据

转载请注明:前端Tree » 前端开发之如何快速提供一个测试接口(json-server包的用法)

喜欢 (1)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址