成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

單頁(yè)面博客從前端到后端

whinc / 3274人閱讀

摘要：說(shuō)到底，當(dāng)自己獨(dú)自開(kāi)發(fā)從搭建開(kāi)發(fā)環(huán)境，到前端的每一個(gè)組件，到動(dòng)作交互，再到和后端的數(shù)據(jù)交互，難免遇到不少問(wèn)題。單頁(yè)面博客從前端到后端基于和的權(quán)限驗(yàn)證與的設(shè)計(jì)引入來(lái)實(shí)現(xiàn)富文本編輯器是開(kāi)源的用于構(gòu)建富文本編輯器的框架。

不會(huì)后端的前端，不會(huì)寫(xiě)單頁(yè)面應(yīng)用...

單頁(yè)面應(yīng)用的概念已經(jīng)被提出很長(zhǎng)時(shí)間了，無(wú)論是基于 vue, angular 還是 react，相信大家或是耳濡目染，或是設(shè)身處地都有所體會(huì)。說(shuō)到底，當(dāng)自己獨(dú)自開(kāi)發(fā)從搭建開(kāi)發(fā)環(huán)境，到前端的每一個(gè)組件，到動(dòng)作交互，再到和后端的數(shù)據(jù)交互，難免遇到不少問(wèn)題。在這個(gè)過(guò)程中，值得記錄每一個(gè)需要學(xué)習(xí)、分享的知識(shí)點(diǎn)。

如果還沒(méi)有自己實(shí)現(xiàn)過(guò)一個(gè)單頁(yè)應(yīng)用，那可以參考我的一起 交流學(xué)習(xí)
如果已經(jīng)輕車(chē)熟路，歡迎給我 挑毛病
SITUATION

初衷也就是上面所提到的，綜合自己所學(xué)的知識(shí)，打通前后端。不過(guò)結(jié)果讓人欣喜讓人憂。當(dāng)初以為自己會(huì)個(gè) react， 寫(xiě)個(gè)應(yīng)用就不得了。當(dāng)把自己作為一個(gè)偽全棧工程師去踩一個(gè)個(gè)的坑時(shí)，恍然發(fā)現(xiàn)路漫漫其修遠(yuǎn)。

TASK

作為一個(gè)前端，不滿足于使用 hexo 來(lái)生成自己的博客 = =，至少該是 Gatsby 。那就可以開(kāi)發(fā)一個(gè)讓自己賞心悅目的博客系統(tǒng)。

ACTION 搭建開(kāi)發(fā)環(huán)境

前端基于 react 、antd、dva等 react 生態(tài)圈等框架，構(gòu)建工具首選必然是 webpack。相信使用腳手架來(lái)開(kāi)發(fā)的時(shí)候，遇到了問(wèn)題，還是需要扒一扒源代碼，我們不如自己來(lái)搭建開(kāi)發(fā)環(huán)境，以熟悉 webpack 的每個(gè)配置。

【單頁(yè)面博客從前端到后端】環(huán)境搭建

引入 Dva + Antd 實(shí)現(xiàn)前端交互

【單頁(yè)面博客從前端到后端】基于 DVA+ANTD 搭建博客前后臺(tái)界面

基于 koa@2 + mongodb + passport 來(lái)實(shí)現(xiàn)后端邏輯

如果后端只是簡(jiǎn)單的增刪改查，那有違我們的初衷。要實(shí)現(xiàn)基本的 Auth2.0 權(quán)限認(rèn)證，還要進(jìn)行基本的業(yè)務(wù)邏輯和數(shù)據(jù)層分離等。

【單頁(yè)面博客從前端到后端】基于 Passport 和 Koa@2 的權(quán)限驗(yàn)證與 DVA 的 Model 設(shè)計(jì)

引入 Draftjs 來(lái)實(shí)現(xiàn)富文本編輯器

Draft.js 是 Facebook 開(kāi)源的用于構(gòu)建富文本編輯器的 JavaScript 框架。你可以用它實(shí)現(xiàn)像 Bear 筆記那樣的 web 端編輯器，極力推薦。

RESULT

一開(kāi)始后端我用的是 express，如果還不熟悉 nodejs 框架的朋友可以參考這個(gè) github倉(cāng)庫(kù)，上手 express。之后我用了 koa 重構(gòu)了整個(gè)項(xiàng)目，在用 async 函數(shù)梳理異步流時(shí)，竊喜。
在寫(xiě)下這篇文章過(guò)程中，突然發(fā)現(xiàn)自己的這個(gè)項(xiàng)目已經(jīng)有兩顆星星了，很高興！這幾天的疲憊全無(wú)！

項(xiàng)目我已經(jīng)部署上線，查看 演示地址
測(cè)試賬號(hào)：{username: "test", password: "test"}

預(yù)期計(jì)劃

前后端同構(gòu)，服務(wù)端渲染

引入 flow 來(lái)對(duì) js 做靜態(tài)類(lèi)型的檢查

加入測(cè)試代碼

完善文檔

最后

歡迎來(lái) star, pr, issues…

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83502.html

相關(guān)文章

  • 【單頁(yè)面博客從前端到后端】基于 DVA+ANTD 搭建博客前后臺(tái)界面

    摘要：在的的配置中添加自定義主題由腳手架和官網(wǎng)介紹，我們已經(jīng)自己配置并新建好了主題文件。單頁(yè)面博客從前端到后端環(huán)境搭建單頁(yè)面博客從前端到后端基于搭建博客前后臺(tái)界面單頁(yè)面博客從前端到后端基于和的權(quán)限驗(yàn)證與的設(shè)計(jì) 在上篇文章我們已經(jīng)搭建好了基礎(chǔ)的開(kāi)發(fā)環(huán)境，接下來(lái)會(huì)介紹如何引入 DVA 和 ANTD ，以及在引入過(guò)程中需要注意的問(wèn)題。這里只會(huì)詳細(xì)的書(shū)寫(xiě)部分組件，其他的組件都是大同小異。你可以在 g...

    zqhxuyuan 評(píng)論0 收藏0

  • 【單頁(yè)面博客從前端到后端】環(huán)境搭建

    摘要：的配置其中就不多說(shuō)會(huì)解決更改組件的時(shí)熱更新直接刷新頁(yè)面的問(wèn)題。 工欲善其事，必先利其器。單頁(yè)面應(yīng)用的開(kāi)發(fā)和生產(chǎn)環(huán)境涉及文件的編譯、壓縮、打包、合并等，目前前端最流行的莫過(guò)于 webpack 。為了深入了解 webpack 以及其相關(guān)插件，我們決定不采用腳手架，自己來(lái)搭建基于 webpack 的開(kāi)發(fā)和生產(chǎn)環(huán)境。 基礎(chǔ)環(huán)境 nodejs的安裝： 移步官網(wǎng) 建議使用nvm來(lái)管理nodejs...

    wizChen 評(píng)論0 收藏0

  • 【單頁(yè)面博客從前端到后端】基于 Passport 和 Koa@2 的權(quán)限驗(yàn)證與 DVA 的 Mode

    摘要：我們就采用這種方式來(lái)進(jìn)行權(quán)限驗(yàn)證。這里我還是使用在中的下新增單頁(yè)面博客從前端到后端環(huán)境搭建單頁(yè)面博客從前端到后端基于搭建博客前后臺(tái)界面單頁(yè)面博客從前端到后端基于和的權(quán)限驗(yàn)證與的設(shè)計(jì) 基于 JWT 的權(quán)限驗(yàn)證 這里有一篇文章描述的已經(jīng)非常詳盡，闡述了 JWT 驗(yàn)證相比較傳統(tǒng)的持久化 session 驗(yàn)證的優(yōu)勢(shì)，以及基于 angular 和 express 驗(yàn)證的簡(jiǎn)單流程。 基于Json ...

    luodongseu 評(píng)論0 收藏0

  • 單頁(yè)應(yīng)用的部署方案

    摘要：所以單頁(yè)應(yīng)用的部署，需要將所有的頁(yè)面請(qǐng)求都返回，瀏覽器下載了后會(huì)自動(dòng)解析并導(dǎo)航到對(duì)應(yīng)頁(yè)面。總結(jié)單頁(yè)應(yīng)用與以前的常規(guī)多頁(yè)面應(yīng)用還是有區(qū)別的，開(kāi)發(fā)過(guò)程與后端解耦了，同時(shí)會(huì)出現(xiàn)跨域鑒權(quán)以及應(yīng)用部署的問(wèn)題。 本文同步發(fā)布于我的個(gè)人博客上 - 單頁(yè)應(yīng)用的部署方案 本文主要簡(jiǎn)單講一下單頁(yè)應(yīng)用的開(kāi)發(fā)及部署方法，默認(rèn)你懂一些服務(wù)端知識(shí)及nginx知識(shí)，如果有任何可以在下方評(píng)論留言。 單頁(yè)應(yīng)用 SPA（...

    yanbingyun1990 評(píng)論0 收藏0

  • node-blog：用 node 搭建的個(gè)人開(kāi)源博客

    摘要：項(xiàng)目地址這個(gè)項(xiàng)目是為了學(xué)習(xí)而建的，從前端到后端一手包辦。相對(duì)來(lái)說(shuō)，還是有一定難度的，適合有一定編程基礎(chǔ)的人進(jìn)階學(xué)習(xí)。教程一教程二在安裝完后，克隆項(xiàng)目。 項(xiàng)目地址 這個(gè)項(xiàng)目是為了學(xué)習(xí) node 而建的，從前端到后端一手包辦。相對(duì)來(lái)說(shuō)，還是有一定難度的，適合有一定編程基礎(chǔ)的人進(jìn)階學(xué)習(xí)。 如果有問(wèn)題，歡迎提 issues 注意，本項(xiàng)目的前后端代碼都是放在一起的，前端代碼放在 src 目錄，后...

    guyan0319 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<