一.仅供本地测试用 ,无法部署在服务器上取数据
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`)
}
接口情况入图: