在vue-cli搭建的项目中使用mockjs
11
在使用vue开发的时候，一直疑惑与mockjs怎么用，开了mockjs的开发文档，还是一脸蒙蔽，无从下手！mockjs在前后端分离开发上进行模拟数据，是不可避掉的一环。在网上看了一些博文还有查阅了其文档，终于搞明白了它的基础用法，有什么不完整的地方，还请大家多多指正。
- 搭建一个vue项目
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack vue-mock
# 安装依赖，走你
$ cd my-project
$ npm install
- 安装mockjs
npm install mockjs --save-dev
- 启动项目
npm run dev
- 创建一个mockjs文档
此时可以看到类似于这样的一个项目结构
[图片上传失败...(image-5bde3d-1531914746405)]
其中mockjs是我自己创建的一个mock文件，用于存放模拟的数据
项目搭建起来之后，能够在package.json里面看到 "mockjs": "^1.0.1-beta3" 这块代码，就说明mockjs已经引入载入成功，就可以开始我们下一步的操作；
我所理解的有两种方法使用mockjs，第一种是比较简答你的使用，还有一种是模块化的使用
简单的使用
（1）在项目中的mock.js文件中，写入模拟的数据，此时我们需要参照一下mockjs文档中的这样一块
//参照mockjs的文档，进行操作
// 配置 Mock 路径
require.config({
paths: {
mock: 'http://mockjs.com/dist/mock'
}
})
// 加载 Mock
require(['mock'], function(Mock){
// 使用 Mock
var data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
})
// 输出结果
document.body.innerHTML +=
'<pre>' +
JSON.stringify(data, null, 4) +
'</pre>'
})
（2）我们在mockjs中进行以下编写
//引入mockjs
const Mock = require('mockjs')
//使用mockjs模拟数据
Mock.mock('/api/data', (req, res) => {
return {
data: ['a','b']
}
})
同时，不要忘记了，需要在main.js里面引入该文档，告诉程序，使用了mockjs，来进行数据模拟
require('./mock')//此部分引入的是我们所编写的mockjs文档
（3）重写了Hello.vue
[图片上传失败...(image-2d3f3e-1531914746405)]
hello.vue中的AJAX请求与mockjs里里面的url相同，这个时候我们可以看到页面上的显示如下图
[图片上传失败...(image-93b0bd-1531914746405)]
模块化的使用
（1）在build的文件夹下面的dev-server文件中进行配置
首先，需要引入mockjs =》 require('mockjs')
其次在dev-server里面配置
app.use('/api/data', (req, res) => {
res.send({
data:['a','s']
})
})
此块代码写到如下图所在的区域
[图片上传失败...(image-e25cbb-1531914746405)]
其中res.send的意思就是把它所包含的数据抛出去，使AJAX能够请求的到，使用这个方法的时候，我们不需要在main.js里面引入就可以直接使用，但是有一点不好的是，这种方法，因为卸载配置里面，比较混乱，跟我们模块化开发的意愿相悖，我们可以尝试这把数据的这一块单独拿出去，我们只需要在这里面引用就可以了；
把上面引入的mockjs注掉，把app.use改写成app.use('/api', require('../src/mock.js'))的形式，其中api是根路径，类似于router中的base路径，后面的require引入的是mock.js里的数据
在mockjs文档中，我们进行一下数据改写，如下图所示
[图片上传失败...(image-c2163f-1531914746405)]
此时页面显示为
[图片上传失败...(image-a25010-1531914746405)]
[](javascript:void(0);)
[新浪微博](javascript:void(0);)
[微信](javascript:void(0);)
[Twitter](javascript:void(0);)
[Facebook](javascript:void(0);)
赞 | 11 收藏 | 46
