mock数据和数据交互

一、mock数据：json-server

json-server：是用来模拟后端的接口的。

mock这词本意是虚拟，模拟的意思。mock server工具，通俗来说，就是模拟服务端接口数据，一般用在前后端分离后，前端人员可以不依赖后端的API开发，而在本地搭建一个JSON服务，自己产生测试数据。即：今天要讲的json-server就是个存储json数据的server ​ json-server 支持CORS和JSONP跨域请求。

1、创建文件夹（作为mock数据的文件夹）

2、初始化项目

//在文件夹里，执行：
npm init -y

3、安装json-server

npm i json-server  -D（就是--save-dev)

4、打开项目编写数据

在项目根目录下创建db.json，并写上合法的json数据。

属性名必须用双引号括起来，属性值：要么是json对象，要么是数组，如下：

{
  "inc": {
    "count": 3
  },
  "vips": [
    {
      "username": "刘一",
      "userpass": "123123",
      "id": 2
    },
    {
      "username": "陈二",
      "userpass": "123123",
      "id": 3
    },
    {
      "username": "张三",
      "userpass": "123123",
      "id": 4
    },
    {
      "username": "李四",
      "userpass": "123123",
      "id": 5
    },
    {
      "username": "王五",
      "userpass": "123223",
      "id": 6
    },
    {
      "username": "赵六",
      "userpass": "123112",
      "id": 7
    }
  ],
  "comments": [
    {
      "bookId": "868711",
      "id": "001",
      "username": "孙七",
      "content": "三国演义很有内涵"
    },
    {
      "bookId": "868711",
      "id": "002",
      "username": "孙七",
      "content": "三国演义很有内涵，孙七很喜欢"
    }
  ],      
  "books":[
    {
      "id": "868711",
      "name": "三国演义",
      "author": "罗贯中",
      "price": 51.2,
      "img": "/imgs/1.jpg",
      "type": "hot"
    },
    {
      "id": "868712",
      "name": "水浒传",
      "author": "施耐庵",
      "price": 51.5,
      "img": "/imgs/2.jpg",
      "type": "hot"
    },
    {
      "id": "868713",
      "name": "红楼梦",
      "author": "曹雪芹",
      "price": 51.8,
      "img": "/imgs/3.jpg",
      "type": "hot"
    },
    {
      "id": "868714",
      "name": "西游记",
      "author": "吴承恩",
      "price": 51.8,
      "img": "/imgs/4.jpg",
      "type": "hot"
    },
    {
      "id": "868715",
      "name": "大学",
      "author": "曾参",
      "price": 52.8,
      "img": "/imgs/img1.jpg",
      "type": "new"
    },
    {
      "id": "868716",
      "name": "中庸",
      "author": "子思",
      "price": 52.9,
      "img": "/imgs/img2.jpg",
      "type": "new"
    },
    {
      "id": "868717",
      "name": "论语",
      "author": "孔子及其再传弟子",
      "price": 53.8,
      "img": "/imgs/img3.jpg",
      "type": "new"
    },
    {
      "id": "868718",
      "name": "孟子",
      "author": "孟子及其弟子",
      "price": 54.8,
      "img": "/imgs/img4.jpg",
      "type": "new"
    }
  ],
  "readers": [
    {
      "id": "008",
      "name": "周八",
      "age": 35
    },
    {
      "id": "009",
      "name": "吴九",
      "age": 32
    },
    {
      "id": "010",
      "name": "郑十",
      "age": 29
    }
  ]
}

注意：每个键后面的值，只能是对象或者数组。

5、启动配置

在package.json下增加如下代码：

"scripts": {
    + "server":"json-server db.json"
},

6、运行

在命令行运行： npm run server

7、JSON-SERVER的各种请求

可以使用postman等工具测试以下请求。

(1)、GET 请求数据列表

获取所有的书籍

localhost:3000/books

(2)、GET 请求指定ID的数据

localhost:3000/books/868711

返回的是json对象。

(3)、GET 请求指定字段值的数据

localhost:3000/books?id=868711&name=三国演义

获取id为868711和name为三国演义的书籍，返回结果是数组（就算只有一条数据）

(4)、GET 数据分页

localhost:3000/bookS?_page=1&_limit=2

_page表示页码

_limit表示每页的条数

 (5)、GET 数据排序

localhost:3000/bookS?_sort=price&_order=asc
- asc 升序 desc 降序

(6)、GET 区间查询

localhost:3000/bookS?price_gte=30&price_lte=40

查找price的值大于等于30 而 小于等于40的记录

 (7)、GET 搜索(模糊查询)

搜索所有属性值里包括“三”的记录，模糊查询。在所有属性中进行查询。

localhost:3000/bookS?q=三

 (8)、GET 关联查询

http://localhost:3000/books/868711?_embed=comments

查询books中id为868711，并把comments中 bookId为868711的数据关联出来，结果是：

 {
      "id": "868711",
      "name": "三国演义",
      "author": "罗贯中",
      "price": 51.2,
      "img": "/imgs/1.jpg",
      "type": "hot"
      "comments": [
         {
               "bookId": "868711",
               "id": "001",
               "username": "孙七",
               "content": "三国演义很有内涵"
         },
         {
               "bookId": "868711",
               "id": "002",
               "username": "孙七02",
               "content": "三国演义很有内涵，孙七很喜欢"
         }
      ]
  }

(9)、POST ：添加数据

请求方式为：POST

①localhost:3000/books

②设置请求头：

                       ajax里：Headers:{ Content-Type:'application/json' }

                       postman工具里：在body -> raw-->json

(10)、delete 删除数据

请求方式为：DELETE

(11)、patch 更新数据

请求方式为：PATCH

(12)、put 更新数据