在以前的文檔中，我們構建了vue項目的整體架構，詳見vue入門：vue項目架構設計起步，現在我們主要對其中的mock server 進行完善。

一、概述

前后端分離的項目優(yōu)點之一就是可以前后端并行開發(fā)，互不影響。那么在后端接口沒有完成之前，我們怎么進行前端項目的測試呢，這就需要我們自己構建一個前端測試服務，自己模擬假數據，以便于我們的前端開發(fā)工作。

這里我主要是應用mockjs做的mock server，并在vue2.0項目中進行使用。

mockjs可用來生成隨機數據，并攔截 Ajax 請求，返回模擬的響應數據。

mockjs數據類型豐富，支持多種數據類型，如文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等。

mockjs增加了前端單元測試的真實性，用法簡單。

mockjs的功能強大，語法也很多，具體可以查看mockjs官方文檔

二、使用

1、在vue項目中安裝依賴

npm install mockjs --save-dev

2、建立項目文件結構

根目錄下建立mock文件夾，然后分別構建util.js 、index.js 、json文件(以index.json為例)

3、util.js文件，主要是用來進行json數據讀取方法的封裝。內容如下：

// 引入外部資源

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')

// 解析并返回

console.log(json)

return JSON.parse(json)

}

}

4、index.js文件，主要是用來定義各個接口方法。內容如下：

const Mock = require('mockjs')

const util = require('./util')

module.exports = function(app) {

// 監(jiān)聽請求

app.get('/api/index', (rep, res) => {

// 響應時，返回 mock data的json數據

const articleList = util.getJsonFile('./index.json')

// 將json傳入 Mock.mock 方法中，生成的數據返回給瀏覽器

res.json(Mock.mock(articleList))

})

}

5、index.json文件，主要是用來構建自己的模擬數據。如：

{

"ret":true,

"data|1-10":[{

"userid": "@id()

總結

以上是生活随笔為你收集整理的建立项目接口文档_分享：一步一个脚印，vue入门之使用mockjs搭建vue项目测试服务器...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。