vue搭建本地JSON静态数据服务器全过程
作者：Betrayer_hobby
在日常开发中，可能由于后端任务较重，接口不能及时提供给前端，领导要求先展示页面的要求下，这个时候就需要假数据，如果自己data里面定义假数据或html中直接写死，如果页面多了，后面接口提供的时候，修改会很麻烦。
此文提供一种本地本地json serve方案，除上述问题，此方案更加可以方便和后端协商所需数据字段格式.
一.仅供本地测试用，无法部署在服务器上取数据
1.安装全局的json-server工具包 npm install -g json-server
2.在项目更目录(src同级)下创建mock文件夹，名字随便，约定俗成为mock，新建json文件，
代码如下：
{
"naturalDisastersData": [
{
"id": 1,
"typeName": "自然灾害左侧监测预警列表数据",
"topIconList": [
{
"name": "江山",
"event": "30",
"value": "0",
"type": "雨量预警"
},
{
"name": "长台村",
"event": "30",
"value": "0",
"type": "雨量预警"
},
{
"name": "常山关庄桥村",
"event": "10",
"value": "0.1",
"type": "水位预警"
},
{
"name": "衢江横路乡",
"event": "30",
"value": "0.1",
"type": "水位预警"
},
{
"name": "峡东村",
"event": "30",
"value": "3.4",
"type": "风力预警"
},
{
"name": "江山",
"event": "30",
"value": "2.2",
"type": "风力预警"
},
{
"name": "疾病预防控制中心",
"event": "-",
"value": "-",
"type": "森林防火"
},
{
"name": "虎山消防救援站",
"event": "-",
"value": "-",
"type": "森林防火"
},
{
"name": "凤林镇",
"event": "147",
"value": "-",
"type": "地质灾害"
},
{
"name": "坛石镇",
"event": "119",
"value": "-",
"type": "地质灾害"
}
]
}
],
"success": true
}3.将json文件右键在终端中打开 启动命令：
(1):json-server --watch index.json --port 8080 默认是3000 可以自行改端口 watch 后接json文件名
(2):上面的启动命令，只有输入localshot:端口号才可以访问，当前我想输入本地的ip+端口号就无法访问，所以更改启动命令如下：
json-server --watch --host 0.0.0.0 db.json --port 3000 host后接本地ip (cmd 输入ipconfig)
(3):以上2种命令启动每次都要输入很长代码,vue中可以在package.json中配置快捷命令,如图
代码如下：
"mock": " cd mock&json-server --watch --host 0.0.0.0(本机ip) --port 3000 index.json",
如果mock文件夹写在根目录,则直接cd一级就行,自行根据自己mock文件夹目录层级更改,多个json文件重新取名,将mock改为mock1,mock2...即可,后面命令改所需文件名就行
npm run mock 成功运行效果如下：
(4):点开链接进去如图：
点击资源链接进去如图：
至此:服务端口创建成功
4.调用
即把你axios请求url 改成上图打开资源链接的浏览器url就行，至此，第一种方法结束，此方法仅限本地模拟使用，因为需要本地开启启动命令，暂时不明确如何配置在部署服务器后自动启动.
接口情况入图：
二:不模拟外部数据端口形式
不做额外配置，无需额外启动命令，可以在部署服务器后自动获取数据。(推荐)
1.同理创建json文件夹下的json文件,不过注意要放到public文件夹下! ! !
2.配置vue.config.js publicpath,代码如下
module.exports = {
lintOnSave: false,
publicPath: '/simulationJsondata/',
outputDir: 'jsmartScreen',
};3.aixos url为json文件路径,(配置静态资源路径为了方便部署服务器),
直接回调里面return axios请求即可,自行封装的axios也无影响!
aa() {
return http.get(`../../simulationJsondata/jsonData/naturalDisastersData.json`)
}接口情况入图：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。