Nodejs Express4.x development framework notes_node.js

Express: ?web application framework for?Node.js?Express is a concise and flexible node.js web application development framework. It provides a series of powerful features to help you create various web and mobile device applications.

Table of Contents

This article focuses on the development framework of Express4.x (specifically 4.10.4), which also involves Mongoose, Ejs, Bootstrap and other related content.

Create project
Directory structure
Express4.x configuration file
Ejs template usage
Bootstrap interface framework
Routing function
Session usage
Page tips
Page access control

Development environment:

Ubuntu

MonogoDB: v2.6.4

nodejs:v0.11.2

npm 2.1.10 (If nodejs is installed with version 1.2.19, this article has been upgraded to version 2.x)

1. Create project

Enter the project directory

mkdir workplace

cd workplace

Install express globally, and express is installed into the system as a command.

npm install -g express

View express version

express -V

Note: The express command is no longer included in the express4.x version.

Need to install express-generator

npm install express-generator -g

For detailed installation process, see: "Preparing Nodejs Development Environment Ubuntu"

Use express command to create project and support ejs

hadoop@sven:~/workspace/nodeJs$ express -e nodejs-demo

create: nodejs-demo (project name)
create: nodejs-demo/package.json (project package information)
create: nodejs-demo/app.js (main program)
create : nodejs-demo/public (public directory)
create : nodejs-demo/public/images
create : nodejs-demo/public/javascripts
create : nodejs-demo/public/stylesheets
create : nodejs-demo/public/stylesheets/style.css
create: nodejs-demo/routes (routing directory, develop programs in this directory later, and then use it in app.js)
create : nodejs-demo/routes/index.js
create : nodejs-demo/routes/users.js
create: nodejs-demo/views (view directory, view template files, etc.)
create : nodejs-demo/views/index.ejs
create : nodejs-demo/views/error.ejs
create : nodejs-demo/bin
create: nodejs-demo/bin/www (startup file, used to start app.js)
install dependencies:
$ cd nodejs-demo && npm install
run the app:
$ DEBUG=nodejs-demo ./bin/www

Project created successfully.

Install dependencies according to the above tips:

Copy code The code is as follows:

cd nodejs-demo && npm install

Start the web according to the prompts:

Copy code The code is as follows:

$DEBUG=nodejs-demo ./bin/www

However, we are not going to use this method to start the program here. The reason is that we need to use nodemon as a tool during the development process.
Nodemon is used to dynamically identify project changes during the development process and then load them dynamically (this is similar to Eclipse's Java web development). This tool is essential for web development

Install nodemon:

npm install nodemon -g

So why don’t we use the ./bin/www script above?

The reason is that nodemon ./bin/www has no way to identify project changes. (I personally experimented. If there are experts who know, please give me some advice)

Modify app.js:

Comment out the last line //module.exports = app;

Replaced with: app.listen(3000);

Use the following command to start the app.js main program:

hadoop@sven:~/workspace/nodeJs/nodejs-demo$ nodemon app.js

Then modify the program to see if it will be loaded dynamically. There will be the following prompt:

1 Dec 16:22:07 – [nodemon] restarting due to changes…
1 Dec 16:22:07 – [nodemon] starting `node app.js`

means taking effect.

Test:

The local port 3000 is opened and accessed through the browser: localhost:3000

2. Directory structure

./
drwxrwxr-x 5 hadoop hadoop 4096 December 1 15:57 ../
-rw-rw-r– 1 hadoop hadoop 1495 December 1 16:22 app.js
-rw-r–r– 1 hadoop hadoop 12288 December 1 16:22 .app.js.swp
drwxr-xr-x 2 hadoop hadoop 4096 December 1 15:57 bin/
drwxrwxr-x 9 hadoop hadoop 4096 December 1 15:58 node_modules/
-rw-rw-r– 1 hadoop hadoop 326 December 1 15:57 package.json
drwxr-xr-x 5 hadoop hadoop 4096 December 1 15:57 public/
drwxr-xr-x 2 hadoop hadoop 4096 December 1 15:57 routes/
drwxr-xr-x 2 hadoop hadoop 4096 December 1 15:57 views/

Directory introduction:

node_modules, stores all project dependent libraries. (Each project manages its own dependencies, which is different from Maven, Gradle, etc.)
package.json, project dependency configuration and developer information
app.js, main entrance of the program
public, static files (css, js, img)
routes, routing file (C, controller in MVC)
Views, page file (Ejs template)
nodejs-demo/bin/www (startup file, used to start app.js)

Open app.js to view the content:

/**
* 模块依赖
*/
var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path');
var app = express();
//环境变量
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// 开发模式
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
// 路径解析
app.get('/', routes.index);
app.get('/users', user.list);
// 启动及端口
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});

4. Ejs template usage

Let the ejs template file use a file with the extension html.

Modify: app.js

var ejs = require('ejs'); //Introduce ejs. Reinstall dependencies>
app.engine('.html', ejs.__express);
app.set('view engine', 'html'); // app.set('view engine', 'ejs');
Rename: views/*.ejs to views/*.html

Accessing localhost:3000 is correct

Mainly rename files such as index.ejs

5. Add Bootstrap interface framework

In fact, just copy the js and css files to the corresponding directory in the project. Includes 4 files:

Copy to public/stylesheets directory

bootstrap.min.css
bootstrap-responsive.min.css

Copy to the public/javascripts directory

bootstrap.min.js
jquery-1.9.1.min.js

Next, we divide the index.html page into 3 parts: header.html, index.html, footer.html

header.html, is the header area of ​​the html page
index.html, is the content display area
footer.html, is the bottom area of ​​the page

header.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><%=: title %></title>
<!-- Bootstrap -->
<link href="http://www.geedoo.info/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- <link href="http://www.geedoo.info/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"> -->
</head>
<body screen_capture_injected="true">
index.html
<% include header.html %>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<% include footer.html %>
footer.html
<script src="http://www.geedoo.info/javascripts/jquery-1.9.1.min.js"></script>
<script src="http://www.geedoo.info/javascripts/bootstrap.min.js"></script>
</body>
</html>

Accessing localhost:3000 is correct.

We have successfully used the function of EJS templates to separate the public header and footer from the page.

And the bootstrap interface framework has been introduced.

6. Routing function

Let’s design the user login business requirements.

Access path: /, page: index.html, no login required, can be accessed directly.
Access path: /home, page: home.html, the user must log in before accessing.
Access path: /login, page: login.html, login page, enter the username and password correctly, and automatically jump to home.html
Access path: /logout, page: None. After logging out, you will automatically return to the index.html page

Open the app.js file and add routing configuration

app.get('/',routes.index);
app.route('/login')
.get(routes.login)
post(routes.doLogin);
app.get('/logout',routes.logout);
app.get('/home',routes.home);

Note: get is a get request, post is a post request, and all is all requests for this path

We open the routes/index.js file and add the corresponding method.

exports.index=function(req, res) {
 res.render('index', { title: 'index' });
};
exports.login=function(req,res){
 res.render('login',{title: '用户登录'});
};
exports.doLogin=function(req,res){
 var user = {
 username:"admin",
 password:"admin"
}
if(req.body.username==user.username && req.body.password==user.password){
 res.redirect('/home');
}
res.redirect('/login');
};
exports.logout = function(req,res){
 res.redirect('/');
};
exports.home = function(req,res){
 var user = {
 username:'admin',
 password:'admin'
 }
 res.render('home',{title:'Home',user:user});
};

Create two files, views/login.html and views/home.html

login.html

<% include header.html %> 
<div class="container-fluid">
<form class="form-horizontal" method="post">
<fieldset>
<legend>用户登陆</legend>
<div class="control-group">
<label class="control-label" for="username">用户名</label>
<div class="controls">
<input type="text" class="input-xlarge" id="username" name="username">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">密码</label>
<div class="controls">
<input type="password" class="input-xlarge" id="password" name="password">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">登陆</button>
</div>
</fieldset>
</form>
</div>
<% include footer.html %>
home.html：
<% include header.html %>
<h1>Welcome <%= user.username %>, 欢迎登陆！！</h1>
<a claa="btn" href="http://www.geedoo.info/logout">退出</a>
<% include footer.html %>

Modify index.html and add a login link

index.html

<% include header.html %>
<h1>Welcome to <%= title %></h1>
<p><a href="http://www.geedoo.info/login">登陆</a></p>
<% include footer.html %>

路由及页面我们都写好了，快去网站上试试吧。

7. Session使用

从刚来的例子上面看，执行exports.doLogin时，如果用户名和密码正确，我们使用redirect方法跳转到的home

res.redirect('/home');

执行exports.home时，我们又用render渲染页面，并把user对象传给home.html页面

res.render('home', { title: 'Home',user: user});

为什么不能在doLogin时，就把user对象赋值给session，每个页面就不再传值了。

session这个问题，其实是涉及到服务器的底层处理方式。

像Java的web服务器，是多线程调用模型。每用户请求会打开一个线程，每个线程在内容中维护着用户的状态。

像PHP的web服务器，是交行CGI的程序处理，CGI是无状态的，所以一般用cookie在客户的浏览器是维护用户的状态。但cookie在客户端维护的信息是不够的，所以CGI应用要模仿用户session，就需要在服务器端生成一个session文件存储起来，让原本无状态的CGI应用，通过中间文件的方式，达到session的效果。

Nodejs的web服务器，也是CGI的程序无状态的，与PHP不同的地方在于，单线程应用，所有请求都是异步响应，通过callback方式返回数据。如果我们想保存session数据，也是需要找到一个存储，通过文件存储,redis,Mongdb都可以。

接下来，我将演示如何通过mongodb来保存session，并实现登陆后用户对象传递。

app.js文件

在相应位置添加下面代码：

var session = require('express-session');
var connect = require('connect');
var SessionStore = require("session-mongoose")(connect);
var store = new SessionStore({
url:"mongodb://localhost/session",
 interval: 120000
});
app.use(session({
 secret: 'test.com',
 store: store,
 cookie:{maxAge:10000} //expire session in 10 seconds
}));
//用于把登录用户设置到res.locals里面，在home.html里显示
app.use(function(req,res,next){
 res.locals.user = req.session.user;
 console.log('Session is = ',req.session.user);
 next();
});

需要添加中间件connect、session-mongoose。

其中session-mongoose是用于连接mongodb数据库。然后自动写入session信息到数据库中（也可以用mongoose中间件，但是要自己实现session的写入）

app.use(session(….)) 这里是全局设置了session的信息及session信息存储的方式。

注：app.js文件有顺序要求，一定要注意！！！

安装session-mongoose依赖库

npm install connect

npm install session-mongoose

npm install session-mongoose

安装有错误但是没关系。

访问：http://localhost:3000/login，正常

修改routes/index.js文件

exports.doLogin方法

exports.doLogin = function(req, res){
 var user={ username:'admin', password:'admin' } 
 if(req.body.username===user.username && req.body.password===user.password){ 
  req.session.user=user; 
  return res.redirect('/home');
 } else { 
  return res.redirect('/login'); 
 }
};

exports.logout方法

exports.logout = function(req, res){
 req.session.user=null;
 res.redirect('/');
};

exports.home方法

exports.home = function(req, res){
 res.render('home', { title: 'Home'});
};

这个时候session已经起作用了，exports.home的user显示传值已经被去掉了。 是通过app.js中app.use的res.locals变量，通过框架进行的赋值。

app.use(function(req, res, next){
 res.locals.user = req.session.user;
 next();
});

注：这个session是express4.10.4的写法，与express4之前的版本是不一样的。

访问页面可以查看mongodb有没有数据：

nodejs-mongodb
nodejs-mongodb

由于上面配置的 cookie:{maxAge:10000} //expire session in 10 seconds
过期时间，因此你会看到mongodb里面的数据过一段时间就被清除了。
参考：

Mongoose：http://mongoosejs.com/

关于express4.2.0与express3.x操作的区别：http://blog.csdn.net/u013758116/article/details/38758351

8. 页面提示

登陆的大体我们都已经讲完了，最后看一下登陆失败的情况。

我们希望如果用户登陆时，用户名或者密码出错了，会给用户提示，应该如何去实现。

打开app.js的，增加res.locals.message

登陆的大体我们都已经讲完了，最后看一下登陆失败的情况。

我们希望如果用户登陆时，用户名或者密码出错了，会给用户提示，应该如何去实现。

打开app.js的，增加res.locals.message

app.use(function(req, res, next){
 res.locals.user = req.session.user;
 var err = req.session.error;
 delete req.session.error;
 res.locals.message = '';
 if (err) res.locals.message = '<div class="alert alert-danger">' + err + '</div>';
 next();
});

修改login.html页面，f7e1051a7314c7d7c4371c24ffe6d522

<% include header.html %>
<div class="container-fluid">
<form class="form-horizontal" method="post">
<fieldset>
<legend>用户登陆</legend>
<%- message %>
<div class="control-group">
<label class="control-label" for="username">用户名</label>
<div class="controls">
<input type="text" class="input-xlarge" id="username" name="username" value="admin">
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">密码</label>
<div class="controls">
<input type="password" class="input-xlarge" id="password" name="password" value="admin">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">登陆</button>
</div>
</fieldset>
</form>
</div>
<% include footer.html %>

修改routes/index.js，增加req.session.error

exports.doLogin = function(req, res){
 var user={
 username:'admin',
 password:'admin'
 }
 if(req.body.username===user.username && req.body.password===user.password){
 req.session.user=user;
 return res.redirect('/home');
 } else {
 req.session.error='用户名或密码不正确';
 return res.redirect('/login');
 }
};

让我们来看看效果： http://localhost:3000/login 输入错误的和密码， 用户名：dad，密码：da

boostrap-nodejs

9. 页面访问控制

网站登陆部分按照我们的求已经完成了，但网站并不安全。

localhost:3000/home，页面本来是登陆以后才访问的，现在我们不要登陆，直接在浏览器输入也可访问。

页面报错了，提示ba980d12e5b7c2433035a997a636db0b 变量出错。

GET /home?user==a 500 15ms
TypeError: D:\workspace\project\nodejs-demo\views\home.html:2
1| bd8252839a1160287e059aba355d0851
>> 2| 4a249f0d628e2318394fd9b75b4636b1Welcome ba980d12e5b7c2433035a997a636db0b, 欢迎登陆！！473f0a7621bec819994bb5020d29372a
3| 3776e88ac50f1d21a105088d366d11bd退出5db79b134e9f6b82c0b36e0489ee08ed
4| bd8252839a1160287e059aba355d0851
Cannot read property 'username' of null
at eval (eval at 8299e0e36aa4be98b826c9c76c3775f0 (D:\workspace\project\nodejs-demo\node_modules\ejs\lib\ejs.js:
at eval (eval at 8299e0e36aa4be98b826c9c76c3775f0 (D:\workspace\project\nodejs-demo\node_modules\ejs\lib\ejs.js:
at D:\workspace\project\nodejs-demo\node_modules\ejs\lib\ejs.js:249:15
at Object.exports.render (D:\workspace\project\nodejs-demo\node_modules\ejs\lib\ejs.js:287:
at View.exports.renderFile [as engine] (D:\workspace\project\nodejs-demo\node_modules\ejs\l
at View.render (D:\workspace\project\nodejs-demo\node_modules\express\lib\view.js:75:8)
at Function.app.render (D:\workspace\project\nodejs-demo\node_modules\express\lib\applicati
at ServerResponse.res.render (D:\workspace\project\nodejs-demo\node_modules\express\lib\res
at exports.home (D:\workspace\project\nodejs-demo\routes\index.js:36:8)
at callbacks (D:\workspace\project\nodejs-demo\node_modules\express\lib\router\index.js:161

这个页面被打开发，因为没有user.username参数。我们避免这样的错误发生。

还记录路由部分里说的get,post,all的作用吗？我现在要回到路由配置中，再做点事情。

修改app.js文件

app.get('/',routes.index);
app.route('/login')
.all(notAuthentication)
.get(routes.login)
.post(routes.doLogin);
app.route('/logout')
app.get('/',routes.index);
app.route('/login')
.all(notAuthentication)
.get(routes.login)
.post(routes.doLogin);
app.route('/logout')
.get(authentication)
.get(routes.logout);
app.route('/home')
.get(authentication)
.get(routes.home);

访问控制：

/ ，谁访问都行，没有任何控制
/login，用all拦截所有访问/login的请求，先调用authentication，用户登陆检查
/logout，用get拦截访问/login的请求，先调用notAuthentication，用户不登陆检查
/home，用get拦截访问/home的请求，先调用Authentication，用户登陆检查
修改app.js文件，增加authentication，notAuthentication两个方法

function authentication(req, res, next) {
 if (!req.session.user) {
 req.session.error='请先登陆';
 return res.redirect('/login');
 }
 next();
}
function notAuthentication(req, res, next) {
 if (req.session.user) {
  req.session.error='已登陆';
  return res.redirect('/home');
 }
 next();
}

配置好后，我们未登陆，直接访问localhost:3000/home时或者localhost:3000/logout，就会跳到/login页面

登录后, 访问localhost:3000/login 则直接跳到/home页面

到此，express4 相关内容到此为止。

以上内容是小编给大家分享的Nodejs Express4.x开发框架随手笔记，希望大家喜欢。