c
c
class
Search…
⌃K

結合Node.js與React.js搭建論壇網站2

稍後記得把範例的mLab URL與帳號密碼改為你自己的
這部分我們主要會結合Socket.io,並且當有人發表文章後各個使用者的畫面都會即時顯示
先下載此單元的壓縮檔,並且使用npm install
1.文章Schema
exports.Post = mongoose.model('articles', new mongoose.Schema({
posterAccount: String,
posterName: String,
title: String,
content: String,
PostDate: String
}));
2.發表文章API
app.post('/postArticle',function(req,res) {
if(typeof req.session.user === 'string') {
let post = new Post({
posterAccount: req.body.account,
posterName: req.body.name,
title: req.body.title,
content: req.body.content,
PostDate: new Date()
});
post.save()
.then(() => {
res.end('發表文章成功');
})
.catch(err => {
res.end('發表文章錯誤');
});
}
})
3./util/ArticleModal.js
axios.post('/postArticle', {
user: this.props.user.name,
account: this.props.user.account,
content: this.state.content,
title: this.state.title,
})
.then((response) => {
context.setState({ dialog:true })
context.setState({ dialogText:response.data })
socket.emit('postArticle',{data:'test'});
})
.catch((e) => {
console.log(e)
})
4.server.js
io.on('connection', function(socket){
console.log('a user connected');
socket.on('postArticle', function(){
post({
host: 'localhost',
port: '3001',
path: '/getArticle'
},'hi')
.then(function(data){
socket.broadcast.emit('updateArticle',JSON.parse(data));
socket.emit('updateArticle',JSON.parse(data));
});
});
});