vue-cli项目中使用Axios调用本地模拟的评论数据

需求：

• 使用Axios的get方法调用本地模拟的评论数据
• 将获得的评论数据显示在页面上，模拟的评论数据详见health.json文件。

health.json文件：

链接：https://pan.baidu.com/s/1_f3rKXSEse7QoJ_FZtfGuA
提取码：2jf5

实现过程：

• 将health.json文件放到static文件夹下。
• 在main.js中引入axios，并将axios挂载到vue原型。

import axios from 'axios'
// 只能把axios挂载到vue的原型上
Vue.prototype.$axios = axios;

注意：axios要提前安装好，具体安装步骤见Vue结合Moke.js+Axios实现模拟新闻列表案例_wanglingli95的博客-CSDN博客实现新闻管理案例开发文档：获取数据接口地址：/api/get/news接口参数：pageindex：页码pagesize:每页的条数请求类型：get返回的数据：{ status:200, message:"获取新闻列表成功", list:[ { "id":1, "title":"解忧杂货店", "content":"《解忧杂货店》是日本作家东野圭吾https://blog.csdn.net/wanglingli95/article/details/123126297?spm=1001.2014.3001.5502

• 在xxx.vue中使用axios调用本地模拟的health.json数据

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  // 钩子函数的设置位置
  mounted() {
    // 调用后台接口获得数据
    this.$axios.get(
        "../../static/health.json"
      )
      .then(res => {
        // then()中如果只传入一个处理函数，那么默认是处理请求成功的情况
        // 打印后台获得的结果
        // console.log(res.data);

        this.msg = res.data;
      })
      .catch(err => {
        // 未获得成功之后的报错信息
        console.log(err);
      });
  }
};
</script>

运行结果截图：