本文主要实现简单的留言板,包括两个页面:一个是添加评论页面,一个是评论展示页面。涉及的内容如下:
1.url和art-template模版引擎在node中的使用;
2.重定向和静态资源文件的处理;
使用url.parse(req.url, true)将url解析为一个方便操作的对象,第二个参数true表示将字符串转成为一个对象,该对象包括的内容如下:
Url {
protocol: null,
slashes: null,
auth: null,
host: null,
port: null,
hostname: null,
hash: null,
search: null,
query: {},
pathname: '/public/lib/bootstrap/dist/css/bootstrap.css',
path: '/public/lib/bootstrap/dist/css/bootstrap.css',
href: '/public/lib/bootstrap/dist/css/bootstrap.css' }
重定向的标识为302,使用‘statusCode = 302’实现;设置重定向后的目标路径‘setHeader('Location', '/')’,第二个参数是跳转到的地址;art-template模版引擎,需要在html文件中留下标识符,如本文中的comments,具体的实现见代码。
资源文件一般均会放在特定目录下面,本文放在public文件夹下,一般前端获取一个图片/第三方文件等的时候,也会发一个请求,node直接拦截该请求,返回资源所在的目录。
代码如下:
var http = require('http')
var fs = require('fs')
var url = require('url')
var template = require('art-template')
var comments = [
{
name: '张三',
message: '今天天气不错!',
dateTime: '2017-10-18'
},
{
name: '王五',
message: '今天伙食不错!',
dateTime: '2018-10-16'
},
{
name: '赵四',
message: '今天温度不错!',
dateTime: '2019-10-14'
},
{
name: '王二',
message: '今天雨水不错!',
dateTime: '2019-01-02'
},
{
name: '钱三',
message: '今天阳光不错!',
dateTime: '2018-10-19'
}
]
// 结论:对于我们来讲,其实只需要判定,如果你的请求路径是 /pinglun 的时候,那我就认为你提交表单的请求过来了
var server = http.createServer();
server.on('request', function (req,res) {
//使用该方法将url解析为一个方便操作的对象,第二个参数true表示将字符串转成为一个对象
var parsObj = url.parse(req.url, true)
console.log(parsObj)
//请求路径
var pathname = parsObj.pathname
if (pathname === '/')
{
fs.readFile('./views/index.html', function (err, data) {
if (err){
return res.end('404 Not Found1.')
}
//使用模版引擎,渲染comments内容
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 Found2')
}
res.end(data)
})
} else if (pathname.indexOf('/public/') === 0){
fs.readFile('.' + pathname, function (err, data) {
if (err){
return res.end('404 Not Found3')
}
return res.end(data)
})
}else if (pathname === '/pinglun'){
//请求内容,数据是以key-value形式过来
var comment = parsObj.query
console.log(parsObj)
comment.dateTime = '2018-11-2'
comments.unshift(comment)
//重定向表示位置
res.statusCode = 302
//重定向的目标路径
res.setHeader('Location', '/')
res.end()
}else {
return res.end('404 Not Found');
}
});
server.listen(3000,function () {
console.log('listen on 3000')
})
留言板.gif
代码地址为https://github.com/LiangQiJian/Node-
网友评论