json-server模拟数据&前后端合作模式

本是古典何须时尚 2023-07-13 15:17 18阅读 0赞

## 前后端合作模式 ##

前后端并行开发、后端已经开发完成（接口都写好了）

### 后端已经开发完成 ###

那接口就能直接用了呗，省事。

### 前后端并行开发 ###

*  前后端确定接口，形成**接口文档**（很重要）
 *  前端需要做模拟数据

#### json-server 做模拟数据： ####

（参考npm文档：[https://www.npmjs.com/package/json-server\#https][https_www.npmjs.com_package_json-server_https]）

##### 1、安装： #####

<table> 
 <tbody> 
  <tr> 
   <td>yarn global add json-server (全局安装)；</td> 
  </tr> 
  <tr> 
   <td>npm install -g json-server （或者用node安装，node版本10以上） </td> 
  </tr> 
  <tr> 
   <td>json-server [options] 启动服务器；  eg： json-server ./mock/data.json(目录) 启动服务器；</td> 
  </tr> 
 </tbody> 
</table>

##### 2、命令提示： #####

Options:
      --config, -c               Path to config file    [默认值: "json-server.json"]
      --port, -p                 Set port                             [默认值: 3000]      
      --host, -H                 Set host                      [默认值: "localhost"]
      --watch, -w                Watch file(s)                                [布尔]
      --routes, -r               Path to routes file
      --middlewares, -m          Paths to middleware files                    [数组]
      --static, -s               Set static files directory
      --read-only, --ro          Allow only GET requests                      [布尔]
      --no-cors, --nc            Disable Cross-Origin Resource Sharing        [布尔]
      --no-gzip, --ng            Disable GZIP Content-Encoding                [布尔]
      --snapshots, -S            Set snapshots directory               [默认值: "."]
      --delay, -d                Add delay to responses (ms)
      --id, -i                   Set database id property (e.g. _id)  [默认值: "id"]
      --foreignKeySuffix, --fks  Set foreign key suffix (e.g. _id as in post_id)
                                                                      [默认值: "Id"]
      --quiet, -q                Suppress log messages from output            [布尔]
      --help, -h                 显示帮助信息                                 [布尔]
      --version, -v              显示版本号                                   [布尔]

##### 3、简单看一下json-server是怎么用的： #####

新建一个mock文件夹，里面存放.json文件。（建立模拟数据，data.json 里的数据是通过接口拿过来的，**./mock/data.json** 指定路径）  
![在这里插入图片描述][20200314091555332.png]  
这样，可以通过json-server在本地启一个临时的服务把数据读取出来，问题是，怎么给数据提供一个接口，让接口去调数据？  
Create a ./mock/data.json file with some data：

{ 
      "posts": [
        {  "id": 1, "title": "json-server", "author": "typicode" }
      ],
      "comments": [
        {  "id": 1, "body": "some comment", "postId": 1 }
      ],
      "profile": {  "name": "typicode" }
    }

开启JSON服务：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]

##### 4、下面是json-server的命令先相关用法： #####

**示例1：**`json-server ./mock/data.json -p 3333 -w`  
意为，json服务端口号为3333（-p），观测文件变化（-w）；

比如，posts数据未修改前，是这个样子：  
![在这里插入图片描述][20200314094421129.png]  
![在这里插入图片描述][20200314094006441.png]  
增加多条数据后，刷新页面变化，这样就达到了观测文件变化：  
![在这里插入图片描述][20200314094524723.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]  
**示例2：**`json-server ./mock/data.json -p 3333 -w -i exampleId`（通过默认属性来查找数据，列表页查找详情页非常实用）

posts数据的默认属性为id，如果属性名更改，则不能直接在地址栏输入属性值来查找这条信息。  
如下，“id”：2能找到，“exampleId”：1就找不到了。  
![在这里插入图片描述][20200314094934641.png]  
![在这里插入图片描述][20200314094947317.png]  
这时，可以通过更改属性名来重新检索到：`json-server ./mock/data.json -p 3333 -w -i exampleId`，把默认id更改为exampleId；  
同样，属性名为id的数据就不能找到了。（这有点类似于数据库中一张表的数据查询，只是有**默认**唯一属性名为id，而这个属性名也是可以更改的）  
![在这里插入图片描述][20200314095353967.png]  
![在这里插入图片描述][20200314095406107.png]  
**示例3：** 当然也可以通过**Full-text search**文字来查找数据，格式：GET /posts?q=文本  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]

**示例4：** 还可以做分页，使用\_page和可选的\_limit来分页返回的数据， 写在？后面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][2020031410114766.png]  
**示例5：** 还可以做分页截取显示

Slice
    Add _start and _end or _limit (an X-Total-Count header is included in the response)
    
    GET /posts?_start=20&_end=30
    GET /posts/1/comments?_start=20&_end=30
    GET /posts/1/comments?_start=20&_limit=10

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 4]

**示例6：** 加载静态资源目录`-s ./mock/img/`，完整命令为`json-server ./mock/data.json -p 3333 -w -s ./mock/img/`  
![在这里插入图片描述][20200314111710610.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 5]

##### 5、简化命令 #####

每次都要输入一长串的命令比如`json-server ./mock/data.json -p 3333 -w`很麻烦，我们可以在`package.json`里面，增加脚本；  
比如起一个名字 `"mock"`，mock后面是刚才的脚本`"json-server ./mock/data.json -p 3333 -w "`，然后就不用频繁的在控制台输入指令，可以`npm run mock`或者`yarn mock`代替。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 6]

##### 6、配置路由（自定义路径） #####

比如：实现在浏览器地址栏中使用/api1/posts来访问数据，通过路由映射到/posts

1、配置入口页面，新建 mock.js 配置文件，添加内容：  
![在这里插入图片描述][20200314113820133.png]

2、routes.json路由文件，把映射关系写清楚：  
![在这里插入图片描述][2020031411365437.png]  
“需要访问的接口的路径（key）”：“最终地址映射到文件地址（value）”

3、package.json配置文件，新增脚本：  
![在这里插入图片描述][20200314114042943.png]  
（routes.json 改成这个；还有图片上的未显示的字是“不会冲突”）

4、开启服务：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 7]  
5、localhost:4444/posts，可以访问：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 8]  
6、localhost:4444/api1/posts，也可以访问  
![在这里插入图片描述][2020031411460495.png]

##### 7、也可以自己编写业务逻辑，创造模拟数据 #####

之前，我们的数据都是通过data.json里读取的，不过也可以通过mock.js（之前建的）来自己编写，创造模拟数据。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][20200314121522839.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][20200314120943894.png]

##### 8、也可以往json里面添加数据 #####

比如通过form表单提交数据，在.json文件里面就可以新增数据。  
这里推荐使用两个插件：insomnia、postman  
![在这里插入图片描述][20200314141433547.png] ![在这里插入图片描述][2020031414144460.png]

[https_www.npmjs.com_package_json-server_https]: https://www.npmjs.com/package/json-server#https
[20200314091555332.png]: /images/20230529/9794087b30734f32947d0b4a9d37d949.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: /images/20230529/71ddff0d670b4e9982fd7e1517adc14a.png
[20200314094421129.png]: /images/20230529/efe50f7e031d472da7e979552da4601c.png
[20200314094006441.png]: /images/20230529/68c98288526d4bc1ad1657b2dfc59ef3.png
[20200314094524723.png]: /images/20230529/1062c1f460c0469ebd6cf9d49867f5ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: /images/20230529/bdad76a912f3481cad34b6140289d467.png
[20200314094934641.png]: /images/20230529/d6e90a6014c04ed5b787b877389ffc5a.png
[20200314094947317.png]: /images/20230529/cee373cc72bf4eab971543489e5a9795.png
[20200314095353967.png]: /images/20230529/77514e4ad77c4303aa9f86a252ac8e50.png
[20200314095406107.png]: /images/20230529/3a71db4fb16e4bc0a58e478a21e951a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]: /images/20230529/a7d376ebbcb348c2807f1b71274c614e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]: /images/20230529/b5c97688f5c44f3cbb956bf06dc2efda.png
[2020031410114766.png]: /images/20230529/e2089cd153724b93846fbd0010842708.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 4]: /images/20230529/7471310dc8ab4c5a94bad17e86daafee.png
[20200314111710610.png]: /images/20230529/0dd22d88e35d44ca93e021f26df795a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 5]: /images/20230529/7c61ef4df30f419aa8f8a573a8f0b1b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 6]: /images/20230529/3868962817514551a499c3a3af3574ff.png
[20200314113820133.png]: /images/20230529/6b45564d43dd4be08baca4e33b1eacdb.png
[2020031411365437.png]: /images/20230529/c7d5c23d68c145238d9f9d7decd560e6.png
[20200314114042943.png]: /images/20230529/a96bf93b6baa47a2a5cdf1a5216bbb0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 7]: /images/20230529/0501f3862faf420d94dea5a9cab4844a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 8]: /images/20230529/c11ee68031c5427f9f175e0f96469b4c.png
[2020031411460495.png]: /images/20230529/b7b51092785549d3867c9b7666d459df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 9]: /images/20230529/22cd5e1c23964003a138bf683059df05.png
[20200314121522839.png]: /images/20230529/4f8e5c3a1f5c40ca91860cf3810aa82d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 10]: /images/20230529/708ab9895e0746ad80cc7dc3bdbbb456.png
[20200314120943894.png]: /images/20230529/15f091415a93461eb8038fa2a9eeb9e6.png
[20200314141433547.png]: https://img-blog.csdnimg.cn/20200314141433547.png
[2020031414144460.png]: /images/20230529/73b6a7c41a1240cdb436bcf9aee978b1.png