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

Object 發(fā)布于2019-05-23 17:34 / 1185人閱讀

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

mock.js

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

使用方式

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

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

npm install -S axios
npm install -D mockjs

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

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

// mock.js

// 引入mockjs
const Mock = require("mockjs")
// 獲取 mock.Random 對象
const Random = Mock.Random
// mock新聞數(shù)據(jù)，包括新聞標題title、內容content、創(chuàng)建時間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) 隨機生成一個中文段落，段落里的句子個數(shù)默認3-7個
      createdTime: Random.date() // Random.date()指示生成的日期字符串的格式,默認為yyyy-MM-dd；
    }
    newsList.push(newNewsObject)
  }

  return newList
}
// 請求該url，就可以返回newsList
Mock.mock("/mock/news", produceNewsData) // 后面講這個api的使用細節(jié)

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

// main.js
import Vue from "vue"
import App from "./App"
import router from "./router"

require(./mock.js)

在APP.vue里我們來發(fā)送get請求獲取數(shù)據(jù)

// App.vue

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

Mock.mock()

Mock.mock( rurl, rtype, template|function( options ) )
rurl
可選。
表示需要攔截的 URL，可以是 URL 字符串或 URL 正則。例如 "/domian/list.json"。

rtype
可選。
表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。

template
可選。
表示數(shù)據(jù)模板，可以是對象或字符串。
數(shù)據(jù)模板中的每個屬性由 3 部分構成：屬性名、生成規(guī)則、屬性值：
// 屬性名   name
// 生成規(guī)則 rule
// 屬性值   value
"name|rule": value
例如："name|1-10":1 會產生一個1-10之間的整數(shù)，詳細規(guī)則參見官方文檔

function(options)
可選。
表示用于生成響應數(shù)據(jù)的函數(shù)。
options
指向本次請求的 Ajax 選項集，含有 url、type 和 body 三個屬性

增加數(shù)據(jù)

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

// App.vue

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

// mock.js

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

// 獲取信息
Mock.mock("/mock/projects", projectList)

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

// mock.js

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

// 獲取信息
Mock.mock("/mock/projects", projectList)

更改后輸入標題，點擊提交，再點擊獲取，可以看到返回了我們提交的數(shù)據(jù)，并且是js對象的形式，拿到數(shù)據(jù)后就可以做進一步的操作了。
修改功能的代碼也是類似的。

刪除數(shù)據(jù)

刪除數(shù)據(jù)一般是把數(shù)據(jù)的id以get形式傳遞給后端，url形式為: /xxx/xxx");Mock.mock("/mock/delete"),此時使用axios.get()時就會報錯：

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

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

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

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

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

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

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

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

Fundebug 2019-08-22 14:06 評論0 收藏0
實戰(zhàn)Vue簡易項目（5）模擬數(shù)據(jù)

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

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

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

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

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

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