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是在调接口。

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

感谢

提前祝大家新年快乐，头发茂密！