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`)

  }

接口情况入图: