使用Fetch API 实现学生信息的CRUD操作(1)---json-server

背景

现在web 流行前后端分离，后端负责提供数据，前端通过请求api 接口获取数据。那我们可以自己mock(模拟)数据，先进行测试，最后改改接口就好。

什么是json-server

json-server是一个 npm 包，可以给前端提供mock数据(前端开发设计测试数据,进行测试)。
启动json-server，开启服务，让前端使用fetch获取模拟的数据。

优点

1. 可以自己在本地设计mock数据
2. 可以对数据进行CRUD操作，通过 请求方式 + 请求 url 地址

具体使用

1. 全局安装(node一定要安装)

   npm install -g json-server
   

2. 创建一个db.json文件
   数据必须要有id属性，json要用双引号

   	{
     "contacts": [
       {
         "name": "A",
         "email": "2656593403@qq.com2",
         "contactno": "11130",
         "id": 7
       }
     ],
     "contacts2": [
       {
         "name": "DD",
         "email": "2656593403@qq.com2",
         "contactno": "111130",
         "id": 8
       }
     ],
     "contacts3": [
       {
         "name": "FFF",
         "email": "2656593403@qq.com2",
         "contactno": "111111130",
         "id": 9
       },
         {
         "name": "CCC",
         "email": "asd@qq.com2",
         "contactno": "114130",
         "id": 10
       }
     ]
   }
   

3. 使用命令行，执行

   json-server --watch db.json
   json-server --watch db.json --port 3004    //使用其他端口
   

   

   • contacts/contacts1/contacts2 是db.json文件创建的数据
   • get /post/put/patch/delect/options 是可以请求的方法
     

4. 查看 http://localhost:3000/contacts
   

5. 常见查看数据方式(获取，查询，分页，模糊搜索)

   http://localhost:3000/db   //访问db.json内容
   http://localhost:3000/contacts3   //访问contacts3内容
   http://localhost:3000/contacts3/10    //访问contact3底下id为10的用户
   http://localhost:3000/contacts3?id=9   //访问contact3底下id为9的用户
   http://localhost:3000/contacts3?name=CCC   //访问contact3底下用户名为CCC的用户
   http://localhost:3000/contacts3?name=CCC&name=FFF   //访问contact3底下用户名为CCC以及FFF的用户
   http://localhost:3000/contacts3?_page=1&_limit=1    //访问contact3，一页只显示一条数据
   //分页查询 参数为 _start, _end, _limit,从0开始计数
   http://localhost:3000/contacts3?_sort=id&_order=desc    //访问contact3,数据根据id降序(desc 降序，asc升序)
   //操作符 _gte, _lte, _ne, _like, _gte大于，_lte小于， _ne非， _like模糊查询 
   http://localhost:3000/contacts3?q=9    //访问contact3,带数字9的用户,q全局搜索（模糊查询）
   

   下一节：
   使用Fetch API 实现学生信息的CRUD操作(2)—postman
   使用Fetch API 实现学生信息的CRUD操作(3)—RESTFul api
   使用Fetch API 实现学生信息的CRUD操作(4)—Fetch Api实战
   大家也可以直接看我左边专栏fetch api，里面有这个demo相关的所有文章

参考链接

https://www.npmjs.com/package/json-server
https://blog.csdn.net/ghost_violets/article/details/102754608