【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 签到状态动态绑定在昨天的分享中我们实现了对搜索组

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

前言

在昨天的分享中我们实现了对搜索组件的分析和封装，同时还实现了首页和搜索页的互相切换，关于搜索页面的功能我们后面再具体实现。我们继续来实现首页右上角签到状态的动态获取及绑定。今天要实现的主要功能点如下：

官方接口api分析
服务端API封装
签到状态动态绑定

官方接口分析

在实现具体功能前，我们先来打开PC端的【签到赢好礼】页面分析一下在整个签到流程中都将会用到哪些接口。如下图所示：效果图当我们打开签到日历页面时，会请求如上图所示的这么多后台API，而通过点击每个API的返回数据我们可以分析得知“在本次分享中我们可能会用到如下一些接口以及每个接口的作用”：

get_counts：get请求，用于获取连续签到天数和累计签到天数（api.juejin.cn/growth_api/…
get_cur_point：get请求，用于获取当前获取的总矿石数（api.juejin.cn/growth_api/…
get_today_status：get请求，用于获取签到状态，值为true或false，标识是否已签到（api.juejin.cn/growth_api/…
get_rule_text：get请求，用于获取签到规则说明（api.juejin.cn/growth_api/…
get_coder_calendar：get请求，用于获取右下角的签到日历，如（宜穿拖鞋，再忙。。。。）（api.juejin.cn/growth_api/…
get_by_month：get请求，获取中间部分的签到日历及矿石数（api.juejin.cn/growth_api/…
get_cur_supp：get请求，暂时不确定这个接口的作用，猜测可能是用于获取补签卡数量的（api.juejin.cn/growth_api/… 另外，除了上面这些接口外，还少了一个本节中最核心的接口 - 签到接口。在未签到状态下，当我们点击右上角的签到按钮时会自动发起签到功能，因此我们还需要分析出签到功能所请求的后台接口。同理也是通过浏览器访问PC端的签到功能从而分析得出签到功能的接口：（这里就不在截图了） check_in：post请求，用于实现签到功能（api.juejin.cn/growth_api/…

服务端API封装

上面已经分析出了我们将要用到的一些接口，但是这些接口不能在前端项目中直接通过axios来请求，得需要借助后端服务中转一下，因此我们需要把这些接口封装一下。这里还是基于前面我们已经搭建好的Nodejs服务端项目来实现。仔细观察一下上面这些get请求接口地址的特点，我们会发现所有地址的前半部分都是**“api.juejin.cn/growth_api/…** 和 uuid，因此我们在封装这些接口之前可以先将这些相同的数据统一定义一下。具体实现思路如下：

打开服务端NodeJs项目（源码可到Github上下载获取），并找到routers/juejin.js文件
在文件头部分别定义三个变量：baseURL、aid和uuid
分别定义以上接口对应的路由本文仅展示get_today_status和check_in两个接口对应的封装源码，其它接口请自行补充。

// routers/juejin.js
const baseUrl = 'https://api.juejin.cn/growth_api/v1/',
	aid = 2608,
	uuid = '***********'//根据自己的掘金账号查看，每个人的都不相同
router.get('/getTodayStatus', async(ctx, next) =>{
	let {data} = await axios.get(`${baseUrl}get_today_status?aid=${aid}&uuid=${uuid}`);
	ctx.body = data;
});

 router.post('/checkin',async (ctx, next)=>{
 	let {data} = await axios({
        url: `${baseUrl}check_in',
        method: 'post',
        headers: {
            cookie: MY_COOKIE
        };
	ctx.body = data;
 })

签到状态动态绑定

打开掘金官方的APP，进入首页我们会发现右上角的签到是有两个状态的：

如果已经签到则会显示一个带√图标，同时显示【已签】两个字
如果还未签到则会显示一个日历图标，同时显示【签到】两个字并且在字的右上角还有个小红点需求已经明确，后台获取状态数据的接口也已经封装好了，接下来就对我们的签到状态进行改造，实现状态的动态绑定。
打开views/Home.vue，在<template #right>中将原来的van-icon和【已签】两个字用div标签包裹起来，同时给div添加一个v-if指令
紧接着上面的div再添加一个带有v-else指令的div，同时再在该div中添加一个van-icon和van-badge两个子组件，分别用于显示日历图标和【签到】两个字及小红点
在Home.vue的js代码中定义一个响应式变量“todayStatus”，默认值为false
在setup方法中请求getTodayStatus后台接口，并将返回结果赋值给todayStatus

<!--Home.vue-->
<template #right>
 <div v-if="todayStatus"><van-icon name="sign" size="28" />已签</div>
 <div v-else>
    <van-icon name="notes-o" size="24" /><van-badge dot>签到</van-badge>
 </div>
</template>

setup() {
    // todayStatus 为本节新增响应式属性
    const state = reactive({ active: 1, categoryList: [], todayStatus: false });

        // 获取签到状态
    api.getTodayStatus().then((res) => {
      state.todayStatus = res.data;
    });
  },

这个时候当我们运行起来发现，并没有得到我们想要的效果，将返回结果打印输出到控制台发现，返回的data一直都是false，返回的错误信息是：must login（如下图）。这是因为涉及到获取跟账号相关的数据时必须要登录后才能获取，但是我们在封装接口时并没有传递任何登录信息，因此根本无法获取到数据。解决办法也很简单：我们只需要将cookie作为请求头中的参数传过去即可。由于cookie信息有一大坨，我们可以将cookie信息单独保存在utils/config.js文件中，改造后的服务端接口如下：

// Nodejs项目
utils/config.js
module.exports = {
    MY_COOKIE:'XXXX'//自己根据浏览器获取到的cookie信息
}

// routers/juejin.js
const {MY_COOKIE} = require('../utils/config');
const baseUrl = 'https://api.juejin.cn/growth_api/v1/',
	aid = 2608,
	uuid = '***********'//根据自己的掘金账号查看，每个人的都不相同
router.get('/getTodayStatus', async(ctx, next) =>{
	let {data} = await axios.get(`${baseUrl}get_today_status?aid=${aid}&uuid=${uuid}`,{headers:{cookie:MY_COOKIE}});
	ctx.body = data;
});

 router.post('/checkin',async (ctx, next)=>{
 	let {data} = await axios.post(`${baseUrl}check_in`,{headers:{cookie:MY_COOKIE}});
	ctx.body = data;
 })

这时我们再次运行起来发现已经可以成功获取到数据了，效果图如下：

总结

本次分享中我们分析并封装了跟签到相关的一些接口，同时还根据get_today_status接口实现了首页右上角签到状态的动态绑定。今天的分享就先到这里来，后面一章中将实现点击签到图标实现签到功能，以及签到成功后跳转到签到日历页面。喜欢的小伙伴欢迎点赞加关注哦！