最近在學習dvajs，其中要用到mock進行模擬接口和數據，網上也有相應的教程，但是較為雜亂，同時踩了不少坑，因此本篇權當記錄。

---

設計功能：

• 自動生成2-5個用戶數據，并顯示在列表中
• 添加數據

---

mock數據

首先，看一下項目目錄。

項目目錄

mock文件夾下就是我們需要寫模擬后端數據和接口的地方。

---

然后，在mock文件下，開始寫模擬數據和接口

// mock/UserMock.js import Mock from 'mockjs';let db = Mock.mock({'data|2-5': [{id: '@id',//隨機idname: '@cname',//隨機名稱nickName: '@last',//隨機昵稱phone: /^1[34578]\d{9}$/,//隨機電話號碼address: '@county(true)',//隨機地址email: '@email',//隨機郵箱isMale: '@boolean',//隨機性別avatar() {//用戶頭像return Mock.Random.image('10×10', Mock.Random.color(), '#757575', 'png', this.nickName)}}] });module.exports = {'GET /api/users': (req, res) => {res.status(200).json({ users: db });},'POST /api/search': (req, res) => {var { nickName } = req.body;res.status(200).json(Mock.mock({id: '@id',name: '@cname',nickName: nickName,phone: /^1[34578]\d{9}$/,address: '@county(true)',email: '@email',isMale: '@boolean',avatar() {return Mock.Random.image('10×10', Mock.Random.color(), '#757575', 'png', this.nickName)}}));}, }

---

然后編寫request和services接口

編寫services接口，其中POST的方法需要注意：添加請求頭content-type，不然mock中數據會無法讀取

// service/api.js import request from '../utils/request';export function getUsers(){return request("/api/users"); }export function postUser(){return request("/api/adduser", {method: 'POST',headers: {'content-Type': 'application/json; charset=utf-8'},body: JSON.stringify(data),}); }

關于request的url問題，可以在request.js下的request方法設置url

// request.js export default function request(url, options) {if (!url.startsWith("http://localhost:3000/api")){url = "http://localhost:3000" + url;}if (options !== undefined && options !== null) {console.log("-------------傳入參數-------------");console.log(options.body);}return fetch(url, options).then(checkStatus).then(parseJSON).then(data => ({ data })).catch(err => ({ err })); }

---

最后，在.roadhogrc.mock.js編寫代碼，用來讀取mock文件夾下的接口和數據

import fs from 'fs'; import path from 'path';const mockPath=path.join(__dirname+'/mock');const mock={}; fs.readdirSync(mockPath).forEach(file=>{Object.assign(mock,require('./mock/'+file)); });module.exports=mock;

---

然后就是model、route的編寫了

總結

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

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