Vue学习笔记4.25

postman测试接口

axios的二次封装

XMLHttpRequest, fetch, JQ axios

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

请求拦截器，响应拦截器，
请求拦截器，可以在发请求之前处理一些业务；
响应拦截器，当服务器数据返回后，可以处理一些事情

在项目中，通常有一个api文件夹[axios]

接口当中：路径通常有/api
在封装axios的时候加baseURL配置项

// 对于axios进行二次封装
import axios from 'axios'

//1.利用axios对象的方法create, 去创建一个axios实例
//2.request就是axios, 只不过稍微配置一下
const requests = axios.create({
    //配置对象
    //基础路径，发请求的时候，路径当中会出现/api
    baseURL: '/api',
    //请求超时时间
    timeout:5000
})

//请求拦截器：在请求发出去之前做一些事情，
requests.interceptors.request.use((config)=>{
    //confug: 配置对象，对象里面有一个属性很重要，headers强求头
    return config
})

//响应拦截器
requests.interceptors.response.use((res)=>{
    //成功的回调函数
    return res.data
},(error)=>{
    //响应失败的回调函数
    return Promise.reject(new Error('fail'))
})

export default requests;

接口统一管理: 所有的接口在一个单独的文件里面管理，方便外面调用

//当前这个模块： API进行统一管理

import requests from "./request";

//三级联动接口
// 3.1请求地址
// /api/product/getBaseCategoryList
// 3.2请求方式
// GET
// 3.3请求参数
// 无

    //axios发请求的结果是promise
export const reqCategoryList = () => requests({
    url: '/product/getBaseCategoryList',
    method: 'get'
})

跨域问题

什么是跨域： 协议，域名，端口号不同的请求，称之为跨域

前台项目本地服务器：http://localhost:8080
后台服务器：http://gmall-h5-api.atguigu.cn

跨域解决方式：JSONP, CORS, 代理

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  //代理跨域
  devServer:{
    proxy:{ //当前台发请求的时候，发现url里面只要包含/api，就使用代理服务器向后台服务器发请求，代理服务器和后台服务器都属于服务器端，不存在跨域
      '/api': {
        target: 'http://gmall-h5-api.atguigu.cn'
      }
    }
  }
})

nprogress进度条的使用

//引入进度条
import nprogress from 'nprogress'
//start方法代表进度条开始
//done代表进度条结束
//引入进度条的样式
import 'nprogress/nprogress.css'

//请求拦截器：在请求发出去之前做一些事情，
requests.interceptors.request.use((config)=>{
    //confug: 配置对象，对象里面有一个属性很重要，headers强求头
    nprogress.start()
    return config
})

//响应拦截器
requests.interceptors.response.use((res)=>{
    //成功的回调函数
    nprogress.done()
    return res.data
},(error)=>{
    //响应失败的回调函数
    return Promise.reject(new Error('fail'))
})

vuex状态管理库

vuex是官方提供的插件，状态管理库，集中式管理组件中共用的数据
state,
mutataions,
actions,
getters,
modules

切记：并不是全部项目都需要vuex。如果项目很小，完全不需要vuex。
如果项目很大，组件很多，数据很多，项目维护很费劲，可以考虑使用vuex。

完成三级联动，展示数据

vuex三件套：dispatch, actions, mutations

完成一级分类动态添加背景颜色

第一种解决方案： 采用样式完成
&item:hover:{ background-color:green }
第二中解决方案： 使用js逻辑完成
2.通过JS控制2，3级列表的显示与隐藏
3.函数的防抖和截流：
防抖： 前面的所有的触发都被取消，最后一次触发，在规定的时间之后只触发一次
截流：在规定的时间间隔范围内不会重复触发回调，只有大于这个时间间隔才会触发，把频繁的触发变为少量的触发
4.三级联动组件的路由跳转和参数传递
三级联动用户可以点击的： 一级分类， 二级分类， 三节分类
home模块跳转到search模块的时候，会把产品名字和id那些在路由跳转的时候，进行传递。

声明式导航：会循环生成很多的router-link，影响性能，造成页面卡顿
编程式导航：