json-server模拟服务器API测试数据的使用方法

在大多数开发流程中 后台开发人员一般会优先输出API文档给前端开发人员
前端开发人员按照API文档先行编写业务逻辑 当然此时API并不能真正调用 意味着我们拿不到测试数据

而有些业务逻辑需要后台API数据的支持 我们必须等到后台API开发完成后 才能测试这些业务逻辑
显然这种工作效率是低下的 我们不得不依赖API的开发进度

这样的话很容易就会影响开发效率。试想下如果我们自己本地搭建一台JSON服务器 自己生产测试数据 ？？？

那么，json-server就能帮我们达到目的

Step.1   下载安装

npm install -g json-server

Step.2   使用

既然是测试json数据 那么我们需要创建一个json数据。首先在你喜欢的位置创建一个文件目录

我在当前目录下创建了db.json

{
  "getNewsList": [
    {
      "id": 1,
      "title": "励志！轮椅高考生经历",
      "url": "http://starcraft.com"
    },
    {
      "id": 2,
      "title": "不可思议，迪丽热巴和王宝强竟然参加了世界杯？",
      "url": "http://warcraft.com"
    },
    {
      "id": 3,
      "title": "关晓彤又在北影食堂被偶遇，她是来上学的还是来吃饭的？",
      "url": "http://overwatch.com"
    },
    {
      "id": 4,
      "title": "神吐槽：我是梅西，我现在__得一比",
      "url": "http://hearstone.com"
    }
  ]
}

我创建了简单的测试数据

接下来需要启动 json-server 并告诉json-server监视db.json

json-server --watch db.json

接下来需要我们在webpack-dev-conf.js文件下进行配置

1. 在const portfinder = require('portfinder') 之后添加代码：

const express = require('express') //引入node.js的express框架
const app = express() //创建express实例
const appData = require('../db.json')  //加载本地数据
const getNewsList = appData.getNewsList  //获取json文件中的数据
const apiRoutes = express.Router()  //编写路由
app.use('/api', apiRoutes)

2. 还是在本文件下找到devServer，写入如下代码：

before(app) {
      app.get('/api/getNewsList', (req, res) => {
        res.json({
          errno: 0,
          data: getNewsList
        })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用

      })
}

3. npm run dev,在浏览器中输入地址即可

4. 本地请求数据的接口，实例通过的是vue-resource调用的

created: function (){
			
			   this.$http.get('/api/getNewsList')
				    .then((res) => {
				      this.newList = res.data
				      console.log(res)
				    }, (err) => {
				      console.log(err)
			    })
			
			
		}

前方高能，请注意！！！

上图中箭头指示的路径切记一定要是绝对路径！绝对路径！不带盘符的特殊绝对路径！