一、安裝

簡單粗暴
npm install mockjs

二、引入

CommonJS引入

let Mock = require('mockjs') let userInfo = Mock.mock({data: {responseCode: 200,responseMessage: 'success',userMessage: {name: "@cname",email: "@email",msg: '@cparagraph(2)'}} })

或者ES6的引入方式

import Mock from 'mockjs'

三、使用

3.1 單獨寫一個mockData.js文件

mockData.js

let Mock = require('mockjs') let userInfo = Mock.mock({data: {responseCode: 200,responseMessage: 'success',userMessage: {name: "@cname",email: "@email",msg: '@cparagraph(2)'}} })let mockData = {userInfo: userInfo }export default mockData

在頁面中import數據使用

3.2 使用vuex去控制是否使用mockData.js的數據

store.js

import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex);const state = {//使用模擬數據, 只是開發時使用, 如果不是開發時, 請務必設置為falseuseMock: true }export default new Vuex.Store({state })

在HelloWorld.vue里

created() {if (this.$store.state.useMock) {//使用延時器模擬異步window.setTimeout(() => {let arr = [];arr.push(mockData.userInfo.data.userMessage);this.tableData = arrconsole.log(mockData);//業務邏輯}, 1000);return;}// 若不使用剛剛mockData.js中的數據，走下面這個方式，發起請求axios.get("http://localhost:8090/test.action").then((res) => {console.log(res)this.tableData = res.data.userInfo}).catch(function(error) {console.log(error)})},

3.3 express+mockjs寫一個后臺

前端的代碼進入聯調階段只需要修改一個basePath，所有的接口名字都可以和約定好的路徑保持一致，可以測試post請求，模擬網絡環境
先裝expressnpm install express

MockServer.js

let express = require('express'); //引入express let Mock = require('mockjs'); //引入mocklet app = express(); //實例化express/*為app添加中間件處理跨域請求*/ app.use(function(req, res, next) {res.header("Access-Control-Allow-Origin", "*");res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');res.header("Access-Control-Allow-Headers", "X-Requested-With");res.header('Access-Control-Allow-Headers', 'Content-Type');next(); });app.all('/test.action', function(req, res) { //指定路徑res.json(Mock.mock({"status": 200,"userInfo|10": [{name: "@cname",email: "@email",msg: '@cparagraph(2)'}]})); });app.listen('8090', () => {console.log('監聽端口 8090') })

package.json

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","mock": "node ./src/components/MockServer" 這里路徑要寫對},

這樣就可以在根目錄下使用npm run mock來啟動后臺了，在http://localhost:8090/test.action看到模擬的數據

前端頁面顯示

總結

以上是生活随笔為你收集整理的使用mockjs模拟数据的全部內容，希望文章能夠幫你解決所遇到的問題。

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