當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

三、案例：留言板 url.parse()

發(fā)布時(shí)間：2024/7/5 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了三、案例：留言板 url.parse() 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. url.parse()的使用

2. 留言板案例

index.html:

<!DOCTYPE html>  <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>留言本</title><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"><div class="page-header"><h1>首頁(yè) <small>發(fā)表評(píng)論</small></h1><a class="btn btn-success" href="/post">發(fā)表留言</a></div></div><div class="comments container"><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></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="/">首頁(yè)</a> <small>發(fā)表評(píng)論</small></h1></div></div><div class="comments container"><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="請(qǐng)寫(xiě)入你的姓名"></div><div class="form-group"><label for="textarea_message">留言?xún)?nèi)容</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">發(fā)表</button></form></div> </body></html>

404.html:

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><h1>抱歉! 您訪(fǎng)問(wèn)的頁(yè)面失聯(lián)啦...</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: '今天天氣真不錯(cuò)',dateTime: '2021.3.23'},{name: 'zep1',message: '今天天氣真不錯(cuò)',dateTime: '2021.3.23'},{name: 'zep2',message: '今天天氣真不錯(cuò)',dateTime: '2021.3.23'},{name: 'zep3',message: '今天天氣真不錯(cuò)',dateTime: '2021.3.23'},{name: 'zep4',message: '今天天氣真不錯(cuò)',dateTime: '2021.3.23'} ]http.createServer(function(req, res) {// 使用url.parse方法將路徑解析為一個(gè)方便的操作的對(duì)象，// 第二個(gè)參數(shù)為true表示直接將查詢(xún)字符串轉(zhuǎn)為一個(gè)對(duì)象（通過(guò)query屬性訪(fǎng)問(wèn)）var parseObj = url.parse(req.url, true)// 單獨(dú)獲取不包含查詢(xún)字符串的路徑部分（該路徑不包含？之后的內(nèi)容）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) {// 統(tǒng)一處理：// 如果請(qǐng)求路徑是以/public開(kāi)頭的，則我認(rèn)為你要獲取public中的某個(gè)資源// 所以直接可以把請(qǐng)求路徑當(dāng)作文件路徑來(lái)直接進(jìn)行讀寫(xiě)fs.readFile('.' + pathname, function(err, data) {if (err) {return res.end('404 Not Found.')}res.end(data)})// console.log(url)}else if (pathname === '/pinglun') {// 注意：這個(gè)時(shí)候無(wú)論 /pinglun?xxx之后是什么，我都不用擔(dān)心了，因?yàn)槲业膒athname是不包含？之后的// 路徑的console.log('收到表單請(qǐng)求了',parseObj.query)// 一次請(qǐng)求對(duì)應(yīng)一次響應(yīng)，響應(yīng)結(jié)束，這次請(qǐng)求也就結(jié)束了，所以下面不能使用res.end()// res.end(JSON.stringify(parseObj.query)) // JSON.stringify() 將對(duì)象轉(zhuǎn)換為字符串// 我們使用url模塊的parse方法把請(qǐng)求路徑中的字符串給解析成一個(gè)對(duì)象// 所以接下來(lái)要做的是：// 1. 獲取表單提交的數(shù)據(jù) parseObj.query// 2. 將當(dāng)前時(shí)間日期添加到數(shù)據(jù)對(duì)象中,然后存儲(chǔ)到數(shù)組中// 3. 讓用戶(hù)重定向跳轉(zhuǎn)到首頁(yè) /// 當(dāng)用戶(hù)重新請(qǐng)求 / 的時(shí)候，我數(shù)組中的數(shù)據(jù)已經(jīng)發(fā)生變化了，所以用戶(hù)看到的頁(yè)面也就發(fā)生變化了 var comment = parseObj.querycomment.dateTime = '2021-03-22 23:10:15'comments.unshift(comment)// 服務(wù)端這個(gè)時(shí)候已經(jīng)把數(shù)據(jù)存儲(chǔ)好了，接下來(lái)就是讓用戶(hù)重新請(qǐng)求 / ，就能讓用戶(hù)看到最新的留言了// 如何通過(guò)服務(wù)器，讓客戶(hù)端重定向？// 1.狀態(tài)碼設(shè)置位302臨時(shí)重定向// 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()}else {// 其他請(qǐng)求路徑都處理成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...') })

總結(jié)

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

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

上一篇：微信可以远程控制电脑吗_用微信就能远程控
下一篇：二十七、PHP框架Laravel学习笔记