json-server的vue应用

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 获取到数据一切正常