使用react搭建簡單博客

omgdog 發(fā)布于2019-08-20 14:41 / 3572人閱讀

摘要：使用搭建簡單博客自己之前學習的時候只是跟著教程走了一遍，粗略的了解了一些概念。最近想搭建一個博客程序，實際演練一下。整體思路如果要搭建一個完整的博客的話，要做很多的工作。拆分好組件復用起來頁比較簡單。所以就是使用了一個全局的對象去管理數(shù)據(jù)。

使用react搭建簡單博客

自己之前學習react的時候只是跟著教程走了一遍，粗略的了解了一些概念。什么virtual-dom，單向數(shù)據(jù)流之類的。但是一致缺乏深入的實踐。最近想搭建一個博客程序，實際演練一下。

整體思路

如果要搭建一個完整的博客的話，要做很多的工作。數(shù)據(jù)存儲和解析、圖片的保存等等。在瀏覽react china論壇的時候，看到一種利用github issue作為數(shù)據(jù)源的方式。覺得這種方式
很實用，主要時解決了后端存儲問題。前端只需要調用api獲取數(shù)據(jù)，渲染數(shù)據(jù)就好了。

程序初始化的時候，會請求github的issues接口，數(shù)據(jù)請求完后，再初始化程序。

blog結構

項目是利用create-react-app搭建的，隱藏了很多配置，只需要寫好業(yè)務代碼。整個blog的框架比較簡單，只有兩個模塊：首頁和歸檔。主題是仿照hexo主題hexo-theme-apollo。
markdown渲染使用了ReactMarkdown。整個架構比較簡單，拆分好邏輯之后，基本上就是拼接各個component了。拆分好組件、復用起來頁比較簡單。項目結構如下：

blog
--src
  --component
    --header
    --footer
    --article
    --title
    --time
    --...
  --view
  --index.js
  --app.js

使用react，感受最深的是component的拆分。比如一個Article，要不要拆分出title和Body兩個組件，組件如何復用等等。拆分好component之后，剩下的工作就是針對各個頁面
拼接component了。

在考慮要不要使用redux或者mobx時，嘗試了一下，感覺太繁瑣。這個blog項目的結構也比較簡單，沒有復雜交互。所以就是使用了一個全局的對象去管理數(shù)據(jù)。

不足

首先是github的issue接口是限制訪問的，好像是60/h/ip，如果想要提高接口限制，就需要登錄授權，而登錄授權需要把token或者帳戶密碼放在前端代碼里，這樣做不安全。
所以現(xiàn)在可能會出現(xiàn)請求失敗的情況。而且github的issue是一次將所有數(shù)據(jù)返回的，如果博客內容過長的話，返回速度很慢。我測試了一下，請求3個比較長的issue，需要3s左右。

這在體驗上太不好了。后面有精力的話，可能會自己搭建一個后臺去解決。

其次是樣式還不太美觀，很多細節(jié)沒有處理好，移動端也沒有適配

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

轉載請注明本文地址：http://hztianpu.com/yun/81841.html

【單頁面博客從前端到后端】基于 DVA+ANTD 搭建博客前后臺界面

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

zqhxuyuan 2019-08-21 11:42 評論0 收藏0
create-react-app+react-app-rewired搭建viewport解決方案

摘要：一個中使用的。比如在項目中的引入它們在中加入以下代碼修改項目中的后記完結撒花本文簡單研究了一下如何搭建解決方案，如有錯誤歡迎指出。 create-react-app搭建vw-layout解決方案前言：我第一次接觸到vw適配移動端的方案是在大漠先生的博客里（如何在Vue項目中使用vw實現(xiàn)移動端適配）,強烈建議沒看過的朋友先去看一下這篇博客。vw解決方案早有耳聞，我也很想上手嘗試一下，所...

lbool 2019-08-23 12:30 評論0 收藏0
react 搭建博客---支持markdown的富文本編輯器

摘要：最近在學，準備配合搭個博客，找了很多富文本編輯器，都不是很適合用，后來看到一篇搭建博客的文章，里面使用的地址，完全就符合我的想法啊，界面簡潔大方還有預覽功能。最近在學nodejs，準備配合react+mongodb搭個博客，找了很多富文本編輯器，都不是很適合react用，后來看到一篇vue+node搭建博客的文章，里面使用的simplemde(github地址)，完全就符合我的想法啊...

tylin 2019-08-21 11:52 評論0 收藏0
前端相關大雜燴

摘要：希望幫助更多的前端愛好者學習。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發(fā)工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網(wǎng)絡請求功能的庫。前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評論0 收藏0
單頁面博客從前端到后端

摘要：說到底，當自己獨自開發(fā)從搭建開發(fā)環(huán)境，到前端的每一個組件，到動作交互，再到和后端的數(shù)據(jù)交互，難免遇到不少問題。單頁面博客從前端到后端基于和的權限驗證與的設計引入來實現(xiàn)富文本編輯器是開源的用于構建富文本編輯器的框架。不會后端的前端，不會寫單頁面應用... 單頁面應用的概念已經(jīng)被提出很長時間了，無論是基于 vue, angular 還是 react，相信大家或是耳濡目染，或是設身處地都有...

whinc 2019-08-20 17:20 評論0 收藏0