shop_font_1

今天做第二个分类页面，会对axios进行二次封装，对leancloud进行数据请求，整体页面如下：

                                         

首先集成axios（leancloud文件会放在shop_font_1文件里面大家有需要可以到里面找）

配置/src/config.js

这是我的leancloud凭证

baseURL就是REST API 服务器地址，详细操作可以看我主页的这篇文章https://blog.csdn.net/m0_56164661/article/details/134386454?spm=1001.2014.3001.5502

再在utils文件夹下编写request.js二次封装axios以对leancloud实现数据异步请求

首先我们通过axios中的create方法实例化一个service对象，再对service对象添加请求拦截器，响应应拦截器，请求拦截器在这章只涉及分类数据请求，后面会对做登录界面的时候会对token进行验证。

request.js代码：

import axios from 'axios';
import myconfig from '@/config.js'
import { showLoadingToast, showToast, closeToast } from 'vant'


const service =axios.create({baseURL: myconfig.baseURL})

//请求拦截器
service.interceptors.request.use(
    config =>{
        config.headers["X-LC-Id"]= myconfig.appid;
        config.headers["X-LC-Key"]= myconfig.masterkey+",master";
    

    return config
})



//响应拦截器
service.interceptors.response.use(
    response =>{
        if (response.data.results)
            return response.data.results
        else
            return response.data

    }, error => {
        closeToast()
        showToast({
            message: '请求失败',
            type: 'fail'
        })
        console.log(error)
    }
)

export default service

然后到Category.vue，一般来说数据先行，所以先获取一级导航栏需要的menu数组，代码如下：

import request from "@/utils/request";

onMounted(() => {
  loadCategoryList();
});

const loadCategoryList = async () => {
  let data = await request.get("/1.1/scan/classes/category");
  console.log(111, data);
  const treeData = convertToTree(data);
  console.log(treeData);
  //   // 将转换后的数据赋值给menus
  menus.value = treeData;
};

// 将一维数组转换成树形结构的方法
const convertToTree = (data) => {
  const treeData = [];
  const map = {};
  // 遍历一维数组数据，建立节点映射表
  for (const item of data) {
    map[item.id] = { ...item, children: [] };
  }
  // 遍历映射表，将节点添加到父节点的children中
  for (const item of data) {
    const node = map[item.id];
    if (item.pid === "0") {
      treeData.push(node);
    } else {
      const parent = map[item.pid];
      parent.children.push(node);
    }
  }
  return treeData;
};

使用异步请求从“/1.1/scan/classes/category”端点获取数据（假设是带有方法的已定义对象）。然后，它记录接收到的数据，并使用该函数将其转换为树状结构。最后，将转换后的树数据分配给变量。

一级导航栏：

代码如下：

 <div class="menu-left">
      <!-- 一级导航栏 -->
      <van-sidebar v-model="tabValue">
        <van-sidebar-item
          :title="item.name"
          v-for="(item, index) in menus"
          :key="index"
          @click="handleMenulist(index)"
        />
      </van-sidebar>
    </div>

这里我们使用了Vant组件库里面的侧边导航栏<van-sidebar>,v-for遍历菜单数组menus

二级导航栏：

<!-- 二级导航栏 -->
    <div class="menu-right" ref="itemList">
      <!-- 显示二级分类 -->
      <div class="cate">
        <h4 class="cate-title">{{ menus[tabValue].name }}</h4>
        <ul class="cate-item">
          <li v-for="(item, index2) in menus[tabValue].children" :key="index2">
            <router-link class="cate-item-wrapper" to="/">
              <div class="cate-item-img">
                <img :src="item.picture" alt="" />
              </div>
              <span>{{ item.name }}</span>
            </router-link>
          </li>
        </ul>
      </div>
    </div>

别忘记在script标签中声明 itemList和tabValue
const itemList = ref();

const tabValue = ref(0);

那么现在一级导航栏和二级导航栏我们都有了，需要实现点击一级导航栏联动二级导航栏

参考这里：https://juejin.cn/post/7078592288611368990                                                                                   vue3+vant3使用van-sidebar侧边导航组件实现菜单左右联动效果

//左侧菜单点击联动右侧
const handleMenulist = (index) => {
  tabValue.value = index;
  console.log("index=", index);
};

less代码：

ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.menu {
  display: flex;
  position: absolute;
  text-align: center;
  top: 46px;
  bottom: 50px;
  width: 100%;
  overflow: hidden;
}
.menu-right {
  flex: 1;
  overflow-y: scroll;
  background: #fff;

  .cate {
    height: 100%;

    .cate-title {
      margin: 0;
      text-align: left;
      font-size: 14px;
      color: #333;
      font-weight: bold;
      padding: 10px;
    }
    .cate-item {
      padding: 7px 10px 10px;
      display: flex;
      overflow: hidden;
      flex-wrap: row wrap;
      li {
        width: 33.3%;

        .cate-item-img {
          width: 100%;
          img {
            width: 70px;
            height: 70px;
          }
        }
        span {
          display: inline-block;
          font-size: 14px;
          color: #333;
        }
      }
    }
  }
}