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

Tiếp nối Serie về Express, trong bài viết này Smartjob sẽ hướng dẫn cá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 bị tốt cho bài thực hành này các bạn cần đọc lại các bài viết về cài đặt node.js đã được Smartjob hướng dẫn cụ thể tạ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ẽ :

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ả :

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

<br />
extends layout<br />
//- comment . lấy giao diện từ layout kiểu như bạn include layout.jade<br />
block content<br />
  h1= title<br />
  p Welcome to #{title}<br />
  //- biến title đc truyền từ trong route/index.js

extends layout

//- comment . lấy giao diện từ layout kiểu như bạn include layout.jade

block content

h1= title

p Welcome to #{title}

//- biến title đc truyền từ trong route/index.js

<br />
doctype html<br />
html<br />
  head<br />
    title= title<br />
    link(rel=’stylesheet’, href=’/stylesheets/style.css’)<br />
  body<br />
    block content

doctype html

html

head

title= title

link(rel=‘stylesheet’, href=‘/stylesheets/style.css’)

body

block content

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

<br />
include html/smartjob.html

1	include html/smartjob.html

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

Tags:
express,
node.js,