mockjs在vue项目中的使用,不影响测试环境和生产环境

mockjs在项目中的使用

现状:

后台管理系统中,前后端进度可能会出现不一致的情况,前端的许多开发需要依赖后端接口开发的完成,这样就会造成前端的被动状态,会造成迭代前期前端时间充裕,迭代后期前端时间比较紧张(联调时间基本都在前端)

目的

让迭代更顺畅,解决前后端进度不一致的情况,解决前端必须依赖后台接口的完成才去开发的现状。不影响现有代码

具体实现

  1. 为什么使用mockjs

也许想通过json文件去模拟后台接口的数据,但是获取到的数据是固定的,而且很局限,增删改的接口怎么去实现?

Mockjs是一款前端开发中拦截Ajax请求再生成随机数据响应的工具,可以用来模拟服务器响应。优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。

  1. 实现思路

规则:

(1):只在本地可用、不影响线上

(2):尽可能少的改动

(3):使用方便

Vue中根据NODE_ENV来区分测试环境和生产环境,测试环境的值为development,生产环境的值为production。看package.json中scripts里面,有启动dev的命令,有启动build的命令,那我们可以加一个启动mock的命令呢?答案当然是可以的。
我们在scripts中添加"mock": "cross-env NODE_ENV=mock npm run dev",这就意味着当我们执行npm run mock时,先把NODE_ENV的值变为了mock,然后再走npm run dev的相关操作。

根据"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",此行代码可知,run dev时候其实加载的是build下面的webpack.dev.conf.js,在此js中,有引入config中的dev.env.js。

打开dev.env.js,会发现NODE_ENV:  '"development"'有这么一行,就是把development赋值给NODE_ENV,所以此处咱们要做个调整,咱们需要根据先有的NODE_ENV的值去判断,当现有的NODE_ENV的值为mock时候,则NODE_ENV的值继续为mock,否则为development。所以那一行改为:NODE_ENV: process.env.NODE_ENV == 'mock' ? '"mock"' : '"development"'

 

项目中本地环境使用mockjs,肯定需要安装mockjs。执行:npm install mockjs --save-dev ,package.json中出现mockjs的版本号信息等,然后我们在src目录下创办mock目录,在mock目录下创建index.js文件,可根据MOCK.mock(url,method,data)创建相关的请求,此处的url建议是正则,以mock开头,mock/xxx 和rest/xxx的保持一致

在main.js中引入mock,根据判断NODE_ENV的值,来决定是否加载mock。

 

最后一步:打开接口地址的管理页面,把const BASEHTTP = 'rest'改为

const BASEHTTP = process.env.NODE_ENV === 'mock' ? '/mock' : 'rest'。

Mock/index.js如图

mockjs在vue项目中的使用,不影响测试环境和生产环境

 

Mock/response/user.js如图

 

mockjs在vue项目中的使用,不影响测试环境和生产环境

接口地址页面如图:

mockjs在vue项目中的使用,不影响测试环境和生产环境