Xây Dựng Ứng Dụng Đầu Tiên Với Express FrameWork

CHUYỆN NGHỀ1 Comment

You Are Here:Xây Dựng Ứng Dụng Đầu Tiên Với Express FrameWork

 

Chào mọi người. Để trở thành một Full-stack Developer chắc chắn bạn phải tập làm quen với việc chiến đấu mới mọi  ngôn ngữ và mình cũng thế .

 

Tuần rồi mình vừa được join vào dự án mới.Đầu tiên cũng hí hửng lắm vì lần đầu tiên được làm việc với mô hình agile . Tuy nhiên khi vào rồi mình mới biết ” giông tố bủa vây”.

Con website mình vừa nhảy vào làm được build bằng Nodejs trong khi đó mình chưa từng code 1 dòng nào Nodejs.Các bạn biết cảm giác nó thốn thế nào rồi đấy.

Còn nữa công việc chính của mình là fix bug của con website đấy.Ok fine =))))

Với tinh thần ” nhạc nào cũng nhảy ” mình bắt đầu vừa đọc tài liệu vừa fix bug .Nên hôm nay có cái hay hay muốn chia sẻ mới các bạn đây .

1.Giới Thiệu Express Framework

Express là một web application framework for nodejs, nó cung cấp cho chúng những rất nhiều tính năng mạnh mẽ trên nền tảng web. Express rất dễ dàng để phát triển các ứng dụng nhanh dựa trên Node.js cho các ứng dụng Web. Express hỗ trợ các phương thức HTTP và middleware tạo ra 1 API rất mạnh mẽ và sử dụng dễ dàng hơn. Khi mới tiếp cận với Express mình thực sự bị cuốn hút bởi các API của nó, từ cách sử dụng route, template, đều khá dễ tùy chọn và làm việc. Các tính năng của Express framework phải kể đến như:

  • Cho phép thiết lập các lớp trung gian để trả về các HTTP request.
  • Định nghĩa routing có thể được sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL.
  • Cho phép trả về các trang HTML dựa vào các tham số truyền vào đến template.

 

2.Cài đặt Express Framework

Để cài đặt Express framework sử dụng npm như sau.Mở terminal bất cứ đâu bạn muốn.

À quên đầu tiên bạn phải cài npm nữa nhé.Xem tại đây.

Ngoài ra bạn cũng nên cài mốt số module quan trọng đi cùng với express như:

  • body-parser – Đây là một lớp trung gian node.js để xử lí JSON, dự liệu thô, text và mã hóa URL.
  • cookie-parser– Chuyển đổi header của Cookie và phân bố đến các req.cookies
  • multer – Đây là một thành phần trung gian trong node.js để xử lí phần multipart/form-data.

Hoàn tác các thao tác trên thì điều kiện cần đã có. Bây giờ chúng ta sẽ đi vào phần ví dụ chi tiết.

3.Ứng dụng đầu tiên sử dụng Express

3.1 Hello express

Cũng như khi bạn học bất kỳ một ngôn ngữ lập trình hay công nghệ nào mới mẻ. Bạn đều bắt đàu bằng chương trình gọi “hello”. Bài viết của tôi cũng không phải ngoại lệ. Hãy cùng nhau code một chương trình “hello ” với express.

Trước tiên, hãy tạo file app.js ở trong thư mục express.

Mở file app.js bằng  trình Editor Code của bạn lên.Ở đây mình dùng Visual Studio Code.

Chạy server để xem kết quả với lệnh với terminal.

Trên terminal của bạn hiện lên dòng chữ:

Sau đó, hãy truy cập vào địa chỉ: Test demo. Kết quả thu được như sau:

3.2 Request & response trong Expresss

Express sử dụng một hàm callback có các tham số là các đối tượng request và response.

  • Request – Biểu diễn một HTTP request và có các thuộc tính cho các request như các chuỗi truy vấn, tham số, body, HTTP header và những phần khác.
  • Response – Biểu diễn một HTTP response được ứng dụng Express gửi đi khi nó nhận về một HTTP request.

Định tuyến cơ bản

Qua 2 phần giới thiệu ở trên, chắc rằng các bạn cũng đã hiểu cơ bản phần nào về Express. Trong phần này chúng ta sẽ cùng nhau tìm hiểu sâu hơn về Express.

Mở file app.js và sửa lại code với nội dung sau:

Lưu lại thay đổi và chạy lại server bằng lệnh

Truy cập lại địa chỉ localhost:8080

Làm việc với file tĩnh

Express cung cấp lớp tiện ích trung gian express.static để phục vụ cho các file tĩnh như các file hình ảnh, css, js.

Cách hoạt động của nó về cơ bản bạn chỉ cần truyền tên thư mục, nơi bạn chứa cacs file tĩnh thì express.static sẽ xử dụng file đó một cách trực tiếp.

Giả sử mình có một vài hình ảnh trong thư mục public/images như sau với cấu trúc thư mục như sau .

Trong file app.js, thay đổi nội dung code như sau:

Lưu code vài khởi động lại server với lệnh:

Sau đó truy cập địa chỉ localhost:8080/images/logo.jpg để xem kết quả nhé 😀

Hãy tham khảo một ví dụ với phương thức Get tiếp theo đây:

Trước tiên, hãy tạo 1 file index.html với nội dung sau đây:

Sau đó sửa lại file app.js với nội dung sau:

Lưu lại code và khởi động lại server node. Truy cập vào địa chỉ http://localhost:8081/index thu được:

Ở đây mình không css lên hơi xấu 😀

Để ý rằng, trong app.js chúng ta có thêm đoạn code xử lý khi form submit. Hãy nhập input vào và ấn submit.Đẹp trai cá 😀

Tới đây, các bạn hãy dừng lại và chiêm nghiệm lại đoạn code trong app.js nhé. ^^

Sau khi đã hoàn toàn làm chủ được công nghệ, hãy xử dụng phương thức post để xử lý thay cho phương thức get nhé.

Chúc mọi người thành công. ^^

About the author:

Top