Tạo Nhanh Ứng Dụng Express.js Với Express Generator

vào
express.js

Express.js là gì

Express.js là một Node.js web framework đã trở nên phổ biến rộng rãi do tính đơn giản của nó. Nó có định tuyến dễ sử dụng và hỗ trợ đơn giản cho các công cụ xem, đưa nó vượt xa máy chủ Node HTTP cơ bản.
Tuy nhiên, việc khởi động một ứng dụng Express mới đòi hỏi một số mã soạn sẵn nhất định: bắt đầu một phiên bản máy chủ mới, định cấu hình công cụ xem, thiết lập xử lý lỗi.
Mặc dù có sẵn nhiều dự án khởi động và nồi hơi khác nhau, Express có công cụ dòng lệnh riêng giúp dễ dàng khởi động các ứng dụng mới, được gọi là express-generator.
Express có tích hợp sẵn rất nhiều tính năng, và rất nhiều tính năng khác bạn có thể cài đặt từ package tương thích. Đây chính là ba tính năng cốt lõi nhất làm nên điều đặc biệt của Express:
  1. Routing. đây là cách /home /blog và /about đều cho bạn các trang khác nhau. Express giúp bạn dễ dàng mô đun hóa code này khi cho phép bạn đặt các route khác nhay cho các file khác nhau.
  2. Middleware. Về cơ bản, middleware là “phần mềm trung gian” hay "phần mềm keo". Middleware sẽ access request trước khi route tiếp cận chúng, cho phép chúng xử lý các vấn đề "khó nhằn" khác như cookie parsing, file uploads, errors,...
  3. Views. Views là cách trang HTML được render mà không có custom content. Bạn chỉ việc tải nội dung cần được render và Express will render theo view engine đang có.

Bắt đầu với Express

Để bắt đầu project mới với Express generator, chỉ việc chạy vài dòng lệnh sau:
npm install express-generator -g
Cài đặt Express generator dưới dạng global package, cho phép bạn chạy lệnh express trong terminal:
express myapp
Một project Express sẽ được tạo dưới tên myapp, sau đó sẽ được đặt trong thư mục myapp.
cd myapp
Nếu chưa quen với terminal command, lệnh này sẽ đưa bạn vào thư mục myapp.
npm install
npm là trình quản lý Node.js pakage mặc định. Chạy npm install sẽ cài đặt tất cả các dependency cho dự án. Theo mặc định, express-generator bao gồm một số packagethường được sử dụng cho máy chủ Express.

Các tùy chọn

CLI generator sẽ gồm khoảng chục arguments, nhưng hai argument hữu ích nhất là:
  • -v . Cho phép bạn chỉ định một view engine để cài đặt. Mặc định sẽ là jade. Tuy vẫn làm việc rất ổn, nhưng argument này vẫn mất dần sự yêu thích so với pug.
  • -c . Generator mặc định tạo cho bạn file CSS rất đơn giản, nhưng việc chỉ định một CSS engine sẽ cấu hình ứng dụng mới của bạn với middleware để compile bất kỳ tùy chọn nào bên trên.
Sau khi đã set up project và cài đặt dependency, chúng ta hãy start server mới với lệnh sau:
npm start
Sau đó dùng trình duyệt để truy cập http://localhost:3000.

Cấu trúc ứng dụng

Mỗi khi ứng dụng Express được khởi tạo, ta sẽ bắt đầu với bốn thư mục sau.

bin

Thư mục bin chứa executable file giúp khởi động ứng dụng. File sẽ khởi động server (trên port 3000, nếu không có lựa chọn thay thế) và set up một số error handling cơ bản. Bạn không cần phải quá lo lắng về file này vì npm start tự giúp bạn chạy nó.

public

Thư mục public là một trong những thư mục quan trọng: mọi thứ trong thư mục này đều có thể truy cập được đối với những người kết nối với ứng dụng của bạn. Trong thư mục này, bạn sẽ để JavaScript, CSS, hình ảnh và các tài sản khác mà mọi người cần khi họ kết nối với trang web của bạn.

routes

Thư mục routes là nơi bạn sẽ đặt file router. Generator sẽ tạo hai file, index.js và users.js làm ví dụ cho cách separate cấu hình route cho ứng dụng.
Thông thường, tại đây bạn sẽ có file khác nhau cho mỗi route lớn trên website của mình. Vì vậy, bạn có thể có các file tên blog.js, home.js, và/hoặc about.js trong thư mục này

views

Thư mục views là nơi chứa file được sử dụng bởi template engine. Generator sẽ cấu hình Express tìm matching view trong thư mục này khi bạn call phương thức render.

app.js

File app.js đặc biệt bởi vì file này set up ứng dụng Express của bạn và kết nối tất cả các phần khác nhau với nhau. Hãy cùng xem thử file này làm gì nhé. File sẽ bắt đầu như thế này
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
Sáu dòng đầu tiên của tập tin là bắt buộc nhé.
var routes = require('./routes/index');
var users = require('./routes/users');
Hai dòng mã tiếp theo cần có cho các tệp route khác nhau mà Express generator mặc định set up: routes và users.
var app = express();
Sau đó, chúng ta sẽ tạo một app mới bằng cách call express(). Variable của ứng dụng chứa tất cả setting và route cho ứng dụng của bạn. Object này sẽ dán ứng dụng của bạn với nhau.
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
Khi app instance được tạo, engine template được set up để render view. Tại đây bạn sẽ thay đổi đường dẫn dến files của view nếu muốn.
Sau đó, bạn sẽ thấy Express được cấu hình để sử dụng middleware. Generator sẽ cài đặt một vài phần middleware thường dùng trong ứng dụng web.
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
  • favicon. Cái này dễ hiểu: serve bạn favicon.ico từ public directory.
  • logger. Khi bạn chạy ứng dụng, bạn có thể nhận thấy tất cả route được request đã log vào console. Nếu bạn muốn disable, chỉ việc comment out middleware này.
  • bodyParser. Như bạn có thể thấy, có hai dòng để phân tích phần body của các HTTP request. Dòng đầu tiên xử lý khi JSON được gửi qua yêu cầu POST, rồi đặt dữ liệu này vào request.body. Dòng thứ hai phân tích dữ liệu chuỗi truy vấn trong URL (ví dụ: /profile?id=5) và đặt vào trong request.query.
  • cookieParser. Middleware này lấy tất cả các cookie mà client gửi và đặt chúng vào request.cookies, đồng thời cho phép bạn sửa đổi chúng (bằng cách thay đổi response.cookies) trước khi gửi lại cho client.
  • express.static.  Middleware này serves các asset tĩnh tĩnh từ thư mục public. Nếu muốn đổi tên hoặc di chuyển thư mục public, bạn có thể thay đổi đường dẫn ở đây.
Kế tiếp là phần routing:
app.use('/', routes);
app.use('/users', users);
Ở đây file route ví dụ cần thiết đã attach vào ứng dụng. Nếu bạn cần thêm route thì sẽ phải thực hiện tại đây.
Tất cả các code sau này được sử dụng để xử lý lỗi. Bạn thường sẽ không cần chỉnh sửa code này trừ khi bạn muốn thay đổi cách Express xử lý lỗi. Theo mặc định, Empress được thiết lập để hiển thị lỗi xảy ra trong route khi bạn ở development mode

Lời kết

Hy vọng bạn đã hiểu thêm về express-generator tool, một công cụ tuyệt vời có thể giúp chúng ta tiếp kiệm thời gian với code mẫu cho các project Express.
Với cấu trúc file rõ ràng, cùng khả năng hộ trợ nhiều middleware khác nhau, Generator tạo nên nền tảng vững chắc cho các ứng dụng mới dù chỉ có vài lệnh đơn giản.
Theo Sitepoint
Location: Vietnam

Nhận xét

Đăng nhận xét