Hướng dẫn form nodejs

Express là gì?

Express có rất nhiều tính năng được tích hợp sẵn và nhiều tính năng khác mà bạn có thể nhận được từ các package khác tích hợp liền mạch, nhưng có ba điều chính mà nó mang lại cho bạn:

1. Routing. Đây là cách / home / blog và / về tất cả cung cấp cho bạn các trang khác nhau. Express giúp bạn dễ dàng mô-đun hóa code này bằng cách cho phép bạn đặt các route khác nhau trong các tệp khác nhau.
2. Middleware. Nếu bạn chưa quen với thuật ngữ này, về cơ bản Middleware là “keo phần mềm”. Nó truy cập các request trước khi các route của bạn nhận được chúng, cho phép chúng xử lý những thứ khó thực hiện như phân tích cú pháp cookie, tải lên tệp, lỗi và hơn thế nữa.
3. Views. Views là cách các trang HTML được hiển thị với nội dung tùy chỉnh. Bạn chuyển dữ liệu bạn muốn được hiển thị và Express sẽ hiển thị dữ liệu đó bằng công cụ xem đã cho của bạn.

Bắt đầu

Điều đầu tiên bạn cần là cài đặt NodeJS và npm trên máy của mình. Để thực hiện việc này, hãy truy cập trang tải xuống NodeJS chính thức và lấy các tệp nhị phân chính xác cho hệ thống của bạn hoặc sử dụng trình quản lý phiên bản như nvm.

Bắt đầu một dự án mới với trình tạo Express chỉ đơn giản như chạy một vài lệnh:

Điều này cài đặt trình tạo Express dưới dạng global, cho phép bạn chạy lệnh express trong terminal:

npm install express-generator -g

Điều này tạo ra một dự án Express mới được gọi là myapp, sau đó được đặt bên trong thư mục myapp:

express myapp

Nếu bạn không quen với các lệnh terminal, lệnh này sẽ đưa bạn vào bên trong thư mục myapp:

cd myapp

Nếu bạn không quen với npm, thì đó là trình quản lý package NodeJS mặc định. Chạy npm install cài đặt tất cả các phụ thuộc cho dự án. Theo mặc định, trình tạo express bao gồm một số package thường được sử dụng với máy chủ Express.

npm install

Tùy chọn

Trình tạo CLI nhận nửa tá arguments, nhưng hai arguments hữu ích nhất là:

• -v . Điều này cho phép bạn chọn một công cụ view để cài đặt. Mặc định là jade. Mặc dù điều này vẫn hoạt động, nhưng nó đã không được dùng nữa và bạn nên chỉ định một công cụ thay thế.
• -c . Theo mặc định, trình tạo sẽ tạo tệp CSS rất cơ bản cho bạn, nhưng việc chọn công cụ CSS sẽ định cấu hình ứng dụng mới của bạn với middleware để biên dịch bất kỳ tùy chọn nào ở trên.

Bây giờ chúng ta đã thiết lập xong dự án và cài đặt các phụ thuộc, khởi động máy chủ mới bằng cách chạy như sau:

npm start

Sau đó duyệt đến http: // localhost: 3000 trong trình duyệt của bạn.

Cấu trúc ứng dụng Express

Ứng dụng Express được tạo bắt đầu với bốn thư mục.

bin

Thư mục bin chứa tệp thực thi khởi động ứng dụng của bạn. Nó khởi động máy chủ (trên cổng 3000, nếu không có giải pháp thay thế nào được cung cấp) và thiết lập một số xử lý lỗi cơ bản. Bạn không thực sự cần phải lo lắng về tệp này, vì npm start sẽ chạy nó cho bạ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ẽ đặt JavaScript, CSS, hình ảnh và các nội dung khác mà mọi người cần khi họ tải trang web của bạn.

routes

Thư mục routes  là nơi bạn sẽ đặt các tệp bộ routes của mình. Trình tạo sẽ tạo hai tệp, index.js và users.js, dùng làm ví dụ về cách tách cấu hình routes ứng dụng của bạn.

Thông thường, bạn sẽ có một tệp khác nhau ở đây cho mỗi chính trên trang web của mình. Vì vậy, bạn có thể có các tệp có 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 bạn có các tệp được sử dụng bởi công cụ tạo temple của bạn. Trình tạo sẽ cấu hình Express để xem ở đây cho một chế độ xem phù hợp khi bạn gọi method render

Ngoài những thư mục này, có một tệp mà bạn nên biết rõ.

app.js

Tệp app.js đặc biệt vì nó thiết lập ứng dụng Express của bạn và kết noisoi tất cả các phần khác nhau lại với nhau. Hãy xem qua những gì nó làm. Đây là cách tệp bắt đầu:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

Sáu dòng đầu tiên của tệp là bắt buộc. Nếu bạn chưa quen với NodeJS, hãy nhớ đọc “Cách xử lý error trong ứng dụng Express và NodeJS”.

Hai dòng code tiếp theo yêu cầu các tệp route khác nhau mà trình tạo Express thiết lập theo mặc định: routes và users.

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

Sau đó, chúng ta tạo một ứng dụng mới bằng cách gọi express (). Biến ứng dụng chứa tất cả các cài đặt và route cho ứng dụng của bạn. Đối tượng này kết dính ứng dụng của bạn lại với nhau.

var app = express();

Khi phiên bản ứng dụng được tạo, công cụ tạo template được thiết lập để hiển thị các views. Đây là nơi bạn sẽ thay đổi đường dẫn đến tệp views của mình nếu cần.

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

Sau đó, bạn sẽ thấy Express được định cấu hình để sử dụng middleware. Trình tạo cài đặt một số middleware phổ biến mà bạn có thể sử dụng trong một ứng dụng web:

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

Middleware

• logger.Khi chạy ứng dụng của mình, bạn có thể nhận thấy rằng tất cả các route được request đều được ghi vào console. Nếu bạn muốn vô hiệu hóa điều này, bạn có thể comment middleware này.
• express.json.Bạn có thể nhận thấy rằng có hai dòng để phân tích phần nội dung của các request HTTP đến. Dòng đầu tiên xử lý khi JSON được gửi qua một request POST và nó đưa dữ liệu này vào request.body.
• express.urlencoded. Dòng thứ hai phân tích cú pháp dữ liệu chuỗi truy vấn trong URL (ví dụ: / profile? Id = 5) và đặt điều này trong request.query.
• cookieParser. Thao tác này lấy tất cả các cookie mà client gửi và đưa chúng vào request.cookies. Nó cũng cho phép bạn sửa đổi chúng trước khi gửi lại cho client, bằng cách thay đổi response.cookies.
• express.static. Middleware này phục vụ các static từ thư mục chung của bạn. Nếu bạn muốn đổi tên hoặc di chuyển thư mục chung, bạn có thể thay đổi đường dẫn tại đây.

Routing

app.use('/', indexRouter);
app.use('/users', usersRouter);

Tại đây, các tệp route mẫu được yêu cầu được đính kèm vào ứng dụng của chúng ta. Nếu bạn cần thêm các route bổ sung, bạn có thể thực hiện tại đây.

Tất cả code sau này được sử dụng để xử lý lỗi. Bạn thường sẽ không phải sửa đổi codenày trừ khi bạn muốn thay đổi cách Express xử lý lỗi. Theo mặc định, nó được thiết lập để hiển thị lỗi đã xảy ra trong route khi bạn đang ở chế độ development

Bootstrap project mới NodeJS

Hãy áp dụng những gì chúng ta đã học được cho đến nay để bắt đầu một ứng dụng Express.js cơ bản.

Giả sử bạn đã cài đặt express-generator làm mô-đun , hãy chạy lệnh sau để tạo một dự án khung mới:

express -v hbs signup-form

Như tôi đã đề cập trước đó, bạn nên chọn một thứ khác ngoài thư viện tạo template(Jade) mặc định. Ở đây tôi đã sử dụng Handlebars.js, vì tôi thấy dễ đọc và dễ làm việc.

Khi trình tạo đã chạy, hãy chuyển sang thư mục mới được tạo và cài đặt các phần phụ thuộc:

cd signup-form
npm i

Tại thời điểm này, bạn có thể nhận thấy một số cảnh báo về các lỗ hổng của package. Hãy cập nhật phiên bản Handlebars.js để khắc phục những lỗi sau:

npm install 

Giờ đây, các phần phụ thuộc của dự án đã được cài đặt và cập nhật, hãy tùy chỉnh một số template ở chế độ xem bản soạn sẵn.

Trình tạo đã tạo mẫu bố cục được sử dụng để hiển thị tất cả markup được chia sẻ giữa các chế độ xem. File views / layout.hbs như sau:

  
  
  
  
  
  
  
  
  


  {{{body}}}

html,
body {
  height: 100%;
}
body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}
.full-width {
  width: 100%;
  padding: 15px;
  margin: auto;
}
.form-signin {
  max-width: 330px;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input {
  border-radius: 0;
  margin-bottom: -1px;
}
.form-signin input:first-of-type {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.form-signin input:last-of-type {
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  margin-bottom: 10px;
}

Bây giờ chúng ta đã custom bố cục, hãy thêm markup cho trang chủ.

  
Join the mailing list
  First name
  
  Email
  
  Email (confirm)
  
  Subscribe
  
© 2020

Điều này sẽ hiển thị form signup trên trang chủ của chúng ta.

Hãy thêm route mà form có thể được gửi tới, nơi chúng ta có thể truy cập vào dữ liệu form và làm điều gì đó với nó. Mở các routes / index.js và thêm route sau :

router.post("/subscribe", function(req, res, next) {
  const { name, email } = req.body;
  // 1. Validate the user data
  // 2. Subscribe the user to the mailing list
  // 3. Send a confirmation email
  res.render("subscribed", {
    title: "You are subscribed",
    name,
    email
  });
});

Trong trình route handler, chúng ta đã trích xuất dữ liệu form từ object request. Sau khi xử lý signup (được hiển thị dưới dạng mã giả), chúng ta chuyển dữ liệu sang chế độ views subscribed  của chúng ta.

Bonus

Hãy thêm đoạn code sau

  
Thank You, {{name}}!
  
Please check your email to confirm your subscription to our newsletter.
  

  

      Having trouble? Contact us
  
  

      Continue to homepage
  

Để dùng thử trang web mới, hãy kích hoạt nó bằng cách chạy npm run start trong thư mục dự án và truy cập http: // localhost: 3000.

Kết luận

Qua bài viết bạn đã tạo được form Subcribe sử dụng Express

Tham khảo thêm về NodeJS tại đây : NodeJS là gì? Tạo ứng dụng chat trên NodeJS

Tham khảo thêm về React: Tạo authentication cho app React trong 5 phút

Bài viết này mình sưu tầm và tổng hợp từ nhiều nguồn trên Internet.

Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.