Sameer Borate là nhà phát triển web tự do, làm việc chủ yếu bằng PHP và MySQL. Anh ấy viết blog về các sở thích và chủ đề web khác nhau của mình tại www. codediesel. com. Khi … Thông tin thêm về Sameer ↬
Bản tin email
Email [đập vỡ] của bạn
Mẹo hàng tuần về giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.
- Các mẫu thiết kế giao diện Đào tạo UX
- Lớp học tổng thể về nguyên tắc phổ quát của kiểu chữ với Elliot Jay Stocks
- Bắt đầu miễn phí
- Thử ngay bây giờ
- Giao diện người dùng SmashingConf 2023
Giai đoạn 1. Cài đặt nhanh
Giả sử bạn đã cài đặt Node. js trên hệ thống của bạn, hãy tạo một thư mục để chứa ứng dụng của bạn [hãy gọi nó là “
Const express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
2”] và chuyển sang thư mục đó$ mkdir markdown-api
$ cd markdown-api
Sử dụng lệnh npm init để tạo gói. json cho ứng dụng của bạn. Lệnh này nhắc bạn về một số thứ như tên và phiên bản ứng dụng của bạn
Hiện tại, chỉ cần nhấn Enter để chấp nhận giá trị mặc định cho hầu hết chúng. Tôi đã sử dụng tệp điểm vào mặc định làm chỉ mục. js, nhưng bạn có thể thử ứng dụng. js hoặc một số khác tùy thuộc vào sở thích của bạn
Bây giờ hãy cài đặt Express trong thư mục
Const express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
2 và lưu nó trong danh sách phụ thuộc$ npm install express --save
Tạo một chỉ mục. js trong thư mục hiện tại [
Const express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
2] và thêm đoạn mã sau để kiểm tra xem khung Express đã được cài đặt đúng chưaConst express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
Bây giờ duyệt đến URL
Const express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
5 để kiểm tra xem tệp thử nghiệm có hoạt động bình thường không. Nếu mọi thứ đều theo thứ tự, chúng ta sẽ thấy Hello World. ’ lời chào trong trình duyệt và chúng tôi có thể tiến hành xây dựng API cơ sở để chuyển đổi Markdown sang HTMLgiai đoạn 2. Xây dựng API cơ sở
Mục đích chính của API của chúng tôi là chuyển đổi văn bản theo cú pháp Markdown sang HTML. API sẽ có hai điểm cuối
6Const express = require['express']; var app = express[]; app.get['/', function[req, res]{ res.send['Hello World!']; }]; app.listen[3000];
7Const express = require['express']; var app = express[]; app.get['/', function[req, res]{ res.send['Hello World!']; }]; app.listen[3000];
Điểm cuối
Const express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
8 sẽ cho phép ứng dụng xác thực các yêu cầu hợp lệ trong khi điểm cuối Const express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
9 sẽ chuyển đổi [rõ ràng] Markdown sang HTMLDưới đây là mã API cơ sở để gọi hai điểm cuối. Lệnh gọi
Const express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
8 chỉ trả về một chuỗi “Đã xác thực”, trong khi lệnh gọi Const express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
9 trả về bất kỳ nội dung Markdown nào mà bạn đã gửi cho ứng dụng. Phương thức home chỉ trả về 'Xin chào thế giới. ' chuỗi$ mkdir markdown-api
$ cd markdown-api
3Chúng tôi sử dụng phần mềm trung gian
$ mkdir markdown-api
$ cd markdown-api
32 để giúp dễ dàng phân tích các yêu cầu đến ứng dụng. Phần mềm trung gian sẽ cung cấp tất cả các yêu cầu đến cho bạn trong thuộc tính $ mkdir markdown-api
$ cd markdown-api
33. Bạn có thể làm mà không cần phần mềm trung gian bổ sung nhưng việc thêm phần mềm này giúp phân tích các tham số yêu cầu đến dễ dàng hơn nhiềuBạn có thể cài đặt
$ mkdir markdown-api
$ cd markdown-api
32 đơn giản bằng cách sử dụng npm$ mkdir markdown-api
$ cd markdown-api
7Bây giờ chúng tôi đã có các chức năng sơ khai giả của mình, chúng tôi sẽ sử dụng Postman để kiểm tra tương tự. Trước tiên hãy bắt đầu với một cái nhìn tổng quan ngắn gọn về Postman
Tổng quan về người đưa thư
Postman là một công cụ phát triển API giúp dễ dàng xây dựng, sửa đổi và kiểm tra các điểm cuối API từ bên trong trình duyệt hoặc bằng cách tải xuống ứng dụng dành cho máy tính để bàn [phiên bản trình duyệt hiện không được dùng nữa]. Nó có khả năng thực hiện nhiều loại yêu cầu HTTP khác nhau, tôi. e. NHẬN, ĐĂNG, ĐẶT, VÁ. Nó có sẵn cho Windows, macOS và Linux
Đây là giao diện của Postman
Để truy vấn điểm cuối API, bạn cần thực hiện các bước sau
- Nhập URL mà bạn muốn truy vấn vào thanh URL ở phần trên cùng;
- Chọn phương thức HTTP ở bên trái của thanh URL để gửi yêu cầu;
- Nhấp vào nút 'Gửi'
Người đưa thư sau đó sẽ gửi yêu cầu đến ứng dụng, lấy bất kỳ phản hồi nào và hiển thị nó ở cửa sổ bên dưới. Đây là cơ chế cơ bản về cách sử dụng công cụ Postman. Trong ứng dụng của chúng tôi, chúng tôi cũng sẽ phải thêm các tham số khác vào yêu cầu, sẽ được mô tả trong các phần sau
Sử dụng người đưa thư
Bây giờ chúng ta đã thấy tổng quan về Postman, hãy tiếp tục sử dụng nó cho ứng dụng của chúng ta
Bắt đầu ứng dụng
Const express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
2 của bạn từ dòng lệnh$ mkdir markdown-api
$ cd markdown-api
9Để kiểm tra mã API cơ sở, chúng tôi thực hiện lệnh gọi API tới ứng dụng từ Postman. Lưu ý rằng chúng tôi sử dụng phương thức POST để truyền văn bản để chuyển đổi sang ứng dụng
Ứng dụng hiện tại chấp nhận nội dung Markdown để chuyển đổi thông qua tham số POST
$ mkdir markdown-api
$ cd markdown-api
36. Điều này chúng tôi chuyển qua dưới dạng định dạng được mã hóa URL. Hiện tại, ứng dụng trả về nguyên văn chuỗi ở định dạng JSON — với trường đầu tiên luôn trả về chuỗi $ mkdir markdown-api
$ cd markdown-api
37 và trường thứ hai trả về văn bản đã chuyển đổi. Sau này, khi chúng ta thêm mã xử lý Markdown, nó sẽ trả về văn bản đã chuyển đổiGiai đoạn 3. Thêm bộ chuyển đổi Markdown
Với giàn giáo ứng dụng hiện đã được xây dựng, chúng tôi có thể xem xét thư viện JavaScript
$ mkdir markdown-api
$ cd markdown-api
38 mà chúng tôi sẽ sử dụng để chuyển đổi Markdown sang HTML. Showdown là trình chuyển đổi Markdown sang HTML hai chiều được viết bằng JavaScript cho phép bạn chuyển đổi Markdown sang HTML và ngược lạiCài đặt gói sử dụng npm
Const express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
3Sau khi thêm mã giới thiệu cần thiết vào giàn giáo, chúng tôi nhận được kết quả sau
Const express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
4Mã bộ chuyển đổi chính nằm ở điểm cuối
Const express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
7 như được trích xuất và hiển thị bên dưới. Điều này sẽ chuyển đổi bất kỳ văn bản Markdown nào bạn đăng thành phiên bản HTML và trả về dưới dạng tài liệu JSONConst express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
6Phương thức thực hiện chuyển đổi là
$ mkdir markdown-api
$ cd markdown-api
70. Chúng tôi có thể đặt các tùy chọn khác nhau cho chuyển đổi Markdown bằng phương pháp $ mkdir markdown-api
$ cd markdown-api
71 với định dạng sauConst express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
9Vì vậy, ví dụ: chúng tôi có thể đặt tùy chọn để tự động chèn và liên kết một URL được chỉ định mà không cần bất kỳ đánh dấu nào
$ npm install express --save
0Như trong ví dụ Postman, nếu chúng ta truyền một chuỗi đơn giản [chẳng hạn như
$ mkdir markdown-api
$ cd markdown-api
72] vào ứng dụng, nó sẽ trả về chuỗi sau nếu $ mkdir markdown-api
$ cd markdown-api
73 được bật$ npm install express --save
1Nếu không có tùy chọn, chúng tôi sẽ phải thêm thông tin đánh dấu để đạt được kết quả tương tự
$ npm install express --save
2Có nhiều tùy chọn để sửa đổi cách xử lý Markdown. Một danh sách đầy đủ có thể được tìm thấy trên trang web Showdown
Vì vậy, bây giờ chúng tôi có một trình chuyển đổi Markdown-to-HTML đang hoạt động với một điểm cuối duy nhất. Hãy để chúng tôi tiến xa hơn và thêm xác thực để có ứng dụng
giai đoạn 4. Thêm xác thực API bằng Passport
Việc hiển thị API ứng dụng của bạn với thế giới bên ngoài mà không có xác thực phù hợp sẽ khuyến khích người dùng truy vấn điểm cuối API của bạn mà không có hạn chế nào. Điều này sẽ mời các phần tử vô đạo đức lạm dụng API của bạn và cũng sẽ tạo gánh nặng cho máy chủ của bạn với các yêu cầu không được kiểm duyệt. Để giảm thiểu điều này, chúng ta phải thêm một cơ chế xác thực phù hợp
Chúng tôi sẽ sử dụng gói Hộ chiếu để thêm xác thực vào ứng dụng của mình. Giống như phần mềm trung gian
$ mkdir markdown-api
$ cd markdown-api
32 mà chúng tôi đã gặp trước đó, Passport là phần mềm trung gian xác thực cho Node. js. Lý do chúng tôi sẽ sử dụng Passport là vì nó có nhiều cơ chế xác thực để làm việc với [tên người dùng và mật khẩu, Facebook, Twitter, v.v.] giúp người dùng linh hoạt trong việc chọn một cơ chế cụ thể. Phần mềm trung gian Passport có thể dễ dàng được đưa vào bất kỳ ứng dụng Express nào mà không cần thay đổi nhiều mãCài đặt gói sử dụng npm
$ npm install express --save
3Chúng tôi cũng sẽ sử dụng chiến lược
$ mkdir markdown-api
$ cd markdown-api
75, sẽ được giải thích sau, để xác thực. Vì vậy, cài đặt nó, quá$ npm install express --save
4Bạn cũng sẽ cần thêm mô-đun mã hóa và giải mã JWT[JSON Web Token] cho Node. js được sử dụng bởi Hộ chiếu
$ npm install express --save
5Chiến lược trong hộ chiếu
Hộ chiếu sử dụng khái niệm chiến lược để xác thực yêu cầu. Chiến lược là các phương pháp khác nhau cho phép bạn xác thực các yêu cầu và có thể bao gồm từ trường hợp đơn giản như xác minh thông tin xác thực tên người dùng và mật khẩu, xác thực bằng OAuth [Facebook hoặc Twitter] hoặc sử dụng OpenID. Trước khi xác thực yêu cầu, chiến lược được ứng dụng sử dụng phải được định cấu hình
Trong ứng dụng của chúng tôi, chúng tôi sẽ sử dụng sơ đồ xác thực tên người dùng và mật khẩu đơn giản, vì nó đơn giản để hiểu và viết mã. Hiện tại, Passport hỗ trợ hơn 300 chiến lược có thể tìm thấy tại đây
Mặc dù thiết kế của Passport có vẻ phức tạp, nhưng việc triển khai mã rất đơn giản. Đây là một ví dụ cho thấy cách trang trí điểm cuối
Const express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
7 của chúng tôi để xác thực. Như bạn sẽ thấy, việc thêm xác thực vào một phương thức khá đơn giản$ npm install express --save
6Bây giờ, cùng với chuỗi Markdown được chuyển đổi, chúng tôi cũng phải gửi tên người dùng và mật khẩu. Điều này sẽ được kiểm tra với tên người dùng và mật khẩu ứng dụng của chúng tôi và được xác minh. Vì chúng tôi đang sử dụng chiến lược cục bộ để xác thực, thông tin đăng nhập được lưu trữ trong chính mã đó
Mặc dù điều này nghe có vẻ giống như một cơn ác mộng về bảo mật, nhưng đối với các ứng dụng demo, điều này là đủ tốt. Điều này cũng giúp hiểu quy trình xác thực trong ví dụ của chúng tôi dễ dàng hơn. Ngẫu nhiên, một phương pháp bảo mật phổ biến được sử dụng là lưu trữ thông tin xác thực trong các biến môi trường. Tuy nhiên, nhiều người có thể không đồng ý với phương pháp này, nhưng tôi thấy điều này tương đối an toàn
Ví dụ hoàn chỉnh với xác thực được hiển thị bên dưới
$ npm install express --save
7Phiên Postman hiển thị chuyển đổi với xác thực được thêm vào được hiển thị bên dưới
Ở đây chúng ta có thể thấy rằng chúng ta đã có một chuỗi HTML được chuyển đổi thích hợp từ cú pháp Markdown. Mặc dù chúng tôi chỉ yêu cầu chuyển đổi một dòng Markdown, nhưng API có thể chuyển đổi một lượng văn bản lớn hơn
Điều này kết thúc bước đột phá ngắn gọn của chúng tôi vào việc xây dựng điểm cuối API bằng cách sử dụng Node. js và Express. Xây dựng API là một chủ đề phức tạp và có những sắc thái tốt hơn mà bạn nên biết khi xây dựng một API, điều đáng tiếc là chúng tôi không có thời gian ở đây nhưng có lẽ sẽ đề cập đến trong các bài viết sau
Truy cập API của chúng tôi từ một ứng dụng khác
Bây giờ chúng ta đã xây dựng một API, chúng ta có thể tạo một Nút nhỏ. js sẽ chỉ cho bạn cách truy cập API. Ví dụ của chúng tôi, chúng tôi sẽ cần cài đặt gói npm
$ mkdir markdown-api
$ cd markdown-api
77 cung cấp một cách đơn giản để thực hiện các yêu cầu HTTP. [Bạn có thể đã cài đặt cái này. ]$ npm install express --save
8Mã ví dụ để gửi yêu cầu tới API của chúng tôi và nhận phản hồi được cung cấp bên dưới. Như bạn có thể thấy, gói
$ mkdir markdown-api
$ cd markdown-api
77 đơn giản hóa vấn đề một cách đáng kể. Markdown được chuyển đổi nằm trong biến $ mkdir markdown-api
$ cd markdown-api
79Trước khi chạy tập lệnh sau, hãy đảm bảo rằng ứng dụng API mà chúng tôi đã tạo trước đó đang chạy. Chạy đoạn script sau trong một cửa sổ lệnh khác
Ghi chú. Chúng tôi đang sử dụng ký hiệu
$ mkdir markdown-api
$ cd markdown-api
90 để mở rộng nhiều dòng JavaScript cho biến $ mkdir markdown-api
$ cd markdown-api
79. Đây không phải là một trích dẫn đơn$ npm install express --save
9Khi chúng tôi thực hiện yêu cầu POST cho API của mình, chúng tôi cung cấp văn bản Markdown để được chuyển đổi cùng với thông tin đăng nhập. Nếu chúng tôi cung cấp thông tin đăng nhập sai, chúng tôi sẽ nhận được thông báo lỗi
Const express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
0Đối với yêu cầu được ủy quyền chính xác, Markdown mẫu ở trên sẽ được chuyển thành như sau
Const express = require['express'];
var app = express[];
app.get['/', function[req, res]{
res.send['Hello World!'];
}];
app.listen[3000];
1Mặc dù chúng tôi đã mã hóa cứng Markdown tại đây, nhưng văn bản có thể đến từ nhiều nguồn khác — tệp, biểu mẫu web, v.v. Quá trình yêu cầu vẫn như cũ
Lưu ý rằng vì chúng tôi đang gửi yêu cầu dưới dạng loại nội dung
$ mkdir markdown-api
$ cd markdown-api
92; . Như bạn có thể thấy, cần một ví dụ rất nhỏ để kiểm tra hoặc ứng dụng APIPhần kết luận
Trong bài viết này, chúng tôi bắt tay vào hướng dẫn với mục tiêu tìm hiểu cách sử dụng Node, js và Express framework để xây dựng điểm cuối API. Thay vì xây dựng một số ứng dụng giả không có mục đích, chúng tôi đã quyết định tạo một API chuyển đổi cú pháp Markdown thành HTML, giúp liên kết hoặc học tập trong một ngữ cảnh hữu ích. Đồng thời, chúng tôi đã thêm xác thực vào điểm cuối API của mình và chúng tôi cũng đã tìm ra các cách để kiểm tra điểm cuối ứng dụng của mình bằng Postman