在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 相关文章推荐
JQuery 学习笔记 选择器之二
Jul 23 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
js中document.write的那点事
Dec 12 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
koa-router源码学习小结
Sep 07 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
Vue 组件注册全解析
Dec 17 Vue.js
详解在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 分页类 扩展代码
2009/06/11 PHP
JavaScript 动态将数字金额转化为中文大写金额
2009/05/14 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
python数据结构之二叉树的建立实例
2014/04/29 Python
python批量提交沙箱问题实例
2014/10/08 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
Python count函数使用方法实例解析
2020/03/23 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
利用python生成照片墙的示例代码
2020/04/09 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
传播学专业毕业生自荐信
2013/11/04 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers