基于node实现留言板功能

85 °C
2019年7月10日22:39:47 发表评论

基于node实现留言板功能

1.总体需要两个html页面,一个展示留言的页面,一个提交表单的页面

2.使用art-template模板引擎基于字符串进行html页面的填充

3.comments变量中存储有评论的json格式信息

加载需要的模板

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

 

请求路径的判断,进行不同页面的跳转

首先使用url模块对请求路径进行解析

var ParseUrlObject=url.parse(req.url,true); //请求的路径,设置为true才会解析query为对象

 

路径判断后响应对应的html模板

fs.readFile(DirPath+"../index.html",function(err,data){
if(err){
return rep.end("404 not found")
}
data=template.render(data.toString(),{
comments: comments
})

rep.end(data)
})}

comments是json数据格式

var comments=[
{
name:"zpliu",
message: "dadsadas",
date: "2019-7-9"
}, {
name:"zpliu",
message: "dadsadas",
date: "2019-7-9"
}, {
name:"zpliu",
message: "dadsadas",
date: "2019-7-9"
}]

模板中使用art-template进行服务端的填充

<ul>
{{ each comments}}
<li>{{ $value.name}}在 {{ $value.date}}说 {{ $value.message}} </li>
{{/each}}
</ul>

响应表单页面

 

else if(ParseUrlObject.pathname=='/views/post'){ //当目录是views开头的时候就可以被访问
fs.readFile(DirPath+"post.html",function(err,data){
if(err){
return console.error(err)
}
rep.end(data.toString())
})

 

响应form表单的get请求

else if(ParseUrlObject.pathname=="/views/comments"){
//开始解析请求路径,使用url模块进行解析忽略掉get数据,把评论数据填充一下
var comment=ParseUrlObject.query
comment.date="2019-7-10"
/*console.log(comment)*/
comments.push(comment); //数据完成更新
//进行临时重定向状态码302; location为重定向地址
rep.statusCode=302;
rep.setHeader('Location','/')
rep.end()
}

其实服务端不存在comments这个html页面,form表单中action属性向这个地址发起请求,node进行地址解析,使用url获取请求地址的对象的get数据;手动的添加date信息;最后将新添加的comment,push或者pop到comments数组中;向客户端发送重定向状态码;和进行重定向;最后别忘记结束响应状态rep.end()

 

总结一下

node与php相比来说,虽然代码量多了不少,但是对于一些底层的东西可以很深刻的理解;有利于进一步的理解Web的运行机制;node脚本结束的时候comments内容会被清空

对啦,两个html页面的css我没怎么写,估计以后做到具体的项目的时候才会去美化,现在主要学习的是后端的处理过程

zpliu

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: