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

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

什么是数据模拟?

关于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文件下，[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G0tvWwc9-1609673474648)(.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]查看是否安装成功。

在你的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改变端口。},

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

简单封装一个拦截器，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' }"borderfit: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>{{ ail }}</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 }"><spanstyle="width: 200px;overflow: hideen;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{  }}</span></template></el-table-column></el-table></div>
</template><script>
import { getList } from "@/api/demo";
export default {data() {return {list: [],};},created() {ListTo();},methods: {async getListTo() {let res = await getList();console.log(res, "res");this.list = res.data;},},
};
</script><style scoped>
</style>

最后出现的样式是这样的

本文档只是记录我个人的使用方式以及想法，具体细节请参照
使用。
有错误的地方请指正，我会虚心请教学习！