前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端接口模拟工具Mock.js上手实践

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

原创
作者头像
CS逍遥剑仙
发布2019-11-02 00:56:40
4.2K1
发布2019-11-02 00:56:40
举报
文章被收录于专栏:禅林阆苑

前端接口模拟工具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

代码语言:txt
复制
$ yarn add axios mockjs

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

代码语言:txt
复制
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 请求:

代码语言:txt
复制
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:

代码语言:txt
复制
// ...
import axios from 'axios'
Vue.prototype.$axios = axios
if (process.env.NODE_ENV === 'development') {
  require('@/data/apiMock')
}
// ...

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

代码语言:txt
复制
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
sign.jpg

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前端接口模拟工具Mock.js上手实践
    • 1. 概念
      • 2. vue 工程引入 mock.js
        • 3. mockjs 基础语法
        相关产品与服务
        云开发 CLI 工具
        云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档