Nodejs Express4.x-Entwicklungsframework Notes_node.js

Express: ?Webanwendungs-Framework für?Node.js? Express ist ein übersichtliches und flexibles Node.js-Webanwendungs-Entwicklungsframework. Es bietet eine Reihe leistungsstarker Funktionen, die Sie bei der Erstellung verschiedener Web- und Mobilgeräteanwendungen unterstützen.

Inhaltsverzeichnis

Dieser Artikel konzentriert sich auf das Entwicklungsframework von Express4.x (insbesondere 4.10.4), das auch Mongoose, Ejs, Bootstrap und andere verwandte Inhalte umfasst.

Projekt erstellen
Verzeichnisstruktur
Express4.x-Konfigurationsdatei
Verwendung der EJS-Vorlage
Bootstrap-Schnittstellen-Framework
Routing-Funktion
Sitzungsnutzung
Seitentipps
Seitenzugriffskontrolle

Entwicklungsumgebung:

Ubuntu

MonogoDB: v2.6.4

nodejs:v0.11.2

npm 2.1.10 (Wenn nodejs mit Version 1.2.19 installiert ist, wurde dieser Artikel auf Version 2.x aktualisiert)

1. Projekt erstellen

Geben Sie das Projektverzeichnis ein

mkdir-Arbeitsplatz

CD-Arbeitsplatz

Express global installieren, und Express wird als Befehl im System installiert.

npm install -g express

Expressversion ansehen

Express -V

Hinweis: Der Express-Befehl ist in der express4.x-Version nicht mehr enthalten.

Express-Generator muss installiert werden

npm install express-generator -g

Detaillierte Informationen zum Installationsprozess finden Sie unter: „Vorbereiten der Nodejs-Entwicklungsumgebung Ubuntu“

Verwenden Sie den Express-Befehl, um ein Projekt zu erstellen und EJS zu unterstützen

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

erstellen: nodejs-demo (Projektname)
erstellen: nodejs-demo/package.json (Projektpaketinformationen)
erstellen: nodejs-demo/app.js (Hauptprogramm)
erstellen: nodejs-demo/public (öffentliches Verzeichnis)
erstellen: nodejs-demo/public/images
erstellen: nodejs-demo/public/javascripts
erstellen: nodejs-demo/public/stylesheets
erstellen: nodejs-demo/public/stylesheets/style.css
Erstellen Sie: nodejs-demo/routes (Routing-Verzeichnis, entwickeln Sie später Programme in diesem Verzeichnis und verwenden Sie es dann in app.js)
erstellen: nodejs-demo/routes/index.js
erstellen: nodejs-demo/routes/users.js
erstellen: nodejs-demo/views (Verzeichnis anzeigen, Vorlagendateien anzeigen usw.)
erstellen: nodejs-demo/views/index.ejs
erstellen: nodejs-demo/views/error.ejs
erstellen: nodejs-demo/bin
create: nodejs-demo/bin/www (Startdatei, wird zum Starten von app.js verwendet)
Abhängigkeiten installieren:
$ cd nodejs-demo && npm install
Führen Sie die App aus:
$ DEBUG=nodejs-demo ./bin/www

Projekt erfolgreich erstellt.

Installieren Sie Abhängigkeiten gemäß den oben genannten Tipps:

Code kopieren Der Code lautet wie folgt:

cd nodejs-demo && npm install

Starten Sie das Web gemäß den Anweisungen:

Code kopieren Der Code lautet wie folgt:

$DEBUG=nodejs-demo ./bin/www

Wir werden diese Methode jedoch nicht verwenden, um das Programm hier zu starten. Der Grund dafür ist, dass wir während des Entwicklungsprozesses Nodemon als Werkzeug verwenden müssen.
Nodemon wird verwendet, um Projektänderungen während des Entwicklungsprozesses dynamisch zu identifizieren und sie dann dynamisch zu laden (ähnlich der Java-Webentwicklung von Eclipse). Dieses Tool ist für die Webentwicklung unerlässlich

Nodemon installieren:

npm install nodemon -g

Warum verwenden wir also nicht das obige ./bin/www-Skript?

Der Grund dafür ist, dass nodemon ./bin/www keine Möglichkeit hat, Projektänderungen zu identifizieren. (Ich habe persönlich experimentiert. Wenn es Experten gibt, die es wissen, geben Sie mir bitte einen Rat)

App.js ändern:

Kommentieren Sie die letzte Zeile //module.exports = app

aus

Ersetzt durch: app.listen(3000);

Verwenden Sie den folgenden Befehl, um das Hauptprogramm von app.js zu starten:

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

Ändern Sie dann das Programm, um zu sehen, ob es dynamisch geladen wird. Es erscheint die folgende Eingabeaufforderung:

1. Dez. 16:22:07 – [nodemon] startet aufgrund von Änderungen neu …
1. Dez. 16:22:07 – [nodemon] startet „node app.js“

bedeutet wirksam werden.

Test:

Der lokale Port 3000 wird geöffnet und über den Browser darauf zugegriffen: localhost:3000

2. Verzeichnisstruktur

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

Verzeichniseinführung:

node_modules, speichert alle projektabhängigen Bibliotheken. (Jedes Projekt verwaltet seine eigenen Abhängigkeiten, was sich von Maven, Gradle usw. unterscheidet)
package.json, Projektabhängigkeitskonfiguration und Entwicklerinformationen
app.js, Haupteingang des Programms
öffentliche, statische Dateien (css, js, img)
Routen, Routing-Datei (C, Controller in MVC)
Ansichten, Seitendatei (Ejs-Vorlage)
nodejs-demo/bin/www (Startdatei, wird zum Starten von app.js verwendet)

Öffnen Sie app.js, um den Inhalt anzuzeigen:

/**
* 模块依赖
*/
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. Verwendung der EJS-Vorlage

Lassen Sie die EJS-Vorlagendatei eine Datei mit der Erweiterung HTML verwenden.

Ändern: app.js

var ejs = require('ejs'); //ejs einführen. Abhängigkeiten neu installieren>
app.engine('.html', ejs.__express);
app.set('view engine', 'html'); // app.set('view engine', 'ejs');
Benennen Sie um: „views/*.ejs“ in „views/*.html
“.

Der Zugriff auf localhost:3000 ist korrekt

Hauptsächlich Dateien wie index.ejs umbenennen

5. Bootstrap-Schnittstellen-Framework hinzufügen

Kopieren Sie einfach die JS- und CSS-Dateien in das entsprechende Verzeichnis im Projekt. Enthält 4 Dateien:

In das Verzeichnis public/stylesheets kopieren

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

In das Verzeichnis public/javascripts kopieren

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

Als nächstes teilen wir die Seite index.html in drei Teile: header.html, index.html, footer.html

header.html ist der Headerbereich der HTML-Seite
index.html ist der Inhaltsanzeigebereich
footer.html ist der untere Bereich der Seite

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>

Der Zugriff auf localhost:3000 ist korrekt.

Wir haben die Funktion von EJS-Vorlagen erfolgreich genutzt, um die öffentliche Kopf- und Fußzeile von der Seite zu trennen.

Und das Bootstrap-Schnittstellen-Framework wurde eingeführt.

6. Routing-Funktion

Lassen Sie uns die Geschäftsanforderungen für die Benutzeranmeldung entwerfen.

Zugriffspfad: /, Seite: index.html, keine Anmeldung erforderlich, direkter Zugriff möglich.
Zugriffspfad: /home, Seite: home.html, der Benutzer muss sich vor dem Zugriff anmelden.
Zugriffspfad: /login, Seite: login.html, Anmeldeseite, geben Sie den Benutzernamen und das Passwort korrekt ein und springen Sie automatisch zu home.html
Zugriffspfad: /logout, Seite: Keine. Nach dem Abmelden kehren Sie automatisch zur Seite index.html zurück

Öffnen Sie die Datei app.js und fügen Sie die Routing-Konfiguration hinzu

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

Hinweis: get ist eine Get-Anfrage, post ist eine Post-Anfrage und all sind alle Anfragen für diesen Pfad

Wir öffnen die Datei „routes/index.js“ und fügen die entsprechende Methode hinzu.

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});
};

Erstellen Sie zwei Dateien, „views/login.html“ und „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 %>

Ändern Sie index.html und fügen Sie einen Anmeldelink hinzu

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开发框架随手笔记，希望大家喜欢。