草系前端《开年辞》|烟火向星辰✨,所愿皆成真🧧

997 阅读6分钟

大家好,我是寒草😈,一只工作一年半的草系码猿🐒
如果喜欢我的文章,可以关注 ➕ 点赞,与我一同成长吧~
加我微信:hancao97,邀你进群,一起学习交流,成为更优秀的工程师~

PK创意闹新春,我正在参加「春节创意投稿大赛」,详情请看:春节创意投稿大赛

道除夕

这篇文章发布正好是除夕,一个特别的日子,下面有请寒草给大家表演一段才艺:

大哥大嫂过年好🌺
寒草祝福来送到🧧
又是新年辞旧岁🧨
点赞关注不能少👍

不能少~

我给大家表演的这一段叫做《新年求赞歌》,嘿嘿,如果大家觉得表演的还可以麻烦点赞关注不迷路,下面开始正文啦。

其实这篇文章算是我之前两篇文章的延续:

写这篇文章的时候我才刚刚开始写文,也是我在去年除夕夜的胡言乱语

这篇文章是我掘金关注数刚到 100 时的纪念文

本次除夕我也对这两篇文章的内容进行了整合,推出我今年的《开年辞》。
本文包括三个部分:

  • 致开年

简要的说一说今年的畅想与展望,我说到开年总会想到《海贼王》的让和之国开国☀️

  • 献星辰

送给我近 900 位掘金关注者一份礼物,你们如星辰✨般闪耀哦~

  • 祝所愿

简简单单的祝福语,但是满怀祝愿🧧

致开年

马上新的一年就要来了,我作为一个元气满满的小屁孩,肯定是充满期望的,但是我的首要愿望比较宏大(其实也没多宏大),有那么一丢丢难以实现,那就是:

破圈!见下图,就是我的 b 站与掘金账号~

image.png

image.png

我想的就是掘金专注技术与经验分享,b 站尽可能展现我的个人特色,虽然我现在前端技术也不怎么样还喜欢各种各样的瞎折腾,但是我还是希望自己的分享不仅局限于前端工程师这个身份,而是作为:

一个热爱生活的技术人

即,我的分享要有技术,有生活,有我自己~我也希望更多的人喜欢寒草,让我们一起成长,一起经历。这肯定会很有成就感✨

想想就热血沸腾🔥,但是这个愿望我就不给自己设立多少多少粉丝的目标啦,毕竟也不是出于功利的目的,最重要的是开心~

还有一个愿望是旅行,我很想去更多的地方去看看:

  • 南京
  • 西安
  • 成都
  • 重庆
  • 上海
  • 天津
  • 西藏
  • 各种山
  • 各种河

作为一个闲不下来的野孩子,我今年一定要好好撒欢儿🌟

最后一个愿望就是 —— 治愈焦虑,就像之前我的文章「寒草呈献」我的肩上是风,风上是闪烁的星群✨|致直面焦虑与本心的 2021所说,我在积极抗争焦虑,虽然困扰,但是我会胜利,虽然不一定是 2022 ,但是一定会越来越好。「这部分我就少说一点,毕竟大过年的,不能说不开心的🧨」

其实愿望总会有很多,比如技术更上一层楼,比如拥有好多好多财富,认识更多的美...咳...最后一句当我没说过,大家也不要乱猜截图往我群里发💢

献星辰

好了,到献星辰章节了,各位闪耀的小星星们,没错,我说的就是你,正在阅读本篇文章的你,你就是闪耀的小星星之一🌟。

六七个月前,我发了一篇纪念文,用来纪念我掘金关注数破百,并制作了这张词云图:

image.png

过了半年,我的关注数来到了将近 900 人,也是感谢各位的支持与抬爱,于是我就去弄了一个贺卡:

2021-01-31 (2).png

我不太懂设计,只是跟随自己的感觉走,用中国结展现中国春节元素,并配有虎虎生威四个大字,再配上吉林大学校训:

求实创新,励志图强

也是希望大家虎年大吉,事业有成~但是我想不能如此简单,于是我就想往这个贺卡里面加点内涵,比如:

接下来的虎年,我们一起走过~

于是,我要在这个贺卡上写入我们每一个人的名字,895 位关注者加上我自己寒草,大家也可以去找找看有没有自己的名字~

image.png

下面我们一起实现一下这段代码吧,内容与我之前文章关注破百纪念:各位小伙伴,掘金的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;
}

就这样,我想要的效果就实现了~

祝所愿

image.png

最后,请各位收下寒草的祝福语

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

愿新的一年:
前方,荣光万丈;
身后,温暖一方。
烟火向星辰;
所愿皆成真。

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

各位的点赞与关注是我源源不断的动力,可以加我微信:hancao97,邀你进群,一起学习交流,成为更优秀的前端工程师~