Express: ?rangka kerja aplikasi web untuk?Node.js?Express ialah rangka kerja pembangunan aplikasi web node.js yang ringkas dan fleksibel Ia menyediakan satu siri ciri berkuasa untuk membantu anda mencipta pelbagai aplikasi web dan peranti mudah alih.

Jadual Kandungan

Artikel ini memfokuskan pada rangka kerja pembangunan Express4.x (khususnya 4.10.4), yang turut melibatkan Mongoose, Ejs, Bootstrap dan kandungan lain yang berkaitan.

Buat projek
Struktur direktori
Fail konfigurasi Express4.x
Penggunaan templat Ejs
Rangka kerja antara muka Bootstrap
Fungsi penghalaan
Penggunaan sesi
Petua halaman
Kawalan akses halaman

Persekitaran pembangunan:

Ubuntu

MonogoDB: v2.6.4

nodejs:v0.11.2

npm 2.1.10 (Jika nodejs dipasang dengan versi 1.2.19, artikel ini telah dinaik taraf kepada versi 2.x)

1. Buat projek

Masukkan direktori projek

tempat kerja mkdir

cd tempat kerja

Pasang ekspres secara global, dan ekspres dipasang ke dalam sistem sebagai arahan.

npm pasang -g express

Lihat versi ekspres

ekspresi -V

Nota: Perintah ekspres tidak lagi disertakan dalam versi express4.x.

Perlu memasang penjana ekspres

npm pasang penjana ekspres -g

Untuk proses pemasangan terperinci, lihat: "Menyediakan Persekitaran Pembangunan Nodejs Ubuntu"

Gunakan perintah ekspres untuk mencipta projek dan menyokong ejs

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

buat: nodejs-demo (nama projek)
buat: nodejs-demo/package.json (maklumat pakej projek)
buat: nodejs-demo/app.js (program utama)
buat : nodejs-demo/public (direktori awam)
buat : nodejs-demo/public/images
buat : nodejs-demo/public/javascripts
buat : nodejs-demo/public/stylesheets
buat : nodejs-demo/public/stylesheets/style.css
buat: nodejs-demo/routes (direktori penghalaan, bangunkan atur cara dalam direktori ini kemudian, dan kemudian gunakannya dalam app.js)
buat : nodejs-demo/routes/index.js
buat : nodejs-demo/routes/users.js
buat: nodejs-demo/views (lihat direktori, lihat fail templat, dsb.)
buat : nodejs-demo/views/index.ejs
buat : nodejs-demo/views/error.ejs
buat : nodejs-demo/bin
buat: nodejs-demo/bin/www (fail permulaan, digunakan untuk memulakan app.js)
pasang dependencies:
$ cd nodejs-demo && npm install
jalankan apl:
$ DEBUG=nodejs-demo ./bin/www

Projek berjaya dibuat.

Pasang kebergantungan mengikut petua di atas:

Mulakan web mengikut gesaan:

Walau bagaimanapun, kami tidak akan menggunakan kaedah ini untuk memulakan program di sini. Sebabnya ialah kita perlu menggunakan nodemon sebagai alat semasa proses pembangunan.
Nodemon digunakan untuk mengenal pasti perubahan projek secara dinamik semasa proses pembangunan dan kemudian memuatkannya secara dinamik (ini serupa dengan pembangunan web Java Eclipse). Alat ini penting untuk pembangunan web

Pasang nodemon:

npm pasang nodemon -g

Jadi mengapa kita tidak menggunakan skrip ./bin/www di atas?

Sebabnya ialah nodemon ./bin/www tidak mempunyai cara untuk mengenal pasti perubahan projek. (Saya sendiri buat eksperimen. Jika ada pakar yang tahu, tolong beri saya nasihat)

Ubah suai app.js:

Ulas baris terakhir //module.exports = app;

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

1 Dis 16:22:07 – [nodemon] memulakan `node app.js`

Ujian:

2. Struktur direktori

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

Pengenalan direktori:

package.json, konfigurasi pergantungan projek dan maklumat pembangun
app.js, pintu masuk utama program
awam, fail statik (css, js, img)
laluan, fail penghalaan (C, pengawal dalam MVC)
Paparan, fail halaman (templat Ejs)
nodejs-demo/bin/www (fail permulaan, digunakan untuk memulakan app.js)

Buka app.js untuk melihat kandungan:

/**
* 模块依赖
*/
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. Penggunaan templat Ejs

app.engine('.html', ejs.__express);
app.set('lihat enjin', 'html'); // app.set('lihat enjin', 'ejs');
Namakan semula: views/*.ejs kepada view/*.html

5. Tambah rangka kerja antara muka Bootstrap

Salin ke direktori awam/stylesheets

bootstrap-responsive.min.css

Salin ke direktori awam/javascripts

jquery-1.9.1.min.js

index.html, ialah kawasan paparan kandungan
footer.html, ialah bahagian bawah halaman

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>

Mengakses localhost:3000 adalah betul.

6. Fungsi penghalaan

Laluan akses: /home, page: home.html, pengguna mesti log masuk sebelum mengakses.
Laluan akses: /log masuk, halaman: login.html, halaman log masuk, masukkan nama pengguna dan kata laluan dengan betul dan lompat ke rumah secara automatik.html
Laluan akses: /logout, halaman: Tiada Selepas log keluar, anda akan kembali ke halaman index.html
secara automatik

Buka fail app.js dan tambah konfigurasi penghalaan

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

Nota: dapatkan ialah permintaan dapatkan, siaran ialah permintaan siaran, dan semuanya adalah permintaan untuk laluan ini

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

log masuk.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 %>

index.html

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

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

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 = function(req, res){
 req.session.user=null;
 res.redirect('/');
};

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

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

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

<% 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 %>

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

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