Node.js如何實(shí)現(xiàn)用戶評(píng)論社區(qū)功能

這篇文章主要介紹了Node.js如何實(shí)現(xiàn)用戶評(píng)論社區(qū)功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司主要從事網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)海淀,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):18980820575

前面

接著上一節(jié)的內(nèi)容來(lái)，今天我們要完成一個(gè)用Node開(kāi)發(fā)后臺(tái)服務(wù)器，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的用戶評(píng)論社區(qū)?？梢韵瓤聪滦Ч麍D：

開(kāi)始建立項(xiàng)目文件夾comment-list，在里面新建一個(gè)public文件夾，public文件夾存放我們?cè)试S客戶端訪問(wèn)的資源，這里是公開(kāi)的。app.js文件是我們服務(wù)端代碼。

在index.html文件中放的是網(wǎng)站的首頁(yè)內(nèi)容，這里采用bootstrap框架快速搭建?？梢韵日幸恍┘贁?shù)據(jù)，以便頁(yè)面渲染后看效果。核心代碼：

<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模板語(yǔ)法，等會(huì)會(huì)在服務(wù)端代碼中將模板字符串渲染成真實(shí)數(shù)據(jù)。當(dāng)用戶訪問(wèn)網(wǎng)站根目錄，服務(wù)端利用模板引擎解析渲染index.html，并且返回真實(shí)html字符串給瀏覽器解析。index.html會(huì)使用外鏈樣式文件和外鏈腳本文件，切記這里的文件地址不能寫(xiě)相對(duì)路徑，必須寫(xiě)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/開(kāi)頭，這里的/表示請(qǐng)求的根路徑，瀏覽器在發(fā)送請(qǐng)求的時(shí)候會(huì)自動(dòng)替換成http://127.0.0.1:3000/。

404.html主要用來(lái)處理用戶請(qǐng)求不存在的資源時(shí)，我們友情提示下即可。

post.html主要是發(fā)表評(píng)論頁(yè)面，這里同樣采用bootstrap快速搭建，同時(shí)也是要注意文件路徑問(wèn)題。這里是一個(gè)表單，用來(lái)收集用戶評(píng)論的內(nèi)容然后提交到后臺(tái)處理。表單提交數(shù)據(jù)可以根據(jù)form標(biāo)簽中的action屬性指定提交地址，當(dāng)點(diǎn)擊提交按鈕數(shù)據(jù)會(huì)發(fā)送到指定地址，由服務(wù)端接收處理即可。核心代碼如下：

<form action="/comment" method="GET" role="form" class="comment-form">
 <legend>開(kāi)始評(píng)論</legend>
 <div class="form-group">
 <label for="name">你的大名：</label>
 <input type="text" name="name" class="form-control" id="name" placeholder="請(qǐng)輸入你的大名" required maxlength="10" minlength="2">
 </div>
 <div class="form-group">
 <label for="content">評(píng)論內(nèi)容：</label>
 <textarea name="content" id="content" class="form-control" rows="6" required minlength="5" maxlength="10"></textarea>
 </div>
 <button type

編寫(xiě)服務(wù)端代碼app.js

app.js中引入了node中http服務(wù)構(gòu)建核心模塊，fs文件操作模塊，urlurl地址解析模塊。art-template第三方包主要用來(lái)服務(wù)端模板引擎，解析剛剛的index.html模板字符串。我們要注意url核心模塊中的parse方法，它可以將一個(gè)含有查詢(xún)字符串的url地址解析成一個(gè)對(duì)象，通過(guò)這個(gè)對(duì)象我們很容易得到用戶表單提交過(guò)來(lái)的數(shù)據(jù)，即是查詢(xún)字符串的具體內(nèi)容?？梢钥匆韵卵菔荆?/p>

通過(guò)url.parse()傳入第二個(gè)參數(shù)：true，可以將query查詢(xún)字符串轉(zhuǎn)換成對(duì)象，便于后續(xù)獲取提交的數(shù)據(jù)。

這里我們還用到了服務(wù)端重定向的概念，當(dāng)用戶提交表單數(shù)據(jù)后，頁(yè)面會(huì)跳轉(zhuǎn)至/comment地址，需要在服務(wù)端請(qǐng)求處理函數(shù)中設(shè)置響應(yīng)狀態(tài)碼：302，并且通過(guò)響應(yīng)頭location屬性告訴瀏覽器重定向的地址。代碼如下：

res.statusCode = 302  // 設(shè)置響應(yīng)狀態(tài)碼為302(重定向)
res.setHeader('location', '/') // 設(shè)置響應(yīng)頭location，告訴瀏覽器重定向地址

app.js中核心代碼如下：

http.createServer((req, res) => {
 let obj = url.parse(req.url, true) // 得到url模板解析后的Url對(duì)象，傳入第二個(gè)參數(shù)“true”，將form表單提交的查詢(xún)字符串query轉(zhuǎn)換成對(duì)象
 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  // 設(shè)置響應(yīng)狀態(tài)碼為302(重定向)
 res.setHeader('location', '/') // 設(shè)置響應(yīng)頭location，告訴瀏覽器重定向地址
 if (query.name) {
  query.time = '2015-5-10'
  comments.unshift(query)
 } // 放置用戶手動(dòng)輸入'/comment'，導(dǎo)致query為空
 res.end() // 結(jié)束響應(yīng)，不能少
 } 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...')
})

開(kāi)啟服務(wù)器之后即可愉快的發(fā)表評(píng)論了

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Node.js如何實(shí)現(xiàn)用戶評(píng)論社區(qū)功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

當(dāng)前題目：Node.js如何實(shí)現(xiàn)用戶評(píng)論社區(qū)功能
當(dāng)前路徑：http://muchs.cn/article32/gjgopc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、微信小程序、App開(kāi)發(fā)、商城網(wǎng)站、軟件開(kāi)發(fā)、小程序開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)