下载模板引擎 npm install art-template
安装 boostrap npm install bootstrap
boostrap依赖于jquery，所以还要安装jquery npm install jquery
安装用于格式化时间的模块 npm install silly-datetime
项目目录
记得将下载好的 boostrap 和 jquery 这两个第三方库放到 /public/lib 目录下
服务端入口文件
app.js
var http = require('http')
var fs = require('fs')
var template = require('art-template')
var url = require('url')
var sd = require('silly-datetime')
var comments = [
{
name: '宙斯',
message: '我是众神之王',
dateTime: '2021-01-20'
},
{
name: '波塞冬',
message: '我是海神',
dateTime: '2021-02-21'
},
{
name: '雅典娜',
message: '我是智慧之神',
dateTime: '2021-03-22'
},
]
http
.createServer(function(req,res) {
// url.parse方法将路径解析为一个方便操作的对象，第二个参数为true表示将查询字符串转为一个对象
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)
})
} else if(pathname === '/pinglun') {
// 1. 获取表单提交的数据
var comment = parseObj.query
// 2. 将当前时间添加到数据对象中
comment.dateTime = sd.format(new Date(), 'YYYY-MM-DD HH:mm')
comments.unshift(comment)
// 3. 让用户重定向到首页 /
// 302状态码表示临时重定向，浏览器收到该状态码就会自动去响应头找Location
res.statusCode = 302
res.setHeader('Location','/')
res.end()
} 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...')
})留言板首页渲染
view/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>留言本</title>
<link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div class="header container">
<div class="page-header">
<h1>Message Board<small> speak your mind freely</small></h1>
<a class="btn btn-success" href="/post">发表留言</a>
</div>
</div>
<div class="comments container">
<ul class="list-group">
<!--这里的each 是art-template的模板语法-->
{{each comments}}
<li class="list-group-item">{{ $value.name }}说： {{ $value.message }}<span class="pull-right">{{ $value.dateTime }}</span></li>
{{/each}}
</ul>
</div>
</body>
</html>用户在首页点击“发表留言”之后跳转的页面
表单中需要提交的表单控件元素必须具有 name 属性，因为form表单提交之后，后台通过name属性获取表单中的内容。
view/post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>发表留言</title>
<link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div class="header container">
<div class="page-header">
<h1>Home<small> Leave a comment</small></h1>
</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="请写入你的姓名"></input>
</div>
<div class="form-group">
<label class="textarea_message">留言内容</label>
<textarea class="form-control" name="message" id="textarea_message" cols="30" rows="10" required minlength="5" maxlength="100"></textarea>
</div>
<button type="submit" class="btn btn-default">发表</button>
</form>
</div>
</div>
</body>
</html>404处理
404.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>404</title>
</head>
<body>
<h1>抱歉！您要访问的页面失灵啦...</h1>
</body>
</html>首页
点击“发表留言”
写完留言，点击"发表"，页面自动跳转到首页
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
