資訊專欄INFORMATION COLUMN
摘要：說到底，當(dāng)自己獨自開發(fā)從搭建開發(fā)環(huán)境，到前端的每一個組件，到動作交互，再到和后端的數(shù)據(jù)交互，難免遇到不少問題。單頁面博客從前端到后端基于和的權(quán)限驗證與的設(shè)計引入來實現(xiàn)富文本編輯器是開源的用于構(gòu)建富文本編輯器的框架。
不會后端的前端，不會寫單頁面應(yīng)用...
單頁面應(yīng)用的概念已經(jīng)被提出很長時間了，無論是基于 vue, angular 還是 react，相信大家或是耳濡目染，或是設(shè)身處地都有所體會。說到底，當(dāng)自己獨自開發(fā)從搭建開發(fā)環(huán)境，到前端的每一個組件，到動作交互，再到和后端的數(shù)據(jù)交互，難免遇到不少問題。在這個過程中，值得記錄每一個需要學(xué)習(xí)、分享的知識點。
SITUATION如果還沒有自己實現(xiàn)過一個單頁應(yīng)用，那可以參考我的一起 交流學(xué)習(xí)
如果已經(jīng)輕車熟路，歡迎給我 挑毛病
初衷也就是上面所提到的，綜合自己所學(xué)的知識，打通前后端。不過結(jié)果讓人欣喜讓人憂。當(dāng)初以為自己會個 react， 寫個應(yīng)用就不得了。當(dāng)把自己作為一個偽全棧工程師去踩一個個的坑時，恍然發(fā)現(xiàn)路漫漫其修遠(yuǎn)。
TASK作為一個前端，不滿足于使用 hexo 來生成自己的博客 = =，至少該是 Gatsby 。那就可以開發(fā)一個讓自己賞心悅目的博客系統(tǒng)。
ACTION 搭建開發(fā)環(huán)境前端基于 react 、antd、dva等 react 生態(tài)圈等框架，構(gòu)建工具首選必然是 webpack。相信使用腳手架來開發(fā)的時候，遇到了問題，還是需要扒一扒源代碼，我們不如自己來搭建開發(fā)環(huán)境，以熟悉 webpack 的每個配置。
【單頁面博客從前端到后端】環(huán)境搭建
引入 Dva + Antd 實現(xiàn)前端交互【單頁面博客從前端到后端】基于 DVA+ANTD 搭建博客前后臺界面
基于 koa@2 + mongodb + passport 來實現(xiàn)后端邏輯如果后端只是簡單的增刪改查，那有違我們的初衷。要實現(xiàn)基本的 Auth2.0 權(quán)限認(rèn)證，還要進(jìn)行基本的業(yè)務(wù)邏輯和數(shù)據(jù)層分離等。
【單頁面博客從前端到后端】基于 Passport 和 Koa@2 的權(quán)限驗證與 DVA 的 Model 設(shè)計
引入 Draftjs 來實現(xiàn)富文本編輯器Draft.js 是 Facebook 開源的用于構(gòu)建富文本編輯器的 JavaScript 框架。你可以用它實現(xiàn)像 Bear 筆記那樣的 web 端編輯器，極力推薦。
RESULT一開始后端我用的是 express，如果還不熟悉 nodejs 框架的朋友可以參考這個 github倉庫，上手 express。之后我用了 koa 重構(gòu)了整個項目，在用 async 函數(shù)梳理異步流時，竊喜。
在寫下這篇文章過程中，突然發(fā)現(xiàn)自己的這個項目已經(jīng)有兩顆星星了，很高興！這幾天的疲憊全無！
項目我已經(jīng)部署上線，查看 演示地址
測試賬號：{username: "test", password: "test"}
前后端同構(gòu)，服務(wù)端渲染
引入 flow 來對 js 做靜態(tài)類型的檢查
加入測試代碼
完善文檔
最后歡迎來 star, pr, issues…
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/83502.html
摘要：在的的配置中添加自定義主題由腳手架和官網(wǎng)介紹，我們已經(jīng)自己配置并新建好了主題文件。單頁面博客從前端到后端環(huán)境搭建單頁面博客從前端到后端基于搭建博客前后臺界面單頁面博客從前端到后端基于和的權(quán)限驗證與的設(shè)計 在上篇文章我們已經(jīng)搭建好了基礎(chǔ)的開發(fā)環(huán)境，接下來會介紹如何引入 DVA 和 ANTD ，以及在引入過程中需要注意的問題。這里只會詳細(xì)的書寫部分組件，其他的組件都是大同小異。你可以在 g...
摘要：的配置其中就不多說會解決更改組件的時熱更新直接刷新頁面的問題。 工欲善其事，必先利其器。單頁面應(yīng)用的開發(fā)和生產(chǎn)環(huán)境涉及文件的編譯、壓縮、打包、合并等，目前前端最流行的莫過于 webpack 。為了深入了解 webpack 以及其相關(guān)插件，我們決定不采用腳手架，自己來搭建基于 webpack 的開發(fā)和生產(chǎn)環(huán)境。 基礎(chǔ)環(huán)境 nodejs的安裝： 移步官網(wǎng) 建議使用nvm來管理nodejs...
摘要：我們就采用這種方式來進(jìn)行權(quán)限驗證。這里我還是使用在中的下新增單頁面博客從前端到后端環(huán)境搭建單頁面博客從前端到后端基于搭建博客前后臺界面單頁面博客從前端到后端基于和的權(quán)限驗證與的設(shè)計 基于 JWT 的權(quán)限驗證 這里有一篇文章描述的已經(jīng)非常詳盡，闡述了 JWT 驗證相比較傳統(tǒng)的持久化 session 驗證的優(yōu)勢，以及基于 angular 和 express 驗證的簡單流程。 基于Json ...
摘要：所以單頁應(yīng)用的部署，需要將所有的頁面請求都返回，瀏覽器下載了后會自動解析并導(dǎo)航到對應(yīng)頁面?？偨Y(jié)單頁應(yīng)用與以前的常規(guī)多頁面應(yīng)用還是有區(qū)別的，開發(fā)過程與后端解耦了，同時會出現(xiàn)跨域鑒權(quán)以及應(yīng)用部署的問題。 本文同步發(fā)布于我的個人博客上 - 單頁應(yīng)用的部署方案 本文主要簡單講一下單頁應(yīng)用的開發(fā)及部署方法，默認(rèn)你懂一些服務(wù)端知識及nginx知識，如果有任何可以在下方評論留言。 單頁應(yīng)用 SPA（...
摘要：項目地址這個項目是為了學(xué)習(xí)而建的，從前端到后端一手包辦。相對來說，還是有一定難度的，適合有一定編程基礎(chǔ)的人進(jìn)階學(xué)習(xí)。教程一教程二在安裝完后，克隆項目。 項目地址 這個項目是為了學(xué)習(xí) node 而建的，從前端到后端一手包辦。相對來說，還是有一定難度的，適合有一定編程基礎(chǔ)的人進(jìn)階學(xué)習(xí)。 如果有問題，歡迎提 issues 注意，本項目的前后端代碼都是放在一起的，前端代碼放在 src 目錄，后...
閱讀 3878·2021-11-12 10:34
閱讀 2865·2021-09-22 15:14
閱讀 851·2019-08-30 15:53
閱讀 3256·2019-08-30 12:53
閱讀 1373·2019-08-29 18:32
閱讀 2825·2019-08-29 16:41
閱讀 1123·2019-08-26 13:40
閱讀 1866·2019-08-23 18:07
