重启准备(二)：对于数据模拟的初步使用（json-server）

什么是数据模拟?

关于json-server，在我们日常工作中，以为是前后端分离开发，我们可能需要调试一些功能调用接口，而后端工程师还没有给我们要的接口，这时候我们需要使用假数据进行模拟，我最常用的数据模拟式json-server，相信这也是大部分前端的朋友不二之选，使用方便而且简单便利，我这里也简单的介绍一下json-server在vue里的用法。

建立一个vue的项目，大家可能都会使用，打开你项目的文件，在命令行里，输入

 npm install json-server -S/npm i json-server -S 
大家应该都知道 i 是install缩写，同时-S 也是-save（生产环境） ,也可以是-D（开发环境），还有就是-g全局安装，大家不懂自行百度，有很多文章会详细介绍他们的区别。

在项目根目录下package.json文件下，

package.json

查看是否安装成功。

在你的src下目录创建一个文件夹data，data文件下，创建db.json(文件的名字可以随意)，在里面敲上我们想要的数据

[
    {
        "name": "李娟",
        "email": "[email protected]",
        "addres": "香港特别行政区 香港岛 湾仔",
        "zip": "137583",
        "text": "需圆响权务率指几报拉看不确。海龙走角意切建积影而内到回常千易地。这专求点便有率至要体金调统力。事因所划位做这于米着才党声场去须。路至间条天气者大严程务克它。放那解越并原许在信结影原几了各。适样实等战十级将具克同什青线在历火报。世习类情线边对术可军写采们层米作长。平去现强论例张后反效界很象华图果。做眼引参周张四结开条看般效。作式心情这与规研整较这给议了光现。求任满只大办装路些十前种他常使你照用。格改参需高选周作八验自调美要区。养列度属己许里前社对日了示生将情周。三式争通速不东划少电而工次制号。还水影联向记每东资了厂是保非把问水。中务气者斯子提他只存战步社位应。并美单很度传原斗拉建劳而进阶周。这使目深信日江转国发四说作何积但力。革县达该文她市难林一热长马律影以又们。根专西必口约无具装物南除并工住他。机中团东联看斗记商济后期容相华求给。型众置政装商么真果之代风状展火志领。质毛在或确对周你称党物计然易及斗。强切半被动口结由育品音者率题几。众步型门专变细周件公海实商当。新用热量据给接王么前农合。些共水点把织调温快说组代越准其红长。",
        "date": 1609672803431
    },
     ...
]

然后在data文件下的命令行内输入 json-server ./db.json
如果你没有配置环境变量会报错，你也可以在package.json文件配置内

"scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "json-server": "json-server --watch ./src/data/db.json"
    //这里加上这一句话然后同样命令行 npm i json-server 同样也可以启动 --watch是检测数据实时改变 也可以加上port改变端口。
  },

启动后会得到 http://localhost:3000/user 这样一个地址，打开这个地址，得到的就是我们相要的数据了。

简单封装一个拦截器，http://localhost:3000 这个地址填进baseUrl内，然后创建一个api文件夹，创建新文件demo.js

import 拦截器 from "拦截器路径";

export function getList() {
  return 拦截器({
    url: "/user",
    method: "get",
  });
}

然后我随便找了个页面，

最后出现的样式是这样的

QQ图片20210103192658.png

本文档只是记录我个人的使用方式以及想法，具体细节请参照https://www.npmjs.com/package/json-server
使用。
有错误的地方请指正，我会虚心请教学习！