国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue-vue項(xiàng)目中mock.js的使用

Object / 1164人閱讀

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

mock.js

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

使用方式

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

    vue-cli搭建項(xiàng)目后，安裝axios和mock.js

npm install -S axios
npm install -D mockjs

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

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

// mock.js

// 引入mockjs
const Mock = require("mockjs")
// 獲取 mock.Random 對象
const Random = Mock.Random
// mock新聞數(shù)據(jù)，包括新聞標(biāo)題title、內(nèi)容content、創(chuàng)建時(shí)間createdTime
const produceNewsData = function () {
  let newsList = []
  for (let i = 0; i < 20; i++) {
    let newNewsObject = {
      title: Random.ctitle(), //  Random.ctitle( min, max ) 隨機(jī)產(chǎn)生一個(gè)中文標(biāo)題，長度默認(rèn)在3-7之間
      content: Random.cparagraph(), // Random.cparagraph(min, max) 隨機(jī)生成一個(gè)中文段落，段落里的句子個(gè)數(shù)默認(rèn)3-7個(gè)
      createdTime: Random.date() // Random.date()指示生成的日期字符串的格式,默認(rèn)為yyyy-MM-dd；
    }
    newsList.push(newNewsObject)
  }

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

    在main.js引入該mock.js文件，表明我們使用這里面產(chǎn)生的數(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

運(yùn)行項(xiàng)目打開控制臺可以看到，我們拿到了模擬的數(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ù)模板中的每個(gè)屬性由 3 部分構(gòu)成：屬性名、生成規(guī)則、屬性值：
// 屬性名   name
// 生成規(guī)則 rule
// 屬性值   value
"name|rule": value
例如："name|1-10":1 會產(chǎn)生一個(gè)1-10之間的整數(shù)，詳細(xì)規(guī)則參見官方文檔

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

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

// App.vue

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

// mock.js

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

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

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

// mock.js

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

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

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

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

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

所以還是改成了用post傳遞的方式。
不知道是不是有什么別的方法，可以使得刪除時(shí)使用get請求。
這篇只是mock.js最基本的用法，一些復(fù)雜點(diǎn)的用法需要進(jìn)一步學(xué)習(xí)。

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/7390.html

相關(guān)文章

  • webpack4+vue2+axios+vue-router的多頁+單頁混合應(yīng)用框架

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

    whatsns 評論0 收藏0

  • 讓前端攻城師獨(dú)立于后端進(jìn)行開發(fā): Mock.js

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

    Fundebug 評論0 收藏0

  • 實(shí)戰(zhàn)Vue簡易項(xiàng)目（5）模擬數(shù)據(jù)

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

    Magicer 評論0 收藏0

  • 使用 Node.js 寫一個(gè)代碼生成器

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

    韓冰 評論0 收藏0

  • 在mockjs官網(wǎng)上沒學(xué)到的

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

    CNZPH 評論0 收藏0

發(fā)表評論

0條評論

Object

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<