Node.js构建用户评论社区:从前端页面到后端逻辑

作者:服务小站时间:2026-10-23 07:02:06浏览:348

本文通过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实现用户评论社区功能(体验前后端开发的乐趣),希望对大家有所帮助。如有任何疑问,欢迎留言,小编会及时回复!

作者最新文章