当前位置:Gxlcms > JavaScript > 从零学习node.js之利用express搭建简易论坛(七)

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

时间:2021-07-01 10:21:17 帮助过:3人阅读

一、应用生成器

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

  1. $npm install -g express-generator

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

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

  1. $express node_express_forum

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

  1. create : node_express_forum
  2. create : node_express_forum/package.json
  3. create : node_express_forum/app.js
  4. create : node_express_forum/public
  5. create : node_express_forum/public/javascri
  6. create : node_express_forum/public/images
  7. create : node_express_forum/public/styleshe
  8. create : node_express_forum/public/styleshe
  9. create : node_express_forum/routes
  10. create : node_express_forum/routes/index.js
  11. create : node_express_forum/routes/users.js
  12. create : node_express_forum/views
  13. create : node_express_forum/views/index.jad
  14. create : node_express_forum/views/layout.ja
  15. create : node_express_forum/views/error.jad
  16. create : node_express_forum/bin
  17. create : node_express_forum/bin/www
  18. install dependencies:
  19. $ cd node_express_forum && npm install
  20. run the app:
  21. $ DEBUG=node-express-form:* npm start

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

  1. $cd node_express_forum

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

  1. .
  2. ├── app.js
  3. ├── package.json // 依赖的模块
  4. ├── bin
  5. │ └── www
  6. ├── public // 静态文件目录
  7. │ ├── images
  8. │ ├── javascripts
  9. │ └── stylesheets
  10. │ └── style.css
  11. ├── routes // 路由,相当于控制器
  12. │ ├── index.js
  13. │ └── users.js
  14. └── views // 视图
  15. ├── error.jade
  16. ├── index.jade
  17. └── layout.jade

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

  1. $npm install --save-dev

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

  1. $npm start

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

二、准备工作

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

2.1 模板引擎

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

  1. $npm install ejs --save-dev

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

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

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

2.2 模型

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

2.3 数据库

我们使用mysql数据库来存放数据,数据库名称可以叫做forum。里面有3张表:user, list, reply。

  1. user表(用户)的字段有: id, username, password, regtime
  2. list表(主题)的字段有: id, uid(用户id), title, content, createtime
  3. 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):

  1. var express = require('express');
  2. var router = express.Router(); // 实例化router
  3. // 定义主页的路由
  4. router.get('/', function(req, res, next) {
  5. res.render('index', { title: 'user' }); // 加载index.ejs模板并传递数据给模板
  6. });
  7. router.get('/reg', function(req, res, next) {
  8. res.render('index', { title: 'reg' });
  9. });
  10. module.exports = router;

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

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

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

三、注册与登录

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

3.1 数据库连接

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

  1. $npm install mysql --save-dev

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

  1. var mysql = require('mysql');
  2. var pool = mysql.createPool({
  3. host : '127.0.0.1',
  4. user : 'root',
  5. password : '123',
  6. database : 'forum'
  7. });
  8. module.exports = pool;

3.2 注册功能

注册功能的流程我们非常熟悉了:

  1. 加载注册页面;
  2. 用户输入数据后提交;
  3. 处理表单数据然后进行数据库操作

我们在routes/user.js中创建一个reg的get方式的路由用来加载注册页面:

  1. // routes/user.js
  2. // get方式
  3. router.get('/reg', function(req, res, next) {
  4. res.render('reg', { errmsg:'' }); // 加载reg.ejs模板
  5. });

在views目录下创建reg.ejs:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>注册</title>
  5. <link rel='stylesheet' href='/stylesheets/style.css' />
  6. <style type="text/css">
  7. .tip{color: #f00;}
  8. </style>
  9. </head>
  10. <body>
  11. <div class="container">
  12. <p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回到首页</a></p>
  13. <h1>注册</h1>
  14. <form action="/user/reg/" method="post">
  15. <% if(errmsg){ %>
  16. <p class="tip">*<%= errmsg %></p>
  17. <% } %>
  18. <p>用  户  名: <input type="text" name="username" required="required"></p>
  19. <p>密  码: <input type="password" name="password" required="required"></p>
  20. <p>重复密码: <input type="password" name="password2" required="required"></p>
  21. <p><input type="submit" name="submit" value="submit"></p>
  22. </form>
  23. <p>已有帐号? <a href="/user/login" rel="external nofollow" >点击登录</a></p>
  24. </div>
  25. </body>
  26. </html>

运行程序,并用浏览器访问127.0.0.1:3000/user/reg,注册页面就出来了。

然后再在routes/user.js中创建一个reg的post方式的路由用来处理提交过来的数据,post方式过来的数据并不能使用req.query变量获取,而应该使用req.body

  1. // routes/user.js
  2. // post方式
  3. router.post('/reg', function(req, res, next) {
  4. var username = req.body.username || '',
  5. password = req.body.password || '',
  6. password2 = req.body.password2 || '';
  7. if(password!=password2){
  8. res.render('reg', {errmsg:'密码不一致'});
  9. return;
  10. }
  11. var password_hash = user_m.hash(password), // 对密码进行加密
  12. regtime = parseInt(Date.now()/1000);
  13. // 数据库处理
  14. });

凡是设计到数据库处理的,我们都将其放到models中。这里,我们在models中创建一个user.js:

  1. // models/user.js
  2. var pool = require('./db'), // 连接数据库
  3. crypto = require('crypto'); // 对密码进行加密
  4. module.exports = {
  5. // 对字符串进行sha1加密
  6. hash : function(str){
  7. return crypto.createHmac('sha1', str).update('love').digest('hex');
  8. },
  9. // 注册
  10. // 因数据库操作是异步操作,则需要传入回调函数来对结果进行处理,而不能使用return的方式
  11. reg : function(username, password, regtime, cb){
  12. pool.getConnection(function(err, connection){
  13. if(err) throw err;
  14. // 首先检测用户名是否存在
  15. connection.query('SELECT `id` FROM `user` WHERE `username`=?', [username], function(err, sele_res){
  16. if(err) throw err;
  17. // 若用户名已存在,则直接回调
  18. if(sele_res.length){
  19. cb({isExisted:true});
  20. connection.release();
  21. }else{
  22. // 否则将信息插入到数据库中
  23. var params = {username:username, password:password, regtime:regtime};
  24. connection.query('INSERT INTO `user` SET ?', params, function(err, insert_res){
  25. if(err) throw err;
  26. cb(insert_res);
  27. connection.release();
  28. // 接下来connection已经无法使用,它已经被返回到连接池中
  29. })
  30. }
  31. })
  32. });
  33. }
  34. }

我们将检测用户名和插入数据两个功能放到一起处理了,实际应用中,最好是在用户提交数据之前就对用户名进行检测。注册功能的model写好之后,就可以调用了,承接上面的代码,从数据库处理接着编写。

  1. // routes/user.js
  2. var user_m = require('../models/user'); // 引入model
  3. // post方式
  4. router.post('/reg', function(req, res, next) {
  5. // 与上面的代码一样
  6. // 数据库处理
  7. user_m.reg(username, password_hash, regtime, function(result){
  8. if(result.isExisted){
  9. res.render('reg', {errmsg:'用户名已存在'}); // 重新加载注册模板,并提示用户名已存在
  10. }else if(result.affectedRows){
  11. // 注册成功
  12. res.redirect('/');
  13. }else{
  14. // console.log('登录失败');
  15. res.render('reg', {errmsg:'注册失败,请重新尝试'});
  16. }
  17. });
  18. });

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

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

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

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

3.2 登录功能

登录过程与注册是非常类似的,而且比注册还要简单,只需要查询数据库中是否存在对应的用户名和密码即可。

首先编写一个登录页面:

  1. // views/login.ejs
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>登录</title>
  6. <link rel='stylesheet' href='/stylesheets/style.css' />
  7. <style type="text/css">
  8. .tip{color: #f00;}
  9. </style>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回到首页</a></p>
  14. <h1>登录</h1>
  15. <form action="/user/login/" method="post">
  16. <% if(errmsg){ %>
  17. <p class="tip">*<%= errmsg %></p>
  18. <% } %>
  19. <p>用户名: <input type="text" name="username" required="required"></p>
  20. <p>密 码: <input type="password" name="password" required="required"></p>
  21. <p><input type="submit" name="submit" value="submit"></p>
  22. </form>
  23. <p>还没帐号?<a href="/user/reg" rel="external nofollow" >点击注册</a></p>
  24. </div>
  25. </body>
  26. </html>

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

  1. module.exports = {
  2. // ...
  3. // 登录
  4. login : function(username, password, cb){
  5. pool.getConnection(function(err, connection){
  6. if(err) throw err;
  7. connection.query('SELECT `id` FROM `user` WHERE `username`=? AND `password`=?', [username, password], function(err, result){
  8. if(err) throw err;
  9. cb(result);
  10. connection.release();
  11. // 接下来connection已经无法使用,它已经被返回到连接池中
  12. })
  13. });
  14. }
  15. }

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

  1. // routes/user.js
  2. // 进入到登录页面
  3. router.get('/login', function(req, res, next) {
  4. res.render('login', {errmsg:''});
  5. });
  6. // 处理登录请求
  7. router.post('/login', function(req, res, next) {
  8. var username = req.body.username || '',
  9. password = req.body.password || '';
  10. var password_hash = user_m.hash(password);
  11. user_m.login(username, password_hash, function(result){
  12. if(result.length){
  13. // console.log( req.session );
  14. // req.session.user = {
  15. // uid : result[0].id,
  16. // username : username
  17. // }
  18. // res.redirect('/');
  19. res.send('登录成功');
  20. }else{
  21. // console.log('登录失败');
  22. res.render('login', {errmsg:'用户名或密码错误'});
  23. }
  24. });
  25. });

登录功能也编写好了。

3.3 保存登录状态

我们通常是使用session来保存用户的登录状态,express框架没有对session处理的功能,需要我们引入额外的模块express-session:

  1. $npm install express-session --save-dev

然后在app.js中引用:

  1. var session = require('express-session')
  2. app.use(session({
  3. secret: 'wenzi', // 建议使用 128 个字符的随机字符串
  4. cookie: { maxAge: 60*60*1000 }, // 设置时间
  5. resave : false,
  6. saveUninitialized : true
  7. }));

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

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

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

在app.js中添加:

  1. app.use(function(req, res, next){
  2. // 如果session中存在,则说明已经登录
  3. if( req.session.user ){
  4. res.locals.user = {
  5. uid : req.session.user.uid,
  6. username : req.session.user.username
  7. }
  8. }else{
  9. res.locals.user = {};
  10. }
  11. next();
  12. })

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

  1. <% if(user.uid){ %>
  2. <!-- 登录状态下 -->
  3. <% }else{ %>
  4. <!-- 非登录状态下 -->
  5. <% } %>

四、首页及详情页

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

4.1 首页

在models目录创建list.js,从数据库中获取主题列表:

  1. // models/list.js
  2. var pool = require('./db');
  3. module.exports = {
  4. // 获取首页的主题
  5. getIndexList : function(cb){
  6. pool.getConnection(function(err, connection){
  7. if(err) throw err;
  8. // 连表查询,获取到作者的用户名
  9. connection.query('SELECT `list`.*, username FROM `list`, `user` WHERE `list`.`uid`=`user`.`id`', function(err, result){
  10. if(err) throw err;
  11. cb(result);
  12. connection.release();
  13. // 接下来connection已经无法使用,它已经被返回到连接池中
  14. })
  15. });
  16. }
  17. }

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

  1. // routes/index.js
  2. var list_m = require('../models/list');
  3. router.get('/', function(req, res, next) {
  4. list_m.getIndexList(function(result){
  5. res.render('index', { data:result }); // 选择index模板并传递数据
  6. })
  7. });

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

  1. <h1>列表</h1>
  2. <table>
  3. <tr>
  4. <td>标题</td>
  5. <td>作者</td>
  6. <td>创建时间</td>
  7. </tr>
  8. <% for(var i=0, len=data.length; i<len; i++) { %>
  9. <tr>
  10. <td><a href="/list/<%=data[i].id %>.html" rel="external nofollow" title="<%=data[i].title %>"><%=data[i].title %></a></td>
  11. <td><%=data[i].username %></td>
  12. <td><%=data[i].createtime %></td>
  13. </tr>
  14. <% } %>
  15. </table>
  16. <% if(user.username){ %>
  17. <!-- 在登录状态展示输入框 -->
  18. <div class="add">
  19. <p><input type="text" class="title"></p>
  20. <textarea class="content" cols="100" rows="10"></textarea>
  21. <p><input type="button" class="submit" value="提交"><span class="tip"></span></p>
  22. </div>
  23. <% }%>

展示数据完毕。

4.2 发表主题

我们在首页上添加了可以输入标题和内容的两个输入窗口,可以使用ajax的方式提交数据。

  1. <script type="text/javascript" src="http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. var running = false;
  4. $('.submit').on('click', function(){
  5. if(running) return;
  6. running = true;
  7. $('.tip').text('');
  8. var title = $('.add .title').val();
  9. content = $('.add .content').val();
  10. if(!title || !content){
  11. $('.tip').text('*输入不能为空');
  12. return;
  13. }
  14. $('.tip').text('数据正在提交中...');
  15. $.ajax({
  16. url : '/list/addtopic', // 提交接口
  17. data : {title:title, content:content},
  18. dataType : 'json',
  19. type : 'get'
  20. }).done(function(result){
  21. if(result.code==0){
  22. 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>';
  23. $('table').append(html);
  24. $('.tip').text('');
  25. $('.title, .content').val('');
  26. }else{
  27. $('.tip').text('添加失败');
  28. }
  29. running = false;
  30. })
  31. })
  32. </script>

这里的提交接口是/list/addtopic,因此我们需要再创建一个这样的路由:在routes目录下创建list.js:

  1. // routes/list.js
  2. router.get('/addtopic', function(req, res){
  3. // 在登录状态下可以添加主题
  4. if(req.session.user){
  5. var title = req.query.title,
  6. content = req.query.content,
  7. uid = req.session.user.uid,
  8. createtime = parseInt(Date.now()/1000);
  9. var params = {uid:uid, title:title, content:content, createtime:createtime};
  10. list_m.addTopic(params, function(result){
  11. // console.log(result);
  12. if(result.affectedRows){
  13. res.json({code:0, msg:'添加成功', data:{url:'/list/'+result.insertId+'.html', title:title, author:req.session.user.username, createtime:createtime}});
  14. }else{
  15. res.json({code:2, msg:'添加失败,请重新尝试'})
  16. }
  17. });
  18. }else{
  19. res.json({code:1, msg:'您还未登录'})
  20. }
  21. })

这里用到了list_m.addTopic,因此需要在models/list.js中添加 addTopic 方法:

  1. // models/list.js
  2. /*
  3. 添加主题
  4. uid, title, content, createtime
  5. */
  6. addTopic : function(params, cb){
  7. pool.getConnection(function(err, connection){
  8. if(err) throw err;
  9. connection.query('INSERT INTO `list` SET ?', params, function(err, result){
  10. if(err) throw err;
  11. cb(result);
  12. connection.release();
  13. // 接下来connection已经无法使用,它已经被返回到连接池中
  14. })
  15. });
  16. }

4.3 详情页

在首页列表中,可以看到,我们将详情页的链接设置为了/list/1.html的方式,也可以设置成其他的方式(比如 /list?pid=1 等),只要设置好路由就行。

  1. // routes/list.js
  2. // http://127.0.0.1:3000/list/1.html
  3. router.get('/:pid.html', function(req, res) {
  4. var pid = req.params.pid || 1;
  5. console.log(pid);
  6. });

在详情页中需要获取到这个主题的详细信息和对这个主题的回复,因此在list_m中:

  1. // models/list.js
  2. // 根据id查询主题的详情信息
  3. getListById : function(id, cb){
  4. pool.getConnection(function(err, connection){
  5. if(err) throw err;
  6. connection.query('SELECT * FROM `list` WHERE `id`=?', [id], function(err, result){
  7. if(err) throw err;
  8. cb(result);
  9. connection.release();
  10. // 接下来connection已经无法使用,它已经被返回到连接池中
  11. })
  12. });
  13. },
  14. // 某主题的回复
  15. getReplyById : function(pid, cb){
  16. pool.getConnection(function(err, connection){
  17. if(err) throw err;
  18. connection.query('SELECT * FROM `reply` WHERE `pid`=?', [pid], function(err, result){
  19. if(err) throw err;
  20. cb(result);
  21. connection.release();
  22. // 接下来connection已经无法使用,它已经被返回到连接池中
  23. })
  24. });
  25. }

然后在路由中进行调用,这里使用async简单的控制了下两个异步的流程问题:

  1. // http://127.0.0.1:3000/list/1.html
  2. router.get('/:pid.html', function(req, res) {
  3. var pid = req.params.pid || 1;
  4. async.parallel([
  5. function(callback){
  6. list_m.getListById(pid, function(result){
  7. callback(null, result[0]);
  8. })
  9. },
  10. function(callback){
  11. list_m.getReplyById(pid, function(result){
  12. callback(null, result);
  13. })
  14. },
  15. ], function(err, results){
  16. // console.log( results );
  17. // res.json(results);
  18. res.render('list', { data:results });
  19. })
  20. });

稍微解释下async.parallel的功能,下节我们会详细的讲解。 async.parallel([f1, f2, f3,…, fn], fb); 是f1到fn所有的异步都执行完了就会执行fb函数。这里我们是主题的详情和对主题的回复都请求完成了,就可以调用模板渲染。

  1. // views/list.ejs
  2. <p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >返回到首页</a></p>
  3. <h1>详情</h1>
  4. <p>标题: <%=data[0].title %></p>
  5. <div><%=data[0].content %></div>
  6. <div class="reply">
  7. <h2>评论</h2>
  8. <div class="reply_con">
  9. <table>
  10. <% for(var i=0, len=data[1].length; i<len; i++) { %>
  11. <tr>
  12. <td><%=(i+1) %></td>
  13. <td><%=data[1][i].content %></td>
  14. <td><%=data[1][i].createtime %></td>
  15. </tr>
  16. <% } %>
  17. </table>
  18. </div>
  19. </div>

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

总结

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

下载地址:点击这里

人气教程排行