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了。