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 响应内容之后，就要开始从上到下依次解析，
当在解析的过程中，如果发现：
link
script
img
iframe
video
audio
等带有 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 请求方法
get
post
-->
<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.pathname
if (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.query
comment.dateTime = '2021-03-22 23:10:15'
comments.unshift(comment)
// 服务端这个时候已经把数据存储好了，接下来就是让用户重新请求 / ，就能让用户看到最新的留言了
// 如何通过服务器，让客户端重定向？
// 1.状态码设置位302临时重定向
// statusCode
// 2.在响应头中通过Location告诉客户端往哪儿重定向
// setHeader
// 如果客户端发现收到服务器的响应的状态码是 302 就会自动去响应头中招Location，
// 然后对该地址发起新的请求，所以你就能看到客户端自动跳转了
res.statusCode = 302
res.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)
})
}
}).listen(3000, function() {
console.log('Server run...')
})
