KrakenJS – Controller và View
Trong bài trước chúng ta đã cài đặt thành công KrakenJs và xem qua cấu trúc thư mục. Ở bài này mình sẽ giới thiệu với các bạn về Controller và View của KrakenJS với view engine là dust. Chúng ta sẽ sử dụng lại project mà chúng ta đã tạo ở bài trước, vì vậy nếu bạn chưa cài đặt KrakenJs thì hãy xem bài viết này của mình nhé.
KrakenJS – Cài đặt và ví dụ cơ bản
Controller
Hãy mở file controllers/index.js lên và xem xét nội dung của nó.
[js]
‘use strict’;
var IndexModel = require(‘../models/index’);
module.exports = function (router) {
var model = new IndexModel();
router.get(‘/’, function (req, res) {
res.render(‘index’, model);
});
};
[/js]
Trong controller này có require model Index, model này chỉ đơn giản trả về giá trị [name: ‘index’]. Chúng ta sẽ tìm hiểu kĩ hơn về model sau, trong bài này bạn chỉ cần hiểu đơn giản nó chứa cấu trúc và các giá trị của đối tượng chúng ta cần sử dụng.
[js]
router.get(‘/’, function (req, res) {
res.render(‘index’, model);
});
[/js]
Router này sử dụng phương thức GET và truyền vào hàm xử lý 2 biến là req <=> request (giá trị truyền lên từ client) và res <=> response (giá trị trả về từ server). Router này sẽ render view “index” và truyền thêm giá trị model qua view.
Ở trong view (public/templates) index.dust
[js]
{>"layouts/master" /}
{<body}
<h1>{@pre type="content" key="greeting"/}</h1>
{/body}
[/js]
Hiển thị nội dung chào mặc định của KrakenJS.
Để hiểu rõ hơn về nguyên tắc làm việc của Controller và View ta sẽ tạo 1 ví dụ đơn giản sau:
– index.js
[js]
router.get(‘/test’, function(req, res){
res.render(‘test’, {say: ‘hello’});
});
[/js]
– test.dust
[html]
{>"layouts/master" /}
{<body}
<h1>{say} from controller index</h1>
{/body}
[/html]
– Chạy thử trên đường dẫn http://localhost:8000/test
Kết quả sẽ nội dung hiển thị sẽ là
[code]
hello from controller index
[/code]
Kết quả bao gồm dòng chữ hello được truyền từ controller.
Như vậy chúng ta đã tìm hiểu xong controller phương thức GET trong KrakenJs, tiếp theo chúng ta sẽ tìm hiểu nâng cao hơn 1 chút về Controller.
Đầu tiên, hãy cải tiến View của chúng ta bằng cách nhúng Bootstrap CSS vào ứng dụng
[html]
<!– Latest compiled and minified CSS –>
<link rel="stylesheet" media="screen"
href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
[/html]
vào file public/templates/layouts/master.dust.
Tạo thêm file create_post.dust trong thư mục public/templates kế thừa giao diện từ master layout.
[js]
{>"layouts/master" /}
{<body}
<div class="col-xs-6 col-xs-offset-3">
<h2 class="text-center">Thêm bài viết</h2>
<form action="/post/create" method="POST">
<div class="form-group">
<label for="title" class="control-label">Tiêu đề</label>
<input class="form-control" name="title" />
</div>
<div class="form-group">
<label for="description" class="control-label">Mô tả ngắn</label>
<textarea class="form-control" name="description"></textarea>
</div>
<div class="form-group">
<label for="content" class="control-label">Nội dung</label>
<textarea class="form-control" name="content"></textarea>
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary">Thêm</button>
</div>
</form>
</div>
{/body}
[/js]
Thêm vào controllers/index.js:
[js]
router.get(‘/post/create’, function(req, res){
res.render(‘create_post’);
});
[/js]
Tạo thêm phương thức POST khi người dùng submit từ form luôn nhé.
[js]
router.post(‘/post/create’, function(req, res){
res.json({
title: req.body.title,
description: req.body.description,
content: req.body.content
});
});
[/js]
Tạm thời chúng ta sẽ chẳng có xử lý gì cả, chỉ đơn giản in ra OK thôi. Test thử bằng cách chạy đường dẫn http://localhost:8000/post/create.
Kết quả:
Cũng không tệ lắm nhỉ, tuy nhiên khi nhấn nút thêm chúng ta sẽ gặp phải lỗi.
[js]
Internal server error
The URL /post/create had the following error Error: CSRF token missing.
[/js]
Lỗi này sinh ra do KrakenJS mặc định được thiết lập chế độ bảo mật CSRF (Cross-Site Request Forgery) để tăng tính an toàn với các dữ liệu nhập từ form.
Để khắc phục lỗi này ta nên sử dụng Lusca, là 1 project của KrakenJS
[js]
npm install –save lusca
[/js]
Thư viện này sẽ yêu cầu sử dụng express-session và cookie-session.
[js]
npm install –save express-session
npm install –save cookie-session
[/js]
Thêm đoạn sau trước app.on(‘start’…) trong index.js
[js]
var session = require(‘express-session’);
var cookieSession = require(‘cookie-session’);
var lusca = require(‘lusca’);
//this or other session management will be required
app.use(session({
secret: ‘sangplus’,
resave: true,
saveUninitialized: true
}));
app.use(lusca({
csrf: true,
csp: { /* … */},
xframe: ‘SAMEORIGIN’,
p3p: ‘ABCDEF’,
hsts: {maxAge: 31536000, includeSubDomains: true, preload: true},
xssProtection: true
}));
[/js]
Tiếp theo hãy thêm vào create_post.dust bên trong cặp thẻ form
[html]
<input type="hidden" name="_csrf" value="{_csrf}" />
[/html]
Chạy lại và kiểm tra kết quả:
Như vậy chúng ta đã sinh được giá trị csrf cho form. Tuy nhiên trong bài viết này chúng ta sẽ tạm thời tắt chế độ bảo vệ CSRF của KrakenJS đi. Bạn hãy quay lại file index.js và thay đổi giá trị csrf thành false:
[js]
app.use(lusca({
csrf: false, // Đổi thành false
csp: { /* … */},
xframe: ‘SAMEORIGIN’,
p3p: ‘ABCDEF’,
hsts: {maxAge: 31536000, includeSubDomains: true, preload: true},
xssProtection: true
}));
[/js]
Giờ hãy quay lại demo nhập giá trị và nhấn submit thử, kết quả bạn nhận được sẽ tương tự thế này:
[js]
{
"title":"KrakenJS – Controller và View",
"description":"Giới thiệu về controller và view trong KrakenJS",
"content":"Giới thiệu về controller và view trong KrakenJS"
}
[/js]
Ngoài ra còn có phương thức DELETE được sử dụng trong controller, cách sử dụng nó cũng tương tự với phương thức POST nhưng phương thức DELETE chỉ được sử dụng cho thao tác xóa 1 đối tượng.
Như vậy, chúng ta đã tìm hiểu xong Controller và View trong KrakenJS. Mã nguồn của bài viết bạn có thể tham khảo tại: https://github.com/sangnguyenplus/KrakenJS—Tutorial
Bài viết tiếp theo mình sẽ hướng dẫn các bạn kết nối với database MongoDB và thực hiện các truy vấn đơn giản.
- Địa chỉ: Hồ Chí Minh
- Facebook: Sang Nguyen