一、应用生成器
使用上节学习到express的知识,我们也可以从0开始,一步步把系统搭建起来。不过express中还有一个应用生成器,使用这个应用生成器可以快速的创建一个应用的框架,然后我们再在这个框架中完善我们需要的内容。
首先安装应用生成器:
$npm install -g express-generator</div>
运行express --version若能正常输出版本号,则安装成功。
我们的论坛名称可以为node_express_forum,然后使用express创建一个框架:
$express node_express_forum</div>
运行后,生成器会在这个目录下生成几个目录和文件:
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
</div>
已经生成成功。进入到这个目录:
$cd node_express_forum</div>
我们来看下生成的这个框架,方便知道后面怎么进行填充。
. ├── app.js ├── package.json // 依赖的模块 ├── bin │ └── www ├── public // 静态文件目录 │ ├── images │ ├── javascripts │ └── stylesheets │ └── style.css ├── routes // 路由,相当于控制器 │ ├── index.js │ └── users.js └── views // 视图 ├── error.jade ├── index.jade └── layout.jade</div>
打开package.json后,我们看到还需要再安装几个模块才能运行:
$npm install --save-dev</div>
好了,到现在框架已搭建完毕,我们来运行一下:
$npm start</div>
然后在浏览器中输入127.0.0.1:3000,就可以看到了:Express Welcome to Express。
二、准备工作
基本框架已经创建好了,现在开始我们论坛的准备工作。这里我们的准备工作有3个:模板引擎,模型,数据库,路由。
2.1 模板引擎
express里默认使用的模板引擎是jade,不过我们也可以选择其他的模板引擎,我这里选择了ejs,因为感觉ejs更像是个html文件,方便维护,当然,每个人都有自己的喜好。
$npm install ejs --save-dev</div>
然后在app.js中修改模板引擎:
app.set('view engine', 'ejs'); // 原为jade,现改为ejs
</div>
这里我会将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;
</div>
然后在app.js中加载路由模块:
var user = require('./routes/user');
//...
app.use('/user', user);
</div>
这样就可以访问/user和/user/reg页面了。如果需要增加其他的路由,则依照此方式创建添加即可。
三、注册与登录
我们论坛的功能:注册、登录、发布主题和回复主题。这4个功能的实现都需要连接数据库。
3.1 数据库连接
引入mysql模块,然后使用mysql.createPool()创建连接:
$npm install mysql --save-dev</div>
在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;
</div>
3.2 注册功能
注册功能的流程我们非常熟悉了:
- 加载注册页面;
- 用户输入数据后提交;
- 处理表单数据然后进行数据库操作
我们在routes/user.js中创建一个reg的get方式的路由用来加载注册页面:
// routes/user.js
// get方式
router.get('/reg', function(req, res, next) {
res.render('reg', { errmsg:'' }); // 加载reg.ejs模板
});
</div>
在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>用 户 名: <input type="text" name="username" required="required"></p>
<p>密 码: <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>
</div>
运行程序,并用浏览器访问127.0.0.1:3000/user/reg,注册页面就出来了。
然后再在routes/user.js中创建一个reg的post方式的路由用来处理提交过来的数据,post方式过来的数据并不能使用req.query变量获取,而应

