Hướng dẫn req body trong nodejs - req body in nodejs

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

  app.get('/create', function(req, res){
      res.render('create', {
      });
  })
  

  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 được

  app.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:

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ên

app.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ệ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ệnh

yarn 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.