加入收藏 | 设为首页 | 会员中心 | 我要投稿李大同（https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!

当前位置：首页 > 百科 > 正文

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

发布时间：2020-12-16 08:18:13 所属栏目：百科来源：网络整理

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

一、应用生成器

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

运行express --version若能正常输出版本号，则安装成功。

我们的论坛名称可以为node_express_forum，然后使用express创建一个框架：

运行后，生成器会在这个目录下生成几个目录和文件：

install dependencies:
$ cd node_express_forum && npm install

run the app:
$ DEBUG=node-express-form:* npm start

已经生成成功。进入到这个目录：

我们来看下生成的这个框架，方便知道后面怎么进行填充。

打开package.json后，我们看到还需要再安装几个模块才能运行：

好了，到现在框架已搭建完毕，我们来运行一下：

然后在浏览器中输入127.0.0.1:3000，就可以看到了：Express Welcome to Express。

二、准备工作

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

2.1 模板引擎

express里默认使用的模板引擎是jade，不过我们也可以选择其他的模板引擎，我这里选择了ejs，因为感觉ejs更像是个html文件，方便维护，当然，每个人都有自己的喜好。

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

这里我会将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),createtime

2.4 路由

上节我们是使用app.use()或app.get()等方式来实现路由，同时，express还提供了express.Router类来创建模块化。可挂载的路由。Router 实例是一个完整的中间件和路由系统，因此常称其为一个 “mini-app”。

在routes/user.js中（这里我将其users.js改为了user.js）：

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

router.get('/reg',{ title: 'reg' });
});

module.exports = router;

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

这样就可以访问/user和/user/reg页面了。如果需要增加其他的路由，则依照此方式创建添加即可。

三、注册与登录

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

3.1 数据库连接

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

在models目录下创建db.js，其他需要操作数据库的，首先引入db.js:

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方式的路由用来加载注册页面：

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

在views目录下创建reg.ejs：

注册

回到首页

登录

还没帐号？点击注册

然后在model/user.js中添加上对数据库的登录操作：

// 登录
login : function(username,connection){
if(err) throw err;

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

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

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

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

// 处理登录请求
router.post('/login',password = req.body.password || '';

var password_hash = user_m.hash(password);

user_m.login(username,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：

然后在app.js中引用：

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

设置完成后，就可以使用session保存数据了。以登录成功后保存数据为例：

还有一个问题：如何把session中的数据传递给模板呢，比如没有登录时，显示“注册，登录”连接，登录后显示“用户名，登录”信息。

在app.js中添加：

然后在模板中就可以使用user变量了：

<% }else{ %>

<% } %>

四、首页及详情页

我们在首页能够展示主题列表并能发表主题，点击链接进入详情页后能该主题进行回复。当然发表主题和对主题进行回复都是在已经登录的状态进行的。

4.1 首页

在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',result){
if(err) throw err;

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

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

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

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

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

列表

<p><input type="button" class="submit" value="提交"><span class="tip"></span></p>
</div>
<% }%></pre>
</div>
<p>展示数据完毕。
</p>
<p><h3>4.2 发表主题</h3>
</p>
<p>我们在首页上添加了可以输入标题和内容的两个输入窗口，可以使用ajax的方式提交数据。
</p>
<div class="jb51code">
<pre class="brush:js;">
<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('');
<p>var title = $('.add .title').val();<br />
content = $('.add .content').val();<br />
if(!title || !content){<br />
$('.tip').text('*输入不能为空');<br />
return;<br />
}<br />
$('.tip').text('数据正在提交中...');</p>
<p>$.ajax({<br />
url : '/list/addtopic',// 提交接口<br />
data : {title:title,content:content},dataType : 'json',type : 'get'<br />
}).done(function(result){<br />
if(result.code==0){<br />
var html = '<tr><td><a href="'+result.data.url+'" rel="external nofollow" title="'+result.data.title+'">'+result.data.title+'</td><td>'+result.data.author+'</td><td>'+result.data.createtime+'</td></tr>';<br />
$('table').append(html);<br />
$('.tip').text('');<br />
$('.title,.content').val('');<br />
}else{<br />
$('.tip').text('添加失败');<br />
}<br />
running = false;<br />
})<br />
})</p>
</script></pre>
</div>
<p>这里的提交接口是/list/addtopic，因此我们需要再创建一个这样的路由：在routes目录下创建list.js：
</p>
<div class="jb51code">
<pre class="brush:js;">
// routes/list.js
<p>router.get('/addtopic',res){<br />
// 在登录状态下可以添加主题<br />
if(req.session.user){<br />
var title = req.query.title,content = req.query.content,uid = req.session.user.uid,createtime = parseInt(Date.now()/1000);</p>
<p>var params = {uid:uid,title:title,content:content,createtime:createtime};</p>
<p>list_m.addTopic(params,function(result){<br />
// console.log(result);<br />
if(result.affectedRows){<br />
res.json({code:0,msg:'添加成功',data:{url:'/list/'+result.insertId+'.html',author:req.session.user.username,createtime:createtime}});<br />
}else{<br />
res.json({code:2,msg:'添加失败，请重新尝试'})<br />
}<br />
});</p>
<p>}else{<br />
res.json({code:1,msg:'您还未登录'})<br />
}<br />
})</pre></p>
</div>
<p>这里用到了<code>list_m.addTopic</code>，因此需要在models/list.js中添加 addTopic 方法：
</p>
<div class="jb51code">
<pre class="brush:js;">
// models/list.js
<p>/<em><br />
添加主题<br />
uid,createtime<br />
</em>/<br />
addTopic : function(params,connection){<br />
if(err) throw err;</p>
<p>connection.query('INSERT INTO <code>list</code> SET ?',result){<br />
if(err) throw err;</p>
<p>cb(result);<br />
connection.release();<br />
// 接下来connection已经无法使用，它已经被返回到连接池中<br />
})<br />
});<br />
}</pre></p>
</div>
<p><h3>4.3 详情页</h3>
</p>
<p>在首页列表中，可以看到，我们将详情页的链接设置为了/list/1.html的方式，也可以设置成其他的方式（比如 /list?pid=1 等），只要设置好路由就行。
</p>
<div class="jb51code">
<pre class="brush:js;">
// routes/list.js
<p>// http://127.0.0.1:3000/list/1.html<br />
router.get('/:pid.html',res) {<br />
var pid = req.params.pid || 1;</p>
<p>console.log(pid);<br />
});</pre></p>
</div>
<p>在详情页中需要获取到这个主题的详细信息和对这个主题的回复，因此在list_m中：
</p>
<div class="jb51code">
<pre class="brush:js;">
// models/list.js
<p>// 根据id查询主题的详情信息<br />
getListById : function(id,connection){<br />
if(err) throw err;</p>
<p>connection.query('SELECT * FROM <code>list</code> WHERE <code>id</code>=?',[id],result){<br />
if(err) throw err;</p>
<p>cb(result);<br />
connection.release();<br />
// 接下来connection已经无法使用，它已经被返回到连接池中<br />
})<br />
});<br />
},// 某主题的回复<br />
getReplyById : function(pid,connection){<br />
if(err) throw err;</p>
<p>connection.query('SELECT * FROM <code>reply</code> WHERE <code>pid</code>=?',[pid],result){<br />
if(err) throw err;</p>
<p>cb(result);<br />
connection.release();<br />
// 接下来connection已经无法使用，它已经被返回到连接池中<br />
})<br />
});<br />
}</pre></p>
</div>
<p>然后在路由中进行调用，这里使用async简单的控制了下两个异步的流程问题：
</p>
<div class="jb51code">
<pre class="brush:js;">
// http://127.0.0.1:3000/list/1.html
router.get('/:pid.html',res) {
 var pid = req.params.pid || 1;
<p>async.parallel([<br />
function(callback){<br />
list_m.getListById(pid,function(result){<br />
callback(null,result[0]);<br />
})<br />
},function(callback){<br />
list_m.getReplyById(pid,result);<br />
})<br />
},],results){<br />
// console.log( results );<br />
// res.json(results);<br />
res.render('list',{ data:results });<br />
})</p>
<p>});</pre></p>
</div>
<p>稍微解释下<code>async.parallel</code>的功能，下节我们会详细的讲解。 <code>async.parallel([f1,f2,f3,…,fn],fb);</code> 是f1到fn所有的异步都执行完了就会执行fb函数。这里我们是主题的详情和对主题的回复都请求完成了，就可以调用模板渲染。
</p>
<div class="jb51code">
<pre class="brush:js;">
// views/list.ejs
<p>返回到首页</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></pre>
</div>
<p>对主题的回复功能可以自己实现一下。
</p>
<p><h3>总结</h3></p>
<p>写着写着就发现篇幅这么大了，而且充斥了大量的代码，需要我们细心的理解。下面给出详细的示例代码，大家可以下载学习，希望本文的内容对大家能有所帮助。</p>
<p>下载地址：</p>                        <p style="text-align:right;">（编辑：李大同）</p>
<p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p>
                    </td>
                  </tr>
                </table>
            </div>
            <div class="dede_pagess"><ul class="pagelist"></ul></div>
            <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div>
            <div class="g-box10">
            	<div class="t-2">相关内容</div>
<ul class="b-box12"></ul>
<ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/255706.html" target="_blank">xcode 5,Mountain Lion：性能非常慢</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/426886.html" target="_blank">ajax 请求canceled的问题</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/444148.html" target="_blank">es6学习笔记9--函数的扩展</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/173212.html" target="_blank">常用正则表达式 grep awk sed</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/57205.html" target="_blank">Qt5.7编译oracle数据库驱动（提供下载）</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/458900.html" target="_blank">c – 如何确保订购std :: map？</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/342375.html" target="_blank">Flash与PHP</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/252068.html" target="_blank">cocos2dx3.2文件结构和代码结构</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/436599.html" target="_blank">Web 2.0应用客户端性能问题十大根源</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/513759.html" target="_blank">Dojo和取消注册小部件</a></li><div class="cl"></div></ul>
            </div>
        </div>
    </div>
    <div class="right-1 fr">
    	<div class="g-box8">
        <div class="t-2">推荐文章</div>
            <ul></ul>
        </div>
    	<div class="g-box11">
        <div class="t-2">站长推荐</div>
            <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/baike/2020/1214/242792.html" target="_blank">ios – xcode 6 – 红色约束</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/341715.html" target="_blank">unrecognized/unsupported machine ID (r1 = 0x3</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1215/377541.html" target="_blank">为什么Flash Builder 4.6时出现“failed to crea</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/52191.html" target="_blank">Oracle有哪些服务是必须开启的？</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/448848.html" target="_blank">clip.xml资源文件---android</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1212/42339.html" target="_blank">在Oracle12C数据库创建wm_concat函数</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/448800.html" target="_blank">xml的另一个助手——schema</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/416865.html" target="_blank">在C#中,是一个声明为：int [] a = {numbers …};</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/464239.html" target="_blank">c – 这是什么样的格式？</a></li><li><a href="https://www.lidatong.com.cn/html/baike/2020/1216/472530.html" target="_blank">XML(三)Sax解析XML</a></li></ul>
        </div>
        <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 });	</script>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div>
    	<div class="g-box3 u-3">
        <div class="t-1">热点阅读</div>
            <ul class="b-box2"></ul>
        </div>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div>
        </div>
	<div class="cl"></div>
</div>
<div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div>
<div class="footer">
<p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p>
<p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p>
<p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p>
<p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p>
</div>
</body>
</html>