Mở đầu
Tiếp tục với series Nodejs cơ bản trong bài hôm nay mình sẽ giới thiệu về Post method
cùng với Body Parser
và ứng dụng nó để làm chức năng thêm mới. OK vậy bắt tay vào việc luôn nhé
Thực Hiện
Ý tưởng
Để thực hiện được chức năng thêm mới :
Phía client: phải có một form để người dùng điền thông tin, và phía client phải gửi data mà người dùng nhập lên để phía server tiến hành xử lý.
Phía server: phải làm sao đó để bắt được data mà client gửi lên và thực hiện chức năng thêm mới.
Cơ mà vấn đề ở đây là server sẽ lấy data từ dưới client gửi lên kiểu gì :v, Như ở bài trước của mình thì là dùng
0 để lấy được data ở url được client gửi lên thế thì cái này thì có cái nào tương tự không nhỉ, đáp án là có đó chính làapp.get['/create', function[req, res]{ res.render['create', { }]; }]
1, Nhưng để dùng đượcapp.get['/create', function[req, res]{ res.render['create', { }]; }]
1 thì chúng ta cần phải cài một moudule tên làapp.get['/create', function[req, res]{ res.render['create', { }]; }]
3 mình sẽ nói về module này sau, bây giờ chúng ta cần tạo một file view để người dùng có thể nhập thông tin cho bài viết mới. Mình sẽ tạo một file có tên làapp.get['/create', function[req, res]{ res.render['create', { }]; }]
4 với nội dung như sau:app.get['/create', function[req, res]{ res.render['create', { }]; }]
head
style.
label, input, button {
margin: 10px;
}
h2 Create Post
form[action="/create" method="POST"]
label[id="id"]
input[type="text", placeholder="id", name="id"]
br
label[id="title"]
input[type="text", placeholder="title", name="title"]
br
button Create
Bên file
app.get['/create', function[req, res]{
res.render['create', {
}];
}]
5 thì khai báo một router để render file app.get['/create', function[req, res]{
res.render['create', {
}];
}]
4vừa tạo ở trênapp.get['/create', function[req, res]{
res.render['create', {
}];
}]
Ok vậy là đã xong bên client bây giờ chúng ta mở trình duyệt xem thử nhé
hiện ra như thế này là oki rồi nhé . Tiếp theo sẽ là xử lý bên server, như đã nói ở trên chúng ta cần cài đặt module
app.get['/create', function[req, res]{
res.render['create', {
}];
}]
7. Như mọi khi thôi để cài đặt module thì chỉ cần chạy lệnhapp.get['/create', function[req, res]{
res.render['create', {
}];
}]
7. Như mọi khi thôi để cài đặt module thì chỉ cần chạy lệnhyarn add body-parser --save
là được. Sau khì cài đặt xong thì chúng ta sẽ khai báo trong file
app.get['/create', function[req, res]{
res.render['create', {
}];
}]
5 như sau:const bodyParser = require['body-parser']
app.use[bodyParser.urlencoded[{ extended: true }]]
Các bạn muốn hiểu rõ hơn thì có thể lên đây để đọc thêm. Tiếp theo mình sẽ log ra xem như thế nào nhé. đây là code
app.post['/create', function [req, res] {
console.log[req.body]
}]
Mình nhập vào input như thế này và ấn
app.get['/create', function[req, res]{
res.render['create', {
}];
}]
9Đây là kết quả log mình nhận được
Bây giờ chúng ta sẽ lưu data vừa nhận được nhé, bạn chỉ cần sửa lại
yarn add body-parser --save
0 vừa viết ở trên như sau:app.post['/create', function [req, res] {
posts.push[req.body]
res.redirect['/'];
}]
ở đây mình sẽ lưu data lấy từ
app.get['/create', function[req, res]{
res.render['create', {
}];
}]
1 vàng mảng yarn add body-parser --save
2 sau đó sẽ yarn add body-parser --save
3 về trang hiển thị danh sách yarn add body-parser --save
2. Ở trang danh sách yarn add body-parser --save
2 mình thêm một thẻ yarn add body-parser --save
6 để có thể chuyển về trang thêm mới. Đây là kết quảHoặc bạn có thể đưa thông tin vừa nhận được ra một trang mới như thế này
bằng cách thêm một file
yarn add body-parser --save
7 với nội dung như sau :h2 New Product
p id:
span= data.id
p title:
span= data.title
a[href='/create'] New
và sửa lại
yarn add body-parser --save
0 như thế này :app.post['/create', function [req, res] {
res.render['new-post', {
data: req.body
}];
}]
kết Luận
Như vậy là mình đã giới thiệu đến các bạn
yarn add body-parser --save
9 Tuy nhiên có một số lưu ý ở bài viết này đó là dữ liệu người dùng nhập vào chưa được validate trước khi submit, và data được lưu vào mảng nên khi f5 lại sẽ bị mất, Những vẫn đề này sẽ được giải quyết ở những bài tiếp theo. Bài viết dựa trên quan điểm cá nhân nên mọi người có thắc mắc hay góp ý gì thì hãy coment xuống bên dưới để mình được biết, cảm ơn các bạn đã đón đọc.