在vue中如何使用express-mock搭建模拟服务

　　介绍

这篇文章主要介绍了在vue中如何使用express-mock搭建模拟服务,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

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

<代码> npm安装nodemon

再安装<代码> express-mockjs

<代码> npm我- d express-mockjs

接下来按照以下的步骤来

第一步在项目根目录下建立api接口文件,再建立一个文件夹叫模拟,这里面放json或者js都可以,然后再在模拟同级目录下建立应用。js文件

在vue中如何使用express-mock搭建模拟服务

第二步编写应用程序。js

在vue中如何使用express-mock搭建模拟服务

第三部在模拟文件中编写一个叫测试的json文件,文件中代码如下

然后写入

/* * 　　,*测试接口 　　,* 　　,*  /test-demo 　　,* 　　,*详细的说明 　　,* uid: userID 　　,*名称:用户名 　　,*电子邮件:,邮件 　　,*/{ 　　,“code": 0, 　　| 5“,“结果;:, 　　{才能 　　,才能“uid | + 1“:, 1, 　　,才能“name":,“@name" 　　,才能“email":,“" 　　,,} 　　,) 　　}

第四步启动app.js脚本如下

<代码>节点api接口/应用程序。js代码

点击点击,链接如图

在vue中如何使用express-mock搭建模拟服务

模拟服务效果图,如图:

在vue中如何使用express-mock搭建模拟服务

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

/* * 　　,*用户页面,安康;用户信息接口 　　,* 　　,*  用户? uid=233 　　,* 　　,*/时间=module.exports  function (点播),{ 　　,var  uid =, req.query.uid; 　　,if  (uid), { 　　return {才能 　　,,,代码:1, 　　,,,味精:& # 39;no  uid # 39; 　　,,} 　　,} 　　,return  { 　　,,代码:0, 　　,,数据:{ 　　,才能“uid":, + uid, 　　,才能“name":,“@name" 　　,,“年龄| 20-30":, 1, 　　,才能“email":,“" 　　,才能“date":,“@date" 　　,,}, 　　,}; 　　};

第五步按ctrl - c +退出

然后再执行

<代码>节点api接口/应用程序。js代码

效果图如下

在vue中如何使用express-mock搭建模拟服务

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

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

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

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

<>强ps:下面介绍下在vue-test-utils中模拟全局对象的实例详解

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

<强> mocks ,加载选项

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

<李>

美元商店,为Vuex

<李>

路由器,美元的Vue路由器

<李>

t,美元对vue-i18n

以及其他种种。

<强> vue-i18n ,的例子

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

& lt; template> 　　,& lt; div 类=癶ello"比; 　　,{{,$ t (“helloWorld"),}} 　　,& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　,export  default  { 　　,名字:“Bilingual" 　　,} 　　& lt;/script>

在vue中如何使用express-mock搭建模拟服务