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

• 彈幕待優化，代碼先用截圖代替了。
• 
• 
• 

感謝

提早祝你們新年快樂，頭髮茂密！