什么是数据模拟?

关于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": "b.ubhbeqk@godnaagl.name",
        "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",
  });
}

然后我随便找了个页面，

<template>
  <div class="show">
    数据模拟页
    <el-table
      :data="list"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      border
      fit
      :row-style="{ height: '10px' }"
      :cell-style="{ padding: '2px 0' }"
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column type="index" width="40" align="center"></el-table-column>
      <el-table-column label="名字" prop="name" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" prop="email" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮政编码" prop="zip" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.zip }}</span>
        </template>
      </el-table-column>
      <el-table-column label="内容" prop="text" align="center">
        <template slot-scope="{ row }">
          <span
            style="
              width: 200px;
              　overflow: hideen;
              　text-overflow: ellipsis;
              　display: -webkit-box;
              　-webkit-line-clamp: 2;
              　-webkit-box-orient: vertical;
            "
            >{{ row.text }}</span
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList } from "@/api/demo";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getListTo();
  },
  methods: {
    async getListTo() {
      let res = await getList();
      console.log(res, "res");
      this.list = res.data;
    },
  },
};
</script>

<style scoped>
</style>

最后出现的样式是这样的

QQ图片20210103192658.png

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

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

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

什么是数据模拟?