7. Express framework

Express Render HTML template engine EJS Express Cài đặt Express Cài khung phát sinh Express Bước 1: npm install express-generator -g Bước 2: express tenproject (tạo folder trùng tên với tên project, folder chứa sẵn folder cần dùng cho dự án, template engine mặc định JADE) Bước 3: cài đặt module liên hệ đến khung tạo sẵn npm install Bước 4: chạy chương trình npm start Cài đặt EJS Cú pháp EJS Duyệt mảng for Duyệt mảng forEach khơng cần quan tâm có phần tử In biến HTML Phải dùng dấu – thay cho dấu = Sử dụng router có sẵn EJS Mặc định gõ localhost:3000 nghĩa localhost:3000/ đến trang home, mở file index.ejs localhost:3000/ mở file index.ejs localhost:3000/tin-tuc mở file tin.ejs Truyền liệu từ Router qua EJS Router gửi biến title noidung cho trang san-pham.ejs Trang san-pham.ejs sử dụng biến truyền qua mà thơi, Express tự nhận biết Khi có kết nối đến CSDL biến truyền qua liệu lấy từ CSDL truyền vào EJS để hiển thị Thao tác với JSON EJS router.get('/fedu', function(req, res, next) { var dulieu = { danhsachsv : ["viet","nga","my","an do"]}; res.render('fedu', { danhsach: dulieu }); }); Router gửi đối tượng JSON File fedu.ejs nhận đối tượng JSON

JSON.stringify(danhsach) dùng để in nội dung bên object, kết nối đến CSDL, chuỗi JSON liệu lấy từ CSDL Xử lý giao diện HTML với EJS Chuyển HTML (front end) vào EJS • Bước 1: download website mẫu (xem giao diện front end hồn chỉnh https://startbootstrap.com/pr eviews/clean-blog/ • Bước 2: copy mục tương ứng front end vào project Express, tức chuyển js 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 tập tin thư mục css, js, img 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 link index.ejs, với vendor ta chỉnh lại thành /vendor • Chỉnh lại link index.ejs, với css chỉnh lại stylesheets • Chỉnh lại link index.ejs, với js chỉnh lại javascripts • Chỉnh lại link index.ejs, với img chỉnh lại images Xử lý link thơng qua router • Các đường dẫn web mẫu (front end) chuyển sang backend router, nên cần chuyển file liên quan nằm chung thư mục views Index.js router để link đến file tương ứng Đây router, ta ghi tên Chuyển HTML (front end) vào EJS • 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 chỉnh lại link tương ứng chỉnh index.ejs • Và ta nhận thấy trang web liên quan có header footer giống nhau, nên ta tách riêng thành file, sau include vơ sử dụng thơi, kế thừa EJS Hồn thiện ghép frontend vào EJS • Tạo thêm file header.ejs views • Cắt phần header giống trang bỏ vào • Tạo thêm file footer.ejs views • Cắt phần footer giống trang bỏ vào • Sau dùng include gọi file header, footer gắn vào trang Trang index.ejs, about.ejs, contact.ejs, post.ejs có phần đầu phần cuối giống nên ta tách file riêng header.ejs, footer.ejs dùng include không cần ghi file Gom nhóm Router • Cách 1: Router nhiêu dịng (đã làm) • Cách 2: tách nhóm Router cách sử dụng file (*.js) định nghĩa riêng thư mục routers, sau vào file app.js gọi file vào dùng sau var tenbien = require('./routes/tenfilerouter'); Khai báo app.use('/routernhóm', tenbien); 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 ; Gom nhóm Router (cách 2) • Tạo file fashion.js chứa router bên var express = require('express'); var router = express.Router(); router.get('/mot-14.chn', function (req, res, next) { res.send('Day la trang Fashion > Mot ') fashion.js }); 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’); Router đóng vai trò Controller giúp điều khiển web app.js app.use('/fashion', fashion); Phải exports app.js require dùng 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 ' + req.params.chisosanpham + " Giá sản phẩm : " + req.params.gia ); }); Khi ta gõ trình duyệt web http://localhost:3000/sp/1234/5000 Thì 1234 số sản phẩm, 5000 giá sản phẩm, cịn muốn ghi http://localhost:3000/sp/1234.5000 http://localhost:3000/sp/1234-5000 chỉnh lại dấu router Khi ta dùng phương thức get để truyền tham số địa ta dùng req.params lấy giá trị tham số, dùng phương thức post cần dùng đến thư viện body-parser, sau lấy thơng tin Cách đặt URL ràng buộc liệu • Cần kiến thức về: regular expression • Cần biết truyền tham số qua URL Router (cần lấy id URL tùy ý) Ví dụ hai liên kết sau 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/ tham chiếu đến viết có mã số 2939789 • https://tinhte.vn/threads/2939789/ => Đây nhờ sử dụng Regular Expression Regular Expression router.get('/fedu?vn', function(req, res, next) { res.send('test' ); }); http://localhost:3000/feduvn http://localhost:3000/fedvn u? Tác dụng xuất hặc không xuất ký tự u router.get('/itc(.edu)?.vn', function(req, res, next) { res.send('cdcntt'); }); http://localhost:3000/itc.edu.vn http://localhost:3000/itc.vn (.edu)? Tác dụng xuất hặc không xuất cụm từ edu router.get('/itc*vn', function(req, res, next) { res.send('cdcntt'); }); * đại diện cho nhiều ký tự xuất từ itc Regular Expression router.get('/*.:mabaiviet', function(req, res, next) { res.send(' Mã viết ' + req.params.mabaiviet); }); Nên hai liên kết sau 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/ tham chiếu đến viết có mã số 2939789 • https://tinhte.vn/threads/2939789/ Các ký tự trước mã số 2939789 đại diện dấu * Lập trình với Cookie NodeJS Cookie chỗ để lưu liệu trình duyệt, ví dụ ta có router, router thứ lưu sdt vào cookie router thứ lấy cookie lưu sử dụng Lập trình với Cookie NodeJS (t.t) Lập trình với Cookie NodeJS (t.t) Router thứ tạo cookie tên dt, có giá trị tham số, 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 : " +req.params.sdt); }); Và router thứ hai lấy cookies lưu router.get('/banhran', function(req, res, next) { res.send("Số đt : " + 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 "); }); Xử lý làm việc với Session Xử lý 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({ Session mã hóa nên thường dùng cho việc đăng nhập/đăng ký secret: 'itc.edu.vn’, resave: false, saveUninitialized: true })); Xử lý 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(); }); ...Cài đặt Express Cài khung phát sinh Express Bước 1: npm install express- generator -g Bước 2: express tenproject (tạo folder trùng tên với tên project,... app.use('/routernhóm', tenbien); 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)... router ; Gom nhóm Router (cách 2) • Tạo file fashion.js chứa router bên var express = require( 'express' ); var router = express. Router(); router.get('/mot-14.chn', function (req, res, next) { res.send('Day