完成效果
（本文使用科比作为元素，谨此纪念一位伟大的球员）
首页：
并且每次进入首页，有一个hello world的弹窗。
点击发表留言，进入post页面
输入相应内容后，点击提交，返回首页，将刚刚写入的留言显示
若访问其他不支持的页面，显示如下页面：
案例所需文件整理如下：
其中：
public目录下的资源认为是可以公开的，其中下列三个目录，分别储存css文件，图片和js文件。
views目录下存放需要的html文件，分别写了目录，post页面和访问失败页面
app.js为主要编写的node.js代码
app.js代码如下：
//为了让目录结构保持清晰，所有html文件放在views目录里
//引入需要的包
var http = require('http')
var fs = require('fs')
var template = require('art-template')
var url = require('url')
//储存评论对象的数组，里面内置三个基础对象
var comments = [
{
name:'Kobe Bryant',
message:'湖人总冠军',
dateTime:'2020-2-24'
},
{
name:'Kobe Bryant',
message:'湖人总冠军',
dateTime:'2020-2-25'
},
{
name:'Kobe Bryant',
message:'湖人总冠军',
dateTime:'2020-2-26'
}
]
http.createServer(function(req,res){
//使用url.parse 方法将路径解析为一个方便操作的对象，
//第二个参数为true表示直接将查询字符串转化为一个对象（通过query属性来访问）
var parseObj = url.parse(req.url,true)
//post.html可以做到点击提交以后导向：（一个例子）
//http://127.0.0.1:3000/pinglun?name=xs+&message=saasxscxsac
//我们需要单独获取不包含上一行？后的内容的路径
var pathname = parseObj.pathname
//var pathname = req.url
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.setHeader('Content-Type', 'text/html; charset=utf-8')
res.end(htmlStr)
})
}
//如果请求路径以/public开头，则认为是请求public中的某个资源
//因此直接可以把请求路径当作文件路径来读取
//以下代码即开放public目录下的资源
else if (pathname.indexOf('/public/') === 0){
fs.readFile('.'+pathname,function(err,data){
if (err){
return res.end('404 not found.')
}
res.end(data)
})
}
//转到post.html
else if(pathname === '/post'){
fs.readFile('./views/post.html',function(err,data){
if (err){
return res.end('404 not found.')
}
res.end(data)
})
}
//对于表单提交的请求路径，其中具有用户动态填写的内容
//所以不可能通过判断完整的url路径来处理这个请求
//因而/pinlun开头的url都认为是表单提交的。（post.html文件的19行）
else if (pathname === '/pinglun'){
//无论/pinlun?后面是什么 ，都会进来
//测试进来了没有的语句： console.log('copy that',parseObj.query)
//接下来要做的事：
//1.获取表单的数据，也就是 parseObj.query
//2.生成日期到数据对象中，然后储存在数组中
//3.重定向到首页。此时内容以及刷新，留言内容已经显示
var comment = parseObj.query
comment.dateTime = '2020-2-26 21:35'
comments.unshift(comment)//将新获取的内容放在储存评论的数组comments首位
//以下为了重定向
res.statusCode = 302
res.setHeader('Location','/')
res.end()
}
//其他不能识别的url转到制作的404页面
else {
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...')
})
index.html 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言本</title>
<link rel="stylesheet" href="/public/css/bootstrap.css">
</head>
<body>
<!--获取对应路径的图片-->
<img src="/public/img/kobe.jpg" alt="" >
<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>
<!--获取对应路径的js，那个js中的内容是一个hello world的弹窗-->
<script src="/public/js/main.js"></script>
</body>
</html>
posst.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/public/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">
<!-- 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>
