Hướng dẫn ejs nodejs - đi khiêu vũ

Khi chúng ta tạo một App với Node JS, có nhiều cách để quản lý views nhưng cách dễ dàng và nhanh nhất là EJS. 1. Bắt đầu App của chúng ta sẽ bao gồm 2 phần: Gồm

npm install express ejs --save
npm install -g nodemon

2 và

npm install express ejs --save
npm install -g nodemon

31. Bắt đầu App của chúng ta sẽ bao gồm 2 phần: Gồm

npm install express ejs --save
npm install -g nodemon

2 và

npm install express ejs --save
npm install -g nodemon

3

Cấu trúc của app sẽ như sau: -- views -- -- -- partials -- -- -- -- -- foooter.ejs -- -- -- -- -- head.ejs -- -- -- -- -- header.ejs -- -- -- pages -- -- -- -- -- index.ejs -- -- -- -- -- about.ejs -- package.json -- server.js -- views -- -- -- partials -- -- -- -- -- foooter.ejs -- -- -- -- -- head.ejs -- -- -- -- -- header.ejs -- -- -- pages -- -- -- -- -- index.ejs -- -- -- -- -- about.ejs -- package.json -- server.js

Trong đó

npm install express ejs --save
npm install -g nodemon

4 sẽ chứa thông tin và các depedencies mà chúng ta cần (Như express, nodemon, EJS, ...). Còn

npm install express ejs --save
npm install -g nodemon

5 chứa các cấu hình về Express.

a. Node setup: Bật Terminal và gõ các lệnh sau: Bật Terminal và gõ các lệnh sau:

mkdir node_report
cd node_report
npm init # Enter đến khi nào xong thì thôi
atom .

Kết quả như sau:

Sau đó, ta cài đặt

npm install express ejs --save
npm install -g nodemon

6,

npm install express ejs --save
npm install -g nodemon

7,

npm install express ejs --save
npm install -g nodemon

8 vào:

npm install express ejs --save
npm install -g nodemon

Tạo mới thư mục

npm install express ejs --save
npm install -g nodemon

5 với nội dung như sau:

var express = require('express');
var app = express();

app.get('/', (req, res) => {
  res.send("Test");
})

app.listen(8080);

Chạy localhost:8080 với cú pháp như sau:

nodemon server

Kết quả như sau: Về cơ bản đã hoàn thành các setup, ta tiến hành thêm đoạn code sau vào

npm install express ejs --save
npm install -g nodemon

5: Về cơ bản đã hoàn thành các setup, ta tiến hành thêm đoạn code sau vào

npm install express ejs --save
npm install -g nodemon

5:

var express = require('express');
var app = express();
app.set('view engine', 'ejs');
// index page 
app.get('/', function(req, res) {
    res.render('pages/index');
});

// about page 
app.get('/about', function(req, res) {
    res.render('pages/about');
});

app.listen(8080);

2. Các tệp tin EJS Tạo mới thư mục views/partials và sau đó thêm các tệp tin sau: Tạo mới thư mục views/partials và sau đó thêm các tệp tin sau:

Sample app

    <% include ../partials/head %>



    

        <% include ../partials/header %>
    

    

        

            
This is great
            
Welcome to templating using EJS
        
    

    

Sau khi thêm các tệp tin trên, ta F5 lại localhost:8080 và đạt kết quả sau: Hiện tại chúng ta có 2 pages là pages home và about, ta đã làm xong home rồi. Giờ đến about, tạo mới view

var express = require('express');
var app = express();

app.get('/', (req, res) => {
  res.send("Test");
})

app.listen(8080);

1 như sau: Hiện tại chúng ta có 2 pages là pages home và about, ta đã làm xong home rồi. Giờ đến about, tạo mới view

var express = require('express');
var app = express();

app.get('/', (req, res) => {
  res.send("Test");
})

app.listen(8080);

1 như sau:

    <% include ../partials/head %>



    

        <% include ../partials/header %>
    

    

        

            


                

                    
This is great
                    
Welcome to templating using EJS
                

            
            


                

                    
Look I'm A Sidebar!
                

            
        
    

    

F5 lại localhost:8080 và đạt kết quả như sau: 3. Truyền Data sang Views Chúng ta sẽ thử truyền một list và variable sang trang

var express = require('express');
var app = express();

app.get('/', (req, res) => {
  res.send("Test");
})

app.listen(8080);

2. Chỉnh sửa file

npm install express ejs --save
npm install -g nodemon

5 như sau: 3. Truyền Data sang Views Chúng ta sẽ thử truyền một list và variable sang trang

var express = require('express');
var app = express();

app.get('/', (req, res) => {
  res.send("Test");
})

app.listen(8080);

2. Chỉnh sửa file

npm install express ejs --save
npm install -g nodemon

5 như sau:

npm install express ejs --save
npm install -g nodemon

0

Như trên chúng ta đã truyền sang trang

var express = require('express');
var app = express();

app.get('/', (req, res) => {
  res.send("Test");
})

app.listen(8080);

4 hai giá trị drinks và tagline. Sang

var express = require('express');
var app = express();

app.get('/', (req, res) => {
  res.send("Test");
})

app.listen(8080);

5 để nhận những giá trị này:

npm install express ejs --save
npm install -g nodemon

1

Kết quả đạt được như sau: 4. Tổng kết Như vậy chúng ta đã hoàn thành một app đơn giản bằng Node JS sử dụng Express, Nodemon và EJS để quản lý views. Qua đó chúng ta đã biết được:

4. Tổng kết Như vậy chúng ta đã hoàn thành một app đơn giản bằng Node JS sử dụng Express, Nodemon và EJS để quản lý views. Qua đó chúng ta đã biết được:

• Cách sử dụng Nodemon để auto-reload lại localhost mỗi khi thay đổi code mà không cần restart server.
• Sử dụng EJS để quản lý views, biết cách truyền dữ liệu qua views.. Nguồn tham khảo: https://scotch.io/tutorials/use-ejs-to-template-your-node-application