方法 數據 pan getjson pac path 參考 art 可能

在嘗試做一個前後端分離的個人博客的時候，由於前後端都需要自己完成，所以首先需要把前端頁面寫好，但同時需要調用接口，後端代碼卻還沒有開動，怎麽辦呢，所以這時候就需要自己搭建來模擬假數據了。 在以前的實習中曾經用過mock, 覺得還挺不錯，所以決定用 vue 結合 mock來攔截 Ajax 請求，加快博客完成的速度，在參考官網和各類文章後，其開發過程如下所示

1. 安裝依賴

cnpm install mockjs --save-dev 註： 安裝完以後，由於還附帶許多依賴，所以可能還需要執行cnpm install 2. 建立項目文件結構 3. util.js 中代碼如下

// 引入外部資源
const fs = require(‘fs‘)                        
const path = require(‘path‘)
 
module.exports = {
    // 用於被index.js進行調用
    getJsonFile (filePath) {
        // 讀取指定的json文件
        const json = fs.readFileSync(path.resolve(__dirname, filePath), ‘utf-8‘)
        
 
// 解析並返回
        return JSON.parse(json)
    }
}

4. index.js

const Mock = require(‘mockjs‘
const util = require(‘./util‘)
 
module.exports = function(app) {
    // 監聽請求
    app.get(‘/getArticleList‘, (rep, res) => {
        // 響應時，返回 mock data的json數據
        const articleList = util.getJsonFile(‘./article-list.json‘)
        
 
// 將json傳入 Mock.mock 方法中，生成的數據返回給瀏覽器
        res.json(Mock.mock(articleList))
    })
}

5. json 格式（按自己需要，也可以用mock產生隨機數）

6. 修改 webpack 配置

build -> webpack.dev.conf.js -> devServer devServer.before: require(‘../mock‘) 引入即可

在完成以上步驟以後，即可以請求成功啦，然後就可以完美的開始調用接口，用自己的模擬數據啦。

在vue-cli中搭建mock服務器