node.js学习笔记之留言本

需求分析

3个页面：

1. 主页展示留言列表，列表包含名字，留言内容和日期字段
2. 留言提交页面
3. 404页面

路由设计

请求方法	请求路径	get参数	post参数	备注
get	’/‘	–	–	渲染首页
get	‘/feedback’	–	–	渲染发表留言页面
get	’/post‘	–	name,留言内容	处理留言发表
get	‘/404’	–	–	渲染404页面

代码实施

准备好3个html页面

正常开启服务器，加载fs,url,art-template模板

var http = require('http')
var fs = require('fs')
var url = require('url')
var template = require('art-template')

var server = http.createServer()
server.on('request',function(req,res){
})
server.listen(3000,function(){
console.log('server is running')
})

准备几个留言对象

var comments = [
{name:'zhangsan1',
feedback:'zhangsanjishiwo',
dateTime:'20190222 12:22'},
{name:'zhangsan2',
feedback:'zhangsanjishiwo',
dateTime:'20190222 12:22'},
{name:'zhangsan3',
feedback:'zhangsanjishiwo',
dateTime:'20190222 12:22'},
]

1. 渲染首页。

var http = require('http')
var fs = require('fs')
var server = http.createServer()
server.on('request',function(req,res){
	if (req.url === '/'){
		fs.readfile('.views/index.html',function(err,data){
			if (err){
				return res.end('cannot find the file')
			}
			// 非常关键的一步，用template.render方法替换字符串中的数据，需要在html中用{{each comments}} {{$value.name}}{{$value.feedback}}{{$value.dateTime}}{{/each}}放置在相应的位置
			var tplStr = template.render(data.toString(),{
			comments:comments
		})
		res.end(tplStr)
	} 
})
server.listen(3000,function(){
console.log('server is running')
})

注意，加载html时候link，href等外部资源会加载不出来，这时候需要将这些资源放在一个public目录下方便加载。link和href的值也要改作相应的url

else if (req.url.indexOf('/public/')===0){
		fs.readfile('.'+url,function(err,data){
			if (err){
				return res.end()
			}
			res.end(data)
		}
	} 

2. 渲染留言发表页面

else if (req.url === '/feedback'){
		fs.readfile('./views/submit.html',function(err,data){
			if (err){
				return res.end()
			}
			res.end(data)
		}
	} 

3. 处理留言发表

else if (req.url.indexOf( '/feedback')===0){
// 注意submit页面的表单一定要有name属性
	var parseObj = url.parse(req.url,true)
	var comment = parseObj.query
	var comment.dateTime = '20190222 12:22'
	comments.unshift(comment)
	res.statusCode = 302
	res.setHeader('location','/')
	res.end()
} 

4. 处理404页面

else {
	fs.readFile('./views/404.html',function(err,data){
			if (err){
				return res.end('404 not found')
			}
			res.end(data)}
}