在使用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文档
    此时可以看到类似于这样的一个项目结构

在vue-cli搭建的项目中使用mockjs-脚本宝典
其中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

clipboard.png

hello.vue中的AJAX请求与mockjs里里面的url相同,这个时候我们可以看到页面上的显示如下图

clipboard.png

模块化的使用

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

首先,需要引入mockjs =》 require('mockjs')
其次在dev-server里面配置
app.use('/api/data', (req, res) => {
  res.send({
    data:['a','s']
  })
})

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

clipboard.png

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

把上面引入的mockjs注掉,把app.use改写成app.use('/api', require('../src/mock.js'))的形式,其中api是根路径,类似于router中的base路径,后面的require引入的是mock.js里的数据
在mockjs文档中,我们进行一下数据改写,如下图所示

clipboard.png

此时页面显示为

clipboard.png

本文固定链接: http://www.js-code.com/vue-js/vue-js_16188.html