尚品汇（二）

一、Home模块组件拆分

1.三级联动组件（商品分类导航）

由于三级联动在Home、Search、Detail都有出现，将其注册为全局组件（只需注册一次，就可在项目的任意地方使用）

//main.js
import TypeNav from '@/components/typeNav';
//第一个参数:全局组件的名字,第二个参数:哪一个组件
Vue.component(TypeNav.name, TypeNav)

2.静态组件的拆分

结构+图片+样式

二、接口（p14）

1.POSTMAN测试接口

(1)测试工具:POSTMAN、ApiPost

服务器返回200字段，代表服务器返回数据成功

(2)整个项目的接口前缀都有-api字样
http://gmall-h5-api.atguigu.cn

2.axios二次封装

（1）为什么要二次封装axios（先安装axios）

请求拦截器、响应拦截器；
请求拦截器：在大请求之前处理业务
响应拦截器：服务器返回数据后，处理业务

//对于axios进行二次封装
import axios from "axios";
//获取仓库:存储数据
import store from "@/store";
//引入进度条
import nprogress from 'nprogress';
//引入相关进度条的样式
import "nprogress/nprogress.css";
// 利用axios对象的方法create，创建一个axios实例
//axios.create方法执行,其实返回一个axios和request一样的
let requests = axios.create({
    //基础路径,发请求URL携带api【发现:真实服务器接口都携带/api】
    baseURL: "/api",
    //超时的设置
    timeout: 5000
});
//请求拦截器:将来项目中【N个请求】，只要发请求,会触发请求拦截器!!!
requests.interceptors.request.use(config => {
    //请求拦截器:请求头【header】,请求头能否给服务器携带参数
    //请求拦截器：其实项目中还有一个重要的作用,给服务器携带请求们的公共的参数
    //进度条开始
    nprogress.start();
    if (store.state.shopcart.USER_ID) {
        config.headers.userTempId = store.state.shopcart.USER_ID;
    }
    //token[公共参数]
    if(store.state.user.token){
        config.headers.token = store.state.user.token;
    }

    //每一次发请求,请求头携带用户临时身份
    // config.headers.userTempId = SET_USERID();
    //不管那个模块发请求,请求拦截器，都可以触发。请求拦截器可以通过请求头每一次协大公共参数给服务器【用户未登录的临时身份】
    return config;
});


//响应拦截器：请求数据返回会执行
requests.interceptors.response.use((res) => {
    //res:实质就是项目中发请求、服务器返回的数据
    //进度条结束
    nprogress.done();
    return res.data;
}, (err) => {
    //温馨提示:某一天发请求,请求失败,请求失败的信息打印出来
    alert(err.message);
    //终止Promise链
    return new Promise();
});

//最后需要暴露:暴露的是添加新的功能的axios,即为requests
export default requests;

3.API接口统一管理

小项目：在组建的生命周期函数中发请求
大项目：axios.get(‘xxx’)

跨域

协议名/域名/端口号不同的请求

解决

JSONP
CROS
代理跨域

//vue.config.js
 // 代理跨域 转发请求
  devServer:{
    proxy:{
      '/api':{
                target:' http://39.98.123.211',
        pathRewrite:{'^api':''},
      }
    }
  }

//统一管理项目前部的接口，当前模块是对API进行统一管理
//api/index.js

三.nprogress进度条的使用

start:进度条开始
done:进度条结束
进度条的颜色可以修改