單頁面博客從前端到後端

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

單頁面應用的概念已經被提出很長時間了，不管是基於 vue, angular 仍是 react，相信你們或是耳濡目染，或是設身處地都有所體會。說到底，當本身獨自開發從搭建開發環境，到前端的每個組件，到動做交互，再到和後端的數據交互，不免遇到很多問題。在這個過程當中，值得記錄每個須要學習、分享的知識點。

若是尚未本身實現過一個單頁應用，那能夠參考個人一塊兒 交流學習
若是已經輕車熟路，歡迎給我 挑毛病

SITUATION

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

TASK

做爲一個前端，不知足於使用 hexo 來生成本身的博客 = =，至少該是 Gatsby 。那就能夠開發一個讓本身賞心悅目的博客系統。

ACTION

搭建開發環境

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

• 【單頁面博客從前端到後端】環境搭建

引入 Dva + Antd 實現前端交互

• 【單頁面博客從前端到後端】基於 DVA+ANTD 搭建博客先後臺界面

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

若是後端只是簡單的增刪改查，那有違咱們的初衷。要實現基本的 Auth2.0 權限認證，還要進行基本的業務邏輯和數據層分離等。

• 【單頁面博客從前端到後端】基於 Passport 和 Koa@2 的權限驗證與 DVA 的 Model 設計

引入 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…