Node.js实现用户评论社区功能(体验前端开发的乐趣)

前面

按照前面的部分，今天我们将完成一个由Node开发的后台服务器，并实现一个简单的用户评论社区。可以先看效果图：

开始构建项目文件夹注释列表，并在其中创建一个新的公共文件夹。公共文件夹存储我们允许客户端访问的资源，它在这里是打开的。app.js文件是我们的服务器代码。

放在index.html文件中的是网站的主页内容，它是由bootstrap框架快速构建的。可以先招一些假数据，这样渲染完页面就能看到效果了。核心代码：

ul class=' list-group comment-list ' {每个注释} } Li class=' list-group-item ' { $ value . content } } Span class=' time ' { $ value . time } }/Span Span class=' name ' { $ value . name } }/Span/Li { {/每个}}/ul js模板语法在此采用，模板字符串稍后会在服务器代码中呈现为真实数据。当用户访问网站的根目录时，服务器使用模板引擎来解析和呈现index.html，并将真实的html字符串返回给浏览器进行解析。Index.html将使用外部链样式文件和外部链脚本文件。请记住，这里的文件地址不能写相对路径，但必须写url地址。请参见以下内容：

link rel='样式表' href='/public/lib/bootstrap/dist/CSS/bootstrap . CSS ' link rel='样式表' href='/public/css/index.css '.script src=' http :/public/js/index . js/script的文件地址以/public/开头，其中/代表请求的根路径，发送请求时浏览器会自动替换为http://127.0.0.1:3000/。

当404.html主要用于处理用户对不存在的资源的请求时，我们可以给他们一个友好的提醒。

Post.html主要是一个评论页面。bootstrap也用于快速构建它，应该注意文件路径。这是一个收集用户评论并提交给后台处理的表单。表单提交数据的提交地址可以根据表单选项卡中的操作属性来指定。当您单击“提交”按钮时，数据将被发送到指定的地址，由服务器接收和处理。核心代码如下：

form action='/comment ' method=' get ' role=' form ' class=' comment-form '图例开始注释/图例Div class=' form-group ' Label for=' name '您的姓名：/Label输入类型=' text ' name=' name ' class=' form-control ' id=' name '占位符='请输入您的名字'必填maxlength=' 10 ' min length=' 2 '/Div Div class=' form-group ' Label for=' content '注释内容：/Label text area name=' content ' id='

在app.js中，介绍了节点中的http服务构建核心模块、fs文件操作模块和URL地址解析模块。art-template第三方包主要用于服务器模板引擎解析just index.html模板字符串。我们要注意url核心模块中的parse方法，它可以将一个包含查询字符串的url地址解析成一个对象，通过它我们可以很容易的得到用户表单提交的数据，也就是查询字符串的具体内容。您可以看到以下演示：

通过url.parse()传入第二个参数：true，查询字符串可以转换成对象，方便以后获取提交的数据。

这里，我们还使用了服务器端重定向的概念。当用户提交表单数据时，页面将跳转到/comment地址。需要在服务器端请求处理功能中设置响应状态码：302，通过响应头的位置属性告诉浏览器重定向地址。代码如下：

Res.statusCode=302 //将响应状态代码设置为302(重定向)res. setheader ('location '，'/')//设置响应头位置，告诉浏览器重定向地址app.js中的核心代码如下：

Http.createserver ((req，res)={letobj=Url.parse (req.url，true)//获取Url模板的解析后的url对象，并传入第二个参数“true”。将表单提交的查询字符串查询转换为对象let pathname=obj . pathname let query=obj . queryif(pathname=='/'){ fs . readfile('。/public/view/index . html '，(err，data)={ if(err){ return RES . end(' 404 NOT FOUND ')}让HTMl str=template . render(data . tostring()，{ comments : comments })RES . end(HTMl str)})} else if(pathname . indexof('/public/')==0){ fs . readfile('。pathname，(err，data)={ if(err){ return RES . end(' 404 NOT FOUND ')} RES . end(data)})else if(pathname==='/post '){ fs . readfile('。/public/view/post . html '，(err，data)={ if(err){ return RES . end(' 404 NOT FOUND ')} RES . end(data)})else if(pathname=='/comment '){ RES . statuscode=302//将响应状态代码设置为302(重定向)res. setheader ('location '，'/')//设置响应头位置，告诉浏览器重定向地址if (query。name) {query。时间=' 2015-5-10 '评论。unshift(query)}//让用户手动输入'/comment '，这将导致空的query res.end() //结束响应。不缺少} else {个{fs.readfile('。/public/view/404 . html '，(err，data)={ if(err){ return RES . end(' 404未找到')} res.end (data)})})。听(30000

完整的代码可以在GitHub地址看到：这里

解释

这篇文章是关于我从零到一学习Node.js的资料。如果你觉得对你有帮助，不妨给它一颗星，我会不断更新相关系列教程。

项目地址：GitHub

摘要

如上所述，边肖推出的Node.js实现了用户评论社区功能(体验前端开发的乐趣)，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！