Trước khi bắt tay vào viết code xử lý chi tiết cho tuyến /article/add chúng ta hãy dành một chút thời gian để nhìn lại code tempate của giao diện soạn thảo bài viết mới đã xây dựng trong Sub-Series EJS.
<form id="article" action="<%= data.get("endpoint") %>" method="post"> <div class="container"> <input type="text" name="title" value="Bài Viết Mới" /> <input type="text" name="keywords" placeholder="Từ khóa liên quan..." /> <select name="category-id"> <option> Danh Mục </option> <% for (var category of data.get("category-list")) { %> <option value="<%= category.get("@id") %>"> <%= category.get("name") %> </option> <% } %> </select> <button type="submit"> Đăng bài </button> <textarea name="content" placeholder="Nội dung bài viết..."></textarea> </div><!-- .container -->
</form>
Như vậy là code điều hành của route này sẽ cần cung cấp cho template dữ liệu là danh sách đầy đủ các danh mục tại khóa category-list và đường dẫn tại khóa endpoint để trỏ tới router xử lý yêu cầu lưu bản ghi mới vào database.
Bổ sung router
Trước hết chúng ta cần khai báo thêm router mới tại index của nhóm route/article.
var express = require('express');
var router = express.Router(); router.use("/view", require("./action/view"));
router.use("/add", require("./action/add")); module.exports = router;
Tổng quan xử lý route
router.get("/", async (request, response, next) => { var data = new Data(); await getDataForTopnav(data); await getDataForArticle(data, "add"); data.set("endpoint", "/article/add"); response.render("index", { layout: "article", action: "add", data });
}); // router.get
Đường dẫn endpoint ở đây mình đặt là /article/add để trỏ lại chính xác router này. Và như vậy khi soạn thảo xong bài viết và nhấn nút "Đăng bài" thì chúng ta sẽ có một yêu cầu post được tiếp nhận như sau:
router.get("/", async (request, response, next) => { // --- yêu cầu xem giao diện soạn thảo bài viết mới
}); router.post("/", async (request, response, next) => { // --- yêu cầu lưu bài viết mới vào database
});
get-data-for-article
Trong code xử lý của sub-procedure truy vấn dữ liệu cho khung soạn thảo #article, chúng ta tiếp tục bổ sung logic rẽ nhánh cho action == "add".
module.exports = async ( in_data = new Data(), in_action = "view", /* view | add | edit */ in_id = "Infinity"
) => { if (in_action == "view") await getArticle(in_data, in_id); else if (in_action == "add") await getCategoryList(in_data); else throw new Error("Unsupported action type");
}; /* getArticle... */ const getCategoryList = async ( out_data = new Data()
) => { var categoryList = []; await databaseManager.execute( Category.name, "select", categoryList, Infinity, "default" ); out_data.set("category-list", categoryList);
};
Chạy test kiểm tra
npm test Server started
http://localhost:8080/article/add
Truy xuất dữ liệu gửi từ form
Để tách lấy dữ liệu gửi từ <form> nhập liệu về server ở dạng object, chúng ta có thể nhờ đến sự trợ giúp của hai middleware tiền xử lý do ExpressJS cung cấp mặc định là express.json() và express.urlencoded(). Các middleware này cần được gắn trước các router xử lý form vì vậy nên chúng ta sẽ gắn luôn tại app.js để sử dụng chung cho tất cả các tuyến xử lý.
/* --- Utility Middlewares */ app.use(logger("dev")); app.use(express.json());
app.use(express.urlencoded({ extended: false })); app.use(cookieParser());
app.use(express.static(pathToPublicFolder)); /* --- Adding Routers... */
Và bây giờ chúng ta đã có thể truy xuất các cặp name/value do các <form> gửi về qua request.body.
/* --- Receive Submitted */ router.post("/", async (request, response, next) => { console.log(request.body);
});
Và bây giờ chúng ta sẽ thử soạn thảo một bài viết mới rồi nhấn "Đăng bài" để xem thông tin nhận được trong request.body hiển thị trong console.
npm test Server started
http://localhost:8080/article/add
Nhấn nút "Đăng bài":
Tổng quan xử lý yêu cầu post
Công việc mà chúng ta cần thực hiện ở đây là tạo ra một object mô tả bản ghi mới Article chưa có @id vì chưa được lưu vào database. Sau đó yêu cầu databaseManager ghi dữ liệu vào thư mục data. Nếu cần thiết bạn có thể lưu thêm thông tin về thời gian vào khóa edited-datetime của class Article. Ở đây mình sẽ chỉ lưu những thông tin vừa nhận được và không thêm thao tác truy vấn thời gian của hệ thống.
Sau khi đã thực hiện lưu trữ xong dữ liệu của bài viết mới, chúng ta sẽ có trị số @id đại diện cho bản ghi mới và có thể điều hướng tới trang hiển thị nội dung bài viết /article/view/:id bằng phương thức response.redirect(path).
/* router.get()... */ router.post("/", async (request, response, next) => { var entries = Object.entries(request.body); var submitted = new Article(entries); var inserted = new Article(); await databaseManager.execute( Article.name, "insert", submitted, inserted ); response.redirect(`/article/view/${inserted.get("@id")}`);
}); // router.post module.exports = router;
npm start Server started
Kết thúc bài viết
Như vậy là chúng ta đã thực hiện xong code xử lý yêu cầu cho tuyến /article/add bao gồm yêu cầu xem giao diện soạn thảo bài viết mới và yêu cầu lưu trữ bài viết mới vào database. Phương thức xử lý cho tuyến /article/edit/:id để chỉnh sửa nội dung của một bài viết cũng không có gì khác nhiều do đó chúng ta sẽ không thảo luận chi tiết ở đây. Còn đối với tuyến article/delete/:id thì
Trong những bài viết tiếp theo, chúng ta sẽ xây dựng nốt giao diện đăng nhập và quản trị đơn giản để xem danh sách các bài viết mới -> cũ và có thể chọn bài viết để thực hiện chỉnh sửa.
(Sắp đăng tải) [ExpressJS] Bài 11 - Viết Code Điều Hành Blog Cá Nhân (Tiếp Theo)