欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-10 10:19:34
...

背景

现在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. 创建一个db2.json文件
    数据必须要有id属性,json要用双引号

    	{
      "contacts": [
        {
          "name": "A",
          "email": "aaa@qq.com",
          "contactno": "11130",
          "id": 7
        }
      ],
      "contacts2": [
        {
          "name": "DD",
          "email": "aaa@qq.com",
          "contactno": "111130",
          "id": 8
        }
      ],
      "contacts3": [
        {
          "name": "FFF",
          "email": "aaa@qq.com",
          "contactno": "111111130",
          "id": 9
        },
          {
          "name": "CCC",
          "email": "aaa@qq.com",
          "contactno": "114130",
          "id": 10
        }
      ]
    }
    
  3. 使用命令行,执行

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

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

    • contacts/contacts1/contacts2 是db.json文件创建的数据
    • get /post/put/patch/delect/options 是可以请求的方法
      使用Fetch API 实现学生信息的CRUD操作(1)---json-server
  4. 查看 http://localhost:3000/contacts
    使用Fetch API 实现学生信息的CRUD操作(1)---json-server

  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

参考链接

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

上一篇: CORS跨域

下一篇: easyMock本地化搭建