在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 相关文章推荐
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
Express使用html模板的详细代码
Sep 18 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
详解在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
php获取网页上所有链接的方法
2015/04/03 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
dojo 之基础篇
2007/03/24 Javascript
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Django如何自定义分页
2018/09/25 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
护士辞职信范文
2014/01/19 职场文书
给老师的一封建议书
2014/03/13 职场文书
中学生操行评语
2014/04/24 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
美术课外活动总结
2014/07/08 职场文书
年会邀请函范文
2015/01/30 职场文书
大学生学期个人总结
2015/02/12 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android