9. Hoc form gui,nhan du lieu trong Node JS

Sử dụng Form NodeJS Tạo project Express gộp bootstrap vào • Bước 1: tạo project Express với template engine EJS => express sudungform -e • Bước 2: vào project cài đặt => cd sudungform npm install • Bước 3: cài đặt bootstrap/jquery => npm install bootstrap npm install jquery • Bước 4: vào thư mục node_modules, ta copy thư mục js/css bootstrap jquery vào thư mục public để tiện sử dụng, khơng muốn copy vào file app.js thêm đường dẫn static • Bước 5: gộp bootstrap vào file EJS cần thiết Tạo đường dẫn để dùng bootstrap, jquery Để ghi vầy Thì file app.js ta khai báo sau app.use('/js', express.static( dirname + '/node_modules/bootstrap/dist/js')); //chuyển đến bootstrap app.use('/js', express.static( dirname + '/node_modules/jquery/dist')); //chuyển đến JS app.use('/css', express.static( dirname + '/node_modules/bootstrap/dist/css')); //chuyển đến CSS Dùng bootstrap tạo form sau Gợi ý: ta cài snippets bootstrap sau cần gõ b4-form-input, b4-jumbotron-default Cách lấy liệu từ form Chỉnh lại router file routers/index.js, cần router post để chuyển hướng người dùng submit form Cách lấy liệu từ form (t.t) Trong mơ hình MVC ✓ File routers/index.js đóng vai trị controller để điều hướng cách xem liệu ✓ File views/index.ejs đóng vai trị views để hiển thị liệu ✓ Khi dùng sở liệu ta tạo thêm thư mục models để tương với csdl (mongodb) Gửi phương thức post nên không nhận liệu cần cài thêm body-parser router.post('/', function(req, res, next) { var tieude = req.body.tdsp; // nhờ body-parser nên req.body hiểu res.send('Tiêu đề nhận =' + tieude); }); Upload file NodeJS Tham khảo https://github.com/expressjs/multer Ta dùng lại form cũ thêm snippets b4-form-file để hiển thị bootstrap cho phần upload Upload file NodeJS (t.t) • Bước 0: cài đặt multer => npm install multer • Bước 1: thêm thuộc tính cho form (index.ejs) enctype="multipart/form-data" require(‘multer’) file index.js • Bước 2: cấu hình để chạy multer, ta cấu hình file router index.js file app.js, cần khai báo storage dẫn để biết ảnh upload lên lưu đâu Upload file NodeJS (t.t) • Bước 3: tiếp tục cần cách dùng Multer index.js router post sau /* Lấy liệu từ form gửi với phương thức post */ router.post('/', upload.single('anhsp'), function(req, res, next) { var tieude = req.body.tdsp; res.send('Tiêu đề nhận =' + tieude); }); index.js index.ejs Viết hàm cho upload file ảnh • Ta muốn người dùng upload hình ảnh mà thơi, khơng cho upload loại file khác, nên upload cần check xem phải file ảnh không, ta cần dùng regular expression (https://regex101.com/) để giới hạn kiểu file up lên dùng hàm fileFilter multer • Các file ảnh ta muốn cho upload lên có jpg, png, gif, jpeg • Ta dùng trang web https://regex101.com/ để kiểm tra biểu thức Có phân biệt chữ hoa/thường Kiểm tra trước upload Nơi lưu trữ ... Thì file app .js ta khai báo sau app.use(' /js' , express.static( dirname + ' /node_ modules/bootstrap/dist /js' )); //chuyển... tieude); }); Upload file NodeJS Tham khảo https://github.com/expressjs/multer Ta dùng lại form cũ thêm snippets b4 -form- file để hiển thị bootstrap cho phần upload Upload file NodeJS (t.t) • Bước 0:... //chuyển đến bootstrap app.use(' /js' , express.static( dirname + ' /node_ modules/jquery/dist')); //chuyển đến JS app.use('/css', express.static( dirname + ' /node_ modules/bootstrap/dist/css')); //chuyển