Nodejs Express4.x rangka kerja pembangunan note_node.js

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:

Salin kod Kod adalah seperti berikut:

cd nodejs-demo && npm install

Mulakan web mengikut gesaan:

Salin kod Kod adalah seperti berikut:

$DEBUG=nodejs-demo ./bin/www

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;

Digantikan dengan: app.listen(3000);

Gunakan arahan berikut untuk memulakan program utama app.js:

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

Kemudian ubah suai atur cara untuk melihat sama ada ia akan dimuatkan secara dinamik. Akan ada gesaan berikut:

1 Dis 16:22:07 – [nodemon] dimulakan semula kerana perubahan…

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

bermaksud mengambil kesan.

Ujian:

Port tempatan 3000 dibuka dan diakses melalui penyemak imbas: localhost:3000

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:

node_modules, menyimpan semua perpustakaan bergantung kepada projek. (Setiap projek menguruskan kebergantungan sendiri, yang berbeza daripada Maven, Gradle, dll.)

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

Biar fail templat ejs menggunakan fail dengan html sambungan.

Ubah suai: app.js

var ejs = require('ejs'); //Perkenalkan ejs. Pasang semula kebergantungan>

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

Mengakses localhost:3000 adalah betul

Terutamanya menamakan semula fail seperti index.ejs

5. Tambah rangka kerja antara muka Bootstrap

Malah, hanya salin fail js dan css ke direktori yang sepadan dalam projek. Termasuk 4 fail:

Salin ke direktori awam/stylesheets

bootstrap.min.css

bootstrap-responsive.min.css

Salin ke direktori awam/javascripts

bootstrap.min.js

jquery-1.9.1.min.js

Seterusnya, kami membahagikan halaman index.html kepada 3 bahagian: header.html, index.html, footer.html

header.html, ialah kawasan pengepala halaman html

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.

Kami telah berjaya menggunakan fungsi templat EJS untuk memisahkan pengepala dan pengaki awam daripada halaman.

Dan rangka kerja antara muka bootstrap telah diperkenalkan.

6. Fungsi penghalaan

Mari mereka bentuk keperluan perniagaan log masuk pengguna.

Laluan akses: /, halaman: index.html, tiada log masuk diperlukan, boleh diakses terus.

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

Kami membuka fail route/index.js dan menambah kaedah yang sepadan.

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

Buat dua fail, views/login.html dan views/home.html

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

Ubah suai index.html dan tambahkan pautan log masuk

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页面，<%- message %>

<% 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，页面本来是登陆以后才访问的，现在我们不要登陆，直接在浏览器输入也可访问。

页面报错了，提示<%= user.username %> 变量出错。

GET /home?user==a 500 15ms
TypeError: D:\workspace\project\nodejs-demo\views\home.html:2
1| <% include header.html %>
>> 2|

Welcome <%= user.username %>, 欢迎登陆！！

3| http://www.geedoo.info/logout">退出
4| <% include header.html %>
Cannot read property 'username' of null
at eval (eval at (D:\workspace\project\nodejs-demo\node_modules\ejs\lib\ejs.js:
at eval (eval at (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开发框架随手笔记，希望大家喜欢。

Label berkaitan：

nodejs_express4 nodejs_express4教程 nodejs_express4.0

sumber：php.cn

Artikel sebelumnya：jQuery menyedari fungsi menyeret bar pemisah ke kiri dan kanan_jquery Artikel seterusnya：jquery membuat style_jquery tersuai anda sendiri

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

• Apakah itu NullPointerException, dan bagaimana saya membetulkannya?
  2024-10-22 09:46:29
• Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C
  2024-10-13 13:53:41
• Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula
  2024-10-12 12:15:51
• Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu
  2024-10-11 22:47:31
• Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak
  2024-10-11 19:36:51
• Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak
  2024-10-11 15:50:41
• Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula
  2024-10-11 15:07:41
• PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web
  2024-10-11 14:21:21
• Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda
  2024-10-11 12:59:11
• Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula
  2024-10-11 12:17:31

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

0

3

2204

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

0

11

2352

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

0

1

1968

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...

daripada 2024-04-18 23:52:34

0

1

1857

Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus

daripada 2024-04-16 10:10:18

0

0

1918

Topik-topik yang berkaitan

Lagi>

• koleksi kod latar belakang css
• Adakah terdapat perbezaan besar antara bahasa c dan Python?
• Penggunaan kelas kalendar dalam java
• Alat biasa untuk ujian perisian
• pelayar wap
• Win10 tidak menyokong penyelesaian susun atur cakera perisian tegar Uefi
• Cara menggunakan RealVNC
• panggilan perkhidmatan web