如果沒有看前兩篇的童鞋，可以看看前兩篇文章的內(nèi)容，雖然寫的一般，但是起碼也是一個(gè)重?zé)o到有的過程。
直接進(jìn)主題
- 到這里，其實(shí)我們的前端頁面布局，后臺nodejs服務(wù)程序已經(jīng)有了，現(xiàn)在就是寫頁面和調(diào)用后臺服務(wù)程序去處理數(shù)據(jù)了。
現(xiàn)在可以看看練習(xí)項(xiàng)目的功能點(diǎn)了，其實(shí)很簡單啦：
1、顯示文章列表
2、添加文章，當(dāng)然就包括：格式、圖片、鏈接啦
3、簡單的登錄控制（這個(gè)超級簡單，只是做了一個(gè)管理員賬號的登錄）
說明
文章列表（只說重點(diǎn)部分，其他看源碼吧）
1、查詢數(shù)據(jù)庫（廢話，不查數(shù)據(jù)庫難道寫成靜態(tài)的呀，哈哈）
2、顯示列表：
2.1、marked：解析makedown格式
2.2、highlight：高亮代碼
2.3、以上兩個(gè)組件是重點(diǎn)部分，一下代碼重點(diǎn)為怎么使用：
import marked from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/arta.css';
--------------------------------這里放在頁面渲染中-------------------------------------
marked(“這里是數(shù)據(jù)中的內(nèi)容數(shù)據(jù)”);
----------------------------這里放在頁面加載完成后的生命周期中-----------------
//顯示代碼高亮
marked.setOptions({
highlight: code => hljs.highlightAuto(code).value,
});
添加文章
1、react-simplemde-editor：makdown組件
import SimpleMDE from 'react-simplemde-editor';
import "simplemde/dist/simplemde.min.css";
--------------------------------這里放在頁面渲染中-------------------------------------
<SimpleMDE
id="your-custom-id"
label=""
options={{
autofocus: true,
spellChecker: false,
gfm: true,
pedantic: false,
sanitize: false,
tables: true,
breaks: true,
smartLists: true,
smartypants: true,
}}
value={this.state.textValue}
onChange={this.handleChange}
/>
參數(shù)請查看官方文檔
簡單的登錄控制
1、因?yàn)槭蔷毩?xí)版本，這里直接將管理賬號手動添加到了mysql
2、nodejs通過查詢驗(yàn)證對應(yīng)的賬號數(shù)據(jù)，將數(shù)據(jù)保存在cookie中
這里不做詳細(xì)說明，不清楚請自行nodejs學(xué)習(xí)
總結(jié)
- 雖然該項(xiàng)目只是作為學(xué)習(xí)react一個(gè)初級階段的項(xiàng)目，并沒有采用高深的組件和技術(shù)，但是感覺作為一個(gè)練習(xí)項(xiàng)目還是可以用的。并且很多react其他好用的組件其實(shí)只會在需要的時(shí)候才會去用到。什么時(shí)候用，在做項(xiàng)目 的時(shí)候其實(shí)自然就知道了。
- 其實(shí)該3個(gè)章節(jié)不算教程，僅僅是一個(gè)學(xué)習(xí)筆記而已。
結(jié)尾語
- react是個(gè)好東西，后期也會繼續(xù)學(xué)習(xí)和了解，還有很多東西沒了解清楚
- 因?yàn)楣卷?xiàng)目原因，其實(shí)最終項(xiàng)目中會使用vuejs，畢竟項(xiàng)目不算特別大，需要快速開發(fā)完成。
該系列的代碼鏈接
nodejs：https://github.com/522011796/nodeApi
react：https://github.com/522011796/react-demo
demo演示地址
react: http://www.rickycloud.cn/（已經(jīng)重新替換為vuejs版）
vuejs: https://www.rickycloud.cn/
