一、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:进度条结束
进度条的颜色可以修改