尚硅谷-尚品汇项目开发总结（第三天）

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 requests

        3.因为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()