單頁面部落格從前端到後端

whistlem發表於2019-02-16
前端後端

不會後端的前端，不會寫單頁面應用…

單頁面應用的概念已經被提出很長時間了，無論是基於 vue, angular 還是 react，相信大家或是耳濡目染，或是設身處地都有所體會。說到底，當自己獨自開發從搭建開發環境，到前端的每一個元件，到動作互動，再到和後端的資料互動，難免遇到不少問題。在這個過程中，值得記錄每一個需要學習、分享的知識點。

如果還沒有自己實現過一個單頁應用，那可以參考我的一起 交流學習
如果已經輕車熟路，歡迎給我 挑毛病

SITUATION

初衷也就是上面所提到的，綜合自己所學的知識，打通前後端。不過結果讓人欣喜讓人憂。當初以為自己會個 react， 寫個應用就不得了。當把自己作為一個偽全棧工程師去踩一個個的坑時，恍然發現路漫漫其修遠。

TASK

作為一個前端，不滿足於使用 hexo 來生成自己的部落格 = =，至少該是 Gatsby 。那就可以開發一個讓自己賞心悅目的部落格系統。

ACTION

搭建開發環境

前端基於 react 、antd、dva等 react 生態圈等框架，構建工具首選必然是 webpack。相信使用腳手架來開發的時候，遇到了問題，還是需要扒一扒原始碼，我們不如自己來搭建開發環境，以熟悉 webpack 的每個配置。

引入 Dva + Antd 實現前端互動

基於 koa@2 + mongodb + passport 來實現後端邏輯

如果後端只是簡單的增刪改查，那有違我們的初衷。要實現基本的 Auth2.0 許可權認證，還要進行基本的業務邏輯和資料層分離等。

引入 Draftjs 來實現富文字編輯器

Draft.js 是 Facebook 開源的用於構建富文字編輯器的 JavaScript 框架。你可以用它實現像 Bear 筆記那樣的 web 端編輯器，極力推薦。

RESULT

一開始後端我用的是 express，如果還不熟悉 nodejs 框架的朋友可以參考這個 github倉庫，上手 express。之後我用了 koa 重構了整個專案，在用 async 函式梳理非同步流時，竊喜。
在寫下這篇文章過程中，突然發現自己的這個專案已經有兩顆星星了，很高興！這幾天的疲憊全無！

專案我已經部署上線，檢視 演示地址
測試賬號：{username: `test`, password: `test`}

預期計劃

  1. 前後端同構，服務端渲染

  2. 引入 flow 來對 js 做靜態型別的檢查

  3. 加入測試程式碼

  4. 完善文件

最後

歡迎來 star, pr, issues…

相關文章