在mockjs官網上沒學到的

CNZPH 發(fā)布于2019-08-26 14:00 / 3527人閱讀

摘要：模板在模板中生成多條數(shù)據(jù)后返回數(shù)據(jù)請求攔截響應攔截封裝輸出引入使用數(shù)據(jù)模板數(shù)據(jù)占位符數(shù)據(jù)模板在官網都沒有定義。使用占位符表示。后記網上有好多關于的文章。

mock會攔截下指定的請求，并返回由mock計算出的數(shù)據(jù)。
mock攔截下的請求不會在network里出現(xiàn)。
mock方便前端脫離后端進行開發(fā)。
先來一個dome說明怎么使用。mock怎么與項目結合使用。

mockjs demo

npm i mockjs // 安裝mockjs

創(chuàng)建src/mock.js // 用來生成mock數(shù)據(jù)。

在main.js引入src/mock.js require("./mock.js") // 全項目都可使用mock接口。

編輯一個vue文件。first.vue // 用來使用mock.js的數(shù)據(jù)。

創(chuàng)建api.js，建議放在"src/lib/api.js"。 // 用來封裝axios。這樣做對于項目規(guī)范。非要每個請求都實例出axios也行。

在first.vue文件引入api.js。

做了以上5步，就可以在first.vue文件時使用api.js調用mock了。

下面是具體代碼。

    // mock.js
    import Mock from "mockjs"
    const Random = Mock.Random
    let name = [] // 模板
    for (let i = 0; i < 3; i++) { // 在模板中生成多條數(shù)據(jù)
      name.push({
        name: Random.string(3, 8),
        age: Mock.mock({
          "number|1-100": 100
        })
      })
    }
    let age = {
      ages: Mock.mock({
        "number|1-100": 100
      })
    }
    Mock.setup({
      timeout: "200" // 2s-2s后返回數(shù)據(jù)
    })
    Mock.mock("/data/name", "post", name)
    Mock.mock("/data/age", "get", age)

    // main.js
    require("./mock.js")

    // first.vue

    // api.js
    import axios from "axios"
    // 請求攔截
    axios.interceptors.request.use(res => {
      return res
    }, error => {
      return Promise.reject(error)
    })
    // 響應攔截
    axios.interceptors.response.use(res => {
      console.log("res", res)
      return res
    }, error => {
      return Promise.reject(error)
    })
    // 封裝post
    const fetch = (url, params) => {
      return new Promise((resolve, reject) => {
        axios({url: url, params: params, method: "post"}).then(res => {
          resolve(res.data)
        }).catch(err => {
          reject(err)
        })
      })
    }
    // 輸出
    export default {
      mockData (url, params) {
        return fetch(url, params)
      },
      mockDataAge (url, params) {
        return new Promise((resolve, reject) => {
          axios({url: url, params: params, method: "get"}).then(res => {
            resolve(res.data)
          }).catch(err => {
            reject(err)
          })
        })
      }
    }

    // first.vue
    // 引入
    import api from "../../lib/api.js"
    // 使用
    getData () {
      api.mockData("/data/name").then(res => {
        this.dataName = res
      })
    },
    getDataAge () {
      api.mockDataAge("/data/age").then(res => {
        this.dataAge = res
      })
    }

數(shù)據(jù)模板數(shù)據(jù)占位符

數(shù)據(jù)模板在官網都沒有定義。我理解是數(shù)據(jù)模板就是Mock.mock()里使用的對象。
數(shù)據(jù)占位符是數(shù)據(jù)模板中用來生成指定類型數(shù)據(jù)的占位符。使用@占位符(params[,params])表示。
Mock.Random是一個工具類，用來生成各種隨機數(shù)據(jù)。
數(shù)據(jù)模板中@占位符(params[,params]) 是占位符，用來生成相應數(shù)據(jù)。有人把占位符理解為mock內置模板。畢竟Mock.mock()使用它們作為參數(shù)。

后記

網上有好多關于mock的文章。都沒說清楚模板是什么，做什么的，怎么用。占位符是什么，做什么的，怎么用。
官網上也不寫demo.看了好幾遍就看到api.能不能從大到小寫文檔？
為什么進入官網學教程又進入git里的wiki?
優(yōu)點是官網的api寫的好?？梢栽赾onsole里運行。

GPU云服務器云服務器 mockjs 在云服務器 mockjs+在云服務器怎么在網上建公司如何在網上發(fā)短信

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/109964.html

vue-cli 中使用 Mockjs 詳解

摘要：想到函數(shù)有延遲網絡請求稀釋事件延遲執(zhí)行的效果，于是將模板函數(shù)用包裹起來，如下結果出現(xiàn)有意思的事情當請求比較頻繁，在延遲時間內，本次請求得到的響應數(shù)據(jù)是上次請求的結果。 vue-cli 中使用 Mockjs 詳解背景前端在早期jQuery時代時，前端功能和后端工程基本上都是合在一起，典型的就是常見的maven工程下面的webapp目錄包含前端各類靜態(tài)資源文件。這個時候，我們總是會遇...

developerworks 2019-05-29 17:04 評論0 收藏0
切圖崽的自我修養(yǎng)－[TOOL] 用MockJs模擬數(shù)據(jù)

摘要：用前后端分離的開發(fā)模式，前端和后端約定好接口格式之后，前端可以用模擬返回數(shù)據(jù)，從而可以完全脫離后端進行開發(fā)安裝使用這里作用等價于拓展周杰倫林俊杰鄧紫棋方大同自定義的拓展函數(shù)同理，用占位符和調用具體的函數(shù)等價可模擬整形數(shù)組的長度和值可模擬某一 MockJs 用前后端分離的開發(fā)模式，前端和后端約定好接口格式之后，前端可以用MockJs模擬返回數(shù)據(jù)，從而可以完全脫離后端進行開發(fā) 安裝 npm...

Jaden 2019-08-29 11:25 評論0 收藏0
切圖崽的自我修養(yǎng)－[TOOL] 用MockJs模擬數(shù)據(jù)

摘要：用前后端分離的開發(fā)模式，前端和后端約定好接口格式之后，前端可以用模擬返回數(shù)據(jù)，從而可以完全脫離后端進行開發(fā)安裝使用這里作用等價于拓展周杰倫林俊杰鄧紫棋方大同自定義的拓展函數(shù)同理，用占位符和調用具體的函數(shù)等價可模擬整形數(shù)組的長度和值可模擬某一 MockJs 用前后端分離的開發(fā)模式，前端和后端約定好接口格式之后，前端可以用MockJs模擬返回數(shù)據(jù)，從而可以完全脫離后端進行開發(fā) 安裝 npm...

bergwhite 2019-08-20 11:29 評論0 收藏0
切圖崽的自我修養(yǎng)－[TOOL] 用MockJs模擬數(shù)據(jù)

摘要：用前后端分離的開發(fā)模式，前端和后端約定好接口格式之后，前端可以用模擬返回數(shù)據(jù)，從而可以完全脫離后端進行開發(fā)安裝使用這里作用等價于拓展周杰倫林俊杰鄧紫棋方大同自定義的拓展函數(shù)同理，用占位符和調用具體的函數(shù)等價可模擬整形數(shù)組的長度和值可模擬某一 MockJs 用前后端分離的開發(fā)模式，前端和后端約定好接口格式之后，前端可以用MockJs模擬返回數(shù)據(jù)，從而可以完全脫離后端進行開發(fā) 安裝 npm...

Eric 2019-08-01 15:47 評論0 收藏0
Python學到什么程度才可以去找工作？掌握這4點足夠了！

摘要：接下來我們就來看看學到什么程度才算是真正學會可以去一展身手。一確立目標了解需求做什么事情都要先確定好目標，才不至于迷失方向。大家在學習Python的時候，有人會問Python要學到什么程度才能出去找工作，對于在Python培訓機構學習Python的同學來說這都不是問題，因為按照Python課程大綱來，一般都不會有什么問題，而對于自學Python來說，那就比較難掌握，冒然出去找工作非常...

Yuqi 2019-07-30 16:56 評論0 收藏0