Node.js构建用户评论社区:从前端页面到后端逻辑
本文通过Node.js搭建一个简单的用户评论社区,展示前后端开发流程。内容涵盖项目结构搭建、使用Bootstrap快速构建页面、服务端利用http/fs/url模块处理请求,以及通过art-template模板引擎渲染数据。重点解析表单提交、URL参数解析及302重定向机制,帮助开发者理解基础Web应用逻辑。
前言
项目结构与前端页面搭建
承接上一节内容,本节将使用Node.js构建后端服务器,实现一个基础的用户评论社区功能。可参考以下界面展示:


首先创建项目目录comment-list,并在其中建立public子目录。public目录用于存放客户端可访问的公开资源。app.js文件包含服务端核心逻辑。

index.html文件存储网站首页内容,此处利用bootstrap框架进行快速构建。可预先准备模拟数据以验证页面渲染效果。关键实现如下:
<ul class="list-group comment-list">
{{each comments}}
<li class="list-group-item">{{$value.content}}<span class="time">{{$value.time}}</span> <span class="name">{{$value.name}}</span></li>
{{/each}}
</ul>
此处使用JS模板语法,后续将在服务端将模板字符串渲染为实际数据。当用户访问根目录时,服务端通过模板引擎解析index.html,并向浏览器返回渲染后的HTML字符串。index.html中引用的外部样式和脚本文件,其路径必须为绝对URL而非相对路径,示例如下:
<link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/public/css/index.css">
....
<script src="/public/js/index.js"></script>
文件路径以/public/为前缀,其中/代表请求根路径,浏览器在发起请求时会自动将其替换为http://127.0.0.1:3000/。

404.html用于处理用户请求不存在的资源情况,此时可返回友好的提示信息。
post.html为发表评论页面,同样基于bootstrap框架搭建,需特别注意文件路径配置。该页面包含一个表单,用于收集用户评论并提交至后端处理。表单数据可通过form标签的action属性指定提交目标,点击提交按钮后,数据将发送至指定地址由服务端接收。核心代码示例:
<form action="/comment" method="GET" role="form" class="comment-form">
<legend>开始评论</legend>
<div class="form-group">
<label for="name">你的大名:</label>
<input type="text" name="name" class="form-control" id="name" placeholder="请输入你的大名" required maxlength="10" minlength="2">
</div>
<div class="form-group">
<label for="content">评论内容:</label>
<textarea name="content" id="content" class="form-control" rows="6" required minlength="5" maxlength="10"></textarea>
</div>
<button type
服务端核心逻辑与数据处理
编写服务端代码app.js
在app.js中引入了Node.js的http服务构建核心模块、fs文件操作模块以及urlURL解析模块。art-template第三方库用于服务端模板引擎,以解析前述index.html模板字符串。需重点关注url核心模块中的parse方法,该方法可将包含查询字符串的URL解析为对象,从而方便地提取用户表单提交的数据(即查询字符串的具体内容)。演示如下:

通过url.parse()传入第二个参数:true,可将query查询字符串转换为对象,便于后续获取提交的数据。
此处还涉及服务端重定向概念。用户提交表单后,页面将跳转至/comment地址。需在服务端请求处理函数中设置响应状态码:302,并通过响应头location属性告知浏览器重定向的目标地址。代码如下:
res.statusCode = 302 // 设置响应状态码为302(重定向)
res.setHeader('location', '/') // 设置响应头location,告诉浏览器重定向地址
app.js中的核心代码片段如下:
http.createServer((req, res) => {
let obj = url.parse(req.url, true) // 得到url模板解析后的Url对象,传入第二个参数“true”,将form表单提交的查询字符串query转换成对象
let pathname = obj.pathname
let query = obj.query
if (pathname === '/') {
fs.readFile('./public/views/index.html', (err, data) => {
if (err) {
return res.end('404 NOT FOUND')
}
let htmlStr = template.render(data.toString(), {
comments: comments
})
res.end(htmlStr)
})
} 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/views/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', '/') // 设置响应头location,告诉浏览器重定向地址
if (query.name) {
query.time = '2015-5-10'
comments.unshift(query)
} // 放置用户手动输入'/comment',导致query为空
res.end() // 结束响应,不能少
} else {
fs.readFile('./public/views/404.html', (err, data) => {
if (err) {
return res.end('404 NOT FOUND')
}
res.end(data)
})
}
}).listen(3000, () => {
console.log('running...')
})
服务器启动与运行效果
启动服务器后,即可开始发表评论。

完整代码可访问GitHub仓库:此处
说明
本文内容源自我的从零到一学习Node.js课程资料。若觉得对您有帮助,请给予star,我将持续更新相关系列教程。
项目地址:GitHub
总结
以上为小编介绍的Node.js实现用户评论社区功能(体验前后端开发的乐趣),希望对大家有所帮助。如有任何疑问,欢迎留言,小编会及时回复!
Java和JavaScript应用场景对比:企业级后端 vs Web前端与Node.js
2026-11-04 16:42:01
JavaScript模块化开发入门:CommonJS与ES Module的区别
2026-11-03 23:31:34
怎么创建并运行第一个js文件
2026-11-03 21:49:02
JavaScript运行环境怎么搭建?Node.js官方下载与安装教程
2026-11-03 20:03:04
NestJS 集成 TypeORM 或 Prisma 实现数据库持久化操作
2026-11-03 18:56:13
