vue項目中mock.js的使用及基本用法

2019-11-19 11:30:02

字體：大中小

來源：轉載

供稿：網友

官方網址：http://mockjs.com/

mockjs是用來模擬產生一些虛擬的數據，可以讓前端在后端接口還沒有開發出來時獨立開發。我們可以使用真實的url，mockjs可以攔截ajax請求，返回設定好的數據。

使用方式

這里主要討論在vue項目中，使用axios發送ajax請求，mock.js模擬數據的流程。

vue-cli搭建項目后，安裝axios和mock.js

npm install -S axiosnpm install -D mockjs

在項目中新建mock.js文件夾，來設置要產生的模擬數據的格式。

3. 設想這樣一個場景，頁面在打開時要從數據庫獲取一個新聞列表，現在我們要模擬這個列表，新聞對象包括新聞標題、新聞內容和創建時間三項。

// mock.js// 引入mockjsconst Mock = require('mockjs')// 獲取 mock.Random 對象const Random = Mock.Random// mock新聞數據，包括新聞標題title、內容content、創建時間createdTimeconst produceNewsData = function () { let newsList = [] for (let i = 0; i < 20; i++) { let newNewsObject = { title: Random.ctitle(), // Random.ctitle( min, max ) 隨機產生一個中文標題，長度默認在3-7之間 content: Random.cparagraph(), // Random.cparagraph(min, max) 隨機生成一個中文段落，段落里的句子個數默認3-7個 createdTime: Random.date() // Random.date()指示生成的日期字符串的格式,默認為yyyy-MM-dd； } newsList.push(newNewsObject) } return newList}// 請求該url，就可以返回newsListMock.mock('/mock/news', produceNewsData) // 后面講這個api的使用細節

在main.js引入該mock.js文件，表明我們使用這里面產生的數據。

// main.jsimport Vue from 'vue'import App from './App'import router from './router'require(./mock.js)

在APP.vue里我們來發送get請求獲取數據

// App.vue<template> <div id="#app"></div></template><script>import axios from 'axios' // 引入axiosexport default { // 掛載的時候獲取新聞列表 mounted() { axios.get('/mock/news').then(res => { // url即在mock.js中定義的 console.log(res.data) // 打印一下響應數據 }) }}</script>

運行項目打開控制臺可以看到，我們拿到了模擬的數據。

Mock.mock()

Mock.mock( rurl, rtype, template|function( options ) )rurl可選。表示需要攔截的 URL，可以是 URL 字符串或 URL 正則。例如 '/domian/list.json'。rtype可選。表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。template可選。表示數據模板，可以是對象或字符串。數據模板中的每個屬性由 3 部分構成：屬性名、生成規則、屬性值：// 屬性名 name// 生成規則 rule// 屬性值 value'name|rule': value例如：'name|1-10':1 會產生一個1-10之間的整數，詳細規則參見官方文檔function(options)可選。表示用于生成響應數據的函數。options指向本次請求的 Ajax 選項集，含有 url、type 和 body 三個屬性

增加數據

之前討論的都是產生好數據供我們獲取，如果想測試增加數據的功能，mock.js也可以實現，對于 Mock.mock(url,function(ops)) ，ops參數就可以拿到傳送的數據。

// App.vue<template> <div id="app"> <div> <input type="text" v-model="title"> <button type="button" @click="submit">提交</button> <button type="button" @click="getProjects">獲取</button> </div> </div></template><script>import axios from 'axios'export default { data () { return { title: '' } }, methods: { submit () { axios.post('/mock/addProject', { // 添加數據的接口,數據為一個對象，有個title屬性 title: this.title }) }, getProjects () { axios.get('/mock/projects').then(res => { // 獲取數據 console.log(res.data)  }) } }}</script>

我們在mock.js中模擬一個添加數據的接口，拿到數據后存到數組中。

// mock.js// 添加信息let projectList = []Mock.mock('/mock/addProject', ops => { // 攔截ajax請求，調用函數 console.log(ops) // 先看一下這個ops是什么 projectList.push(ops)})// 獲取信息Mock.mock('/mock/projects', projectList)

在輸入框中輸入標題后，點擊提交，數據發送到/mock/addProject, mock.js攔截到請求后，調用function(ops)方法，打印看到ops是個對象，有3個屬性，url,type和body，而我們輸入的數據就在body屬性值里，同時因為axios默認發送的是json格式的數據，所以body里面的數據是json串，更改function(ops)函數，將數據以js對象的形式存入數組中。當然實際開發中可以看后端的數據返回格式，選擇在前端進行json轉js的操作，這里只是演示一下。

// mock.js// 添加信息let projectList = []Mock.mock('/mock/addProject', ops => { // 攔截ajax請求，調用函數 // console.log(ops) // 先看一下這個ops是什么 ops = JSON.parse(ops.body) projectList.push(ops)})// 獲取信息Mock.mock('/mock/projects', projectList)

更改后輸入標題，點擊提交，再點擊獲取，可以看到返回了我們提交的數據，并且是js對象的形式，拿到數據后就可以做進一步的操作了。

修改功能的代碼也是類似的。

刪除數據

刪除數據一般是把數據的id以get形式傳遞給后端，url形式為: /xxx/xxx?id=value, 實際開發中后端可以很好的處理id值不同的url，我們只需要關心怎么獲取到id，但是使用mock.js時，攔截的url我不知道怎么寫成動態的. Mock.mock('/mock/delete') ,此時使用axios.get()時就會報錯：