一、应用生成器
使用上节学习到express的知识,我们也可以从0开始,一步步把系统搭建起来。不过express中还有一个应用生成器,使用这个应用生成器可以快速的创建一个应用的框架,然后我们再在这个框架中完善我们需要的内容。 首先安装应用生成器:
运行express --version
若能正常输出版本号,则安装成功。
我们的论坛名称可以为node_express_forum,然后使用express创建一个框架:
$ 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方式的路由用来加载注册页面:
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已经无法使用,它已经被返回到连接池中
})
});
}
}
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中引用:
secret: 'wenzi',// 建议使用 128 个字符的随机字符串
cookie: { maxAge: 60601000 },// 设置时间
resave : false,saveUninitialized : true
}));
设置完成后,就可以使用session保存数据了。以登录成功后保存数据为例:
还有一个问题:如何把session中的数据传递给模板呢,比如没有登录时,显示“注册,登录”连接,登录后显示“用户名,登录”信息。
在app.js中添加:
然后在模板中就可以使用user变量了:
<% }else{ %>
<% } %>
四、首页及详情页
我们在首页能够展示主题列表并能发表主题,点击链接进入详情页后能该主题进行回复。当然发表主题和对主题进行回复都是在已经登录的状态进行的。
4.1 首页
在models目录创建list.js,从数据库中获取主题列表:
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模板:
router.get('/',next) {
list_m.getIndexList(function(result){
res.render('index',{ data:result }); // 选择index模板并传递数据
})
});
在views/index.ejs创建首页模板:
展示数据完毕。
4.2 发表主题
我们在首页上添加了可以输入标题和内容的两个输入窗口,可以使用ajax的方式提交数据。
这里的提交接口是/list/addtopic,因此我们需要再创建一个这样的路由:在routes目录下创建list.js:
// 在登录状态下可以添加主题
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',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 方法:
添加主题
uid,createtime
/
addTopic : function(params,connection){
if(err) throw err;
connection.query('INSERT INTO list
SET ?',result){
if(err) throw err;
cb(result);
connection.release();
// 接下来connection已经无法使用,它已经被返回到连接池中
})
});
}
4.3 详情页
在首页列表中,可以看到,我们将详情页的链接设置为了/list/1.html的方式,也可以设置成其他的方式(比如 /list?pid=1 等),只要设置好路由就行。
router.get('/:pid.html',res) {
var pid = req.params.pid || 1;
console.log(pid);
});
在详情页中需要获取到这个主题的详细信息和对这个主题的回复,因此在list_m中:
getListById : function(id,connection){
if(err) throw err;
connection.query('SELECT * FROM list
WHERE id
=?',[id],result){
if(err) throw err;
cb(result);
connection.release();
// 接下来connection已经无法使用,它已经被返回到连接池中
})
});
},// 某主题的回复
getReplyById : function(pid,connection){
if(err) throw err;
connection.query('SELECT * FROM reply
WHERE pid
=?',[pid],result){
if(err) throw err;
cb(result);
connection.release();
// 接下来connection已经无法使用,它已经被返回到连接池中
})
});
}
然后在路由中进行调用,这里使用async简单的控制了下两个异步的流程问题:
function(callback){
list_m.getListById(pid,function(result){
callback(null,result[0]);
})
},function(callback){
list_m.getReplyById(pid,result);
})
},],results){
// console.log( results );
// res.json(results);
res.render('list',{ data:results });
})
});
稍微解释下async.parallel
的功能,下节我们会详细的讲解。 async.parallel([f1,f2,f3,…,fn],fb);
是f1到fn所有的异步都执行完了就会执行fb函数。这里我们是主题的详情和对主题的回复都请求完成了,就可以调用模板渲染。