1. 案例需求分析
-
主页
-
主页一开始呈现的是一部分用户的评论数据, 其中一条评论数据包含的信息有: 用户名, 用户评论内容,评论时间。
-
页面左上角有一个 发表留言 的按钮,用户点击按钮就会跳转到填写留言的界面
-
-
留言页面
- 用户需要填写的信息有 用户名, 留言内容和发表按钮
- 用户填写完信息点击发表按钮后, 会自动跳转到主页, 此时主页中的评论部分增加了一条用户刚刚填写的评论内容
- 点击留言页面的左上角的蓝色首页字样也会跳转到主页
2. 需要思考的问题
-
用户请求路径与呈现页面的对应关系 — 路由设计问题
pathname 请求方式 访问的文件路径 /
GET ./views/index.html
/post
GET /views/post.html
/public
GET 请求路径以 /public/ 开头,则认为要获取 public 中的某个资源,所以就直接可以把请求路径当作文件路径来直接进行读取 /pinglun
GET 这里对应的是表单提交的地址,后面重定向到 /
-
为了让目录结构保持统一清晰,所以约定把所有的 HTML 文件都放到 views(视图) 目录中; 为了方便的统一处理这些静态资源,所以我们约定把所有的静态资源(css img js)都存放在 public 目录中 ---- 如何开放静态资源的问题
-
用户填写完评论点击提交的时候,如何获取表单提交的数据, 最好是以对象的形式获取 —
url.parse('请求路径',true)
方法 可以把请求路径中的查询字符串解析成对象的形式 -
将用户评论时间添加到解析出来的查询字符串对象中,然后
unshift
到评论数组对象中,此时,数组中的数据已经更新,渲染到页面中的内容也会自动更新 -
用户评论提交后的重定向问题 — 如何通过服务器让客户端重定向: 状态码
statusCode
设置为302临时重定向,在响应头setHeader
中通过Location
告诉客户端应该往哪里重定向 -
/pinglun?name=xiaoxiao&message=你好呀
, 对于这种表单提交的请求路径,由于其中具有用户动态填写的内容,所以你不可能通过去判断完整的 url 路径来处理这个请求, 其实只需要判定,如果你的请求路径是 /pinglun 的时候,那就认为你提交表单的请求过来了 -
页面的呈现: 使用服务端页面渲染的方式
3. 案例代码
// 1. / index.html
// 2. 开放 public 目录中的静态资源
// 当请求 /public/xxx 的时候,读取响应 public 目录中的具体资源
// 3. /post post.html
// 4. /pinglun
// 4.1 接收表单提交数据
// 4.2 存储表单提交的数据
// 4.3 让表单重定向到 /
// statusCode
// setHeader
var http = require('http')
var fs = require('fs')
var url = require('url')
var template = require('art-template')
var comments = [
{
name: 'cbt',
message: '居居宝贝太美了吧!',
dateTime: '2020-2-26'
},
{
name: '肖老师',
message: '今天要好好看代码呀!',
dateTime: '2020-2-27'
},
{
name: '肖大爷',
message: '今天天气不错!',
dateTime: '2020-2-28'
},
{
name: '艾尼宝贝',
message: '老夫就是一把suo...',
dateTime: '2020-2-28'
}
]
http
.createServer(function (req, res) { // 简写方式,该函数会直接被注册为 server 的 request 请求事件处理函数
// 使用 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') {
// 其它的都处理成 404 找不到
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/css/main.css
// /public/js/main.js
// /public/lib/jquery.js
// 统一处理:
// 如果请求路径是以 /public/ 开头的,则认为你要获取 public 中的某个资源
// 所以就直接可以把请求路径当作文件路径来直接进行读取
// 前面的这个点一定不要忘记!
fs.readFile('.' + pathname, function (err, data) {
if (err) {
return res.end('404 Not Found.')
}
res.end(data)
})
} else if (pathname === '/pinglun') {
// 这个对应的是表单提交: 这个地址对应的是form标签中action属性的值
// 注意:这个时候无论 /pinglun?xxx 之后是什么,我都不用担心了,因为我的 pathname 是不包含 ? 之后的那个路径
// 注意: 一次请求对应一次响应,响应结束这次请求也就结束了
// res.end(JSON.stringify(parseObj.query))
// 已经使用 url 模块的 parse 方法把请求路径中的查询字符串给解析成一个对象了
// 所以接下来要做的就是:
// 1. 获取表单提交的数据 parseObj.query
// 2. 将当前时间日期添加到数据对象中,然后存储到数组中
// 3. 让用户重定向跳转到首页 /
// 当用户重新请求 / 的时候,我数组中的数据已经发生变化了,所以用户看到的页面也就变了
var comment = parseObj.query
comment.dateTime = '2020-2-28 23:00:00'
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('running...')
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交页 post.html</title>
<link rel="stylesheet" href="/public/lib/bootstrap/bootstrap.css">
</head>
<body>
<div class="header container">
<div class="page-header">
<!-- 注意:点击首页会回到首页: 这个href属性的值表示的是超链接的跳转地址 url 根路径 就是相当于请求 / -->
<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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言本主页 index.html</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/bootstrap.css">
</head>
<body>
<div class="header container">
<div class="page-header">
<h1>Example page header <small>Subtext for header</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>
4. 呈现效果