三、案例：留言板 url.parse()
生活随笔
收集整理的這篇文章主要介紹了
三、案例：留言板 url.parse()
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. url.parse()的使用
2. 留言板案例
index.html:
<!DOCTYPE html> <!-- saved from url=(0027)http://192.168.150.76:3000/ --> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>留言本</title><!-- 瀏覽器收到 HTML 響應內容之后，就要開始從上到下依次解析，當在解析的過程中，如果發現：linkscriptimgiframevideoaudio等帶有 src 或者 href（link） 屬性標簽（具有外鏈的資源）的時候，瀏覽器會自動對這些資源發起新的請求。--><!-- 注意：在服務端中，文件中的路徑就不要去寫相對路徑了。因為這個時候所有的資源都是通過 url 標識來獲取的我的服務器開放了 /public/ 目錄所以這里的請求路徑都寫成：/public/xxx/ 在這里就是 url 根路徑的意思。瀏覽器在真正發請求的時候會最終把 http://127.0.0.1:3000 拼上不要再想文件路徑了，把所有的路徑都想象成 url 地址--><link rel="stylesheet" href="/public/lib/bootstrap-4.6.0-dist/css/bootstrap.css"><link rel="stylesheet" href="/public/css/main.css"></head><body><div class="header container"><!-- <img src="/public/img/ab3.jpg" alt=""> --><div class="page-header"><h1>首頁 <small>發表評論</small></h1><a class="btn btn-success" href="/post">發表留言</a></div></div><div class="comments container"><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></div></body></html>post.html:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="/public/lib/bootstrap-4.6.0-dist/css/bootstrap.css"></head><body><div class="header container"><div class="page-header"><h1><a href="/">首頁</a> <small>發表評論</small></h1></div></div><div class="comments container"><!-- 以前表單是如何提交的？表單中需要提交的表單控件元素必須具有 name 屬性表單提交分為：1. 默認的提交行為2. 表單異步提交action 就是表單提交的地址，說白了就是請求的 url 地址method 請求方法getpost--><form action="/pinglun" method="get"><div class="form-group"><label for="input_name">你的大名</label><input type="text" class="form-control" required minlength="2" maxlength="10" id="input_name" name="name" placeholder="請寫入你的姓名"></div><div class="form-group"><label for="textarea_message">留言內容</label><textarea class="form-control" name="message" id="textarea_message" cols="30" rows="10" required minlength="5" maxlength="20"></textarea></div><button type="submit" class="btn btn-default">發表</button></form></div> </body></html>404.html:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><h1>抱歉! 您訪問的頁面失聯啦...</h1> </body> </html>app.js:
var http = require('http') var fs = require('fs') var template = require('art-template') var url = require('url')var comments = [{name: 'zep',message: '今天天氣真不錯',dateTime: '2021.3.23'},{name: 'zep1',message: '今天天氣真不錯',dateTime: '2021.3.23'},{name: 'zep2',message: '今天天氣真不錯',dateTime: '2021.3.23'},{name: 'zep3',message: '今天天氣真不錯',dateTime: '2021.3.23'},{name: 'zep4',message: '今天天氣真不錯',dateTime: '2021.3.23'} ]http.createServer(function(req, res) {// 使用url.parse方法將路徑解析為一個方便的操作的對象，// 第二個參數為true表示直接將查詢字符串轉為一個對象（通過query屬性訪問）var parseObj = url.parse(req.url, true)// 單獨獲取不包含查詢字符串的路徑部分（該路徑不包含？之后的內容）var pathname = parseObj.pathnameif (pathname === '/') {fs.readFile('./views/index.html', function(err, data) {if (err) {return res.end('404 Not Found.')}var htmlStr = template.render(data.toString(), {comments: comments})res.end(htmlStr)});} else if (pathname === '/post') {fs.readFile('./views/post.html', function(err, data) {if (err) {return res.end('404 Not Found.')}res.end(data)})} else if (pathname.indexOf('/public') === 0) {// 統一處理：// 如果請求路徑是以/public開頭的，則我認為你要獲取public中的某個資源// 所以直接可以把請求路徑當作文件路徑來直接進行讀寫fs.readFile('.' + pathname, function(err, data) {if (err) {return res.end('404 Not Found.')}res.end(data)})// console.log(url)}else if (pathname === '/pinglun') {// 注意：這個時候無論 /pinglun?xxx之后是什么，我都不用擔心了，因為我的pathname是不包含？之后的// 路徑的console.log('收到表單請求了',parseObj.query)// 一次請求對應一次響應，響應結束，這次請求也就結束了，所以下面不能使用res.end()// res.end(JSON.stringify(parseObj.query)) // JSON.stringify() 將對象轉換為字符串// 我們使用url模塊的parse方法把請求路徑中的字符串給解析成一個對象// 所以接下來要做的是：// 1. 獲取表單提交的數據 parseObj.query// 2. 將當前時間日期添加到數據對象中,然后存儲到數組中// 3. 讓用戶重定向跳轉到首頁 /// 當用戶重新請求 / 的時候，我數組中的數據已經發生變化了，所以用戶看到的頁面也就發生變化了 var comment = parseObj.querycomment.dateTime = '2021-03-22 23:10:15'comments.unshift(comment)// 服務端這個時候已經把數據存儲好了，接下來就是讓用戶重新請求 / ，就能讓用戶看到最新的留言了// 如何通過服務器，讓客戶端重定向？// 1.狀態碼設置位302臨時重定向// statusCode// 2.在響應頭中通過Location告訴客戶端往哪兒重定向// setHeader// 如果客戶端發現收到服務器的響應的狀態碼是 302 就會自動去響應頭中招Location，// 然后對該地址發起新的請求，所以你就能看到客戶端自動跳轉了res.statusCode = 302res.setHeader('Location', '/')res.end()}else {// 其他請求路徑都處理成404fs.readFile('./views/404.html', function(err, data) {if (err) {return res.end('404 Not Found.')}res.end(data)})}}).listen(3000, function() {console.log('Server run...') })
總結
以上是生活随笔為你收集整理的三、案例：留言板 url.parse()的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微信可以远程控制电脑吗_用微信就能远程控
- 下一篇： Nodejs ejs模板引擎