JSON-server 的增删改查

一.json-server工具

作用:

  • json-server可以快速的模拟接口

  • 它是一个基于nodejs的命令行工具,例如:nodemon

安装:

  • npm i json-server -g 全局安装

使用的基本步骤:

  • 新建一个文件夹,名字随意

 

  • 进入文件夹,创建一个json文件,名字随意

JSON-server 的增删改查_第1张图片

 

  • 在json文件中写入内容

{
  "brands": [
    {"id":1,"name":"宝马","ctime":"2020-02-02 10:10:10"},
    {"id":2,"name":"奔驰","ctime":"2021-02-02 10:10:10"},
    {"id":3,"name":"奥迪","ctime":"2022-02-02 10:10:10"}
  ]
}
  • 在当前文件夹,执行启动json-server的服务

 

 JSON-server 的增删改查_第2张图片

  • 成功的日志

 

  • 访问 http://localhost:3000/brands 测试

JSON-server 的增删改查_第3张图片

 

注意事项:

  • 不能关闭命令行窗口

  • id一定是数字,这样id才能自增

二.增删改查

1.接口规则-RESTful

目标:了解一种接口定义规范resetful

接口规范:如何定义接口地址,请求方式,传参方式,对应不同的请求操作行为。

具体规则:

接口地址 请求方式 操作行为
/brands GET 查询所有列表
/brands/:id GET 查询单个详情 /brands/1
/brands POST 添加,提交的参数在请求体
/brands/:id DELETE 删除 /brands/1
/brands/:id PUT 修改 /brands/1 + 请求体{name,cTime} 全部修改
/brands/:id PATCH 修改 /brands/1 + 请求体{name} 个别修改

这个表格可以作为接口调用的参考。

2.以axios作为增删改查请求

axios的使用:

  • 查询所有

  • 查询单个

  • 添加操作

  • 删除操作

  • 修改操作

实例代码





  
  
  Document




  
  


你可能感兴趣的:(Ajax,json,前端)