Node.js Express 搭建简易论坛实战：从环境配置到功能实现

作者：栖木时间：2026-10-21 22:43:53浏览：605

本文详细讲解如何利用 Node.js 和 Express 框架从零搭建一个简易论坛。内容涵盖使用应用生成器快速构建项目骨架、配置 EJS 模板引擎与 MySQL 数据库连接，并逐步实现用户注册、登录、Session 状态管理及主题列表展示等核心功能，适合初学者系统学习 Express 全栈开发流程。

应用生成器与项目初始化

一、应用生成器

基于前文掌握的 Express 基础知识，我们可以手动从零构建系统。但为了提升效率，Express 提供了应用生成器（Application Generator），它能快速生成标准的应用程序框架，开发者只需在此基础上补充业务逻辑即可。首先，需要全局安装该生成器工具。


$npm install -g express-generator

执行命令 express --version，若终端正常输出版本号信息，即表示安装成功。

设定项目名称为 node_express_forum，随后利用 Express 生成器创建项目框架：


$express node_express_forum

命令执行完毕后，生成器会在指定目录下自动创建多个目录和文件结构。


 create : node_express_forum  
 create : node_express_forum/package.json 
 create : node_express_forum/app.js  
 create : node_express_forum/public  
 create : node_express_forum/public/javascri
 create : node_express_forum/public/images 
 create : node_express_forum/public/styleshe
 create : node_express_forum/public/styleshe
 create : node_express_forum/routes  
 create : node_express_forum/routes/index.js
 create : node_express_forum/routes/users.js
 create : node_express_forum/views  
 create : node_express_forum/views/index.jad
 create : node_express_forum/views/layout.ja
 create : node_express_forum/views/error.jad
 create : node_express_forum/bin  
 create : node_express_forum/bin/www 
      
 install dependencies:   
 $ cd node_express_forum && npm install 
      
 run the app:    
 $ DEBUG=node-express-form:* npm start

确认生成成功后，进入该项目目录：


$cd node_express_forum

接下来分析生成的框架结构，以便后续进行功能填充。


.
├── app.js 
├── package.json // 依赖的模块
├── bin
│ └── www
├── public // 静态文件目录
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes // 路由，相当于控制器
│ ├── index.js
│ └── users.js
└── views // 视图
 ├── error.jade
 ├── index.jade
 └── layout.jade

查看 package.json 文件，发现还需安装部分依赖模块才能正常运行项目。


$npm install --save-dev

完成依赖安装后，启动项目：


$npm start

在浏览器地址栏输入 127.0.0.1:3000，若页面显示“Express Welcome to Express”，则说明框架运行正常。

论坛基础配置与路由规划

二、准备工作

基本框架已经创建好了，现在开始我们论坛的准备工作。这里我们的准备工作有3个：模板引擎，模型，数据库，路由。

2.1 模板引擎

Express 默认集成 Jade 模板引擎，但开发者可自由选择其他引擎。本文选用 EJS，因其语法更接近 HTML，便于维护，当然具体选择取决于个人偏好。


$npm install ejs --save-dev

在 app.js 文件中修改模板引擎配置：


app.set('view engine', 'ejs'); // 原为jade，现改为ejs

随后清空 views 目录下的 .jade 文件，后续所有模板将统一使用 .ejs 格式编写。

2.2 模型

此处提到的“模型”对应 MVC 架构中的 Model 层，主要负责数据库连接与数据操作。需新建 models 目录用于存放相关逻辑文件。

2.3 数据库

选用 MySQL 数据库存储数据，数据库命名为 forum。该库包含三张核心表：user、list 和 reply。

user 表（用户信息）包含字段：id, username, password, regtime
list 表（主题信息）包含字段：id, uid(用户id), title, content, createtime
reply 表（回复信息）包含字段：id, pid(主题id), uid(用户id), content, createtime

2.4 路由

前文曾使用 app.use() 或 app.get() 等方式实现路由，此外 Express 还提供了 express.Router 类用于创建模块化且可挂载的路由。Router 实例是一个完整的中间件和路由系统，常被称为“mini-app”。

在 routes/user.js 中（此处将原 users.js 重命名为 user.js）：


var express = require('express');
var router = express.Router(); // 实例化router

// 定义主页的路由
router.get('/', function(req, res, next) {
 res.render('index', { title: 'user' }); // 加载index.ejs模板并传递数据给模板
});

router.get('/reg', function(req, res, next) {
 res.render('index', { title: 'reg' });
});

module.exports = router;

随后在 app.js 中加载该路由模块：


var user = require('./routes/user');
//...
app.use('/user', user);

配置完成后，即可访问 /user 和 /user/reg 页面。如需添加其他路由，参照此方式创建并挂载即可。

用户注册与登录功能实现

三、注册与登录

论坛核心功能包括：注册、登录、发布主题和回复主题。这四项功能均需与数据库进行交互。

3.1 数据库连接

引入 mysql 模块，并通过 mysql.createPool() 创建连接池：


$npm install mysql --save-dev

在 models 目录下创建 db.js 文件，其他需要操作数据库的模块需首先引入此文件：


var mysql = require('mysql');

var pool = mysql.createPool({
 host : '127.0.0.1',
 user : 'root',
 password : '123',
 database : 'forum'
});

module.exports = pool;

3.2 注册功能

注册功能的流程如下：

加载注册页面；
用户输入数据并提交；
处理表单数据并执行数据库操作。

在 routes/user.js 中创建一个处理注册页面加载的 GET 路由：


// routes/user.js

// get方式
router.get('/reg', function(req, res, next) {
 res.render('reg', { errmsg:'' }); // 加载reg.ejs模板
});

在 views 目录下创建 reg.ejs 模板文件：


<!DOCTYPE html>
<html>
 <head>
 <title>注册</title>
 <link rel='stylesheet' href='/stylesheets/style.css' />
 <style type="text/css">
 .tip{color: #f00;}
 </style>
 </head>
 <body>
 <div class="container">
 <p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回到首页</a></p>
 <h1>注册</h1>
 <form action="/user/reg/" method="post">
 <% if(errmsg){ %>
 <p class="tip">*<%= errmsg %></p>
 <% } %>
 <p>用&nbsp;&nbsp;户&nbsp;&nbsp;名： <input type="text" name="username" required="required"></p>
 <p>密&emsp;&emsp;码： <input type="password" name="password" required="required"></p>
 <p>重复密码： <input type="password" name="password2" required="required"></p>
 <p><input type="submit" name="submit" value="submit"></p>
 </form>
 <p>已有帐号？ <a href="/user/login" rel="external nofollow" >点击登录</a></p>
 </div>
 </body>
</html>

运行程序，通过浏览器访问 127.0.0.1:3000/user/reg，即可看到注册页面。

接着在 routes/user.js 中创建处理提交数据的 POST 路由。注意，POST 方式提交的数据无法通过 req.query 变量获取，而应使用 req.body：


// routes/user.js

// post方式
router.post('/reg', function(req, res, next) {
 var username = req.body.username || '',
 password = req.body.password || '',
 password2 = req.body.password2 || '';

 if(password!=password2){
 res.render('reg', {errmsg:'密码不一致'});
 return;
 }
 var password_hash = user_m.hash(password), // 对密码进行加密
 regtime = parseInt(Date.now()/1000);

 // 数据库处理
});

所有涉及数据库处理的逻辑均封装在 models 中。在此，我们在 models 中创建 user.js：


// models/user.js

var pool = require('./db'), // 连接数据库
 crypto = require('crypto'); // 对密码进行加密

module.exports = {
 // 对字符串进行sha1加密
 hash : function(str){
 return crypto.createHmac('sha1', str).update('love').digest('hex');
 },

 // 注册
 // 因数据库操作是异步操作，则需要传入回调函数来对结果进行处理，而不能使用return的方式
 reg : function(username, password, regtime, cb){
 pool.getConnection(function(err, connection){
 if(err) throw err;

 // 首先检测用户名是否存在
 connection.query('SELECT `id` FROM `user` WHERE `username`=?', [username], function(err, sele_res){
  if(err) throw err;

 // 若用户名已存在，则直接回调
  if(sele_res.length){
  cb({isExisted:true});
  connection.release();
  }else{
  // 否则将信息插入到数据库中
  var params = {username:username, password:password, regtime:regtime};
  connection.query('INSERT INTO `user` SET ?', params, function(err, insert_res){
  if(err) throw err;

  cb(insert_res);
  connection.release();
  // 接下来connection已经无法使用，它已经被返回到连接池中 
 })
  }
 })
 });
 }
}

此处将用户名检测和数据插入两个功能合并处理，实际应用中建议在提交前单独检测用户名。注册功能的 Model 编写完成后，继续编写路由调用逻辑。


// routes/user.js

var user_m = require('../models/user'); // 引入model

// post方式
router.post('/reg', function(req, res, next) {
 // 与上面的代码一样

 // 数据库处理
 user_m.reg(username, password_hash, regtime, function(result){
 if(result.isExisted){
 res.render('reg', {errmsg:'用户名已存在'}); // 重新加载注册模板，并提示用户名已存在
 }else if(result.affectedRows){
 // 注册成功
 res.redirect('/');
 }else{
 // console.log('登录失败');
 res.render('reg', {errmsg:'注册失败，请重新尝试'});
 }
 });
});

若页面跳转至首页，说明注册成功，此时需检查数据库是否已正确插入数据。

至此，注册功能基本完成，但尚缺以下操作：

若直接跳转首页，默认用户已登录，需记录用户登录状态；
若不跳转首页，注册成功后应跳转至登录页面引导用户登录。

本文采用第一种方式，后续将讲解如何记录用户登录状态。

3.2 登录功能

登录流程与注册类似，但更为简单，仅需查询数据库中是否存在匹配的用户名和密码即可。

首先编写登录页面：


// views/login.ejs

<!DOCTYPE html>
<html>
 <head>
 <title>登录</title>
 <link rel='stylesheet' href='/stylesheets/style.css' />
 <style type="text/css">
 .tip{color: #f00;}
 </style>
 </head>
 <body>
 <div class="container">
 <p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回到首页</a></p>
 <h1>登录</h1>
 <form action="/user/login/" method="post">
 <% if(errmsg){ %>
 <p class="tip">*<%= errmsg %></p>
 <% } %>
 <p>用户名： <input type="text" name="username" required="required"></p>
 <p>密&emsp;码： <input type="password" name="password" required="required"></p>
 <p><input type="submit" name="submit" value="submit"></p>
 </form>
 <p>还没帐号？<a href="/user/reg" rel="external nofollow" >点击注册</a></p>
 </div>
 </body>
</html>

随后在 model/user.js 中添加数据库登录查询操作：


module.exports = {
 // ...

 // 登录
 login : function(username, password, cb){
 pool.getConnection(function(err, connection){
 if(err) throw err;

 connection.query('SELECT `id` FROM `user` WHERE `username`=? AND `password`=?', [username, password], function(err, result){
  if(err) throw err;

  cb(result);
  connection.release();
  // 接下来connection已经无法使用，它已经被返回到连接池中 
 })
 });
 }
}

最后在 routes/user.js 中添加登录路由：


// routes/user.js 

// 进入到登录页面
router.get('/login', function(req, res, next) {
 res.render('login', {errmsg:''});
});

// 处理登录请求
router.post('/login', function(req, res, next) {
 var username = req.body.username || '',
 password = req.body.password || '';

 var password_hash = user_m.hash(password);

 user_m.login(username, password_hash, function(result){
 if(result.length){
 // console.log( req.session );
 // req.session.user = {
 // uid : result[0].id,
 // username : username
 // }
 // res.redirect('/');
 res.send('登录成功');
 }else{
 // console.log('登录失败');
 res.render('login', {errmsg:'用户名或密码错误'});
 }
 });
});

登录功能代码编写完毕。

3.3 保存登录状态

通常使用 Session 保存用户登录状态。Express 框架本身未内置 Session 处理功能，需引入额外模块 express-session：


$npm install express-session --save-dev

在 app.js 中引用该模块：


var session = require('express-session')

app.use(session({
 secret: 'wenzi', // 建议使用 128 个字符的随机字符串
 cookie: { maxAge: 60*60*1000 }, // 设置时间
 resave : false,
 saveUninitialized : true
}));

配置完成后，即可使用 Session 保存数据。以登录成功后保存数据为例：


user_m.login(username, password_hash, function(result){
 if(result.length){
 // 将数据保存到名为user的session中
 req.session.user = {
 uid : result[0].id,
 username : username
 }
 res.redirect('/');
 }else{
 // console.log('登录失败');
 res.render('login', {errmsg:'用户名或密码错误'});
 }
});

另一个问题是：如何将 Session 中的数据传递给模板？例如，未登录时显示“注册、登录”链接，登录后显示“用户名、退出”信息。

在 app.js 中添加全局中间件：


app.use(function(req, res, next){
 // 如果session中存在，则说明已经登录
 if( req.session.user ){
 res.locals.user = {
 uid : req.session.user.uid,
 username : req.session.user.username
 }
 }else{
 res.locals.user = {};
 }
 next();
})

随后在模板中即可使用 user 变量：


<% if(user.uid){ %>
 <!-- 登录状态下 -->

<% }else{ %>
 <!-- 非登录状态下 -->

<% } %>

四、首页及详情页

首页展示与详情页交互

首页需展示主题列表并支持发表主题；点击链接进入详情页后，可对主题进行回复。注意，发表主题和回复主题均需在登录状态下进行。

4.1 首页

在 models 目录创建 list.js，从数据库获取主题列表：


// models/list.js

var pool = require('./db');

module.exports = {
 // 获取首页的主题
 getIndexList : function(cb){
 pool.getConnection(function(err, connection){
  if(err) throw err;

 // 连表查询，获取到作者的用户名
  connection.query('SELECT `list`.*, username FROM `list`, `user` WHERE `list`.`uid`=`user`.`id`', function(err, result){
   if(err) throw err;

   cb(result);
   connection.release();
   // 接下来connection已经无法使用，它已经被返回到连接池中 
  })
 });
 }
}

在 routes 中的 index.js 中调用 getIndexList 获取数据，并渲染 index.ejs 模板：


// routes/index.js

var list_m = require('../models/list');

router.get('/', function(req, res, next) {
 list_m.getIndexList(function(result){
 res.render('index', { data:result }); // 选择index模板并传递数据
 })
});

在 views/index.ejs 创建首页模板：


<h1>列表</h1>
<table>
 <tr>
 <td>标题</td>
 <td>作者</td>
 <td>创建时间</td>
 </tr>
 <% for(var i=0, len=data.length; i<len; i++) { %>
 <tr>
  <td><a href="/list/<%=data[i].id %>.html" rel="external nofollow" title="<%=data[i].title %>"><%=data[i].title %></a></td>
  <td><%=data[i].username %></td>
  <td><%=data[i].createtime %></td>
 </tr>
 <% } %>
</table>
<% if(user.username){ %>
<!-- 在登录状态展示输入框 -->
<div class="add">
 <p><input type="text" class="title"></p>
 <textarea class="content" cols="100" rows="10"></textarea>
 <p><input type="button" class="submit" value="提交"><span class="tip"></span></p>
</div>
<% }%>

数据展示完毕。

4.2 发表主题

在首页添加标题和内容输入框，通过 AJAX 方式提交数据。


<script type="text/javascript" src="http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
 var running = false;
 $('.submit').on('click', function(){
 if(running) return;
 running = true;
 $('.tip').text('');

 var title = $('.add .title').val();
  content = $('.add .content').val();
 if(!title || !content){
  $('.tip').text('*输入不能为空');
  return;
 }
 $('.tip').text('数据正在提交中...');

 $.ajax({
  url : '/list/addtopic', // 提交接口
  data : {title:title, content:content},
  dataType : 'json',
  type : 'get'
 }).done(function(result){
  if(result.code==0){
  var html = '<tr><td><a href="'+result.data.url+'" rel="external nofollow" title="'+result.data.title+'">'+result.data.title+'</a></td><td>'+result.data.author+'</td><td>'+result.data.createtime+'</td></tr>';
  $('table').append(html);
  $('.tip').text('');
  $('.title, .content').val('');
  }else{
  $('.tip').text('添加失败');
  }
  running = false;
 })
 })
</script>

提交接口为 /list/addtopic，因此需创建对应路由：在 routes 目录下创建 list.js：


// routes/list.js

router.get('/addtopic', function(req, res){
 // 在登录状态下可以添加主题
 if(req.session.user){
 var title = req.query.title,
 content = req.query.content,
 uid = req.session.user.uid,
 createtime = parseInt(Date.now()/1000);

 var params = {uid:uid, title:title, content:content, createtime:createtime};

 list_m.addTopic(params, function(result){
 // console.log(result);
 if(result.affectedRows){
 res.json({code:0, msg:'添加成功', data:{url:'/list/'+result.insertId+'.html', title:title, author:req.session.user.username, createtime:createtime}});
 }else{
 res.json({code:2, msg:'添加失败，请重新尝试'})
 }
 });
 
 }else{
 res.json({code:1, msg:'您还未登录'})
 }
})

此处调用了 list_m.addTopic，因此需在 models/list.js 中添加 addTopic 方法：


// models/list.js

/*
 添加主题
 uid, title, content, createtime
*/
addTopic : function(params, cb){
 pool.getConnection(function(err, connection){
  if(err) throw err;

  connection.query('INSERT INTO `list` SET ?', params, function(err, result){
   if(err) throw err;

   cb(result);
   connection.release();
   // 接下来connection已经无法使用，它已经被返回到连接池中 
  })
 });
}

4.3 详情页

首页列表中，详情页链接设置为 /list/1.html 等形式，也可设为其他格式（如 /list?pid=1），只要路由配置正确即可。


// routes/list.js

// http://127.0.0.1:3000/list/1.html
router.get('/:pid.html', function(req, res) {
 var pid = req.params.pid || 1;

 console.log(pid);
});

详情页需获取主题详细信息及回复列表，因此在 list_m 中：


// models/list.js

// 根据id查询主题的详情信息
getListById : function(id, cb){
 pool.getConnection(function(err, connection){
  if(err) throw err;

  connection.query('SELECT * FROM `list` WHERE `id`=?', [id], function(err, result){
   if(err) throw err;

   cb(result);
   connection.release();
   // 接下来connection已经无法使用，它已经被返回到连接池中 
  })
 });
},

// 某主题的回复
getReplyById : function(pid, cb){
 pool.getConnection(function(err, connection){
  if(err) throw err;

  connection.query('SELECT * FROM `reply` WHERE `pid`=?', [pid], function(err, result){
   if(err) throw err;

   cb(result);
   connection.release();
   // 接下来connection已经无法使用，它已经被返回到连接池中 
  })
 });
}

随后在路由中调用，此处使用 async 简单控制两个异步流程：


// http://127.0.0.1:3000/list/1.html
router.get('/:pid.html', function(req, res) {
 var pid = req.params.pid || 1;

 async.parallel([
 function(callback){
 list_m.getListById(pid, function(result){
 callback(null, result[0]);
 })
 },
 function(callback){
 list_m.getReplyById(pid, function(result){
 callback(null, result);
 })
 },
 ], function(err, results){
 // console.log( results );
 // res.json(results);
 res.render('list', { data:results });
 })
 
});

简要说明 async.parallel 的功能，下节将详细讲解。async.parallel([f1, f2, f3,…, fn], fb); 表示当 f1 到 fn 所有异步操作执行完毕后，将执行 fb 函数。此处即主题详情和回复请求均完成后，调用模板进行渲染。


// views/list.ejs

<p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >返回到首页</a></p>
<h1>详情</h1>
<p>标题： <%=data[0].title %></p>
<div><%=data[0].content %></div>
<div class="reply">
 <h2>评论</h2>
 <div class="reply_con">
 <table>
  <% for(var i=0, len=data[1].length; i<len; i++) { %>
  <tr>
   <td><%=(i+1) %></td>
   <td><%=data[1][i].content %></td>
   <td><%=data[1][i].createtime %></td>
  </tr>
 <% } %>
 </table>
 </div>
</div>

对主题的回复功能可由读者自行实现。

总结

随着内容展开，篇幅逐渐增加，且包含大量代码，需仔细理解。下方提供详细示例代码供下载学习，希望本文内容对大家有所帮助。

下载地址：点击这里

作者最新文章

NestJS 是什么？与 Express、Koa 的核心区别及选型建议

2026-11-05 13:46:41

生产环境升级 Node.js 的注意事项与兼容性测试策略

2026-11-05 09:19:24

nvm 常用命令详解：怎么平滑切换和升级 Node.js 版本

2026-11-04 09:02:34

JavaScript和JSP的根本区别：运行环境与执行机制解析

2026-11-03 23:30:18

使用nvm卸载指定版本Node.js并切换默认环境

2026-11-03 23:09:26