vue-vue項目中mock.js的使用

時間 2019-11-22

標籤 vue 項目 mock.js mock 使用欄目 JavaScript 简体版

原文原文鏈接

mock.js

官網地址：mockjs.com/
mockjs是用來模擬產生一些虛擬的數據，可讓前端在後端接口尚未開發出來時獨立開發。咱們可使用真實的url，mockjs能夠攔截ajax請求，返回設定好的數據。前端

使用方式

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

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

npm install -S axios
npm install -D mockjs
複製代碼

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

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

// mock.js

// 引入mockjs
const Mock = require('mockjs')
// 獲取 mock.Random 對象
const Random = Mock.Random
// mock新聞數據，包括新聞標題title、內容content、建立時間createdTime
const 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，就能夠返回newsList
Mock.mock('/mock/news', produceNewsData) // 後面講這個api的使用細節
複製代碼

在main.js引入該mock.js文件，代表咱們使用這裏面產生的數據。

// main.js
import 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' // 引入axios
export 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參數就能夠拿到傳送的數據。ios

// 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中模擬一個添加數據的接口，拿到數據後存到數組中。ajax

// 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()時就會報錯：vue-cli