搭建vue的json模拟数据

参考链接：
VueJS开发请求本地json数据的配置 https://www.cnblogs.com/daipianpian/p/8025188.html
vue配置 请求本地json数据 https://www.cnblogs.com/stylesu/p/9120158.html
Vue-cli 使用json server在本地模拟请求数据的示例代码 https://www.jb51.net/article/127374.htm

开发的时候，前后端不论是否分离，接口多半是滞后于页面开发的。所以建立一个REST风格的API接口，给前端页面提供虚拟的数据，是非常有必要的。如果你同时在一台机器上开发前后端，就会发现，当你写了一个后端接口，同时写了一个前端页面，使用ajax请求后台数据，这个时候你是无法请求到后端数据的，因为你用idea启动了一个Java后端程序，一般端口是8080；同时你用webstorm启动一个vue前端程序，这个时候的端口不可能是8080，也许是8081，否则会造成端口冲突。这个时候你的前端程序无法请求到后台数据，因为端口不一样，解决方式，你把前端和后端代码整合到一起，就行了，但是你的前端还没开放完毕，整合只能调试一个小功能，不太合理。那么就会想到，既然是前后端分离开发，那么就不应该互相影响，本文考虑的做法是在前端简历一个模拟的json数据接口，这样ajax就可以请求到了，完美~

第一步：安装json server 工具

项目目录下的命令行安装

npm install json-server --save 

可用cnpm 代替npm

第二步:准备json数据

创建一个json文件，起名叫data.json，文件放置在跟index.html平级的目录中，也可以放置在static文件夹中，db.json文件里面的内容，是一个对象。

{
    "code": 100,
    "msg": "处理成功！",
    "extend": {}
}

注意：如果修改了db.json一定要重新启动项目才能生效！！！

第三步：配置设置

3.1 如果你是用vue-cli的脚手架工具新建的vue项目，则可以在在build文件夹下找到webpack.dev.conf.js文件，在const portfinder = require(‘portfinder’)后添加(PS:这里要注意webpack.dev.conf.js修改之后要重新启动项目才能生效)

const express = require('express')
const app = express()
const appData = require('../data.json') // 加载本地json文件

const code=appData.code;//获取对应本地code

如图：

3.2 然后找到devServer，插入以下代码：

before (app) {
app.get('/api/user',(reg,res) => {
res.json({
errno: 0,
code:code
}) // 接口返回json数据，上面配置的数据code就复制给data请求后调用

})

如图：

4 启动项目：

命令行下：

npm run dev

或者界面配置启动

ajax配置的代码如下：

在浏览器中输入请求地址。