手摸手教你在vue项目中使用mockjs模拟数据入门

简介

话不多说，把手拿来。
珍爱生命，远离后台。

背景

在前后端分离模式项目开发过程中，前端的界面展示、交互逻辑往往需要后台接口数据支撑，然而万恶的后台总跟不上有我们美丽的前端小姐姐进度。
于是我们不由得仰天长叹，难道就没有即无需依赖后台又能完美展示界面数据，即能保证前端交互的完整性又不太费事儿的方法吗？
答案当然是有的~~~~ 下面就请我们的主角登场

Mockjs

介绍

Mock官网首页是这么定义的：生成随机数据，拦截 Ajax 请求。

传送门 & 示例

作用

1. 减少开发成本

   前后端分离其实从增加了开发成本，只是在它带来的优势上可以让我们忍受这种成本，但攻克这方面成本的目标却从未停止

2. 剥离前后端开发时的耦合性

   做完本阶段的开发详设之后，前端就可以开时本阶段的开发了，由于基础设定已经在详设阶段完成统一，前后端在开发过程中应该是可以完全独立的。但实际开发中前端往往留着某些接口回执逻辑等着与后台对接后填充，无法完全完成前端自身的界面展示及交互逻辑。而使用mockjs模拟接口及数据前端可以在最大程度上彻底分离开发时与后台的耦合成本，在开发时就基本完成全部前端逻辑编写

3. 减少前后端接口对接时间

   前后端完成独立开发后，就进入了前后台对接阶段，很多项目组就在此阶段会花费大量的调试时间及成本。然而实际上，如果前端做完了数据及交互的逻辑，后台完成了所有接口自测，此阶段应该是非常迅速的

4. 前端自建项目演示

   很多前端开源项目都是无后台，模拟数据演示的。例如vue-element-admin,d2-admin,wl-admin.

在项目中应用

1. 引入js依赖

   npm install mockjs      
   

2. 建一个mock文件夹来统一管理我们的mock数据
3. 在mock文件夹下建一个demo.js尝试一下
4. 在mock/demo.js中写下如下代码：

   import Mock from 'mockjs'
   

   随机生成一个20-40条的数组数据试试

   const projectList = Mock.mock({
       "list|20": [{
       'name': '@cname', // 中文名
       'account': `@word`, // 英文单词
       'phone': /1[3-9][0-9]{9}/, // 正则模式
       'deptName