?

一、前言? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

通過(guò)這個(gè)案例復(fù)習(xí)：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1、node.js中模板引擎的使用

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2、node.js中的頁(yè)面跳轉(zhuǎn)和重定向

? ? ? ? ? ? ? ? ? ? ? ?

二、主要內(nèi)容? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

?1、案列演示：

?2、案列源碼：https://github.com/4561231/feedback

?

?3、具體實(shí)現(xiàn)：

1、項(xiàng)目結(jié)構(gòu)：項(xiàng)目名稱(chēng)feedback ,為了方便管理，將頁(yè)面內(nèi)請(qǐng)求的資源統(tǒng)一放到一個(gè)公共的public目錄下，view中放跳轉(zhuǎn)的頁(yè)面

?

?

2、創(chuàng)建app.js?先搭建一個(gè)基本服務(wù)器，用戶(hù)輸入地址請(qǐng)求的時(shí)候默認(rèn)跳到首頁(yè)

?

var http = require('http'); var fs= require('fs'); var server = http.createServer();server.on('request',function (req, res){var pathname = req.url;//如果 請(qǐng)求/返回的是/index.htmlif (url === '/') {fs.readFile('./views/index.html', function (err, data) {res.end(data);})} }); server.listen(3000,function (){console.log('server is running');})

?

?3、當(dāng)瀏覽器收到html響應(yīng)內(nèi)容的時(shí)候，會(huì)從上到下依次解析，當(dāng)在解析過(guò)程中如果發(fā)現(xiàn)頁(yè)面中有如下標(biāo)簽?

? ? ? ? ?比如：link script img iframe video audio 等標(biāo)簽（具有外鏈的資源），這時(shí)候?yàn)g覽器就會(huì)自動(dòng)對(duì)這些資源發(fā)起請(qǐng)求（可以在network中驗(yàn)證）

? ? ? ?所以現(xiàn)在我們要對(duì)允許客戶(hù)端請(qǐng)求的資源放在一個(gè)公共的public文件中

app.js中：

else if(pathname.indexOf('/public/')===0) { //pathname是請(qǐng)求時(shí)候的url地址，這個(gè)地址不需要手動(dòng)輸入，
//如果請(qǐng)求的是public下的資源，就當(dāng)做public中的資源，然后就可以將請(qǐng)求資源當(dāng)做文件資源來(lái)處理
//
fs.readFile('.'+pathname, function(err, data){if(err){return res.end('file can not found');}res.end(data);})} });

當(dāng)我們使用了public公共目錄的時(shí)候就不能使用相對(duì)路徑了，此時(shí)的路徑不是文件路徑，因?yàn)檫@個(gè)時(shí)候所有的資源都是通過(guò)url標(biāo)識(shí)來(lái)獲取的，我的服務(wù)器開(kāi)放了/public/目錄。所以這時(shí)候請(qǐng)求public下面的資源的請(qǐng)求路徑都是/public/xxxx

index.html post.html中引用的bootstrap.css路徑如下

<link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.css">

4、前面兩步只是服務(wù)端對(duì)一些靜態(tài)資源的處理，具體功能實(shí)現(xiàn)

? ? ?（1）當(dāng)用戶(hù)點(diǎn)擊發(fā)表留言按鈕時(shí)，自動(dòng)跳轉(zhuǎn)到post.html

? ? ?

?

? ? ? ?（2）index.html中的href=''就是我們請(qǐng)求路徑中的url

?

? ? ? ? （3）在服務(wù)端中，當(dāng)收到請(qǐng)求路徑是/post開(kāi)頭的時(shí)候，讓它讀取post.html中的內(nèi)容

else if (pathname === '/post') {// 其它的都處理成 404 找不到fs.readFile('./views/post.html', function (err, data) {if (err) {return res.end('404 Not Found.')}res.end(data)})}

? ?

? ? ? ? （4）

? ? ? ?（5）接下來(lái)，就是獲取數(shù)據(jù) 和對(duì)數(shù)據(jù)進(jìn)行處理，提交數(shù)據(jù)之后，頁(yè)面會(huì)跳轉(zhuǎn)到首頁(yè)

? 完整app.js代碼? ? ??

var http = require('http'); var fs= require('fs'); //所以引入url模塊 var urlObj = require('url'); var template = require('art-template');var comments=[]; var server = http.createServer(); server.on('request',function (req, res){// 使用 url.parse 方法將路徑解析為一個(gè)方便操作的對(duì)象，第二個(gè)參數(shù)為 true 表示直接將查詢(xún)字符串轉(zhuǎn)為一個(gè)對(duì)象（通過(guò) query 屬性來(lái)訪問(wèn)）var parseObj = urlObj.parse(req.url, true)var pathname = req.url;//如果 請(qǐng)求/返回的是/index.htmlif (pathname === '/') {fs.readFile('./views/index.html', function (err, data) {if(err){return res.end('404 can not find');}var htmlStr = template.render(data.toString(), {comments: comments})res.end(htmlStr)}) }else if(pathname.indexOf('/public/')===0) { //如果請(qǐng)求的是public下的資源，就當(dāng)做public中的資源，然后就可以將請(qǐng)求資源當(dāng)做文件資源來(lái)處理fs.readFile('.'+pathname, function(err, data){if(err){return res.end('file can not found');}res.end(data);})} else if (pathname === '/post') {fs.readFile('./views/post.html', function (err, data) {if(err){return res.end('post can not found');}res.end(data);});}else if (pathname.indexOf('/pinglun')===0 ){//說(shuō)明點(diǎn)擊了發(fā)表//將數(shù)據(jù)保存下來(lái)，這里為get提交，數(shù)據(jù)就在url地址中,獲取到了對(duì)象中的內(nèi)容var data = parseObj.query;//這里的發(fā)表日期先固定寫(xiě)死// data.dateTime = '2017-11-2 17:11:22';data.dateTime = '2017-11-2 17:11:22';//將得到的數(shù)據(jù)存入comments 中 comments.unshift(data)//接下來(lái)要做的是重定向res.statusCode = 302res.setHeader('Location', '/')res.end()}else {// 其它的都處理成 404 找不到fs.readFile('./views/404.html', function (err, data) {if (err) {return res.end('404 Not Found.')}res.end(data)})}});server.listen(300,function (){console.log('server is running');}) app.js

?

? ? ? ? ?第一步：涉及表單提交

? ? ? ??

? ? ?第二步：因?yàn)槭莋et方式提交，提交的數(shù)據(jù)都在url地址當(dāng)中，如何拿到url中的地址？node.js中有一個(gè)url模塊：（不清楚這個(gè)模塊的話可以看看官網(wǎng)：http://nodejs.cn/api/url.html）

? ? ?

//首先加入這個(gè)模塊var url = require('url')// 使用 url.parse 方法將路徑解析為一個(gè)方便操作的對(duì)象，第二個(gè)參數(shù)為 true 表示直接將查詢(xún)字符串轉(zhuǎn)為一個(gè)對(duì)象（通過(guò) query 屬性來(lái)訪問(wèn)）var parseObj = url.parse(req.url, true)//可以通過(guò)query來(lái)拿到我們要的數(shù)據(jù) var comment = parseObj.query

? ? ? 第三步：拿到數(shù)據(jù)之后會(huì)進(jìn)行數(shù)據(jù)重定向，然后跳轉(zhuǎn)到index.html中，重新對(duì)數(shù)據(jù)進(jìn)行渲染

// 如何通過(guò)服務(wù)器讓客戶(hù)端重定向？// 1. 狀態(tài)碼設(shè)置為 302 臨時(shí)重定向 301永久重定向（少用）// statusCode// 2. 在響應(yīng)頭中通過(guò) Location 告訴客戶(hù)端往哪兒重定向// setHeader// 如果客戶(hù)端發(fā)現(xiàn)收到服務(wù)器的響應(yīng)的狀態(tài)碼是 302 就會(huì)自動(dòng)去響應(yīng)頭中找 Location ，然后對(duì)該地址發(fā)起新的請(qǐng)求// 所以你就能看到客戶(hù)端自動(dòng)跳轉(zhuǎn)了res.statusCode = 302res.setHeader('Location', '/')res.end()

? ? ??

? ? ?第四步：引入art-template模板，進(jìn)行渲染

//引入模塊 var template = require('art-template')//渲染var htmlStr = template.render(data.toString(), {comments: comments})res.end(htmlStr)

index.html中的模板如下：

<ul class="list-group">{{each comments}}<li class="list-group-item">{{ $value.name }}說(shuō)：{{ $value.message }} <span class="pull-right">{{ $value.dateTime }}</span></li>{{/each}}</ul>

?

?

?

三、總結(jié)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

1、 這個(gè)案例比較簡(jiǎn)單，踩坑的地方主要是引入了bootstrap.css但是沒(méi)有響應(yīng)，這個(gè)時(shí)候打開(kāi)network,看看有沒(méi)有響應(yīng)，以及響應(yīng)的內(nèi)容是不是我們需要的

4、可以將頁(yè)面中css js等文件放到一個(gè)public中，

3、關(guān)于node處理頁(yè)面重定向：http中當(dāng)狀態(tài)碼為302/301的時(shí)候表示頁(yè)面重定向，如果客戶(hù)端發(fā)現(xiàn)收到服務(wù)端的狀態(tài)碼是302,就會(huì)自動(dòng)去找location,然后對(duì)該地址發(fā)起新的請(qǐng)求

res.statusCode = 302res.setHeader('Location', '/')res.end()

?

?

? ? ?

轉(zhuǎn)載于:https://www.cnblogs.com/xxm980617/p/10525057.html

總結(jié)

以上是生活随笔為你收集整理的node.js小案例_留言板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。