大家好,我是寒草😈,一只工作一年半的草系码猿🐒
如果喜欢我的文章,可以关注 ➕ 点赞,与我一同成长吧~
加我微信:hancao97,邀你进群,一起学习交流,成为更优秀的工程师~
PK创意闹新春,我正在参加「春节创意投稿大赛」,详情请看:春节创意投稿大赛”
道除夕
这篇文章发布正好是除夕,一个特别的日子,下面有请寒草给大家表演一段才艺:
大哥大嫂过年好🌺
寒草祝福来送到🧧
又是新年辞旧岁🧨
点赞关注不能少👍
不能少~
我给大家表演的这一段叫做《新年求赞歌》,嘿嘿,如果大家觉得表演的还可以麻烦点赞关注不迷路,下面开始正文啦。
其实这篇文章算是我之前两篇文章的延续:
写这篇文章的时候我才刚刚开始写文,也是我在去年除夕夜的胡言乱语
这篇文章是我掘金关注数刚到 100 时的纪念文
本次除夕我也对这两篇文章的内容进行了整合,推出我今年的《开年辞》。
本文包括三个部分:
- 致开年
简要的说一说今年的畅想与展望,我说到开年总会想到《海贼王》的让和之国开国☀️
- 献星辰
送给我近 900 位掘金关注者一份礼物,你们如星辰✨般闪耀哦~
- 祝所愿
简简单单的祝福语,但是满怀祝愿🧧
致开年
马上新的一年就要来了,我作为一个元气满满的小屁孩,肯定是充满期望的,但是我的首要愿望比较宏大(其实也没多宏大),有那么一丢丢难以实现,那就是:
破圈!见下图,就是我的 b 站与掘金账号~
我想的就是掘金专注技术与经验分享,b 站尽可能展现我的个人特色,虽然我现在前端技术也不怎么样还喜欢各种各样的瞎折腾,但是我还是希望自己的分享不仅局限于前端工程师这个身份,而是作为:
一个热爱生活的技术人
即,我的分享要有技术,有生活,有我自己~我也希望更多的人喜欢寒草,让我们一起成长,一起经历。这肯定会很有成就感✨
想想就热血沸腾🔥,但是这个愿望我就不给自己设立多少多少粉丝的目标啦,毕竟也不是出于功利的目的,最重要的是开心~
还有一个愿望是旅行,我很想去更多的地方去看看:
- 南京
- 西安
- 成都
- 重庆
- 上海
- 天津
- 西藏
- 各种山
- 各种河
作为一个闲不下来的野孩子,我今年一定要好好撒欢儿🌟
最后一个愿望就是 —— 治愈焦虑,就像之前我的文章「寒草呈献」我的肩上是风,风上是闪烁的星群✨|致直面焦虑与本心的 2021所说,我在积极抗争焦虑,虽然困扰,但是我会胜利,虽然不一定是 2022 ,但是一定会越来越好。「这部分我就少说一点,毕竟大过年的,不能说不开心的🧨」
其实愿望总会有很多,比如技术更上一层楼,比如拥有好多好多财富,认识更多的美...咳...,最后一句当我没说过,大家也不要乱猜截图往我群里发💢
献星辰
好了,到献星辰章节了,各位闪耀的小星星们,没错,我说的就是你,正在阅读本篇文章的你,你就是闪耀的小星星之一🌟。
六七个月前,我发了一篇纪念文,用来纪念我掘金关注数破百,并制作了这张词云图:
过了半年,我的关注数来到了将近 900 人,也是感谢各位的支持与抬爱,于是我就去弄了一个贺卡:
我不太懂设计,只是跟随自己的感觉走,用中国结展现中国春节元素,并配有虎虎生威四个大字,再配上吉林大学校训:
求实创新,励志图强
也是希望大家虎年大吉,事业有成~但是我想不能如此简单,于是我就想往这个贺卡里面加点内涵,比如:
接下来的虎年,我们一起走过~
于是,我要在这个贺卡上写入我们每一个人的名字,895 位关注者加上我自己寒草,大家也可以去找找看有没有自己的名字~
下面我们一起实现一下这段代码吧,内容与我之前文章关注破百纪念:各位小伙伴,掘金的LOGO,请你们与我一起合个影吧~类似。
首先,新建项目,我们这是一个vue3
/vite
/ts
的项目,vite提供了很多模板,这里我们用vue-ts的模板新建一个vue3/ts项目:
yarn create @vitejs/app my-vue-app --template vue-ts
之后,我们下一步就是要调用掘金的接口,去获取关注者信息:
const initFollowers = async () => {
let isEnd: boolean = false;
let followers = [];
let cursor = 0;
while (!isEnd) {
const res = await axios.get(
`/user_api/v1/follow/followers?user_id=703340610597064&cursor=${cursor}&limit=${JUEJIN_LIMIT}`
);
isEnd = !res.data.data.hasMore;
cursor += JUEJIN_LIMIT;
followers.push(...res.data.data.data);
}
return followers;
};
这里我在调接口的时候发现 limit
大于 20 是没有效果的,也就是说最多一次拉取 20 个关注者信息,于是我写了一个循环,判断数据是否完全拉取完整,如果没有拉取完整,那么我继续调用接口拿下 20 条数据。这里我们会遇到这样一个问题,就是跨域
,所以需要去vite.config.ts
文件做一个配置:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
alias:{
'/@': path.resolve(__dirname, 'src')
},
server: {
proxy: {
'/user_api/v1': {
target: 'https://api.juejin.cn/',
changeOrigin: true // 这个属性设置为true!
}
}
}
})
ok,于是我们有了数据无非就是搞词云图了,这里这里用了echarts-wordcloud
,之后在图片加载完成之后去配置词云图~
const initChart = (chartList:Array<any>) => {
const _chartContainer = echarts.init(containerDom.value as HTMLElement);
const maskResource = new Image();
maskResource.src = springImageUrl;
maskResource.onload = function(){
setChartOption(_chartContainer, maskResource, chartList);
}
}
onMounted(async () => {
const followers = await initFollowers();
const _chartList = getChartsList(followers);
initChart(_chartList);
});
echarts词云图配置中和图片相关的是maskImage
属性
maskImage:maskResource
但是这样肯定不好看,所以我把原图作为了词云图的背景,并调节了透明度:
<template>
<div class="background"></div>
<div id="word-cloud__container" ref="containerDom"></div>
</template>
.background {
position: absolute;
height: 90vh;
width: 60vw;
top: 5vh;
left:20vw;
background-image: url('../assets/spring.png');
background-size: 100% 100%;
opacity: 0.8;
}
就这样,我想要的效果就实现了~
祝所愿
最后,请各位收下寒草的祝福语
✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
愿新的一年:
前方,荣光万丈;
身后,温暖一方。
烟火向星辰;
所愿皆成真。
✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨
各位的点赞与关注是我源源不断的动力,可以加我微信:hancao97,邀你进群,一起学习交流,成为更优秀的前端工程师~