1 Home模块组件拆分

–先把静态页面完成完成
–拆分出静态组件：
三级联动||
–获取服务器数据进行展示
–动态业务

2 三级联动组件

—由于三级联动，在Home，Search，Detail都出现过，把其注册为全局组件。
好处：只需要注册一次，就能在全局使用。

3 完成其余Home下的静态组件：

HTML+CSS+图片资源【结构样式图片资源】

4 POSTMAN测试接口

–经过测试，接口没有问题
–返回code：200，成功
–整个项目，接口前缀都有/api字样

5 axios二次封装

XMLHTTPRequest，fetch，JQ，axios
在request中封装axios，然后暴露接口，然后在另一个index.js文件中引入，模块化开发，便于管理

5.1为什么需要进行二次封装axios？

请求拦截器：考研在发送请求之前可以处理一些业务
相应拦截器：当服务器数据返回之后，可以处理一些业务

5.2在项目当中经常看到API文件夹【axios】

接口当中路径当中带有/api
baseURL:’/api’ 默认带有/api
http://xxx.xxx:8000/api
封装方法如下

//1：利用axios对象的方法create，去创建一个axios实例
//2：request就是axios，只不过需要稍微配置一下

const requests = axios.create({
    //配置对象
    // 基础路径，发请求的时候，路径当中会出现api
    baseURL:'/api',
    //代表请求超时的时间50000
    timeout:5000,

})
//请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((confirm)=>{
    //confirm:配置对象，有一个属性很重要，header请求头
    return confirm;
})

//响应拦截器
requests.interceptors.response.use((res)=>{
    //成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情
    return res.data;
},(error)=>{
    //响应失败的回调函数
    return Promise.reject(new Error('fail'));
})

6 接口统一管理

–项目小：完全可以在组件的生命周期函数中发请求，mouted等
–项目大：axios.get('xxx')麻烦，
在index.js中的封装一个对外的接口来处理相应的需求

6.1跨域问题

什么是跨域：协议、域名、端口号不同的请求，称之为跨域
http://0.0.0.0:8080/#/home —前端项目的本地服务器
http://gmall-h5-api.atguigu.cn —后台服务器
JSONP、CROS、代理

proxy代理

7 nprogress进度条使用

-start：进度条开始
-done：进度条结束
进度条的颜色在css文件中的.bar样式中修改

8 vuex状态管理库

8.1vuex是什么？

vuex是官方提供的一个插件，状态管理库，集中式管理项目中组件中共用的数据
切记，并不是全部项目都需要vuex，如果项目很小，完全不需要vuex，反之，项目很大，组件很多，数据很多，数据维护很费劲
state
mutaions
actions
getters
modules

8.2vuex基本使用

//h5：
    <button @click='add'> 点我+1</button>
    <span>仓库的数据{{count}}</span>
    <button>点我-1</button>
//vue文件中：
import { mapState } from "vuex";

  computed:{
    ...mapState(['count'])
  },
  methods:{
    add(){
      // 派发action
      this.$store.dispatch('add');
    },
  },

//index.js(vuex)：
const state = {
    count:1,
};
// mutations：修改state的唯一手段
const mutations = {
    ADD(state){
        state.count++;
    }
};
// actions：处理action，可以书写自己的业务逻辑，也可以处理异步
const actions = {
    // 这里可以修改业务逻辑，但是不能修改state
    add({commit}){
        commit('ADD');
    }
};
// getters:理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters = {};
//对外暴露store类的一个实例
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
});

8.3vuex实现模块式开发

如果项目过大，组件过多，接口也很多，数据也很多，可以让vuex实现模块式开发

模拟state存储数据使用modules实现模块式开发

// 引入小仓库
import home from "./home";
import search from "./search";
//对外暴露store类的一个实例
export default new Vuex.Store({
    modules:{
        home,
        search
    }
});

9 完成TypeNav三级联动展示数据业务

[
  {
    id:1,    //一级分类
    name:'电子书',
    child:[
      {id:1,  //二级分类
      name:'佩奇'，
      child:[{
        id：1,  //三级分类
        name:'灰太狼'
      }]}
    ]
  }
]