【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - tab标签数据的动态获取及绑定通过前面几篇文章的

「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。

前言

通过前面几篇文章的分享，我们已经实现了我们网页版掘金app的底部导航栏、头部搜索栏和tab标签页。但是到目前为止还没涉及到与后端的交互。今天开始我们就将前后端一起，一边分析官方的api接口，一边实现我们自己的后端api，一边通过前端展示所获取的数据。在上一篇文章中我们的标签页都是固定写死的，接下来我们就将通过后端api来获取真正的分类数据，实现真正的动态数据绑定。本次分享要实现的功能有：

axios二次封装
通过nodejs+koa实现后端接口的封装
实现tab标签页的动态绑定

axios二次封装

大家应该都知道axios是同过promise封装的ajax异步请求库，可以拿过来直接使用，但是为什么我们还要进行二次封装呢。这是因为如果我们直接使用axios，用的都是axios的默认配置，也就是说所有的接口请求用的都是同一套配置，如果我们想只针对某几个接口进行单独配置就不好办了，如果直接修改axios的配置势必会影响到所有接口的配置，这显然是不合理的，因此我们要进行axios的二次封装，利用创建不同axios实例的形式来对不同接口进行不同配置。具体实现思路如下：

在src下新增一个api目录
在新增的api下分别新增一个http.js和juejinapi.js，http.js用于对axios进行二次封装，juejinapi.js用于封装请求后端的接口
在http.js中导入axios并创建一个axios的实例
设置axios响应拦截和请求拦截完整代码如下：

import axios from 'axios'
//创建新的axios实例
let http = axios.create({
    baseURL: '/api', // 设置baseURL
    headers: { //设置头信息
        "Content-Type": 'application/json;charset=UTF-8'
    }
});

//设置响应拦截
http.interceptors.response.use(response => {
    return response.data;
})


//设置请求拦截(暂时用不到，可以不用设置)
http.interceptors.request.use(config => {
    return config;
})

export default http;

后端服务搭建

由于我们要去请求官方的api接口来获取数据，但是如果我们在前端项目中直接请求的话就会报500服务器错误，但是同样用axios放在后端请求就没问题了，所以这里我们不得不再搭建一套后端服务。在关于Nodejs文章分享中已经介绍了如何基于nodejs加koa搭建一套后端服务，所以这里我们就不再介绍后端服务的搭建步骤了，有兴趣的小伙伴可以参考Nodejs后端服务分享中查看详情，或直接到github上获取源码即可。这里只分享一些后端如何去请求掘金官方api的封装。拿到代码的小伙伴可以参考如下步骤修改：

在ruoters目录下新增一个juejin.js
在该文件中导入axios和koa-router库
然后定义一个'/category'路由并在该路由中通过axios请求官方的获取标签类型的接口：api.juejin.cn/tag_api/v1/…
最后再在routers目录下的index.js中将juejin子路由整合到主路由中进行统一管理具体代码如下：

// routers/juejin.js
const {
    default: axios
} = require('axios');
const Router = require('koa-router')
const HttpCode = require('../utils/HttpCode')
const router = new Router();

router.get('/category', async (ctx, next) => {
    console.log('aaa');
    const {
        data
    } = await axios.get('https://api.juejin.cn/tag_api/v1/query_category_briefs?aid=2608&uuid=7050641888232212007');
    ctx.body = {
        code: HttpCode.Success.success_ok,
        msg: HttpCode.Success.success_ok_msg,
        data
    }
    next()
})

module.exports = router;

整合juejin子路由到主路由中

// routers/index.js
// ...
router.use('/juejin', juejin.routes(), juejin.allowedMethods())

tab标签页动态获取及绑定

在上面我们已经将axios进行了二次封装，下面就可以直接请求后端接口，获取真正的标签类型数据了。

请求接口定义
- 在src/api下新增juejinapi.js文件
- 在该文件中首先导入我们上面封装好的axios
- 定义一个queryCategoryBriefs方法并在该方法中通过axios直接向后端发起get请求实现代码如下：
```
import http from "./http";
export default {
    queryCategoryBriefs: function () {
        return http.get('/juejin/category')
    }
}
```

修改Home.vue动态获取标签数据

在Home.vue中导入我们刚刚封装好的queryCategoryBriefs方法
调用该方法并将返回的结果赋值给响应式变量categoryList
由于官方返回给我们的结果是一个包含了很多属性的对象，而标签的名字就存在category_name的属性中，因此需要修改模板中的van-tab标签中的key和title分别赋值为item.category_id和item.category_name 关键代码如下：

<!--Home.vue-->
 <van-tab
    v-for="item in categoryList"
    :key="item.category_id"
    :title="item.category_name"
  >
    <div class="tab-list-content">{{ item.category_name }}列表</div>
  </van-tab>

// ...
import api from "../api/juejinapi";
// ...

setup() {
    const state = reactive({ active: 1, categoryList: [] });
    api
      .queryCategoryBriefs()
      .then((res) => {
        console.log(res.data.data);
        state.categoryList = res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });

    return {
      ...toRefs(state),
      image,
};

总结

好了通过以上简单几步就实现了数据的动态获取及绑定了，效果图如下，从表面上看虽然跟上一章中的一样，但实际上这次的数据是动态获取及绑定的哦。本次分享从结果上来看跟上一次没有什么差别，但是在背后我们还是做了不少工作的，比如后端服务接口的封装，axios异步请求库的二次封装以及标签数据的动态绑定等等。好了小伙伴们本次分享就到这里了。下一次将给大家分享点击搜索框跳转到新页面及实现签到功能。