結合Node.js與React.js搭建論壇網站3
稍後記得把範例的mLab URL與帳號密碼改為你自己的
一樣先下載此單元的課程壓縮檔，然後解壓縮，之後使用
terminal進入後輸入npm install1.Main.js
<ArticleBlock articleClick={(e,id) => this.articleClick(e,id)} articles={this.props.articles} />
Main.js中的子元件ArticleBlock.js用來顯示主頁面所有文章
./components/utils/ArticleBlock.js
const ArticleBlock = (props) => (
<div style={style.articleContainer}>
{
props.articles.map((i) => (
<div onClick={(e) => props.articleClick(e,i._id)} className="articleBlock" style={style.article} key={i._id}>
<div style={style.avatar}>
<img height="50px" width="60px" src={i.avatar} />
</div>
<div style={style.title}>
{i.title}
</div>
<div style={style.date}>{(i.PostDate)}</div>
</div>
))
}
</div>
)
props.articles 來自Main.js中的mapStateToProp
2.Loading
參考:MyArticle.js
用來顯示讀取中狀態，之後可用條件判斷，如果是Ajax進行中就讓它顯示，讀取到資料再讓Loading消失
3.PersonalInfo.js
1.imgur API
2.signup api 在註冊時把信箱用md5加密，給avatar http://www.gravatar.com/
4.signup 後使用nodemailer 傳送郵件
5.我的文章頁面可修改文章(MyArticle.js)
Last modified 2yr ago