?

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

通過這個案例復習：

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

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2、node.js中的頁面跳轉和重定向

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

二、主要內容? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

?1、案列演示：

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

?

?3、具體實現：

1、項目結構：項目名稱feedback ,為了方便管理，將頁面內請求的資源統一放到一個公共的public目錄下，view中放跳轉的頁面

?

?

2、創建app.js?先搭建一個基本服務器，用戶輸入地址請求的時候默認跳到首頁

?

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、當瀏覽器收到html響應內容的時候，會從上到下依次解析，當在解析過程中如果發現頁面中有如下標簽?

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

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

app.js中：

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

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

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

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

4、前面兩步只是服務端對一些靜態資源的處理，具體功能實現

? ? ?（1）當用戶點擊發表留言按鈕時，自動跳轉到post.html

? ? ?

?

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

?

? ? ? ? （3）在服務端中，當收到請求路徑是/post開頭的時候，讓它讀取post.html中的內容

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）接下來，就是獲取數據 和對數據進行處理，提交數據之后，頁面會跳轉到首頁

? 完整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 方法將路徑解析為一個方便操作的對象，第二個參數為 true 表示直接將查詢字符串轉為一個對象（通過 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下的資源，就當做public中的資源，然后就可以將請求資源當做文件資源來處理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 ){//說明點擊了發表//將數據保存下來，這里為get提交，數據就在url地址中,獲取到了對象中的內容var data = parseObj.query;//這里的發表日期先固定寫死// data.dateTime = '2017-11-2 17:11:22';data.dateTime = '2017-11-2 17:11:22';//將得到的數據存入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方式提交，提交的數據都在url地址當中，如何拿到url中的地址？node.js中有一個url模塊：（不清楚這個模塊的話可以看看官網：http://nodejs.cn/api/url.html）

? ? ?

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

? ? ? 第三步：拿到數據之后會進行數據重定向，然后跳轉到index.html中，重新對數據進行渲染

// 如何通過服務器讓客戶端重定向？// 1. 狀態碼設置為 302 臨時重定向 301永久重定向（少用）// statusCode// 2. 在響應頭中通過 Location 告訴客戶端往哪兒重定向// setHeader// 如果客戶端發現收到服務器的響應的狀態碼是 302 就會自動去響應頭中找 Location ，然后對該地址發起新的請求// 所以你就能看到客戶端自動跳轉了res.statusCode = 302res.setHeader('Location', '/')res.end()

? ? ??

? ? ?第四步：引入art-template模板，進行渲染

//引入模塊 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>

?

?

?

三、總結? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

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

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

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

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

?

?

? ? ?

轉載于:https://www.cnblogs.com/xxm980617/p/10525057.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。