三、案例：留言板 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...')
})