「这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战」

前言

之前我再开发jQuery项目的时候使用的Ajax请求后端接口，在Vue时代有一个同样的东西用来请求后端接口，它就是axios,那怎么在Vue cli 项目中使用axios呢？

安装

直接在项目根目录使用npm intall安装：

npm install axios

全局导入

在Vue 项目中main.js里添加四行代码导入，全局就可以使用了：

import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'  //关键代码
axios.defaults.headers.post['Content-Type']='application/json';

在Vue官网上讲了添加实例使用property方法：

Vue.prototype.$appName = 'My App'

这样的话就可以在页面引入VUe对象的时候使用this.$appName使用这个引入的对象了,还是比较好理解的。

全局设置跨域代理

在项目根目录新建vue.config.js，输入一下内容，拦截API的请求，不然会跨域报错：

module.exports = {
    devServer: {
      proxy: {
        '/api': {
            target: 'http://127.0.0.1:8080',
          changeOrigin: true, // 允许跨域
          pathRewrite: { // 重写路径
            '^/api': ''
          }
        }
      }
    }
  }
  

module.exports 返回的是模块对象本身， 需要new对象之后才可以调用，这里是把这个文件的内容做一个json对象暴露给框架使用，这个框架会读取里面的键值对
把'/api'路径的请求都转发给后端本地后端服务

测试使用

在App.vue中修改script标签的内容：

<script>
export default {
  name: "App",
  components: {},
  data() {
    //渲染数据后期采用api动态请求的方式
    return {
      // 假的数据列表
      jump_items: [
        { name: "情报处1", url: "http://www.baidu.com" },
        { name: "情报处2", url: "http://www.baidu.com" },
        { name: "情报处3", url: "http://www.baidu.com" },
        { name: "情报处4", url: "http://www.baidu.com" },
        { name: "情报处5", url: "http://www.baidu.com" },
        { name: "情报处6", url: "http://www.baidu.com" },
      ],
      //这里后期通过一些
      url_lists: [],
    };
  },
  created() {
    this.listUlr();
  },

  methods: {
    listUlr() {
      this.$axios.get("/api").then((res) => {
        this.url_lists = res.data.data;
      });
    },
  },
};
</script>

Vue实例有很多生命周期。created方法叫做这个生命周期钩子函数，我在这个函数中调用的数据请求的请求方法，很多面试题会考这个生命周期，会讨论页面初始化请求渲染的时候应该写在created函数还是mounted函数，大部分是created,created是Vue组件还没有替换到网页dom上的时候，mounted是Vue组件已经替换到dom上去了。
在修改html中的内容，主要是修改成后端的一些字段名：

      <div id="only_menu">
        <!-- 坐侧大菜单按钮，用于右侧菜单滑动到指定位置 -->
        <ul id="menu_list">
          <li v-for="item in url_lists" :key="item.ID">
            <div>{{ item.Name }}</div>
          </li>
        </ul>
      </div>
    </div>
    <div id="part_right">
      <!-- 右侧网站导航栏 -->
      <ul id="url_list">
        <li v-for="item in url_lists" :key="item.ID">
          <!-- v:for嵌套循环，循环里面就不能用id定位元素了，要用class -->
          <div class="one_part">
            <div class="menu_target">{{ item.Name }}</div>
            <div class="url_list_data">
              <li v-for="url_data in item.UrlLists" :key="url_data.ID">
                <a :href="url_data.URL">{{ url_data.Name }}</a>
              </li>
            </div>
          </div>
        </li>
      </ul>
    </div>

然后稍微修改一下后端的请求路径，改为API：

测试&总结

访问localhost：8081看看效果：

数据成功渲染，很棒。基础功能已经完成了，设置一下环境变量和后端跨域设置。