Node.js實現(xiàn)用戶評論社區(qū)功能(體驗前后端開發(fā)的樂趣)
前面
接著上一節(jié)的內容來,今天我們要完成一個用Node開發(fā)后臺服務器,實現(xiàn)一個簡單的用戶評論社區(qū)。可以先看下效果圖:


開始建立項目文件夾comment-list,在里面新建一個public文件夾,public文件夾存放我們允許客戶端訪問的資源,這里是公開的。app.js文件是我們服務端代碼。

在index.html文件中放的是網(wǎng)站的首頁內容,這里采用bootstrap框架快速搭建??梢韵日幸恍┘贁?shù)據(jù),以便頁面渲染后看效果。核心代碼:
<ul class="list-group comment-list">
{{each comments}}
<li class="list-group-item">{{$value.content}}<span class="time">{{$value.time}}</span> <span class="name">{{$value.name}}</span></li>
{{/each}}
</ul>
這里采用js模板語法,等會會在服務端代碼中將模板字符串渲染成真實數(shù)據(jù)。當用戶訪問網(wǎng)站根目錄,服務端利用模板引擎解析渲染index.html,并且返回真實html字符串給瀏覽器解析。index.html會使用外鏈樣式文件和外鏈腳本文件,切記這里的文件地址不能寫相對路徑,必須寫url地址,看下面:
<link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="/public/css/index.css"> .... <script src="/public/js/index.js"></script>
文件地址以/public/開頭,這里的/表示請求的根路徑,瀏覽器在發(fā)送請求的時候會自動替換成http://127.0.0.1:3000/。

404.html主要用來處理用戶請求不存在的資源時,我們友情提示下即可。
post.html主要是發(fā)表評論頁面,這里同樣采用bootstrap快速搭建,同時也是要注意文件路徑問題。這里是一個表單,用來收集用戶評論的內容然后提交到后臺處理。表單提交數(shù)據(jù)可以根據(jù)form標簽中的action屬性指定提交地址,當點擊提交按鈕數(shù)據(jù)會發(fā)送到指定地址,由服務端接收處理即可。核心代碼如下:
<form action="/comment" method="GET" role="form" class="comment-form"> <legend>開始評論</legend> <div class="form-group"> <label for="name">你的大名:</label> <input type="text" name="name" class="form-control" id="name" placeholder="請輸入你的大名" required maxlength="10" minlength="2"> </div> <div class="form-group"> <label for="content">評論內容:</label> <textarea name="content" id="content" class="form-control" rows="6" required minlength="5" maxlength="10"></textarea> </div> <button type
編寫服務端代碼app.js
app.js中引入了node中http服務構建核心模塊,fs文件操作模塊,urlurl地址解析模塊。art-template第三方包主要用來服務端模板引擎,解析剛剛的index.html模板字符串。我們要注意url核心模塊中的parse方法,它可以將一個含有查詢字符串的url地址解析成一個對象,通過這個對象我們很容易得到用戶表單提交過來的數(shù)據(jù),即是查詢字符串的具體內容??梢钥匆韵卵菔荆?/p>

通過url.parse()傳入第二個參數(shù):true,可以將query查詢字符串轉換成對象,便于后續(xù)獲取提交的數(shù)據(jù)。
這里我們還用到了服務端重定向的概念,當用戶提交表單數(shù)據(jù)后,頁面會跳轉至/comment地址,需要在服務端請求處理函數(shù)中設置響應狀態(tài)碼:302,并且通過響應頭location屬性告訴瀏覽器重定向的地址。代碼如下:
res.statusCode = 302 // 設置響應狀態(tài)碼為302(重定向)
res.setHeader('location', '/') // 設置響應頭location,告訴瀏覽器重定向地址
app.js中核心代碼如下:
http.createServer((req, res) => {
let obj = url.parse(req.url, true) // 得到url模板解析后的Url對象,傳入第二個參數(shù)“true”,將form表單提交的查詢字符串query轉換成對象
let pathname = obj.pathname
let query = obj.query
if (pathname === '/') {
fs.readFile('./public/views/index.html', (err, data) => {
if (err) {
return res.end('404 NOT FOUND')
}
let htmlStr = template.render(data.toString(), {
comments: comments
})
res.end(htmlStr)
})
} else if (pathname.indexOf('/public/') === 0){
fs.readFile('.'+pathname, (err, data) => {
if (err) {
return res.end('404 NOT FOUND')
}
res.end(data)
})
} else if (pathname ==='/post') {
fs.readFile('./public/views/post.html', (err, data) => {
if (err) {
return res.end('404 NOT FOUND')
}
res.end(data)
})
} else if (pathname === '/comment') {
res.statusCode = 302 // 設置響應狀態(tài)碼為302(重定向)
res.setHeader('location', '/') // 設置響應頭location,告訴瀏覽器重定向地址
if (query.name) {
query.time = '2015-5-10'
comments.unshift(query)
} // 放置用戶手動輸入'/comment',導致query為空
res.end() // 結束響應,不能少
} else {
fs.readFile('./public/views/404.html', (err, data) => {
if (err) {
return res.end('404 NOT FOUND')
}
res.end(data)
})
}
}).listen(3000, () => {
console.log('running...')
})
開啟服務器之后即可愉快的發(fā)表評論了

完整代碼可以看GitHub地址:這里
說明
本篇文章出至于我的從零到一學習Node.js課程資料,如果大家覺得對你有幫助的話不妨給個star,我也會一直持續(xù)不斷的更新相關系列教程。
項目地址:GitHub
總結
以上所述是小編給大家介紹的Node.js實現(xiàn)用戶評論社區(qū)功能(體驗前后端開發(fā)的樂趣),希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
相關文章
詳解如何優(yōu)雅在webpack項目實現(xiàn)mock服務器
這篇文章主要為大家介紹了詳解如何優(yōu)雅在webpack項目實現(xiàn)mock服務器,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-02-02
Node.js websocket使用socket.io庫實現(xiàn)實時聊天室
這篇文章主要為大家詳細介紹了Node.js websocket使用socket.io庫實現(xiàn)實時聊天室,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02
Linux 安裝nodejs環(huán)境及路徑配置詳細步驟
大家都知道linux安裝nodejs有兩種比較常用的方法,一種解壓即可用的方法操作比較簡便,另一種方法通過編譯來安裝,本文重點給大家講解第一種方法,感興趣的朋友跟隨小編一起看看吧2021-11-11

