使用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文档中,我们进行一下数据改写,如下图所示