結合Node.js與React.js搭建論壇網站5
稍後記得把範例的mLab URL與帳號密碼改為你自己的
一樣先下載此單元的課程壓縮檔，然後解壓縮，之後使用
terminal進入後輸入npm install點選右上方選單之後新增應用程式，新增完後再次點擊選單並進入該應用程式控制主頁
1.然後進入設定把
應用程式網域與網站網址更改 2.然後把
應用程式編號複製並貼到App.js的SDK中
3.以及貼到Header.js 的
FB.init的appId
4.App.js:20 (加入FB SDK)
5.Header.js:46 (初始化與發出登入request)
6.api.js:120 (寫上FBLogin API)
我們在Main.js放入搜尋框
<TextField
style={{position: 'absolute', top: '50px', left: '15%'}}
hintText="搜尋文章..."
underlineStyle={{borderColor: '#EC407A'}}
onChange={(e) => this.searchArticle(e)}
/>
觸發
searchArticle(e) {
if (e.target.value.length < 1){ //如果輸入框空白
axios.get('/getArticle')
.then((res) => {
console.log(res.data);
this.setState({FilterArticles: res.data})
})
return
};
if(e.target.value.length > 20) {
sweetAlert('不可超過20字');
return
};
axios.get(`/articles/title/${e.target.value}`)
.then((res) => {
console.log(res.data);
this.setState({FilterArticles: res.data})
})
}
然後加入搜尋title的API
api.js:81
app.get('/articles/title/:title', (req,res) => {
let re = new RegExp(req.params.title, "g");
Post.find({title: re })
.then(data => {
res.end(JSON.stringify(data))
})
})
Chatroom.js:121
socket.on('chatRoomUsers', (res) => {
if(this.state.users !== res.user) {
this.setState({ users: res.user });
};
})
Chatroom.js:161
{
Object.keys(users).map(function(objectKey, index) {
let name = users[objectKey].name;
let avatar = users[objectKey].avatar;
return (
<IconButton key={index} tooltip={name}>
<Avatar src={avatar} />
</IconButton>
)
})
}
Last modified 2yr ago