标签： 前端
2016年6月10日
前言
一些参考过的文章和例子:
- 使用express4.x版和Jade模板重写《nodejs开发指南》微博实例
- nswbmw的github
- 我的代码
js部分
书本上的例子主要用express2的语法写的，当我们学习时使用最新的包来运行就会出现问题。问题集中在mongodb的设置、bootstrap的用法还有模板的使用上，本文将以当前可行的语法重写例子。
首先要添加新的包，express4之后将中间件都分离出来了。
exppress-session
connect-flash
//app.js
//...
var flash = require('connect-flash');
var session = require('express-session');
// mongo与session配合的写法
var MongoStore = require('connect-mongo')(session);
var setting = require('./setting');
//...
app.use(flash()); //在use session之前
app.use(session({
secret: setting.cookieSecret,
key: setting.db, //cookie的键名
cookie: {maxAge: 1000 * 60 * 60 * 24 * 7}, //过期时间
resave: false, //是否每次相关请求都刷新过期时间，必须
saveUninitialized: false, //是否无论请求内容如何都生成cookie，必须
store: new MongoStore({
url: 'mongodb://localhost/' + setting.db
//可行的写法，生成数据将会在以setting.db命名的库上
})
})
// 代替视图助手的部分
app.use(function(req, res, next){
//res.locals上的属性会自动渲染到模板上
res.locals.user = req.session.user;
res.locals.post = req.session.post;
var error = req.flash('error');
res.locals.error = error.length ? error : null;
var success = req.flash('success');
res.locals.success = success.length ? success: null;
next();
})
app.use(express.static(path.join(__dirname, 'public'))); //有时出问题和这句的位置有关，服务静态文件
// /models/db.js
var setting = require('../setting');
var Db = require('mongodb').Db;
var Connection = require('mongodb').Connection;
var Server = require('mongodb').Server;
module.exports = new Db(setting.db, new Server(setting.host, setting.port, {}), {safe: true});
// setting.js
module.exports = {
cookieSecret: 'microblogphilo',
db: 'microblog',
host: 'localhost',
port: 27017,
}
文件routes/index.js没啥问题，注意req.flash, req.session, res.redirect别写错
参考资料：
connect-flash
express-session
connect-mongo
jade部分
主要参考jade的用法和bootstrap3的用法
//- layout.jade
doctype html
html
head
title= title + '- Mircoblog'
link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
link(rel='stylesheet', href='/stylesheets/style.css')
body
nav.navbar.navbar-inverse.navbar-fixed-top
.container-fluid
.navbar-header
button.navbar-toggle.collapsed(data-toggle='collapse', data-target='#navbar-nav', aria-expended='false')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='/') Microblog
#navbar-nav.navbar-collapse.collapse
ul.nav.navbar-nav
li(class={active: '#{current}' === 'home'})
a(href='/') home
if (!user)
li(class={active: '#{current}' === 'login'})
a(href='/login') login
li(class={active: '#{current}' === 'register'})
a(href='/reg') register
else
li: a(href='/logout') logout
//- 视图助手部分
if (success)
.alert.alert-success(role='alert', style={'margin-top': '1em'})= success
if (error)
.alert.alert-danger(role='alert', style={'margin-top': '1em'})= error
.container(style={'margin-top': '2rem'})
block content
hr
footer
p
a(href='https://github.com/chenxxzhe', target='_blank') Philoz
| 2016
script(src='/javascripts/jquery-1.12.4.min.js')
script(src='/javascripts/bootstrap.min.js')
//- index.jade
extends layout
block content
if (!user)
.jumbotron
h1 Welcome to Microblog
p Microblog is built by express
p
a.btn.btn-primary.btn-large(href='/login') Login
a.btn.btn-large(href='/reg') Register Now!
else
include ./say.jade
include ./post.jade
//- login.jade
extend layout
block content
form.form-horizontal(method='post')
fieldset
legend User Login
.form-group
label.col-sm-2.control-label(for='inputUsername')
| User Name:
.col-sm-10
input#inputUsername.form-control(type='text', placeholder='User name', name='user')
.form-group
label.col-sm-2.control-label(for='inputPassword')
| Password:
.col-sm-10
input#inputPassword.form-control(type='password', placeholder='Password', name='pwd')
button.btn.btn-primary.col-sm-offset-2(type='submit') Login
//- register.jade
extend layout
block content
form.form-horizontal(method='post')
fieldset
legend Register
.form-group
lable.col-sm-2.control-label(for='inputUserName')
| User Name:
.col-sm-10
input#inputUserName.form-control(type='text', placeholder='User Name', aria-describedby='help-block', name='user')
span#help-block.help-block.
User name is used to login and show your name
.form-group
label.col-sm-2.control-label(for='inputPassword')
| Password:
.col-sm-10
input#inputPassword.form-control(type='password', placeholder='Password', name='pwd')
.form-group
label.col-sm-2.control-label(for='inputPasswordAgain')
| Password Again:
.col-sm-10
input#inputPasswordAgain.form-control(type='password', placeholder='Password Again', name='pwda')
button.btn.btn-primary.col-sm-offset-2(type='submit') Register
//- user.jade
extends layout
block content
if (user)
include ./say.jade
include ./post.jade
//- post.jade 这部分有点绕，就是要每三个post一行
if (posts)
- for (var i = 0; i < posts.length; i = i + 3)
.row
- var j = 0
while j < 3 && j + i < posts.length
.col-sm-4
- var name = posts[j+i].user
h3
a(href='/user/#{posts[j+i].user}')= posts[j+i].user
| says:
p: small: time.text-muted(pubdate='#{posts[j+i].time}')= posts[j+i].time.toLocaleString('en-US',{hour12: false})
p= posts[j+i].post
- j = j + 1
//- say.jade
form.well.text-center(method='post', action='/post')
.input-group
label.sr-only(for='inputPost') post content
input#inputPost.form-control(type='text', placeholder='Say something :)', name='post')
span.input-group-btn
button.btn.btn-success(type='submit')
span.glyphicon.glyphicon-comment post
//- 要用到glyphicon，需要将bootstrap的fonts文件夹复制到public/
运行
要运行这个系统首先要安装并运行mongo的数据库
下载安装请到官网
记得设置环境路径到mongo安装目录的bin上
然后新建数据库并启动
例如在microblog的上一级新建blogdata文件夹
mkdir blogdata
mongod --dbpath blogdata
这样数据库就运行在localhost:27017上
再然后启动express
supervisor -n error DEBUG=mircoblog:* node ./bin/www
supervisor是为了监听node的改动，但网页还是要自己刷新
建议下载robomongo作为mongo的可视化管理工具
Robomongog官网