[Express] Bài 2: Hướng dẫn giao diện với jade và html (2191 views)

Tiếp nối Serie về Express, trong bài viết này Smartjob sẽ hướng dẫn các bạn dùng express tạo 1 số ví dụ  giao diện html với node.js . Ở bài 1 thì chúng ta chỉ build riêng 1 gói express trong node  để làm quen với express , chưa có điều hướng (route) . Ở bài 2 này chúng ta build project  có điều hướng , có giao diện thì các bạn hình dung ra.

Để chuẩn bị tốt cho bài thực hành này các bạn cần đọc lại các bài viết về cài đặt node.js đã được Smartjob hướng dẫn cụ thể tại : https://smartjob.vn/huong-dan-cai-dat-node-js/

1.Tạo thư mục smartjob_express_frontend trong bất kỳ ổ nào

Sau đó trỏ cmd của bạn tới  thư  mục đó và gõ lệnh : express –view=jade  và kết quả hiện ra như hình vẽ :

 express_html

Trong đó các thư mục :

1.views  : chứa các file jade hiển thị.

2.route : chứa các file js điều hướng , chuyển dữ liệu ra ngoài giao diện , thực hiện kết nối với cơ sở dữ liệu ( theo mô hình này nếu như theo như bạn muốn).

3.public : chứa file css , js , image của giao diện project .

Sau đó tại cửa sổ cmd đó chạy 2 dòng lệnh sau :

–  npm install

– SET DEBUG==smartjob_express_frontend:* & npm start

Mở trình duyệt lên và nhập địa  chỉ : http://localhost:3000/

Kết quả :

express_frontend_2

Mở file index.jade và file layout.jade

Các bạn  vào : http://learnjade.com/ để xem thêm cách viết html

Ở đây thì các biến truyền tới giao diện qua  biến ( tittle ) từ routes/   có điều  các bạn sẽ chưa quen khi viết html theo engine jade 

Mở file index.js  tới dòng  : res.render(‘index’, { title: ‘Express’ });  ở đây  truyền tham số title tới file views/index.jade với giá trị “Express” . Ở đây bạn có thể thao tác với cơ sở dữ liệu và truyền tham sốtới giao diện tại đây.

http://localhost:3000/users

http://localhost:3000/smartjob

Cách thứ 2  các bạn viết theo html, Với cách này bạn mở file views/smartjob.jade tham khảo nhưng việc viết html phù hợp với việc bạn dùng angular vì việc truyền tham số tới html của angular dùng  service . Còn nếu dùng express truyền tham số nó phải dựa trên engine của jade

***  Note : bạn thấy file smartjob.jade  include file html vào

Chúc các bạn thực hiện thao tác thành công ! Nếu có gì thắc mắc bạn comment. file code tải về source

 

Strongmindinstrongbody- skype : nguyenanhdung90

express, node.js,
May be interested posts: