在mockjs官网上没学到的

CNZPH 发布于2019-08-26 14:00 / 3340人阅读

摘要：模板在模板中生成多条数据后返回数据请求拦截响应拦截封装输出引入使用数据模板数据占位符数据模板在官网都没有定义。使用占位符表示。后记网上有好多关于的文章。

mock会拦截下指定的请求，并返回由mock计算出的数据。
mock拦截下的请求不会在network里出现。
mock方便前端脱离后端进行开发。
先来一个dome说明怎么使用。mock怎么与项目结合使用。

mockjs demo

npm i mockjs // 安装mockjs

创建src/mock.js // 用来生成mock数据。

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

编辑一个vue文件。first.vue // 用来使用mock.js的数据。

创建api.js，建议放在"src/lib/api.js"。 // 用来封装axios。这样做对于项目规范。非要每个请求都实例出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++) { // 在模板中生成多条数据
      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后返回数据
    })
    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
      })
    }

数据模板数据占位符

数据模板在官网都没有定义。我理解是数据模板就是Mock.mock()里使用的对象。
数据占位符是数据模板中用来生成指定类型数据的占位符。使用@占位符(params[,params])表示。
Mock.Random是一个工具类，用来生成各种随机数据。
数据模板中@占位符(params[,params]) 是占位符，用来生成相应数据。有人把占位符理解为mock内置模板。毕竟Mock.mock()使用它们作为参数。

后记

网上有好多关于mock的文章。都没说清楚模板是什么，做什么的，怎么用。占位符是什么，做什么的，怎么用。
官网上也不写demo.看了好几遍就看到api.能不能从大到小写文档？
为什么进入官网学教程又进入git里的wiki?
优点是官网的api写的好。可以在console里运行。

云服务器超融合服务器 mockjs 在云服务器 mockjs+在云服务器怎么在网上建公司如何在网上发短信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109964.html

vue-cli 中使用 Mockjs 详解

摘要：想到函数有延迟网络请求稀释事件延迟执行的效果，于是将模板函数用包裹起来，如下结果出现有意思的事情当请求比较频繁，在延迟时间内，本次请求得到的响应数据是上次请求的结果。 vue-cli 中使用 Mockjs 详解背景前端在早期jQuery时代时，前端功能和后端工程基本上都是合在一起，典型的就是常见的maven工程下面的webapp目录包含前端各类静态资源文件。这个时候，我们总是会遇...

developerworks 2019-05-29 17:04 评论0 收藏0
切图崽的自我修养－[TOOL] 用MockJs模拟数据

摘要：用前后端分离的开发模式，前端和后端约定好接口格式之后，前端可以用模拟返回数据，从而可以完全脱离后端进行开发安装使用这里作用等价于拓展周杰伦林俊杰邓紫棋方大同自定义的拓展函数同理，用占位符和调用具体的函数等价可模拟整形数组的长度和值可模拟某一 MockJs 用前后端分离的开发模式，前端和后端约定好接口格式之后，前端可以用MockJs模拟返回数据，从而可以完全脱离后端进行开发安装 npm...

Jaden 2019-08-29 11:25 评论0 收藏0
切图崽的自我修养－[TOOL] 用MockJs模拟数据

摘要：用前后端分离的开发模式，前端和后端约定好接口格式之后，前端可以用模拟返回数据，从而可以完全脱离后端进行开发安装使用这里作用等价于拓展周杰伦林俊杰邓紫棋方大同自定义的拓展函数同理，用占位符和调用具体的函数等价可模拟整形数组的长度和值可模拟某一 MockJs 用前后端分离的开发模式，前端和后端约定好接口格式之后，前端可以用MockJs模拟返回数据，从而可以完全脱离后端进行开发安装 npm...

bergwhite 2019-08-20 11:29 评论0 收藏0
切图崽的自我修养－[TOOL] 用MockJs模拟数据

摘要：用前后端分离的开发模式，前端和后端约定好接口格式之后，前端可以用模拟返回数据，从而可以完全脱离后端进行开发安装使用这里作用等价于拓展周杰伦林俊杰邓紫棋方大同自定义的拓展函数同理，用占位符和调用具体的函数等价可模拟整形数组的长度和值可模拟某一 MockJs 用前后端分离的开发模式，前端和后端约定好接口格式之后，前端可以用MockJs模拟返回数据，从而可以完全脱离后端进行开发安装 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