7. Express framework

Cài đặt ExpressCài bộ khung phát sinh Express Bước 2: express tenproject tạo ra một folder trùng tên với tên project, và folder này chứa sẵn các folder cần dùng cho dự án, và template e

Trang 1

Render HTML

là template engine EJS

Express

Trang 2

Cài đặt Express

Cài bộ khung phát sinh Express

Bước 2: express tenproject (tạo ra một folder trùng tên với tên project, và folder này chứa sẵn các folder cần dùng cho dự án, và template engine mặc định là JADE)

Bước 3: cài đặt các module liên hệ đến bộ khung tạo sẵn

npm install

Bước 4: chạy chương trình

npm start

Trang 3

Cài đặt EJS

Trang 4

Cú pháp EJS

Trang 5

Duyệt mảng bằng

forEach không cần

quan tâm có bao

nhiêu phần tử

Duyệt mảng bằng

for

In ra biến HTML

Phải dùng dấu – thay cho dấu =

Trang 6

Sử dụng router có sẵn trong EJS

Mặc định khi gõ localhost:3000 nghĩa là localhost:3000/

là đến trang home, nó sẽ mở file index.ejs

localhost:3000/ sẽ mở file index.ejs localhost:3000/tin-tuc sẽ mở file tin.ejs

Trang 7

Truyền dữ liệu từ Router qua EJS

Router gửi biến title và noidung cho trang san-pham.ejs

Trang san-pham.ejs sử dụng

2 biến được truyền qua mà thôi, vì Express đã tự nhận biết

Khi có kết nối đến CSDL thì các biến truyền qua chính là

dữ liệu lấy ra từ trong CSDL

và truyền vào EJS để hiển thị

Trang 8

Thao tác với JSON trong EJS

router.get('/fedu', function(req, res, next) {

var dulieu = { danhsachsv : ["viet","nga","my","an do"]};

res.render('fedu', { danhsach: dulieu });

<body>

< % danhsach.danhsachsv.forEach(function (motphantu){ %>

<li>

< %= motphantu %>

</li>

< % }) %>

< %= JSON.stringify(danhsach) %>

</body>

File fedu.ejs nhận đối tượng JSON

JSON.stringify(danhsach) dùng để in

ra nội dung bên trong một object, khi kết nối đến CSDL, thì chuỗi JSON chính là dữ liệu lấy ra từ CSDL

Xử lý giao diện HTML với EJS

Trang 9

Chuyển HTML

(front end) vào EJS

• Bước 1: download một

website mẫu (xem như một

giao diện front end đã hoàn

chỉnh

https://startbootstrap.com/pr

eviews/clean-blog/

• Bước 2: copy các mục

tương ứng trong front end

vào project Express, tức là

chuyển js và thư mục

javascripts, img vào thư

mục images, css vào thư

mục stylesheets Chuyển front end vào EJS

Chuyển HTML (front end) vào EJS (t.t)

• Chuyển nội dung index.html từ web mẫu sang views/index.ejs

• Copy các tập tin trong thư mục css, js, img của web mẫu sang thư mục

public/stylesheets, public/javascripts , public/images

• Copy thư mục vendor chứa bootstrap vào thư mục public

• Sau đó chỉnh lại các link trong index.ejs, với vendor ta chỉnh lại thành /vendor

• Chỉnh lại các link trong index.ejs, với css thì chỉnh lại stylesheets

• Chỉnh lại các link trong index.ejs, với js thì chỉnh lại javascripts

• Chỉnh lại các link trong index.ejs, với img thì chỉnh lại images

Trang 10

• Các đường dẫn trên web mẫu (front end) khi chuyển sang backend chính là các

router, nên cần chuyển các file liên quan nằm chung thư mục views

Xử lý link thông qua router

Index.js chính là router để link đến các file tương ứng

Đây là các router, ta ghi tên gì cũng được

Trang 11

• Ta chuyển nội dung file about.html thành about.ejs, contact.html thành contact.ejs, post.html thành post.ejs và chỉnh lại các link tương ứng như đã chỉnh trong index.ejs

• Và ta nhận thấy rằng tại các trang web liên quan có header và footer giống nhau, nên ta tách ra riêng thành các file, sau đó include vô sử dụng thôi, đây chính là kế thừa trong EJS

Chuyển HTML (front end) vào EJS

Hoàn thiện ghép frontend vào EJS

• Tạo thêm file header.ejs trong views

• Cắt phần header giống nhau trong các trang và bỏ vào

• Tạo thêm file footer.ejs trong views

• Cắt phần footer giống nhau trong các trang và bỏ vào

• Sau đó dùng include gọi các file header, footer gắn vào các

trang

<% include header %>

<% include footer %>

Trang index.ejs, about.ejs, contact.ejs, post.ejs có phần đầu

và phần cuối giống nhau nên ta tách ra file riêng là

header.ejs, footer.ejs khi dùng include không cần ghi đuôi file

Trang 12

Gom nhóm Router

• Cách 1: bao nhiêu Router thì bấy nhiêu dòng (đã làm)

• Cách 2: tách ra các nhóm Router bằng cách sử dụng file (*.js) định nghĩa riêng

trong thư mục routers, sau đó vào file app.js gọi file đó vào dùng như sau

var tenbien = require ( ' /routes/tenfilerouter ' ) ;

app use ( ' /routernhóm ', tenbien ) ;

Khai báo

Gọi vào

sử dụng

Gom nhóm Router (cách 1)

var express = require( ' express ' ) ;

var router = express Router () ;

router get ( ' /fashion/mot-14.chn ', function ( req , res , next ) {

res send ( ' Day la trang Fashion > Mot ' )

} ) ;

router get ( ' /fashion/lam-dep.chn ', function ( req , res , next ) {

res send ( ' Day la trang Fashion > Làm đẹp ' )

} ) ;

router get ( ' /fashion/star-style.chn ', function ( req , res , next ) {

res send ( ' Day la trang Fashion > Start style ' )

} ) ;

router get ( ' /fashion/fashion-icon.chn ', function ( req , res , next ) { res send ( ' Day la trang Fashion > /fashion-icon.chn ' )

} ) ;

module exports = router ;

Trang 13

• Tạo file fashion.js chứa các router bên trong

Gom nhóm Router (cách 2)

var express = require('express' ) ;

var router = express.Router();

router.get('/mot-14.chn', function (req, res, next) {

res.send('Day la trang Fashion > Mot '

} ) ;

router.get('/lam-dep.chn', function (req, res, next) {

res.send('Day la trang Fashion > Làm đẹp ' )

} ) ;

router.get('/star-style.chn', function (req, res, next) {

res.send('Day la trang Fashion > Start style ' )

} ) ;

router.get('/fashion-icon.chn', function (req, res, next) {

res.send('Day la trang Fashion > /fashion-icon.chn ' )

} ) ;

module.exports = router;

var fashion = require ( ' /routes/fashion ’ ) ;

app use ( ' /fashion ', fashion ) ;

app.js

fashion.js

Router đóng vai trò như

Controller giúp điều khiển web

Phải exports ra thì app.js mới require dùng được

Trang 14

Truyền

tham số

qua Router

Dùng dấu hai chấm truyền tham số Router

router get('/sp/:chisosanpham/:gia', function ( req , res , next ) {

res send(' mã sản phẩm là ' + req params chisosanpham +

" Giá sản phẩm là : " + req params gia ) ; } ) ;

Khi ta gõ trên trình duyệt web là http://localhost:3000/sp/1234 / 5000

Thì 1234 là chỉ số sản phẩm, còn 5000 là giá sản phẩm, còn nếu muốn

ghi http://localhost:3000/sp/1234.5000 hoặc

http://localhost:3000/sp/1234-5000 thì chỉnh lại dấu tại router

Khi ta dùng phương thức get để truyền tham số trên thanh địa chỉ thì ta dùng

req.params sẽ lấy được giá trị tham số, còn nếu dùng phương thức post thì cần dùng đến thư viện body-parser, sau đó mới lấy thông tin được

Trang 15

Cách đặt URL ràng buộc dữ liệu

• Cần kiến thức về: regular expression

• Cần biết truyền tham số qua URL bằng Router (cần lấy được id trên URL tùy ý)

Ví dụ hai liên kết sau đây là giống nhau,

• https://tinhte.vn/threads/porsche-macan-s-2019-ve-viet-nam-gia-hon-4-5-ty.2939789/

• https://tinhte.vn/threads/abcd.2939789/

cùng tham chiếu đến bài viết có mã số là 2939789

• https://tinhte.vn/threads/2939789/

=> Đây chính là nhờ sử dụng Regular Expression

router.get('/itc(.edu)?.vn', function(req, res, next) {

res.send('cdcntt');

});

Regular Expression

router.get('/fedu?vn', function(req, res, next) {

res.send('test' );

}); http://localhost:3000/feduvn hoặc http://localhost:3000/fedvn

u? Tác dụng là xuất hiện hặc không xuất hiện ký tự u đều được

http://localhost:3000/itc.edu.vn hoặc http://localhost:3000/itc.vn

router.get('/itc*vn', function(req, res, next) {

res.send('cdcntt');

}); * đại diện cho nhiều ký tự xuất hiện giữa từ itc và vn đều được

Trang 16

Regular Expression

router.get('/*.:mabaiviet', function(req, res, next) {

res.send(' Mã bài viết ' + req.params.mabaiviet);

});

Nên hai liên kết sau đây là giống nhau,

• https://tinhte.vn/threads/porsche-macan-s-2019-ve-viet-nam-gia-hon-4-5-ty.2939789/

• https://tinhte.vn/threads/abcd.2939789/

cùng tham chiếu đến bài viết có mã số là 2939789

• https://tinhte.vn/threads/2939789/

Các ký tự trước mã số 2939789 chính đại diện bằng dấu *

Lập trình với Cookie trong NodeJS

Cookie là chỗ

để lưu dữ liệu

trên trình

duyệt, ví dụ ta

có 2 router,

router thứ

nhất sẽ lưu

sdt vào cookie

và router thứ

2 sẽ lấy cookie

đã lưu ra sử

dụng

Trang 17

Lập trình với Cookie trong NodeJS (t.t)

Router thứ nhất tạo cookie tên dt, có giá trị tham số, và thời gian sống 90 giây

router get('/suadaunanh/:sdt', function ( req , res , next ) {

res cookie('dt', req params sdt ,{ maxAge : 90000 } ) ;

res send("Số đt là : " + req params sdt ) ;

} ) ;

Và router thứ hai lấy cookies đã lưu

router get('/banhran', function ( req , res , next ) {

res send("Số đt là : " + req cookies dt ) ;

} ) ;

Router thứ ba xóa cookie tên dt

router get('/xoa', function ( req , res , next ) {

res clearCookie('dt' ) ;

res send("Da xoa roi " ) ;

} ) ;

Trang 18

Xử lý và

làm việc

với Session

Xử lý và làm việc với Session

• Bước 1: cài session npm install express-session

• Bước 2: khai báo sử dụng

var session = require ( ' express-session ' );

.

app use ( session ( {

secret : ' itc.edu.vn ’,

resave : false,

saveUninitialized : true

} ));

.

Session mã hóa nên thường dùng cho việc đăng nhập/đăng ký

Trang 19

Xử lý và làm việc với Session (t.t)

router get ( ' /taosession ', function ( req , res , next ) {

req session monan = " Bun rieu cua ";

res send ( " Da tao roi " ) ; } ) ;

router get ( ' /laysession ', function ( req , res , next ) { res send ( " Session la " + req session monan ) ;

} ) ;

router get ( ' /huysession ', function ( req , res , next ) { req session destroy ( function ( err ){

console.log ( err ) ; } ) ;

res send ( " Session da huy " ) ; res end () ;

} ) ;

1

2

3

Định dạng
Số trang	19
Dung lượng	1,48 MB