vue-cli项目中使用mockjs模拟数据-配置和使用（超详细！）

在前端的开发中，很多时候都需要用到接口，但是后端的接口往往要比较晚才出来，那么前端有没有办法通过制造假数据来模拟后端端口，加快开发速度呢？答案是肯定的，这里有两种方法介绍下。

1. 使用网上一些提供数据的网站，如聚合数据、极速数据等，但是需要注册，大部分API需要钱💴，且不如自己配置的方便；

2. 利用mockjs模拟数据。

下面就介绍在vue-cli项目中使用mockjs来模拟数据的步骤。

mock.js 提供了以下模拟功能：

1. 根据数据模板生成模拟数据
2. 模拟 Ajax 请求，生成并返回模拟数据

1.开始

搭建一个vue-cli项目（不介绍了）

2.安装mockjs

npm install mockjs --save-dev

 3.配置

// 项目根目录下的 vue.config.js 的 devServe 中
before: () => {
    var chokidar = require('chokidar')  // 监听
    var watcher = chokidar.watch('./tests/mock/', {
        ignored: /(^|[\/\\])\../,
        persistent: true
    })
    var forkMockServer = function () {
        return require('child_process').fork('./tests/mock/index.js')  // 子进程,fork父子通信
    }
    var n = forkMockServer()

    watcher.on('change', () => {
        console.log('restart mock server')
        n.kill()
        n = forkMockServer()
    })

    process.on('SIGINT', function () {
        n.kill()
        process.exit(0)
    })
}

4.创建 mockjs 文件

a. 在项目根目录下创建 mock 文件夹，文件夹里创建 index.js 文件

// index.js
const fs = require('fs')
const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()  // 集中处理URL，根据不同的URL调用不同的处理函数
const bodyParser = require('koa-bodyparser')  // 解析原始的request请求，把解析的参数绑定到 ctx.request.body中
// 上面的中间件 需要 npm install

app.use(bodyParser())
app.use(router.routes())
app.use(router.allowedMethods())

require('./api/articles.js')(router)


app.listen(3000, function() {
    console.log('\nmock server running, http://localhost:3000')
})

b. 在当前目录下新建api文件夹，在api文件夹里新建articles.js文件

const Mock = require('mockjs')

// 配置模拟数据：
const article = ctx => {
    ctx.body = Mock.mock({
        c: 0,
        m: 'ok',
        data: {
            articles: [
                {
                    id: '@integer()',
                    title: '@ctitle(3,6)',
                    date: '@date("yyyy-MM-dd HH:mm:ss")',
                    content: '@cparagraph(5,8)',
                    introduction: '@csentence(30,50)',
                    readNum: '@integer(10, 100)',
                    comNum: '@integer(10, 100)'
                }
            ]
        }
    })
}
  // 返回模拟的数据及接口：
module.exports = (router) => {
    return [
        router.get('/api/article', article),
    ]
}

5.在项目中配置api接口

a. 在src下新建 service 文件夹，文件夹内新建article.js 文件

// article.js
import axios from 'axios'

export function getArticles() {
    return axios.get('/api/article')  // mockjs返回的接口
}

b. 在需要请求数据的组件内使用

// src/components/article-main.vue

import {getArticles} from "@/service/articles"  // 引入
export default {
    data () {
        return {
            articles:[],  // 文章列表
        }
    },
    methods: {
        getArticlesList: function () {  
            getArticles().then(res => {      // 使用，返回数据
                let data = res.data.data.articles;
                this.articles = data;
            })
        }
    },
    created () {
        this.getArticlesList();
    }
}

6.重新启动项目

就可以看到生成的假数据啦！

至此，mockjs模拟数据的步骤已经完成，可以进行下一步的开发。等到后台接口对接好之后，mockjs直接取消使用就ok了。