Info
公司马上要举行 hack day 了，这次决定和小伙伴用 Express 作为框架来搭建我们的应用，所以昨天搭出来UI后，今天开始系统的学习下 Express。
Start
首先是express的全局设置。
1 |
sudo npm install -g express
|
接着我们试着用express搭建一个简单的blog程序
在work path 运行命令
1 |
express -e ejs blog
|
可以看到express已经帮你创建了一系列的模板程序。接着进入blog目录安装ejs等相关依赖。
1 |
cd blog && npm install
|
运行
1 |
node app
|
并访问http://localhost:3000/ ,简单的hello world 程序已经生成。
下面来看下程序的整个结构，运行command
1 |
tree -I node*
|
express的模板程序结构看起来和rails的结构很相像。
1 2 3 4 5 6 7 8 9 10 11 12 |
├── app.js ├── package.json ├── public │ ├── images │ ├── javascripts │ └── stylesheets │ └── style.css ├── routes │ ├── index.js │ └── user.js └── views └── index.ejs |
Blog Design
对express的模板程序有了基本概念后，我们开始来实现一个稍微复杂的blog。
blog 需要实现下面的功能。
1 2 3 4 5 |
/：首页 /login：登录 /reg：注册 /post：发表文章 /logout：登出 |
blog 的数据存储采用mongodb。
Improve
首先我门先简单的改进下我们当前的blog程序。
首先是重写默认的路由
在 app.js 里面我们可以看到以下两行语句。
1 2 |
app.get('/', routes.index); app.get('/users', user.list); |
我们把这部分代码移到 routes/index.js 使代码结构看起来更为清晰。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
module.exports = function(app){ app.get('/',function(req,res){ res.render('index', { title: '主页' }); }); app.get('/reg',function(req,res){ res.render('reg', { title: '注册' }); }); app.post('/reg',function(req,res){ }); app.get('/login',function(req,res){ res.render('login', { title: '登录' }); }); app.post('/login',function(req,res){ }); app.get('/logout',function(req,res){ }); app.get('/post',function(req,res){ res.render('post', { title: '发表' }); }); app.post('/post',function(req,res){ }); }; |
同时在 app.js里将上面两行代码替换成。
1 |
routes(app);
|
Ok,接下来我们添加相应的ejs，实现后的前端界面结构应该如图所示。
1 2 3 4 5 6 |
└── views
├── footer.ejs
├── header.ejs
├── index.ejs
├── login.ejs
└── reg.ejs
|
footer.ejs
1 2 3 |
</article> </body> </html> |
header.ejs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Blog</title> <link rel="stylesheet" href="stylesheets/style.css"> </head> <body> <header> <h1><%= title %></h1> </header> <nav> <span><a title="主页" href="/">home</a></span> <span><a title="登录" href="/login">login</a></span> <span><a title="注册" href="/reg">register</a></span> </nav> <article> |
index.ejs
1 2 3 |
<%- include header %> 这是主页 <%- include footer %> |
login.ejs
1 2 3 4 5 6 7 |
<%- include header %> <form method="post"> 用户名：<input type="text" name="username" /><br /> 密码： <input type="password" name="password" /><br /> <input type="submit" value="登录" /> </form> <%- include footer %> |
reg.ejs
1 2 3 4 5 6 7 8 |
<%- include header %> <form method="post"> 用户名：<input type="text" name="username" /><br /> 密码： <input type="password" name="password" /><br /> 确认密码：<input type="password" name="password-repeat" /><br /> <input type="submit" value="注册" /> </form> <%- include footer %> |
上面所做的工作简单的概括来说就是把整个 blog 的 header 和 footer 分离开，并按此建立相应的登陆，注册页面。
可以通过访问http://localhost:3000/ 来查看当前主页。
mongo db
首先是安装。mac下安装mongodb很简单。
1 2 |
brew update brew install mongodb |
测试
1 2 3 |
mongo > db.test.save({a:1}) > db.test.find() |
mongo db装上后 开始安装node js的依赖。
在 package.json 中加入。
1 2 |
"mongodb":"*", "connect-mongo":"*" |
运行
1 |
npm install
|
安装完成后，我们就能够在程序中对mongo db进行操作了。
我们在blog下面新建 settings.js 用来存储我们blog程序的相关配置。
1 2 3 4 5 |
module.exports = {
cookieSecret: 'myblog',
db: 'blog',
host: 'localhost'
};
|
创建 models 目录并新建 js 文件 db.js 用来操作 db
1 2 3 4 5 |
var settings = require('../settings'), Db = require('mongodb').Db, Connection = require('mongodb').Connection, Server = require('mongodb').Server; module.exports = new Db(settings.db, new Server(settings.host, Connection.DEFAULT_PORT, {})); |
而Package connect-mongo 是用来存储会话信息到数据库。
在 app.js 中添加。
1 2 |
var MongoStore = require('connect-mongo')(express); var settings = require('./settings'); |
同时在 app.use(express.methodOverride()) 后面添加
1 2 3 4 5 6 7 |
app.use(express.cookieParser()); app.use(express.session({ secret: settings.cookieSecret, store: new MongoStore({ db: settings.db }) })); |
其中 express.cookieParser() 是 Cookie 解析的中间件。express.session() 则提供会话支持，设置它的 store 参数为 MongoStore 实例，把会话信息存储到数据库中，以避免丢失。
在后面的小节中，我们可以通过 req.session 获取当前用户的会话对象，以维护用户相关的信息。”
至此，数据库的配置工作完成了，后面我们就可以用数据库了。
结论
Express的代码结构看起来还是蛮清晰的，npm上的第三方的资源也很丰富。
由于本人是Express的初学者，所以整个 blog 的过程也是完全参考 【一起学node.js （一）】用node+express搭建多人博客 这篇blog的内容，在此也感谢下原作者。