专栏首页禅林阆苑前端接口模拟工具Mock.js上手实践
原创

前端接口模拟工具Mock.js上手实践

前端接口模拟工具Mock.js上手实践

[toc]

Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com

1. 概念

在前后端开发过程中,常常会遇到前后端进度不一致的情况,如果前端停下来等后端接口调试完再继续开发会大大降低前端的开发效率。Mock.js 是一款成熟强大的接口模拟工具,能够生成随机数据,拦截 Ajax 请求并返回,真正做到前后端分离。

2. vue 工程引入 mock.js

在前端工程项目中引入 mock.js 是非常方便的,以 vue-cli 构建的工程为例,首先安装 axiosmockjs

$ yarn add axios mockjs

可以在项目 src 目录下建立 data 文件夹用于统一存放 ajax 请求,例如在 data/api.js 中建立一个测试用的请求:

import axios from 'axios'
const apiTable = {
  log: '/test/log' // get
}
const log = (data = '') => {
  return new Promise((resolve, reject) => {
    axios.get(apiTable.log, {
      params: {
        data: data
      }
    }).then(res => {
      resolve(res)
    }).catch(err => {
      console.log(err)
      reject(err)
    })
  })
}
export { log }

可以在同级目录下的 data/apiMock.js 中建立 mock 请求:

import Mock from 'mockjs'
// 使用mockjs模拟数据
Mock.mock(/\/test\/log/, 'get', (req, res) => {
  const data = Mock.mock({
    'code': 0,
    'msg': 'success',
    'data|1-10': [{
      'name': '@cname',
      'id|+1': 1,
      'age|10-60': 0, // 10-60以内的随机数,0用来确定类型
      'birthday': '@date("yyyy-MM-dd")', // 年月日
      'city': '@city(true)' // 中国城市
    }]
  })
  return data
})
export default Mock

然后,在入口文件 main.js 中引用这个 mock 文件就实现了接口的mock:

// ...
import axios from 'axios'
Vue.prototype.$axios = axios
if (process.env.NODE_ENV === 'development') {
  require('@/data/apiMock')
}
// ...

此时,在 dev server 下,组件中发起 ajax 请求,浏览器的开发者工具中已经抓不到对应的请求,而组件中对请求的调用和原来无异:

import { log } from '@/data/api'
export default {
  created () {
    log('csxiaoyao').then(res => {
      console.log(res)
    }).catch(err => {
      console.log('err: ', err)
    })
  }
}

至此,mockjs 的引入大功告成。

3. mockjs 基础语法

Mock.js 提供了丰富的随机数据模拟,非常实用,语法规范包括两部分:

  1. 数据模板定义规范(Data Template Definition,DTD)
  2. 数据占位符定义规范(Data Placeholder Definition,DPD)

官方文档有详细的介绍 https://github.com/nuysoft/Mock/wiki,还提供了丰富的样例 http://mockjs.com/examples.html,此处不再赘述。

sign.jpg

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • weex 踩坑笔记 【原创】

    weex 踩坑笔记 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/cs...

    CS逍遥剑仙
  • 小程序开发总结03 - 数据传递与缓存

    和H5不同,元素上绑定事件只能传入事件名,不能直接传参,需用通过dataset传参

    CS逍遥剑仙
  • Webpack学习总结 【原创】

    Webpack学习总结 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/...

    CS逍遥剑仙
  • tensorflow学习笔记(十七):name&variable scope

    在tensorflow中,有两个scope, 一个是name_scope一个是variable_scope,这两个scope到底有什么区别呢? 先看第一个程序...

    ke1th
  • 【tensorflow】tf.name_scope与tf.variable_scope区别

    但是,tf.Variable() 每次都会新建变量。 如果希望重用(共享)一些变量,必须用到get_variable(),它会去搜索变量名,有就直接用,没有再...

    JNingWei
  • TensorFlow 使用变量共享

    TensorFlow中的变量一般就是模型的参数。当模型复杂的时候共享变量会无比复杂。

    郭耀华
  • 京东信息安全月之SDL在路上

    信息安全月正在如火如荼开展,作为各项活动中的一个重要部分--“安全训练营·SDL在路上”,如期召开。来自京东物流、京东商城、京东云、CTO-信息安全部的各体系领...

    京东技术
  • tensorflow学习笔记(十五): variable scope

    tensorflow 为了更好的管理变量,提供了variable scope机制 官方解释: Variable scope object to carr...

    ke1th
  • task8 GAN text-to-image

    https://www.tensorflow.org/api_docs/python/tf/layers/batch_normalization https:...

    平凡的学生族

扫码关注云+社区

领取腾讯云代金券