Thứ năm, 12/12/2019 | 00:00 GMT+7

Cách tạo ứng dụng "Hello World" với Koa

Express là một trong những framework Node.js phổ biến nhất hiện có. Koa là một khuôn khổ web mới được tạo bởi group đằng sau Express. Nó hướng đến một version hiện đại và tối giản hơn của Express. Một số đặc điểm của nó là hỗ trợ và phụ thuộc vào các tính năng JavaScript mới như trình tạoasync / await . Koa cũng không cung cấp bất kỳ phần mềm trung gian nào mặc dù nó có thể được mở rộng bằng cách sử dụng các plugin tùy chỉnh và hiện có.

Theo dõi bài viết này, bạn sẽ tìm hiểu thêm về Koa framework và xây dựng một ứng dụng để làm quen với chức năng và triết lý của nó.

Yêu cầu

Để làm theo hướng dẫn này, bạn cần cài đặt những thứ sau:

Bạn cũng cần phải có kiến thức về JavaScript và cú pháp ES6.

Cài đặt và cấu hình

Để bắt đầu, hãy tạo một folder mới cho dự án của bạn. Điều này có thể được thực hiện bằng cách sao chép và chạy lệnh bên dưới trong terminal của bạn:

  • mkdir koala

Lưu ý: Bạn có thể đặt bất kỳ tên nào cho dự án của bạn , nhưng trong bài viết này, ta sẽ sử dụng koala làm tên và folder của dự án.

Đến đây, bạn đã tạo koala folder dự án của bạn . Tiếp theo, khởi tạo dự án nút của bạn từ bên trong folder . Bạn có thể thực hiện bằng cách chạy các lệnh dưới đây:

  • cd koala
  • npm init koala

Sau khi chạy lệnh npm init , hãy làm theo dấu nhắc và điền thông tin chi tiết về dự án của bạn. Cuối cùng, bạn sẽ có một file package.json với thông tin bạn đã nhập khi được yêu cầu . Lưu ý bạn có thể chạy npm init -y để tạo file package.json với các giá trị mặc định.

Tiếp theo, chạy lệnh này để cài đặt Koa:

  • npm install koa --save

Tùy thuộc vào version Node bạn đang chạy, bạn có thể không cần thêm cờ --save . Cờ này cho các version Node cũ hơn để thêm thư viện đã cài đặt (trong trường hợp này là Koa) vào danh sách phụ thuộc trong file package.json của bạn. Trên các version Node mới hơn, bạn chỉ có thể chạy npm i koa để cài đặt Koa.

Tạo server Koa

Trong quá trình khởi tạo dự án của bạn, bạn được yêu cầu nhập điểm đầu vào của ứng dụng của bạn . Trong bài viết này, bạn sẽ sử dụng index.js là giá trị mặc định làm điểm nhập của bạn.

Đầu tiên, tạo index.js . Điều này có thể được thực hiện theo một số cách. Đối với user MacOS và Linux, điều này có thể được thực hiện bằng cách chạy lệnh dưới đây trong terminal của bạn:

  • touch index.js

Sử dụng trình soạn thảo mã / văn bản mà bạn chọn, mở dự án của bạn và sao chép đoạn mã dưới đây vào index.js :

 // index.js  'use strict';  const koa = require('koa') const app = new koa()  app.use(function *(){   this.body = "Hello World !!!"; });  app.listen(1234) 

Trong đoạn mã trên, bạn đã tạo một ứng dụng koa chạy trên cổng 1234. Bạn có thể chạy ứng dụng bằng lệnh:

  • node index.js

Và truy cập ứng dụng trên http: // localhost: 1234 .

Xây dựng ứng dụng của bạn

Như đã đề cập trước đó, Koa.js không cung cấp bất kỳ phần mềm trung gian nào và không giống như người tiền nhiệm của nó, Express, nó không xử lý định tuyến theo mặc định.

Để triển khai các tuyến trong ứng dụng Koa của bạn, bạn sẽ cài đặt một thư viện phần mềm trung gian để định tuyến trong Koa, Koa Router . Cài đặt nó bằng lệnh:

  • npm install koa-router --save

Để sử dụng bộ định tuyến trong ứng dụng của bạn, hãy sửa đổi index.js của bạn:

// index.js  'use strict'; const koa = require('koa') const koaRouter = require('koa-router')  const app = new koa() const router = new koaRouter()  router.get('koala', '/', (ctx) => {   ctx.body = "Welcome! To the Koala Book of Everything!" })  app.use(router.routes())   .use(router.allowedMethods())  app.listen(1234, () => console.log('running on port 1234')) 

Ở trên, bạn đã xác định một tuyến đường trên url cơ sở của ứng dụng ( http: // localhost: 1234 ) và đăng ký tuyến đường này cho ứng dụng Koa của bạn.

Để biết thêm thông tin về định nghĩa tuyến đường trong các ứng dụng Koa.js, hãy truy cập tài liệu thư viện Koa Router tại đây .

Như đã được thành lập, Koa xuất hiện dưới dạng một khung công tác tối giản, do đó, để thực hiện kết xuất chế độ xem với công cụ mẫu, bạn sẽ phải cài đặt một thư viện phần mềm trung gian. Có một số thư viện để lựa chọn nhưng trong bài viết này, bạn sẽ sử dụng koa-ejs .

Để làm như vậy, trước tiên hãy cài đặt thư viện bằng:

  • npm install koa-ejs --save

Tiếp theo, sửa đổi index.js của bạn để đăng ký mẫu của bạn với đoạn mã bên dưới:

// index.js  'use strict'; const koa = require('koa') const path = require('path') const render = require('koa-ejs') const koaRouter = require('koa-router')  const app = new koa() const router = new koaRouter()  render(app, {   root: path.join(__dirname, 'views'),   layout: 'layout',   viewExt: 'html',   cache: false,   debug: true })  router.get('koala', '/', (ctx) => {   ctx.body = "Welcome! To the Koala Book of Everything!" })  app.use(router.routes())   .use(router.allowedMethods())  app.listen(1234, () => console.log('running on port 1234')) 

Như đã thấy ở trên, khi đăng ký mẫu, bạn cho ứng dụng biết folder root của các file dạng xem, phần mở rộng của file dạng xem và file dạng xem cơ sở (mà các dạng xem khác mở rộng).

Đến đây bạn đã đăng ký phần mềm trung gian mẫu của bạn , hãy sửa đổi định nghĩa tuyến đường của bạn để hiển thị file mẫu:

// index.js  ...  router.get('koala', '/', (ctx) => {   let koala_attributes = [];   koala_attributes.push({     meta_name: 'Color',     meta_value: 'Black and white'   })   koala_attributes.push({     meta_name: 'Native Country',     meta_value: 'Australia'   })   koala_attributes.push({     meta_name: 'Animal Classification',     meta_value: 'Mammal'   })   koala_attributes.push({     meta_name: 'Life Span',     meta_value: '13 - 18 years'   })   koala_attributes.push({     meta_name: 'Are they bears?',     meta_value: 'no!'   })   return ctx.render('index', {     attributes: koala_attributes   }) })  ... 

Ở trên, tuyến cơ sở của bạn hiển thị index.html được tìm thấy trong folder chế độ xem. Tệp index.html của bạn chứa một số HTML cơ bản để hiển thị các thuộc tính gấu túi của bạn. Xem bên dưới:

<!-- views/index.html -->  <h2>Koala - a directory Koala of attributes</h2> <ul class="list-group">   <% attributes.forEach( function(attribute) { %>     <li class="list-group-item">       <%= attribute.meta_name %> - <%= attribute.meta_value %>     </li>   <% }); %> </ul> 

Để có thêm tùy chọn với việc sử dụng phần mềm trung gian mẫu koa-ejs, hãy xem tài liệu thư viện tại đây .

Xử lý lỗi và phản hồi

Koa xử lý lỗi bằng cách xác định sớm phần mềm trung gian lỗi trong file entrypoint của bạn. Phần mềm trung gian lỗi phải được xác định sớm bởi vì chỉ những lỗi từ phần mềm trung gian được xác định sau khi phần mềm trung gian lỗi mới bị bắt. Sử dụng index.js của bạn làm ví dụ, hãy điều chỉnh file để bao gồm:

// index.js  'use strict'; const koa = require('koa') const render = require('koa-ejs') const koaRouter = require('koa-router')  const app = new koa() const router = new koaRouter()  app.use( async (ctx, next) => {   try {     await next()   } catch(err) {     console.log(err.status)     ctx.status = err.status || 500;     ctx.body = err.message;   } })  ... 

Khối trên bắt bất kỳ lỗi nào được tạo ra trong quá trình thực thi ứng dụng của bạn. Ta sẽ kiểm tra điều này bằng cách đưa ra một lỗi trong phần thân hàm của tuyến đường mà bạn đã xác định:

// index.js  ...  router.get('koala', '/', (ctx) => {   ctx.throw('Test Error Message', 500) })  ... 

Đối tượng phản hồi Koa thường được nhúng trong đối tượng ngữ cảnh của nó. Sử dụng định nghĩa tuyến đường, hãy trình bày một ví dụ về cách cài đặt phản hồi:

// index.js  'use strict'; const koa = require('koa') const koaRouter = require('koa-router')  const app = new koa() const router = new koaRouter()  app.use( async (ctx, next) => {   try {     await next()   } catch(err) {     console.log(err.status)     ctx.status = err.status || 500;     ctx.body = err.message;   } })  router.get('koala', '/', (ctx) => {   ctx.status = 200   ctx.body   = "Well this is the response body" }) 

Kết luận

Trong bài viết này, bạn đã được giới thiệu ngắn gọn về Koa và cách triển khai một số chức năng phổ biến trong dự án Koa. Koa là một khung công tác tối giản và linh hoạt có thể được mở rộng cho nhiều chức năng hơn những gì bài viết này đã trình bày. Vì sự tương tự trong tương lai của nó với Express, một số thậm chí đã mô tả nó là Express 5.0 về tinh thần.

Toàn bộ mã từ bài viết này có sẵn trên Github và kho chứa một số khái niệm bổ sung không được xử lý ở đây, vì chúng nằm ngoài phạm vi của phần giới thiệu.


Tags:

Các tin liên quan