Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Node.js

Xây dựng ứng dụng web với Node.js

by
Difficulty:BeginnerLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Giới thiệu

Ngoài việc dựng APIs, Node.js cũng rất lý tưởng để xây dựng các ứng dụng web chuẩn mực. Nó có những công cụ mạnh mẽ để đáp ứng yêu cầu của nhà phát triển web. Trong bài hướng dẫn này, bạn sẽ xây dựng một ứng dụng web, đóng vai trò là một thư viện nội bộ.

Trong quá trình xây dựng bạn sẽ được học vài các loại middleware, bạn sẽ thấy cách xử lý cách submit các form trong Node.js, và bạn cũng sẽ có thể tham khảo hai model (mô hình).

Bắt đầu thôi nào.

Khởi đầu

Bắt đầu bằng việc cài đặt express generator trên máy của bạn.

Chạy lệnh của express generator để khởi tạo ứng dụng của bạn.

Giờ thì đến thư mục làm việc, mở file package.json, và bổ sung phần dependencies tương tự như cái mà tôi có dưới đây.

Chạy lênh để cài đặt các package.

Thiết lập file Entry (để chạy ứng dụng)

app.js được tạo ra khi bạn chạy câu lệnh; tuy nhiên, bạn cần thiết lập thêm cấu hình. Điều chỉnh file cho giống của tôi có như bên dưới đây.

  1. Bạn đã yêu cầu hai route bạn sẽ tận dụng để xây dựng ứng dụng này. Bạn sẽ tạo file cho các route nhanh chóng. Các route được yêu cầu được gán các giá trị thành hai biến số khác nhau, chúng được dùng khi thiết lập middleware cho các route của bạn.
  2. Bạn đã xét Mongoose để sử dụng global.Promise. Biến số MongoDB được gán cho MONGODB_URI của môi trường hoặc đường dẫn đến server mongo nội bộ. Biến số được chuyển qua như một tham số để kết nối với server MongoDB đang vận hành.
  3. Bạn thiết lập session middleware sử dụng express-session. Middleware này quan trọng khi bạn sẽ hiển thị các thông điệp nhanh trong vài phần của ứng dụng của bạn.
  4. Bạn thiết lập middleware cho việc đánh giá hợp lệ. Middleware này sẽ dùng để xác thực dữ liệu nhập vào của form, chắc chắn rằng người dùng không nhập vào giá trị rỗng. Phần đánh giá hợp lệ sử dụng một package có tên gọi là express-validator.
  5. Bạn thiết lập một middleware hữu dụng khi hiển thị các thông điệp nhanh. Middleware này sử dụng package connect-flash.
  6. Các route cho ứng dụng được cài đặt để tận dụng file route bạn đã yêu cầu. Các yêu cầu được gửi đến /genres/books sẽ sử dụng các file genres và file routes tương ứng. Ở thời điểm này bạn chưa tạo ra các file routes, nhưng bạn sẽ làm điều đó sớm thôi.

Model cho Book và Genre

Model cho Book sẽ tận dụng Mongoose Schema để định nghĩa cách các cuốn sách được tổ chức thế nào. Tạo một thư mục gọi là models, và một file mới gọi là Book.js. Nó sẽ trông như vậy.

Bạn có 4 fields. Field cuối cùng được dùng để lưu giá trị genre của mỗi quyển sách. Field này tham chiếu đến model Genre, sẽ được tạo ra tiếp theo sau đây. Đó là lý do tại sao type được xét là Schema.Types.ObjectId, là nơi lưu id của mỗi genre được tham chiếu. ref xác định rõ model bạn đang tham chiếu. Chú ý rằng genre được lưu ở dạng array, nghĩa là một cuốn sách có thể nhiều hơn một genre.

Hãy tiếp tục tạo Genre model.

Với Genre, bạn chỉ cần một field: name.

Route và View cho Genre Index

Trong bài hướng dẫn này, bạn sẽ tận dụng 2 đường route cho genre của bạn: một để tạo genres mới, và cái còn lại để liệt kê các genre bạn đã tạo ra. Tạo một file trong thư mục routes với tên gọi genres.js.

Bắt đầu bằng yêu cầu tất cả modules bạn sẽ sử dụng.

Tiếp đến, đến phần route xử lý các file index của các genres.

Route này được gọi bất cứ khi nào yêu cầu được gửi thông qua /genres. Ở đây bạn gọi phương thức find trong model Genre để lấy tất cả genres đã được tạo ra. Những genres này sau đó được render trên một template gọi là genres. Hãy tiếp tục tạo ra template này, nhưng trước hết, cập nhập layout.pug cho giống như vậy:

Cập nhật này sẽ đem lại các views một cấu trúc rõ ràng để điều hướng. Giờ tạo một view gọi là genre.pug. Trong file này, bạn sẽ chạy vòng lặp qua các genres đã được tạo ra và xuất từng genre ra thành danh sách không có đánh số.

File nên giống như thế này.

Thêm Route và View cho Genre mới

Quay lại file routes/genres.js để bổ sung các route mới, chúng sẽ đảm nhận phần tạo ra các genre (thể loại) mới,

  1. Công việc của router này đơn giản là hiển thị trang để tạo các route mới. Router này cũng được gọi bất kỳ lúc nào có yêu cầu được gửi đi từ /genres/add.
  2. Router này xử lý phần submit các form. Khi các form được gửi đi, chúng tôi kiểm tra để chắc rằng tên đó do một người dùng thêm vào. Nếu không có tên nào được thêm vào, thì trang sẽ được render lại. Nếu kiểm tra thành công, genre (thể loại) mới được lưu lại và người dùng được chuyển hướng về trang /genres.
  3. Module này được xuất ra thành một router.

Bây giờ bạn có thể tiếp tục tạo ra một trang để thêm một genre mới.

Route và View cho Books

Tạo một route mới cho sách, đặt tên là books.js. Giống như bạn đã làm khi tạo genre, bắt đầu bằng việc gọi các modules cần thiết.

Kế tiếp, thiết lập router để hiển thị tất cả sách đã lưu vào thư viện. Thử tự làm điều đó theo các bạn đã thiết lập cho genre; bạn có thể luôn luôn kiểm tra để sửa các sai sót.

Tôi đoán bạn đã thử rồi - nó nên trông như thế này.

Khi router này được gọi, một yêu cầu được thực hiện để tìm tất cả sách trong cơ sở dữ liệu. Nếu mọi thứ ổn, các sách được hiển thị trên trang /books, ngược lại nó sẽ gửi đến một lỗi.

Bạn cần tạo một file mới để hiển thị tất cả sách, và nó nên trông giống thề này.

Bạn chỉ đơn giản chạy vòng lặp cho các cuộc sách tìm thấy được và xuất các tên và phần mô tả của mỗi cuốn sách thành một danh sách không có số thự tự. Tên quyển sách sẽ trỏ về các trang chi tiết của chính nó.

Thêm Routes và View cho cuốn sách mới

Router tiếp đến bạn cần thiết lập sẽ xử lý phần bổ sung thêm các quyển sách mới.

Các router nên giống thế này.

Trong router đầu tiên, bạn đang hiển thị trang /addBooks. Router này được gọi khi một yêu cầu xuất hiện qua path /add. Khi các sách đều có phân theo genres, bạn muốn hiển thị các genres đã được lưu vào database.

Đoạn code phía trên tìm tất cả các genre trong cơ sở dữ liệu của bạn và trả về kết quả thông qua biến genres. Theo đó, bạn có thể chạy vòng lặp qua các genres và hiển thị chúng ở dạng checkbox.

Router thứ hai xử lý phần submit các form. Đầu tiên, bạn kiểm tra phần body của yêu cầu để chắc rằng vài field không rỗng. Đây là lúc middleware express-validator bạn thiết lập trong app.js hữu dụng. Nếu có các lỗi, trang sẽ được render lại. Nếu không có lỗi, thì giá trị cuốn sách mới được lưu lại và người dùng được điều hướng trở lại trang /books.

Hãy tiếp tục với phần tạo Views.

Tạo một file View mới gọi là addBooks.pug. Chú ý rằng tên file của view sẽ trùng với tham số đầu tiên của res.render. Lý do bởi vì bạn đang render một template. Trong quá trình điều hướng này, bạn chỉ cần đưa tham số đường dẫn bạn muốn điều hướng tới, như bạn đã làm với res.direct('/books').

Dù thiết lập điều đó nhưng Views nên trông giống thế này đây.

Điều quan trọng cần ghi chú ở đây là form action và method. Khu nút submit được nhấn, bạn đang thực thi yêu cầu dạng POST đến /books/add. Một điều khác - một lần nữa bạn chạy vòng lặp qua các genres được trả về và hiển thị từng cái.

Route và View để xem Book

Hãy đi đến phần route để xử lý các yêu cầu được gửi đi đến mỗi trang Books. Trong khi bạn ở đấy, thì việc xuất các module của bạn cũng rất quan trọng.

Không có phép lạ gì ở đây cả.

Đầu tiên, các yêu cầu được gửi đến router này cần phải có một id: id của cuốn sách. Id này nhận được từ tham số của yều cầu, bằng cách dùng req.params.id Điều này thường dùng để xác định một cuốn sách cụ thể từ cơ sở dữ liệu, các id là số duy nhất. Khi tìm thấy quyển sách, giá trị genre (loại sách) của cuốn sách được hội tụ với tất cả genre đã được lưu vào cuốn sách. Nếu tất cả mọi thứ ổn, view của cuốn sách được render, ngược lại sẽ phát sinh một lỗi.

Hãy tạo một view cho một quyển sách. Nó nên trông như thế này.

Bạn có thể bắt đầu node server của bạn ngay từ bây giờ.

Tổng kết

Bây giờ bạn đã biết làm sao để xây dựng một ứng dụng web bằng Node.js, không chỉ là một ứng dụng đơn giản to-do. Bạn đã có thể xử lý phần nộp các biểu mẫu, tham chiếu 2 model, và thiết lập vài middleware.

Bạn có thể tiếp tục mở rộng ứng dụng - cố gắng thêm vào chức năng xoá một cuốn sách. Đầu tiên thêm một button ở trang hiển thị sách, sau đó đến file route và thêm một route vào đó. Chú ý rằng đây sẽ là một yêu cầu dạng POST.

Bạn cũng có thể nghĩ đến nhiều tính năng hơn để bổ sung vào ứng dụng. Tôi hy vọng bạn tận hưởng nó.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.