VUE2项目：尚品汇-axios二次封装请求以及VUEX的状态管理库

女爷i 2024-02-28 00:46 15阅读 0赞

[**上一篇：VUE2项目：尚品汇VUE-CLI脚手架初始化项目以及路由组件分析（一）**][VUE2_VUE-CLI]

#### 目录 ####

*   *  axios二次封装
     *  API接口管理与解决跨域
     *   *  API接口管理
         *  nprogress进度条配置
     *  VUEX状态管理库
     *  三级分类动态背景颜色
     *  防抖
     *  三级联动跳转路由分析

### axios二次封装 ###

项目需要使用到请求与响应的拦截器，分别在请求前与响应后做一些请求的响应处理，使用request.js文件对`axios`进行封装，前提是需要安装`axios`。

安装：`npm install --save axios`

![在这里插入图片描述][91bd783585614586976c83abf0de91cf.png_pic_center]  
**request.js全局封装**

import axios from "axios";
    
    // 引入进度条
    import nprogress from 'nprogress';
    // 引入进度条样式
    import "nprogress/nprogress.css"
    
    const requests = axios.create({
        
        //基础路径,发请求会带上api，每个路径的前缀
        baseURL: "/api",//对应vue.config文件里面的proxy代理
        //请求不能超过5S
        timeout: 5000,
    });
    
    //请求拦截器（可以在请求发出去之前，做一些事情）
    requests.interceptors.request.use((config) => {
        
        //config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
        //响应成功,进度条开始
        nprogress.start();
        return config;
    });
    //响应拦截器（在数据返回之后，做一些事情）
    requests.interceptors.response.use(
        (res) => {
        
            //响应成功,进度条结束
            nprogress.done();
            return res.data;
        },
        (err) => {
        
            //响应失败
            
            return Promise.reject(new Error("Fail"))
    
        }
    );
    
    // 对外暴露
    export default requests;

### API接口管理与解决跨域 ###

#### API接口管理 ####

API接口统一在api文件夹下的`index.js`进行管理

![在这里插入图片描述][549ea8ce4fb144a6967f3fee25d49215.png_pic_center]  
例如，获取三级分类的数据接口：

import requests from "./request"
    
    // 获取商品三级分类数据
    export const reqCategoryList = ()=>{
        
        return requests({
        
            url: "/product/getBaseCategoryList",
            method: "get"
        })
    }

若仅仅发的是接口，还需要解决代理跨域问题，所谓的跨域问题就是前后端的访问地址的**协议，域名，端口号**有一个不一样就需要跨域，前端在vue全局配置文件`vue.config.js`进行配置:

module.exports = defineConfig({
        
      transpileDependencies: true,
      lintOnSave: false,
      // vue配置代理跨域
      devServer: {
        
        proxy: {
        
          '/api': {
        
            target: "http://gmall-h5-api.atguigu.cn",
          },
        }
      },
    })

#### nprogress进度条配置 ####

为了让用户更加直观的看到页面的加载情况，现引入`nprogress`插件。

效果如下：

![在这里插入图片描述][11bac4b440c0466a969b49c1912473f2.png_pic_center]

安装：`npm install --save nprogress`

使用步骤很简单，引入进度条，引入样式，请求响应开始与结束时候调用方法即可。

![在这里插入图片描述][50da71def6f4414c9833632d4a1ad2d9.png_pic_center]  
可以调整进度条的颜色样式：

![在这里插入图片描述][947f00a3a9044864af82bcfd0a1fe5ba.png_pic_center]

### VUEX状态管理库 ###

相当于一个仓库来集中管理组件中的数据，详细请参考[vuex][]。

安装：`npm install --save vuex`

数据过多，可以使用vuex的模块化开发，将大仓库中放入各个模块下的数据。

在store文件夹下的index.js作为总的配置文件：

![在这里插入图片描述][b3c2b3f99c1e4376bb628dfbbaac61e0.png_pic_center]  
**index.js**：这里相当于一个大仓库，集成了其它小仓库中的数据，并对外暴露。

import Vue from "vue";
    
    import Vuex from "vuex";
    // 使用插件
    Vue.use(Vuex)
    
    import search from "./search";
    import home from "./home";
    
    // 对外暴漏
    export default new Vuex.Store({
        
        modules: {
        
            home,
            search
        }
    })

随后导入仓库并注册：

![在这里插入图片描述][c434ae6d0c4347f587b0dcd11ca3f723.png]

下面的步骤就是将之前的商品的三级分类存储到vuex仓库中，具体步骤如下：

**导入接口**

导入之前在api下定义的请求三级分类的接口：

![在这里插入图片描述][8a9f6bba26eb4ff791fe7735e92ef036.png_pic_center]  
在`actions`中异步发送请求的方法。

![在这里插入图片描述][048b5ada1c1c474abe623b93df970e90.png_pic_center]  
在`mutations`中去修改state

![在这里插入图片描述][d65e2560451c46ee80f86114da5e79a8.png_pic_center]  
最后存储至仓库之中：

![在这里插入图片描述][94e031bc6f674dc1960757b2538b2389.png_pic_center]  
在对应的页面进行使用，从仓库中取出对应的数据：

import {
         mapState } from 'vuex';

![在这里插入图片描述][3b3c2be6b3824b72ac491a053541fa16.png_pic_center]  
数据进行展示：

<div class="type-nav" @mouseenter="enterShow" @mouseleave="enterShowLeave()">
            <div class="container">
                <h2 class="all">全部商品分类</h2>
    
                <div @mouseleave="changeIndex(-1)">
                    <transition name="sort">
                        <div class="sort" v-show="show">
                            <div class="all-sort-list2" @click="goSearch">
                                <div class="item bo" v-for="(c1, index) in categoryList" :key="c1.categoryId"
                                    :class="{ cur: currentIndex == index }">
                                    <h3 @mouseenter="changeIndex(index)">
                                        <a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryId">{
       {
                                            c1.categoryName
                                        }}</a>
                                        
                                        
                                    </h3>
                                    <div class="item-list clearfix">
                                        <div class="subitem" v-for="c2 in c1.categoryChild" :key="c2.categoryId">
                                            <dl class="fore">
                                                <dt>
                                                    <a :data-categoryName="c2.categoryName" :data-category2Id="c2.categoryId">{
       {
                                                        c2.categoryName }}</a>
                                                    
                                                </dt>
                                                <dd>
                                                    <em v-for="c3 in c2.categoryChild" :key="c3.categoryId">
                                                        <a :data-categoryName="c3.categoryName"
                                                            :data-category3Id="c3.categoryId">{
       {
                                                                c3.categoryName }}</a>
                                                        
                                                    </em>
                                                </dd>
                                            </dl>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </transition>
                </div>
    
                <nav class="nav">
                    <a href="###">服装城</a>
                    <a href="###">美妆馆</a>
                    <a href="###">尚品汇超市</a>
                    <a href="###">全球购</a>
                    <a href="###">闪购</a>
                    <a href="###">团购</a>
                    <a href="###">有趣</a>
                    <a href="###">秒杀</a>
                </nav>
    
            </div>
        </div>

### 三级分类动态背景颜色 ###

我们希望鼠标在分类上移动时会有背景颜色的显示：  
![在这里插入图片描述][2166cc3863344bcc99e3d8ccd9deb8c9.png_pic_center]  
有两种方案，直接在导航栏中改样式即可：

![在这里插入图片描述][b507011e86784056b59b942ba22a4dd3.png_pic_center]

或者使用导航的索引进行JS的方式进行控制，先声明变量：

data() {
        
        return {
        
            // 鼠标位置,用来实现鼠标移入三级联动的样式
            currentIndex: -1,
            show: true
        }
    },

鼠标监听索引的方法，这里需要使用节流的方式，不然鼠标滑动的时候会有卡顿的现象。

所谓节流就是，连续触发事件但是在 n 秒中只执行一次函数。

导入我们所需要的节流函数：

import throttle from 'lodash/throttle';

使用：

![在这里插入图片描述][0137d52be5344b038465960f56ea88d7.png_pic_center]

定义样式是否展示的方法：

enterShow() {
        
        this.show = true;
    },

对导航栏的样式进行监听：

![在这里插入图片描述][b009faea8a5b4e5e847e38cc3cb8e9a8.png_pic_center]

可以使用JS来控制二三级的分类与隐藏：

![在这里插入图片描述][7a91e152225e4744850890833e7a580b.png_pic_center]

### 防抖 ###

触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新再次触发事件并延长触发的时间。

有些事件比如`mousemove` ,`mousehover`等，我们需要做限制保证它们不被频繁的被触发。

### 三级联动跳转路由分析 ###

点击三级路由跳转到对应的搜索页面，需要将一二三级的分类名称与ID带入路径参数中：

![在这里插入图片描述][59d13715db644a2c8606fff6c6871d4d.png_pic_center]

使用**编程式导航+事件委派机制**的方式实现：

点击对应的分类将分类的名称与ID带入路径参数中：

![在这里插入图片描述][71bd6591feae440d9ba8eb9ae52a5cf0.png_pic_center]

**添加方法：**

goSearch(event) {
        
        // 编程式导航+事件委派
        // 事件委派就是将所有的子节点的事件全部委托给父亲节点，点击a标签才会跳转
        // 事件委派会将所有的子节点交给父节点.data-categoryName区别为a标签
        // 获取到当前鼠标点击的标签
        let element = event.target;
        let {
         categoryname, category1id, category2id, category3id } = element.dataset;
        // 如果有categoryname则一定是a标签
        if (categoryname) {
        
            // 跳转路由的参数
            let location = {
         name: 'search' };
            let query = {
         categoryName: categoryname };
            // 区分一级，二级。三级a标签
            if (category1id) {
        
                query.category1Id = category1id;
            } else if (category2id) {
        
                query.category2Id = category2id;
            } else {
        
                query.category3Id = category3id;
            }
            // 判断，如果路由跳转，带有params参数，传递过去
            if (this.$route.params) {
        
                location.params = this.$route.params;
                location.query = query;
                this.$router.push(location);
            }
        }
    },

[VUE2_VUE-CLI]: https://tongbing.blog.csdn.net/article/details/133420800
[91bd783585614586976c83abf0de91cf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/f099d1ba52a84859b76db66bdc695f04.png
[549ea8ce4fb144a6967f3fee25d49215.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/9c203aa29b29431593b67af2e3df7253.png
[11bac4b440c0466a969b49c1912473f2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/2cce328a40574b4ab37e9beb7ddc9c88.png
[50da71def6f4414c9833632d4a1ad2d9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/f3db110fe9b14b86918fb8eeef4ab1d4.png
[947f00a3a9044864af82bcfd0a1fe5ba.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/d6c8c5addbc94a89b6ea460d81be18cc.png
[vuex]: https://vuex.vuejs.org/zh/
[b3c2b3f99c1e4376bb628dfbbaac61e0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/fd73eb2ed9434067bb6b5f1b8e0b60b6.png
[c434ae6d0c4347f587b0dcd11ca3f723.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/7653e9f0e7b14ed7afe8810bd5329604.png
[8a9f6bba26eb4ff791fe7735e92ef036.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/0d4e988eebe2469d9ef39b6e90c004ae.png
[048b5ada1c1c474abe623b93df970e90.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/d072f5a3524b4ecaa642815a4cae58f2.png
[d65e2560451c46ee80f86114da5e79a8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/209e661d9ac74fa3b02eb4d0fc3cd1b8.png
[94e031bc6f674dc1960757b2538b2389.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/f6c01d4ad05b4aa88bda4dc26a11909f.png
[3b3c2be6b3824b72ac491a053541fa16.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/e59627f6de71428a972ab0e25904e06b.png
[2166cc3863344bcc99e3d8ccd9deb8c9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/a09beeaef1a5465196b9080fc3c5b04c.png
[b507011e86784056b59b942ba22a4dd3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/63e5a0ed0d92486c9b85ce996f014180.png
[0137d52be5344b038465960f56ea88d7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/f9f4e941545b412fbfd585413115f693.png
[b009faea8a5b4e5e847e38cc3cb8e9a8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/0120be924d2a42a290e3d335ebf29f2e.png
[7a91e152225e4744850890833e7a580b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/84150f23855b4175a2ddc9f7d8122a44.png
[59d13715db644a2c8606fff6c6871d4d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/a4768765bf8d4d6888932a5b041910c0.png
[71bd6591feae440d9ba8eb9ae52a5cf0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/28/fa2fc2ee1fad46abbdbcaed4d31af72e.png