不完全node实践教程-第二发

今天我们来搭建博客的首页.

关于express

先讲一下我们需要频繁用到的express的api.

req.query 处理get请求, 获取请求参数. 举个例子;

// GET localhost:/?name=zhu&&school[university]=hust
req.query.name //=> zhu
req.query.school.university //=>hust

req.params 处理get请求 获取类似于/:name形式的参数.举个例子

// GET /user/zhu
app.get('/user/:name', function(req){
req.params.name  // => zhu
//do something
})

req.body 处理post请求, 获取post请求体.举个例子;

// POST user[name]=zhu
req.body.name // => zhu

req.param() 处理get 和 post请求, 依次从params, body, query查找

我们等会儿试一下就知道怎么用这些api了.在这之前我们还要稍微讲一下ejs的东西.

ejs模板

上一发我们已经将模板index.ejs改成了hello world的形式. 我提到过render的过程实际上就是将传过来的参数最相应的’字符串’进行替换. 这些字符串是由三种标签组成的.

<% code %> 这种形式的用来写js代码, 控制逻辑

<%= string %> 这种形式用来显示要替换的字符串, 上一发的title就是这种

<%- include -% 这种形式的是用啦包含其他的模板, 方便模板的复用.

举一些例子:

// 从express传过来的数据是 users: ['zhu', 'hai', 'hao']
<ul>
<% for (var i = 0; i < users.length; i++){%>
<li><%= users[i]%></li>
<% } %>
</ul>
// 替换之后的结果是
<ul>
<li>zhu</li>
<li>hai</li>
<li>hao</li>
</ul>

我们有一个模板a.ejs

i am a

还有一个b.ejs

<%- include a %>
i am b

那么渲染之后, b.ejs及时这个样子滴

i am a
i am b

好, 我们终于可以开始干活了!

开始干活

设计总体架构

我这个水平的同学..看到设计架构就会有一种刁刁哒的感觉.(我也装一逼).说人话就是设计一下这个博客要有哪些功能

可以注册

可以登陆

可以登出

好像少了点什么…哦对还要可以

登陆的用户可以发表文章

首页显示最近发的博客(当然这有点无脑, 暂时先这样计划)

设计路由

我们先来设计一下路由

/: 首页

/signup: 注册

/login: 登陆

/logout: 登出

/post: 发表文章

我们来看一下现在的app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});

module.exports = app;

1-6行 分别是引入一些必要的模块.

8-9行 是引入两个路由的模块

11行是实例化一个express对象

14-15行 是设置模板的静态文件防止的目录, 然后设置模板为ejs,也就是说我们可以设置成其他的.

19-23行 分别是加载日志中间件, json解析中间件, 解析urlencoded的中间件, 解析cookie的中间件, 设置静态文件目录

25-26行 设置请求盒路由处理的对应规则

29-33 51-57行分别用一个函数来处理httpcode400和500的问题

60行 导出模块让/bin/www使用

讲道理我们应该把要设置的路由规则添加到app.js里面. 但是想到后面我们可能要添加更多的路由, 这样会显得app.js有点杂乱.所以我们把app.js修改成这样

var routes = require('./routes/index');
var app = express();
// some thing
routes(app);

然后把index.js改成这样

module.exports = function(app) {
app.get('/', function(req, res, next) {
res.render('index', { title: 'world' });
});
}

我们再运行app看一下



好, 现在我们就可以在index里面添加路由了.在/routes新建文件login.js, signup.js, logout.js, post.js然后修改index.js

var express = require('express');
var router = express.Router();
var login = require('./login');
var signup = require('./signup');
var logout = require('./logout');
var post = require('./post')

module.exports = function(app) {
app.get('/', function(req, res, next) {
res.render('index', { title: 'world' });
});

app.use('/signup', signup);
app.use('login', login);
app.use('logout', logout);
app.use('post', post);
}

让app和数据库一起工作

在进行下一步操作之前我们要下两个包.一个是支持mongodb的, 一个是支持回话session的.

打开终端, 在项目根目录敲下如下命令

$ sudo npm install mongodb express-session connect-mongo --save

安装完成之后.

在根目录创建setting.js 用来保存数据库的配置. 新建model文件夹, 用来盛放模型文件. 并且在model文件夹新建文件database.js. 然后分别写入以下内容.

database.js

var mongoDb = require('mongodb').MongoClient;

var dbState = {
db: null
};

exports.connect = function(url, callback) {
if (dbState.db) return callback();
mongoDb.connect(url, function(err, db) {
if(err) return callback(err);
dbState.db = db;
return callback();
});
};

exports.get = function() {
return dbState.db;
};

exports.close = function(callback) {
if(dbState.db){
dbState.db.close(function(err, result) {
if(err) callback(err);
dbState.db = null;
});

}
};

setting.js

module.exports = {
cookieSecret: 'share',
db: 'share',
host: 'host',
post: 27017
};

然后在app.js添加:

db.connect(dbUrl, function(err) {
if (err) {
console.log("can not connect to mongo");
process.exit(0);
}
console.log("connect to mongo success");
});

这样一来, 只要我们在运行app的时候, 就会自动链接数据库, 而且用dbStates保存数据库链接的状态, 连接一次, 复用多次, 可以说是单例模式的运用.

然后, 然后..我们终于可以开始设计首页, 注册和登陆的前端页面了. 在view里面新建signup.ejs, login.ejs, 如果要加样式的话, 把相应的样式文件写在/public/stylesheets里面.然后注意引入的时候路径是/stylesheets/xxx.css, 因为在app.js已经设置了静态文件的根目录是/public.

代码我这里就不直接给出了.大家可以在这里获取. 如果你觉得我的太丑也可以自己diy…

一切都弄好之后, 再运行app. 没错的话应该是这个样子滴:

处理逻辑

现在上面有四个按钮显然是不合适的, 合理的做法是根据用户是否登陆来选择显示.

接下来我们来添加处理注册盒登陆的代码.在model文件夹新建文件user.js, 添加以下代码:

var mongodb = require('./database');
var assert = require('assert');
function User(user) {
this.na = user.na;
this.password = user.password;
this.email= user.email;
}
module.exports = User;

User.prototype.save = function(callback) {
var user = {
name: this.na,
password: this.password,
email: this.email
};

mongodb.get().collection('users', function(err, collection) {
if (err) {
mongodb.close();
return callback(err);
}
assert('string', !typeof(user.name), user.name );
collection.insert(user, function(err, user) {
if (err) {
return callback(err);
}
assert.equal('object', typeof(user), "can not insert user");
callback(null, user);
});
});
};

User.getByName = function(name, callback) {
var doc = {
name: name
};

mongodb.get().collection('users', function(err, collection) {
if(err) {
mongodb.close();
return callback(err);
}
collection.findOne(doc, function(err, user) {
if (err) {
return callback(err);
}
callback(null, user);
});
});
};

user分别有两个方法, 一个是保存用户信息的实例. 一个是通过名字获取那个户信息.然后在routes文件夹里面的signup.js 和login.js分别添加以下代码.

var crypto = require('crypto');
var User = require('../model/user');
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
res.render('signup', {title: 'signup'});
});

router.post('/' ,function(req, res, next) {
var name = req.body.name,
password = req.body.pwd,
password_re = req.body.pwd_re;
email = req.body.email;

if (password != password_re) {
req.flash('error', "two passsword is different");
return res.redirect('/signup');
}
var md5 = crypto.createHash('md5'), password_hex = md5.update(password).digest('hex');
var newUser = new User ({ na: name, password: password_hex, email: email });
console.dir(newUser);
User.getByName(name, function(err, user) {
if (err) { req.flash('error', err);
return res.redirect('/');
}
if (user) {

req.flash('error', "user has already exist");
return res.redirect('/login');
}
newUser.save(function(err, user) {
if (err) {
return res.redirect('/');
}
req.session.user = user;

return res.redirect('/');
});

});
});

module.exports = router;

第21和22行是用对用户密码进行md5加密. 然后存储进数据库.

var crypto = require('crypto');
var User = require('../model/user');
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
res.render('login', {title: 'login', user: req.session.user});
});

router.post('/', function(req, res, next) {
var name = req.body.name;
var password = req.body.pwd;

var md5 = crypto.createHash('md5'),
password_hex = md5.update(password).digest('hex');

var newUser = new User ({
na: name,
password: password_hex,
email: ""
});

User.getByName(name, function(err, user) {
if (!user) {
res.redirect('/login');
}
if (password_hex != user.password) {
req.flash("error", "password wrong!");
res.redirect("./login");
}
req.session.user = user;
res.redirect("/");
});
});

module.exports = router;

最后, 打开header.ejs模板(首页的代码可以从我的github找到.首页由header.ejs和content.ejs,footer.ejs组合而成), 修改内容为

<nav class='header-right'>
<ul>
<li>
<% if(user) { %>
<a class='button post' href='/post'>post</a >
<% } else { %>
<a class='button login' href='/login'>login</a >
<% } %>
</li>
<li>
<% if(user) { %>
<a class='button logout ' href='/logout'>logout</a >
<% } else { %>
<a class='button reg ' href='/signup'>signup</a >
<% } %>
</li>
<% if (user) {%>
<li class="user"><a class='link' href='/u/<%= user.name%>'><%= user.name %></a ></li>
<% } else {%>
<li class="home"><a class='link' href='/'>home</a ></li>
<% }%>
</ul>
</nav>

这样一来, 首页显示的按钮及时根据用户是否登陆而不同.

如果以上步骤都没有错, (这几乎是不可能的) 如果出错了, 请用以下步骤解决.

根据提示的错误查找代码看是否有明显的逻辑错误或者语法错误.大部分的错误都是这样引起的.

如果解决不了, 在博客下面留言, 或者在github issue区贴出来.

根据别的同学的回复查找错误.如果继续出错,回到第一步.

假设成功运行app, 打开浏览器应该是这样的



点击注册按钮



然后



点击logout



然后点击login, 用注册过的密码注册



登陆之后



终于, 我们完成了登陆和注册的功能, 由于需要一些初始化的工作, 和这是我第一次写博客, 所以导致这篇有点长…长…长…

如果大家有没看懂的地方, 今天的代码在day02

(今天的逼就装到这里, 谢谢大家.)