React+Koa2搭建的简约我的网站

浏览地址：www.xpy.pub

年末，公司项目的迭代也差很少告尾声了，就想着学点什么。

做为一个程序员，没有我的网站可不行。

就去阿里云购了台服务器。前端选用React+Ts缘由是本身不熟，正好趁这个机会练练手。服务器端选用Koa2缘由也差很少，之前通常会选用Flask来开发。
注：致使了代码写的质量很不满意（后续确定慢慢重构！）

写代码前参考了好多大佬的我的网站。发现绝大多数都是功能不少，业务很强大，我就不走这个路线了（偷懒了）。

---

项目开始

• 分为4个模块：我的主页、自我介绍、博客、留言板

1. 我的主页: 放了我的的一些基本信息，作了层输入密码才能看到真实信息的处理，毕竟也算是隐私吧。
2. 自我介绍: 至关于一句话介绍下本身。
3. 博客: 就放了一些连接，等本身之后博客多了，就加个完整的。
4. 留言板: 其实就是写的一个弹幕，看起来更加生动。

部分代码

• 首页下雪花的代码

createSnow() {
    return new Promise((resolve) => {
      let shape =this.random(15, 50) + "px"
      let snowPng = snowPng1
      switch (this.random(0,2)){
        case 0:
          snowPng = snowPng1;
          break;
        case 1:
          snowPng = snowPng2;
          break;
        case 2:
          snowPng = snowPng3;
          break;
        default:
          snowPng = snowPng1;
      }
      this.state.images.push({
        src: snowPng,
        width: shape,
        height: shape,
        top: -50,
        left: this.position()
      })
      resolve(this.state.images)
    })
  }
  snowAction(index: number) {
    this.createSnow().then((item:any):void => {
      let timer = setInterval(_ => {
        if(item[index]){
          item[index].top += 2
          this.setState({
            images: this.state.images
          })
          if(this.state.scrollArea[0]){
            if(item[index].top >= parseInt(this.state.scrollArea[0].offsetHeight)-20){
              this.state.images.splice(index,1,{})
              this.setState({
                images: this.state.images
              })
              clearInterval(timer)
            }
          }
        }
      },10)
    })
  }

注：开个定时器跑snowAction就会生成大小不同的雪花了。

• 我的介绍页写信效果代码

getResume().then(res => {
  let data = res.data // 接口拿到的数据
  let that = this
  let i: number = 0;
  let content:string = data.context
  function write ():void {
    if(i <= content.length){
      that.setState({
        displayContent: content.slice(0, i++) + '_',
        timer: setTimeout(write, 50)
      })
    }else{
      that.setState({
        displayContent: content
      })
      clearTimeout(that.state.timer)
    }
  };
  write()
})

注：getResume是在调接口。

• 弹幕待优化，代码先用截图代替了。
• 
• 
• 

感谢

提早祝你们新年快乐，头发茂密！