vue搭建本地JSON静态数据服务器全过程
在日常开发中，可能由于后端任务较重，接口不能及时提供给前端，领导要求先展示页面的要求下，这个时候就需要假数据，如果自己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`)
}接口情况入图：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
我们经常在项目中会有支持pc与手机端需求,下面这篇文章主要给大家介绍了关于vue项目同时兼容pc和移动端的解决方式,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Vue使用Swiper的案例详解，主要包括引入swiper,创建轮播图组件CarouselContainer.vue的详细代码，本文给大家介绍的非常详细，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了在vue项目中使用sass的配置方法,需要的朋友可以参考下2018-03-03
这篇文章介绍了VUE中v-if与v-show的区别，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-03-03
在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览,根据官网打包出来的html直接打开是显示空白,下面这篇文章主要给大家介绍了关于vue打包后出现空白页的原因及解决方式的相关资料,需要的朋友可以参考下2022-07-07
本文主要介绍了Element的穿梭框数据量大时点击全选卡顿的解决方案，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
红包也叫压岁钱，是过农历春节时长辈给小孩儿用红纸包裹的礼金。本文将通过Vue制作一个红包雨小游戏，文中的示例代码讲解详细，需要的可以参考一下2022-01-01
这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
本文主要介绍了vue3中el-uplod结合ts实现图片粘贴上传,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-07-07
在这篇文章中,我们将探讨五个实用的 Vue 技巧,这些技巧可以使你日常使用 Vue 编程更高效、更富有成效,感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
最新评论