电商平台项目 Vue day2

import axios from "axios";
//1、对axios二次封装
const requests = axios.create({
    //基础路径，requests发出的请求在端口号后面会跟改baseURl
    //baseURL设置为api,所以所有的请求端口后都会携带/api
    baseURL:'/api',
    //发一个请求如果5s内没响应，那么就请求失败
    timeout: 5000,
})
//2、配置请求拦截器， request就是axios
requests.interceptors.request.use(config => {
    //config内主要是对请求头Header配置
    //比如添加token
    
    return config;
})
//3、配置响应拦截器
requests.interceptors.response.use((res) => {
    //成功的回调函数
    return  res.data;
},(error) => {
    //失败的回调函数
    console.log("响应失败"+error)
    return Promise.reject(new Error('fail'))
})
//4、对外暴露
export default requests;

2.2：接口统一管理

当项目很小时，接口可以放在组件的生命周期中发送请求

当项目很大时，有很多接口，可以把接口放到一起统一管理：

 在api文件夹内创建index.js组件，用于存放所有接口，统一管理

//当前模块，API进行统一管理，即对请求接口统一管理
import requests from "@/api/request";

//首页三级分类接口
export const reqCateGoryList = () => {
    return  requests({
        //因为baseURL里自动携带了/api，所以这里不用加上/api。如果那边没有这边就要加上
        //method指什么请求
        url: '/product/getBaseCategoryList',
        method: 'GET'
    })
}

在main.js里测试一下是否能够成功请求后台数据：

import {reqCateGoryList} from './api'
//发起请求
reqCateGoryList();

404请求失败，跨域了。 

三、跨域问题

两个服务器相互请求，协议、域名、端口号必须一致，不然就是跨域，无法找到对方

 解决方法：cors、jsonp、代理（常用）

 这里使用代理服务器的方法：（在vue.config.js配置，配置完要重启代码）

module.exports = {
    //关闭eslint
    lintOnSave: false,
    devServer: { 
        // development server port 8000
        //port: 8001,
        //代理服务器解决跨域
        proxy: {
            //但在请求路径中发现/api时跳转到后面的代理服务器
            '/api': {
                //提供数据的服务器地址
                target: 'http://gmall-h5-api.atguigu.cn',

            }
        },
    }
}

代理相关看：   webpack官网相关知识解读
网站中的webpack.config.js就是vue.config.js文件。

 四、页面加载进度条

 可以使用nprogress插件来完成，安装完后可以去package.json里确认

cnpm install -save nprogress

安装好后再api的request的响应拦截器使用。先引入，

//---------------无关的代码这里会先去除--------------

//引入进度条
import nprogress from 'nprogress';
//引入进度条样式，想要修改进度条默认样式可以去下面的css里改
import "nprogress/nprogress.css";
//这里使用进度条插件的2个方法，1、start（进度条开始）  2、done（进度条结束）

//2、配置请求拦截器：在发请求前执行
requests.interceptors.request.use(config => {
    //在发请求前开启进度条，的start方法
    nprogress.start();

    return config;
})

//3、配置相应拦截器：在发请求侯执行
requests.interceptors.response.use((res) => {
    //成功的回调函数

    //响应成功，关闭进度条，使用done方法
    nprogress.done()

    return  res.data;
},(error) => {
    //失败的回调函数
    console.log("响应失败"+error)
    return Promise.reject(new Error('fail'))
})

//4、对外暴露
export default requests;

简单来说，先导入进度条插件，在页面加载前使用start方法，结束后使用done方法

五、使用Vuex集中式管理数据 

cnpm install --save vuex@3.6.2                    Vue2要用3版本的，不指定默认安4版本

创建文件夹store -> index.js存放Vuex    【2种形式】（这里不用这种）

//引入
import Vue from 'vue'
import Vuex from 'vuex'
//使用
Vue.use(Vuex)

//对外暴露store的一个实例
export default new Vuex.Store({
    state:{},
    mutations:{},
    actions:{},
    getters:{}，
)

如果模块很多就要用到模块化开发，把每个模块的数据单独放一个小仓库，再由store引入

 设置好Vuex之后需要引入，到mian.js中引入和使用，和router步骤一样

//引入Vuex
import store from './store';

new Vue({
    render: h => h(App),
    router,
    //使用Vuex
    store,
}).$mount('#app')

六、动态展示三级联动组件

1、像这种多个地方都需要用到的组件，把它放到components里面（就是那个存放静态组件的那里）

2、在三级联动组件TypeNav里：

export default {
  name:'TypeNav',
  // 组件挂载，向服务器发送请求获取数据
  mounted(){
    //通知Vuex发请求，获取数据，并存储于仓库当中,
    //这里actions取名叫做categorylist，然后去Vuex里配置actions
    this.$store.dispatch('categorylist')
  }

 3、接收TypeNav的请求，并引入之前封装的api

在store文件夹（Vuex）的小仓库home里引入api接口reqCateGoryList，然后在actions里书写业务

//引入api接口
import { reqCateGoryList } from '@/api/index'

//处理actions的地方，可以书写业务逻辑、处理异步
const actions = {
    categorylist() {
        let result = reqCateGoryList()
        console.log(result);
    }
};

 咱们这里使用异步来进行，也就是async await

//处理actions的地方，可以书写业务逻辑、处理异步
const actions = {
    async categorylist() {
        let result = await reqCateGoryList()
        console.log(result);
    }
};

通过Vuex原理处理数据

//引入api接口
import { reqCateGoryList } from '@/api'
//处理actions的地方，可以书写业务逻辑、处理异步
const actions = {
    // {commit} 是结构赋值
    async categorylist({ commit }) {
        let result = await reqCateGoryList()
        if (result.code == 200) {
            commit('CATEGORYLIST', result.data);
        }
    }
};
//修改数据的地方
const mutations = {
    CATEGORYLIST(state, categorylist) {
        state.categorylist = categorylist
    }
};
//存储数据的地方
const state = {
    categorylist: []
};

4、到TypeNav接收数据

  computed: {
    ...mapState({
      //右侧需要的是一个函数，当使用这个计算属性的时候，右侧会立即执行一次
      //注入一个参数state，即Vuex大仓库里的数据
      categoryList: (state) => state.home.categoryList,
    }),
  },

5、数据有了，把html中的静态内容删掉，用v-for生成

至此，动态三级分类搞定