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