Phương thức đăng nodejs

Ở bài trước, ta đã sử dụng phương thức GET để áp dụng vào chức năng liệt kê người dùng, cũng như thực hiện chức năng tìm kiếm

Ở bài viết hôm nay, chúng ta sẽ áp dụng phương thức POST - một phương thức để gửi dữ liệu từ client và thêm vào dữ liệu của server để thực hiện chức năng tạo mới user tạo user mới

Để thực hiện chức năng này, hãy bao gồm các bước sau

Tạo một trang html bao gồm 1 biểu mẫu tạo người dùng mới để người dùng có thể truy cập trang này và điền thông tin về người dùng mới và gửi lên máy chủ

h2 Create new user
form(action="/users/create" method="POST")
	label(id="name")
	input(type="text", placeholder="Your name", name="name")
	label(id="email")
	input(type="text", placeholder="Your email address", name="email")
	label(id="age")
	input(type="text", placeholder="Your age", name="age")
	input(type="submit")

Tất nhiên là ta phải tạo một lộ trình GET to this page to user can access to this page

app.get('/users/create', (req, res) => {
	res.render('users/create')
})

Tiếp theo, ta sẽ tạo một route với phương thức là POST để người dùng có thể gửi dữ liệu lên. Tuyến đường này cũng có địa chỉ là '/users/create' như phương thức GET

app.post('/users/create', (req, res) => {
	// add new user here
})

Ta đã thấy, tại một địa chỉ, có thể có nhiều phương thức khác nhau. Ứng với mỗi phương pháp ta sẽ có cách xử lý riêng cho phù hợp

With method POST, to could get the data, ta will use req. thân hình. Tuy nhiên, để sử dụng được nó, ta phải cấu hình trong ứng dụng tệp. js as after

app.use(express.json()) // for parsing application/json
app.use(express.urlencoded({ extended: true })) // for parsing application/x-www-form-urlencoded

thử trong yêu cầu. body ra màn hình consolereq. body ra screen console

app.post('/users/create', (req, res) => {
	console.log(req.body)
})

yêu cầu. body return a object similar as req. truy vấn. Hãy thử truy cập '/users/create', điền thông tin vào biểu mẫu và gửi lên máy chủ, ta sẽ có kết quả tương tự như thế nàyreq. truy vấn. Hãy thử truy cập '/users/create', điền thông tin vào biểu mẫu và gửi lên máy chủ, ta sẽ có kết quả tương tự như thế này

{
    name: "Your name",
    email: "",
    age: "20"
}

Giờ ta sẽ thêm người dùng mới vào dữ liệu của hệ thống, ở đây sẽ là mảng người dùng mà ta đã có ở các bài học trước, đồng thời điều hướng người dùng về trang chỉ mục hiển thị tất cả người dùng, kể cả người dùng vừa được

app.post('/users/create', (req, res) => {
   users.push(req.body);
   res.redirect('/users')
})

Mình sẽ bỏ qua phần kiểm tra tính hợp lệ của thông tin được gửi lên (ví dụ như email đã tồn tại,. ), phần này mình sẽ hướng dẫn ở các bài viết nâng cao nhé. Pagment time we quy định dữ liệu gửi lên là hợp lệ

And here is results

Phương thức đăng nodejs

Ở đây, mình dùng res. redirect() to redirect user. Tham số của nó đơn giản là URL mà ta muốn điều hướng đến. Ta will not used res. render() trong trường hợp này, vì hàm này chỉ render ra 1 định dạng HTML mà vẫn ở lại trang hiện tại. Còn đối với res. redirect() sẽ chuyển người dùng đến một trang khác (mà không tải lại trang)res. render() trong trường hợp này, vì hàm này chỉ render ra 1 định dạng HTML mà vẫn ở lại trang hiện tại. Còn đối với res. redirect() sẽ chuyển người dùng đến một trang khác (mà không tải lại trang)

Cũng lưu ý rằng, hiện tại, chúng tôi đang lưu trữ thông tin người dùng trong một mảng javascript, do đó khi F5 lại trang, chúng tôi sẽ mất đi những người dùng được tạo động, chỉ bao gồm những người dùng tĩnh mà chúng tôi đã thêm vào . Trong thực tế, ta sẽ lưu vào cơ sở dữ liệu. Phần này mình sẽ hướng dẫn các bạn trong các bài sau