从零学习node.js之利用express搭建简易论坛(七)

站长资源 2024/11/28 佚名

75 1538 75

DDR爱好者之家 Design By 杰米

一、应用生成器

使用上节学习到express的知识，我们也可以从0开始，一步步把系统搭建起来。不过express中还有一个应用生成器，使用这个应用生成器可以快速的创建一个应用的框架，然后我们再在这个框架中完善我们需要的内容。
首先安装应用生成器：

$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，因为感觉ejs更像是个html文件，方便维护，当然，每个人都有自己的喜好。

$npm install ejs --save-dev

然后在app.js中修改模板引擎：

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

这里我会将views目录中的.jade文件清空，后续使用.ejs编写模板。

2.2 模型

这里我们说的模型是指MVC中的M，主要是进行数据库的连接和操作。创建models目录用来存放文件。

2.3 数据库

我们使用mysql数据库来存放数据，数据库名称可以叫做forum。里面有3张表：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页面了。如果需要增加其他的路由，则依照此方式创建添加即可。

三、注册与登录

我们论坛的功能：注册、登录、发布主题和回复主题。这4个功能的实现都需要连接数据库。

3.1 数据库连接

引入mysql模块，然后使用mysql.createPool()创建连接：

$npm install mysql --save-dev

在models目录下创建db.js，其他需要操作数据库的，首先引入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中创建一个reg的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中创建一个reg的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`="htmlcode">

// 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:'注册失败，请重新尝试'});
 }
 });
});


页面若跳转到首页，则说明注册成功了，查看下数据库是否将数据正确的插入了。


到这里，注册功能完成了，完成了吗？还没呢，我们这里注册完成后仅仅是跳转到了首页，还缺少的操作是：



  若直接跳转到首页，则默认是已经登录了，这里就需要记录用户的登录状态；
  若不跳转到首页，则注册成功后要跳转到登录页面让用户登录

  

我们这里使用第1种方式，稍后讲解如何记录用户的登录状态。


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`="htmlcode">

// 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="/UploadFiles/2021-04-02/jquery.min.js">

这里的提交接口是/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 "htmlcode">

// 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`="htmlcode">

// 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>


对主题的回复功能可以自己实现一下。


总结
写着写着就发现篇幅这么大了，而且充斥了大量的代码，需要我们细心的理解。下面给出详细的示例代码，大家可以下载学习，希望本文的内容对大家能有所帮助。
下载地址：点击这里

                                
                                
                                    nodejs,express,nodejs,express,教程,nodejs,express,教程 
                                DDR爱好者之家 Design By 杰米
                            
                        
                        
                            
                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            
                        
                        
                            
                                
                                    上一篇
                                    node.js入门学习之url模块
                                
                            
                            
                                
                                    下一篇
                                    从零学习node.js之express入门(六)
                                
                            
                        
                        
                        DDR爱好者之家 Design By 杰米
                        
                            
                                
                                
                                    评论“从零学习node.js之利用express搭建简易论坛(七)”
                                
                            
                            
                                
                                    
                                        
                                            
                                                
                                                    
                                                
                                                
                                                    
                                                
                                                
                                                    
                                                    
                                                    
                                                
                                                
                                                     再想想
                                                    
                                                    
                                                    
                                                    
                                                    
                                                
                                            
                                            
                                        
                                    
                                    
                                    
                                        暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

搜索

关键字搜索

从零学习node.js之利用express搭建简易论坛(七)

node.js入门学习之url模块

从零学习node.js之express入门(六)

评论“从零学习node.js之利用express搭建简易论坛(七)”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接