1.什么是Vue的单页应用

传统的后台管理系统有很多功能模块，需要写很多网页。我们可以使用Vue，通过vue的路由和组件功能，只写一个页面就可以完成一个管理系统。

2.axios的使用

//1.需要引入的依赖 import axios from 'axios'   //2.可以对axios做一些配置 axios.defaults.baseURL = “xxx”; // 设置axios的基础请求路径 axios.defaults.timeout = 2000; // 设置axios的请求时间  //3.可以给axios封装方法 axios.loadData = async function (url) { const resp = await axios.get(url); return resp.data; }

3.Vue中全局引入axios

//把axios实例引入到Vue的实例 Vue.prototype.$http = axios;  //在组件中使用，通过this.$http就能找到axios了 this.$http.get("/item/brand/page", { params: { key: this.search, // 搜索条件 page: this.pagination.page,// 当前页 rows: this.pagination.rowsPerPage,// 每页大小 sortBy: this.pagination.sortBy,// 排序字段 desc: this.pagination.descending// 是否降序 } }).then(resp => { // 这里使用箭头函数 this.brands = resp.data.items; this.totalBrands = resp.data.total; // 完成赋值后，把加载状态赋值为false this.loading = false; }) },

全局引入的好处：全局引入axios后，所有组件都可以使用axios，而不需要重复配置和引入依赖。

3.如何使ajax请求同步

3.1封装axios的get方法

/** * 1、我们自己封装的、同步ajax请求方法 * 2、也是get请求，同步德get请求 * @param url * @returns {Promise<*>} */ axios.loadData = async function (url) { const resp = await axios.get(url); return resp.data; }

3.2在组件中调用封装好的loadData同步ajax方法

/** * 1、async和下面的await配合使用 * 2、如果不加这个关键字的话，js的ajax请求默认是异步的，也就是说，下面方法里的两个请求，不管成功与失败，后面的代码都会执行 * 3、这里我们的业务逻辑是，如果ajax请求数据失败的话，显示编辑框也没有意义 * 4、所以加上同步关键字，让ajax变成同步的，让他们顺序执行，如果请求失败，后面就别执行了 * 5、注意，loadData方法，是我们自己封装的。点进去看看。 */ async editGoods(oldGoods) { // 发起请求，通过spuID 查询商品详情和skus oldGoods.spuDetail = await this.$http.loadData("/item/spu/detail/" + oldGoods.id); oldGoods.skus = await this.$http.loadData("/item/sku/list?id=" + oldGoods.id); // 修改标记 this.isEdit = true; // 控制弹窗可见： this.show = true; // 获取要编辑的goods this.oldGoods = oldGoods; },