关于mockjs的使用

使用mockjs

一、npm install mockjs --save-dev

二、在src文件中新建一个mock.js，存放于存放模拟的数据

三、项目搭建起来之后，能够在package.json里面看到 "mockjs": "^1.0.1-beta3" 这块代码，就说明mockjs已经引入载入成功，就可以开始我们下一步的操作；

简单的使用

我们在mockjs中进行以下编写

同时，不要忘记了，需要在main.js里面引入该文档，告诉程序，使用了mockjs，来进行数据模拟

require('./mock')//此部分引入的是我们所编写的mockjs文档

重写了app.vue

app.vue中的AJAX请求与mockjs里里面的url相同

模块化的使用

（1）在build的文件夹下面的dev-server文件中进行配置

首先，需要引入mockjs =》require('mockjs')

其次在dev-server里面配置

app.use('/api/data', (req, res) => {

res.send({

data:['a','s']

})

})

此块代码写到如下图所在的区域

其中res.send的意思就是把它所包含的数据抛出去，使AJAX能够请求的到，使用这个方法的时候，我们不需要在main.js里面引入就可以直接使用，但是有一点不好的是，这种方法，因为卸载配置里面，比较混乱，跟我们模块化开发的意愿相悖，我们可以尝试这把数据的这一块单独拿出去，我们只需要在这里面引用就可以了；

把上面引入的mockjs注掉，把app.use改写成app.use('/api', require('../src/mock.js'))的形式，其中api是根路径，类似于router中的base路径，后面的require引入的是mock.js里的数据

在mockjs文档中，我们进行一下数据改写，如下图所示