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

Object 發布于2019-05-23 17:34 / 1160人閱讀

摘要：表示需要攔截的請求類型。添加信息攔截請求，調用函數先看一下這個是什么獲取信息更改后輸入標題，點擊提交，再點擊獲取，可以看到返回了我們提交的數據，并且是對象的形式，拿到數據后就可以做進一步的操作了。

mock.js

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

使用方式

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

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

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

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

我們在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");Mock.mock("/mock/delete"),此時使用axios.get()時就會報錯：

所以還是改成了用post傳遞的方式。
不知道是不是有什么別的方法，可以使得刪除時使用get請求。
這篇只是mock.js最基本的用法，一些復雜點的用法需要進一步學習。

GPU云服務器云服務器 mock.js java項目中的調度服務器中的項目路徑 linux中的使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/7390.html

webpack4+vue2+axios+vue-router的多頁+單頁混合應用框架

摘要：適用于主要入口頁面生成多頁，子頁面和次要頁面使用單頁形式的項目。文件用來存放固定的數據，而文件可更加自由的處理并返回數據。 VUE2的單頁應用框架有人分享了，多頁應用框架也有人分享了，這里分享一個單頁+多頁的混合應用框架吧，node.js寫了一個簡單的mock服務也集成在里面，整體初現雛形，還有很多需要優化和改善的地方。。。項目結構 │ ├─build ...

whatsns 2019-08-23 11:44 評論0 收藏0
讓前端攻城師獨立于后端進行開發: Mock.js

摘要：一是什么目前的大部分公司的項目都是采用的前后端分離后端接口的開發和前端人員是同時進行的那么這個時候就會存在一個問題在頁面需要使用大量數據進行渲染生成前后端開發人員的接口也許并沒有寫完作為前端的我們也就沒有辦法獲取數據所以前端工程師就需要自己 showImg(https://segmentfault.com/img/remote/1460000013022563); 一.Mock.js是...

Fundebug 2019-08-22 14:06 評論0 收藏0
實戰Vue簡易項目（5）模擬數據

摘要：若需要傳參，傳第二個參數不接受多個參數的傳入，最多只接收兩個參數請求數據目前，通過以上步驟，我們獨立的構建了模擬數據和狀態管理，但還沒有將它們結合起來。驗證如果你想驗證寫出來的模擬數據是否正確，可以在示例頁打開控制臺，直接運行。關于模擬數據，這里使用Mock.js這個庫，關于用法，官網說的也比較詳細，這里我就簡單的帶一下。列表數據我們先將項目中src/components/Hel...

Magicer 2019-08-23 10:43 評論0 收藏0
使用 Node.js 寫一個代碼生成器

摘要：目前市面上也有很多優秀的代碼生成器，而且大部分都提供可視化界面操作。原理代碼生成器的原理就是數據模板文件。但是如果寫一個正兒八經的代碼生成器，那肯定是需要根據已經設計好的數據庫表來生成代碼的。背景第一次接觸代碼生成器用的是動軟代碼生成器，數據庫設計好之后，一鍵生成后端 curd代碼。之后也用過 CodeSmith , T4。目前市面上也有很多優秀的代碼生成器，而且大部分都提供可視化界面操作...

韓冰 2019-05-23 17:29 評論0 收藏0
在mockjs官網上沒學到的

摘要：模板在模板中生成多條數據后返回數據請求攔截響應攔截封裝輸出引入使用數據模板數據占位符數據模板在官網都沒有定義。使用占位符表示。后記網上有好多關于的文章。 mock會攔截下指定的請求，并返回由mock計算出的數據。 mock攔截下的請求不會在network里出現。 mock方便前端脫離后端進行開發。先來一個dome說明怎么使用。mock怎么與項目結合使用。 mockjs demo...

CNZPH 2019-08-26 14:00 評論0 收藏0