在vue中使用express-mock搭建mock服务的方法


Posted in Javascript onNovember 07, 2018

首先安装 nodemon ,如果是全局安装,那么所有的项目都可以使用mock服务

npm install nodemon

再安装express-mockjs

npm i -D express-mockjs

接下来按照以下的步骤来

第一步 在项目根目录下建立api-interface文件,再建立一个文件夹叫mocks,这里面放json或者js都可以,然后再在mocks同级目录下建立app.js文件

在vue中使用express-mock搭建mock服务的方法

第二步编写app.js

在vue中使用express-mock搭建mock服务的方法

第三部 在mocks文件中编写一个叫test的json文件,文件中代码如下

然后写入

/**
 * 测试接口
 *
 * @url /test-demo
 *
 * 详细的说明
 * uid: userID
 * name: username
 * email: 邮件
 */
{
 "code": 0,
 "result|5": [
  {
   "uid|+1": 1,
   "name": "@name",
   "email": "@email"
  }
 ]
}

第四步

启动 app.js 脚本如下

node api-interface/app.js

点击点击,链接如图

在vue中使用express-mock搭建mock服务的方法

mock服务效果图,如图:

在vue中使用express-mock搭建mock服务的方法

第四部,再新建一个js文件,文件名称是user,文件代码如下

/**
 * 用户页面 - 用户信息接口
 *
 * @url user?uid=233
 *
 */
module.exports = function (req) {
 var uid = req.query.uid;
 if (!uid) {
  return {
   code: -1,
   msg: 'no uid',
  }
 }
 return {
  code: 0,
  data: {
   "uid": +uid,
   "name": "@name",
   "age|20-30": 1,
   "email": "@email",
   "date": "@date",
  },
 };
};

第五步 按ctrl—+c退出

然后再执行

node api-interface/app.js

效果图如下

在vue中使用express-mock搭建mock服务的方法

其中,注意的细节说明一下

req.query.uid; 是你地址栏参数,相当于是 GET 方式的参数。
req.body.uid; 是你POST的参数。
这个是 express 的语法,可以直接查 express 文档的。
每次修改,都要手动启动非常麻烦,推荐用插件自动启动。
全局安装 npm i -g nodemon
全局安装的话,所有项目都可以用。
然后在你的 package.json 里 scripts 里加一条
"api": "nodemon -e json -w api-interface api-interface/app.js",

 以上的操作步骤都是一个js群的大神告诉我的,大神博客地址http://www.52cik.com/,在此感谢楼教主大神

express-mockjs的github地址 https://github.com/52cik/express-mockjs

ps:下面介绍下在 vue-test-utils 中 mock 全局对象的实例详解

vue-test-utils   提供了一种 mock 掉   Vue.prototype   的简单方式,不但对测试用例适用,也可以为所有测试设置默认的 mock。

mocks   加载选项

mocks   加载选项   是一种将任何属性附加到   Vue.prototype   上的方式。这通常包括:

  • $store , for Vuex
  • $router , for Vue Router
  • $t , for vue-i18n

以及其他种种。

vue-i18n   的例子

我们来看一个 vue-i18n   的例子。虽然可以为每个测试用到   createLocalVue   并安装   vue-i18n ,但那样可能会让事情难以处理并引入一堆样板。首先,组件   <Bilingual>   用到了   vue-i18n :

<template>
 <div class="hello">
 {{ $t("helloWorld") }}
 </div>
</template>

<script>
 export default {
 name: "Bilingual"
 }
</script>

你先在另一个文件中弄好翻译,然后通过 $t   引用,这就是   vue-i18n   的工作方式。在本次测试中,虽然并不会真正关心翻译文件看起来什么样,不过还是看一看这次用到的:

export default {
 "en": {
 helloWorld: "Hello world!"
 },
 "ja": {
 helloWorld: "こんにちは、世界!"
 }
}

基于这个 locale,正确的翻译将被渲染出来。我们先不用 mock,尝试在测试中渲染该组件:

import { shallowMount } from "@vue/test-utils"
import Bilingual from "@/components/Bilingual.vue"

describe("Bilingual", () => {
 it("renders successfully", () => {
 const wrapper = shallowMount(Bilingual)
 })
})

通过 yarn test:unit   运行测试将抛出一堆错误堆栈。若仔细端详输出则会发现:

[Vue warn]: Error in config.errorHandler: "TypeError: _vm.$t is not a function"

这是因为我们并未安装 vue-i18n ,所以全局的   $t   方法并不存在。我们试试   mocks   加载选项:

import { shallowMount } from "@vue/test-utils"
import Bilingual from "@/components/Bilingual.vue"

describe("Bilingual", () => {
 it("renders successfully", () => {
 const wrapper = shallowMount(Bilingual, {
 mocks: {
 $t: (msg) => msg
 }
 })
 })
})

现在测试通过了! mocks   选项用处多多,而我觉得最最常用的正是开头提到过的那三样。

(译注:通过这种方式就不能在单元测试中耦合与特定语言相关的内容了,因为翻译功能实际上已失效,也更无法处理可选参数等)

使用配置设置默认的 mocks

有时需要一个 mock 的默认值,这样就不用为每个测试用例都设置一遍了。可以用 vue-test-utils   提供的   config   API 来实现。还是   vue-i18n   的例子:

import VueTestUtils from "@vue/test-utils"
VueTestUtils.config.mocks["mock"] = "Default Mock Value"

这个示例中用到了 Jest,所以我将把默认 mock 描述在 jest.init.js   文件中 -- 该文件会在测试运行前被自动加载。同时我也会导入并应用此前用于示例的翻译对象。

//jest.init.js
import VueTestUtils from "@vue/test-utils"
import translations from "./src/translations.js"
const locale = "en"
VueTestUtils.config.mocks["$t"] = (msg) => translations[locale][msg]

现在尽管还是用了一个 mock 过的 $t   函数,但会渲染一个真实的翻译了。再次运行测试,这次移除了   mocks   加载选项并用   console.log   打印了   wrapper.html()

describe("Bilingual", () => {
 it("renders successfully", () => {
 const wrapper = shallowMount(Bilingual)

 console.log(wrapper.html())
 })
})

测试通过,以下结构被渲染出来:

<div class="hello">
 Hello world!
</div>

(译注:依然无法应付复杂的翻译)

总结

本文论述了:

  • 在测试用例中使用 mocks   以 mock 一个全局对象
  • 用 config.mocks   设置默认的 mock

以上所述是小编给大家介绍的在vue中使用express-mock搭建mock服务的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
详解在vue-test-utils中mock全局对象
Nov 07 #Javascript
vue-cli 首屏加载优化问题
Nov 06 #Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 #Javascript
vue组件tabbar使用方法详解
Nov 06 #Javascript
微信小程序下拉框功能的实例代码
Nov 06 #Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 #Javascript
小程序实现页面顶部选项卡效果
Nov 06 #Javascript
You might like
第十三节 对象串行化 [13]
2006/10/09 PHP
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
php截取字符串函数分享
2015/02/02 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
Django实现组合搜索的方法示例
2018/01/23 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
好邻里事迹材料
2014/01/16 职场文书
法制宣传标语
2014/06/23 职场文书
Python实现科学占卜 让视频自动打码
2022/04/09 Python
Python使用pyecharts控件绘制图表
2022/06/05 Python
python绘制云雨图raincloud plot
2022/08/05 Python