vue中的数据模拟

本地模拟数据

第一种方式：js方式数据模拟

第一步：我们创建数据
创建一个data的文件夹，里面的文件是js格式的
以下面的一个例子举例

//data文件夹里面的js文件,index.js
module.exports = [{
        "name": "龙岩",
        "pinyin": "longyan",
        "isHot": 0,
        "cityId": "5d4e7711e88bb500082cbb74",
        "create": "2019-08-10T07:49:37.168Z"
    },
    {
        "name": "齐齐哈尔",
        "pinyin": "qiqi",
        "isHot": 0,
        "cityId": "5d4e7710e88bb500082cbb3c",
        "create": "2019-08-10T07:49:36.579Z"
    }
]

第二步:在我们需要的组件中引入就行

<template>
  <div></div>
</template>
<script>
//导入我们的创建好的模拟数据
import homeData from '../../../project/data/home'
export default {
  data() {
    return {};
  },
  created() {
    this.getList();
  },
  methods: {
    getList () {
      console.log("返回的数据：",homeData)
      var a = "a222222222233333"
      var b="bbbbbbbbbb"
      console.log("b=====",b)
      console.log("21",a)
    }
  }
};
</script>

第二种：json方式

第一步：创建一个mack.json的文件
这里面是我们的模拟的数据

//mack.json
{
    "list": [
        { "name": "李白", "age": 20 },
        { "name": "杜甫", "age": 30 }
    ]
}

如下图所示：

mack.json的目录结构

第二步：在我们的项目文件夹内新建vue.config.js文件（不能与我们的项目同层级）

里面是我们的请求的配置

//vue.config.js
const mockIndexData = require("./mack/mack.json");
module.exports = {
    devServer: {
        port: 8080,
        before(app) {
            app.get("/api/index", (req, res) => {
                res.json(mockIndexData);
            });
        }
    }
};

如下图所示：

vue.config.js的目录结构图

第三步：在需要的页面发请求

//index.vue
<template>
  <div></div>
</template>
<script>
// import homeData from '../../../project/data/home'
import axios from "axios";
export default {
  data() {
    return {};
  },
  created() {
    this.getList();
  },
  methods: {
    getList () {
      // console.log("返回的数据：",homeData)
      axios.get("/api/index").then(res => {
        console.log("获取数据",res);       
      }).catch(err=>{
        console.log("错误",err)
      })
      var a = "a222222222233333"
      var b="bbbbbbbbbb"
      console.log("b=====",b)
      console.log("21",a)
    }
  }
};
</script>

运行后，在浏览器的效果如图所示：

运行返回的数据结果