Mock服务
什么是Mock
Mock英文中有虚拟,模拟的意思;
Mock服务主要是提供模拟的数据,Mock可以用来解除测试对象对外部服务的依赖(比如数据库,第三方接口等),使得测试用例可以独立运行;
Mock应用于前端的优势
Mock服务主要是提供模拟数据,因此通过Mock服务可以实现前后端的分离。
用于前端的Mock插件
mock.js
vue项目中的json-server
Mock服务插件json-server的使用
vue项目中添加json-server
初始化json-server服务
npm install json-server --save
json-server的创建问题
vue项目初始化后 ,build文件夹中没有 dev-server.js文件, dev-server.js是用于配置json-server的
原因:新版本的vue已将dev-server.js与webpack.dev.conf.js合并
解决方案:直接将以下配置内容添加到文件webpack.dev.conf.js中
var jsonServer=require('json-server')
var apiJsonServer=jsonServer.create();//返回Express服务器
var apiJsonRouter=jsonServer.router('db.json');//返回jsonServer的路由
var apiJsonMiddlewares = jsonServer.defaults();//返回jsonServer使用的中间件
apiJsonServer.use(apiJsonMiddlewares)
apiJsonServer.use(apiJsonRouter)
//防止PORT 值为NaN
apiJsonServer.listen((PORT || config.dev.port)+1, () => {
console.log('JSON Server is running')
})
json-server服务的启动
添加过json-server的配置后,直接运行启动命令:
npm run dev
通过该命令,vue项目与json-server 服务都启动,一般项目的网址为:
http://localhost:8080/
根据配置则json-server 服务的端口为8081,网址为:
http://localhost:8081/
之所以接口未出现是因为配置问题;
获取mock数据
上图运行后发现Json Server服务显示没有资源
环境:
json-server :模拟数据
vue-reource :用于请求获取数据
json-server启动后设置的端口是8081;
vue本地项目端口是8080;
即使都是 http://localhost:端口号
但是只要端口号不同,也属于跨域
vue-reource简介
引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http。
获取数据的整体设置
1.main.js文件中引入vue-resource
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
let router = new VueRouter({
mode: 'history',
routes: []
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<xxxx/>',
components: { xxxxxx}
})
2.创建json-server 服务
db.json与src文件夹平级
var jsonServer = require('json-server')
var apiJsonServer = jsonServer.create();//返回Express服务器
var apiJsonRouter = jsonServer.router('db.json');//返回jsonServer的路由
var apiJsonMiddlewares = jsonServer.defaults();//返回jsonServer使用的中间件
apiJsonServer.use(apiJsonMiddlewares)
//通过路由请求数据
apiJsonServer.use(apiJsonRouter);
//防止PORT 值为NaN
//PORT与config都是默认生成的值
apiJsonServer.listen((PORT || config.dev.port)+1, () => {
console.log('JSON Server is running')
})
3.添加跨域设置
config/index.js文件中设置proxyTable选项
proxyTable: {
"/api": {
//用于指定获取数据的路径
target:"http://localhost:8081",
//用于设置是否跨域
changeOrigin:true,
//用于设置是否替换 /api 为空
pathRewrite: {
'^/api': ''
}
}
},
4.设置请求数据
api/getNewsList匹配proxyTable: 中的api
请求数据的路径:http://localhost:8081/getNewsList
//后端请求的数据
//json-server 可以虚拟前端的数据
created: function () {
this.$http.get('api/getNewsList')
.then((res) => {//请求成功
console.log(res)
this.newsList = res.data
}, (err) => {//请求失败
console.log(err)
})
},
通过ctrl+c停止服务
npm run dev 启动服务
Your application is running here: http://localhost:8081
而8081是json-server的端口,application 应该是值vue项目,刷新项目后发现没有获取数据,多次重启都无用,并且查看调用数据的network
vue项目获取数据的路径是上图;
该路径被服务器替换,其真实获取数据的路径为
http://localhost:8081/getNewsList
直接访问该路径可以看到提供的数据
[
{
"id": 1,
"title": "新闻条目1新闻条目1新闻条目1新闻条目1",
"url": "http://starcraft.com"
},
{
"id": 2,
"title": "新闻条目2新闻条目2新闻条目2新闻条目2",
"url": "http://warcraft.com"
},
{
"id": 3,
"title": "新闻条3新闻条3新闻条3",
"url": "http://overwatch.com"
},
{
"id": 4,
"title": "新闻条4广告发布",
"url": "http://hearstone.com"
}
]
最终重启编辑器后,重新执行命令 npm run dev 获取到数据一切正常