?

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

通過這個案例復(fù)習(xí)：

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

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

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

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

?1、案列演示：

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

?

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

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

?

?

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

?

var http = require('http'); var fs= require('fs'); var server = http.createServer();server.on('request',function (req, res){var pathname = req.url;//如果 請求/返回的是/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)容的時候，會從上到下依次解析，當(dāng)在解析過程中如果發(fā)現(xiàn)頁面中有如下標(biāo)簽?

? ? ? ? ?比如：link script img iframe video audio 等標(biāo)簽（具有外鏈的資源），這時候瀏覽器就會自動對這些資源發(fā)起請求（可以在network中驗證）

? ? ? ?所以現(xiàn)在我們要對允許客戶端請求的資源放在一個公共的public文件中

app.js中：

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

當(dāng)我們使用了public公共目錄的時候就不能使用相對路徑了，此時的路徑不是文件路徑，因為這個時候所有的資源都是通過url標(biāo)識來獲取的，我的服務(wù)器開放了/public/目錄。所以這時候請求public下面的資源的請求路徑都是/public/xxxx

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

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

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

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

? ? ?

?

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

?

? ? ? ? （3）在服務(wù)端中，當(dāng)收到請求路徑是/post開頭的時候，讓它讀取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）接下來，就是獲取數(shù)據(jù) 和對數(shù)據(jù)進(jìn)行處理，提交數(shù)據(jù)之后，頁面會跳轉(zhuǎn)到首頁

? 完整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 方法將路徑解析為一個方便操作的對象，第二個參數(shù)為 true 表示直接將查詢字符串轉(zhuǎn)為一個對象（通過 query 屬性來訪問）var parseObj = urlObj.parse(req.url, true)var pathname = req.url;//如果 請求/返回的是/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) { //如果請求的是public下的資源，就當(dāng)做public中的資源，然后就可以將請求資源當(dāng)做文件資源來處理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 ){//說明點(diǎn)擊了發(fā)表//將數(shù)據(jù)保存下來，這里為get提交，數(shù)據(jù)就在url地址中,獲取到了對象中的內(nèi)容var data = parseObj.query;//這里的發(fā)表日期先固定寫死// data.dateTime = '2017-11-2 17:11:22';data.dateTime = '2017-11-2 17:11:22';//將得到的數(shù)據(jù)存入comments 中 comments.unshift(data)//接下來要做的是重定向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

?

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

? ? ? ??

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

? ? ?

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

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

// 如何通過服務(wù)器讓客戶端重定向？// 1. 狀態(tài)碼設(shè)置為 302 臨時重定向 301永久重定向（少用）// statusCode// 2. 在響應(yīng)頭中通過 Location 告訴客戶端往哪兒重定向// setHeader// 如果客戶端發(fā)現(xiàn)收到服務(wù)器的響應(yīng)的狀態(tài)碼是 302 就會自動去響應(yīng)頭中找 Location ，然后對該地址發(fā)起新的請求// 所以你就能看到客戶端自動跳轉(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 }}說：{{ $value.message }} <span class="pull-right">{{ $value.dateTime }}</span></li>{{/each}}</ul>

?

?

?

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

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

4、可以將頁面中css js等文件放到一個public中，

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

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

?

?

? ? ?

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

總結(jié)

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

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