4：Home静态组件的拆分与postman测试接口是否可用
4.1 Home组件的拆分
注意点：HTML + CSS + 图片
4.2 postman测试接口
文章图片
文章图片
文章图片
文章图片
5：axios二次封装与配置代理服务器、nprogress进度条插件的使用
5.1 axios二次封装
1.为什么要进行axios二次封装？
因为要配置请求拦截器与响应拦截器，在发送请求之前和获取响应之后做一些业务。
2.axios二次封装一般放在src下的api文件夹中，在api中新建request.js文件，写入如下代码
import axios from 'axios'
const requests = axios.create({
//设置baseURL，在发送请求时自动添加api字段（因为接口中都有此字段，这样简单一些）
baseURL:'/api',
//设置请求延时，超时则停止请求
timeout:5000
})//设置请求拦截器
requests.interceptors.request.use((config)=>{return config
})//设置响应拦截器
requests.interceptors.response((res)=>{
//对返回的结果做一些处理
return res.data
},(error)=>{
//请求失败错误提示
return Promise.reject(new Error('falie'))
})export default requests3.因为api较多，所以需要统一管理api，在api文件夹中新建index.js
import requests from './requests'//如 获取三级分类列表
export const getCategoryList = ()=> return requests({url: '/product/getBaseCategoryList',method: 'get'})使用方式：在组件中引入、使用即可
5.2 配置代理服务器
1.为什么要配置代理服务器？
因为前端页面所在的本地服务器是 http://127.0.0.1:8080，服务器请求的地址为 http://39.98.123.211，两者存在跨域问题。跨域是指当浏览器与服务器的协议、域名、端口号其中有不同的时候就为跨域。前端解决跨域问题的方法之一是配置代理服务器。
2.配置方法：在vue.config.js中进行如下配置
module.exports = {
devServer:{
proxy:{
//当请求地址含有api字段的请求时，往target进行请求，此处并不需要重写api字段，因为接口地址都包含api字段
'/api':{
target:'http://39.98.123.211'
}
}
}
}5.3 nprogress进度条的使用：注意引入样式，配置在请求拦截器和响应拦截器中
【尚硅谷电商项目|尚硅谷-尚品汇项目开发总结（第三天）】在axios二次封装requests.js文件中
//引入进度条插件
import NProgress from 'nprogress'
//引入进度条的样式
import 'nprogress/nprogress.css'在请求拦截器中开启进度条 nprogress.start()
在响应拦截器中关闭进度条 nprogress.done()
推荐阅读
- javascript|尚品汇个人理解笔记
- 尚硅谷电商项目|尚硅谷-尚品汇项目开发总结（第四天）
- 尚硅谷电商项目|尚硅谷-尚品汇项目开发总结（第十二天）
- 尚硅谷电商项目|尚硅谷-尚品汇项目开发总结（第十六天，电商项目完）
- HTML|H5 canvas 基础一
- 尚硅谷电商项目|尚硅谷-尚品汇项目开发总结（第一天）
- vue.js|B站尚品汇项目学习笔记整理（P1-P10）
- vue|vue-尚品汇项目 -尚硅谷项目笔记-项目配置
- 前端|彻底吃透 JavaScript 执行机制