Backend của trang web (trình xử lý động)
Ngoài các tệp tĩnh, một website đã tải lên còn có thể có backend thực sự — những trình xử lý JavaScript nhỏ gắn với từng địa chỉ riêng. Mỗi trình xử lý được gắn với một đường dẫn và một phương thức HTTP; khi khách truy cập mở địa chỉ đó, Qubix chạy trình xử lý và trả về bất cứ thứ gì nó tạo ra — một trang, một phản hồi JSON, một chuyển hướng, hay một mã trạng thái.
Hãy dùng tính năng này khi một trang cần làm điều gì đó trên máy chủ thay vì chỉ hiển thị nội dung tĩnh: tiếp nhận một lead qua yêu cầu POST, trả lời một đường dẫn cụ thể bằng HTML được tạo ra, hoặc gửi một chuyển hướng tùy theo yêu cầu. Đối với các whitepage và landing tĩnh thông thường, bạn không cần đến nó — hãy để trống tab Backend và website sẽ được phục vụ dưới dạng các tệp thuần.
Mở tab Backend
Một thẻ website có ba tab ở phía trên: Tệp, Backend và Xem trước. Tab đang hoạt động được lưu trong thanh địa chỉ, nên bạn có thể sao chép liên kết dẫn thẳng đến một tab cụ thể.
- Mở mục «Websites» và nhấp vào website bạn cần.
- Chuyển sang tab Backend.
Nếu website chưa có trình xử lý nào, danh sách sẽ hiển thị gợi ý rằng «+ new» tạo một trình xử lý từ mẫu.
Tab Backend chỉ cần thiết khi trang phải xử lý điều gì đó trên máy chủ. Một trang hoàn toàn tĩnh hoạt động mà không cần bất kỳ trình xử lý nào.
Tạo một trình xử lý
- Trên tab Backend, nhấp «+ new» ở góc trên bên trái, phía trên danh sách trình xử lý. Một trình xử lý mới được tạo từ mẫu có sẵn và mở ra trong trình soạn thảo.
🎬 GIF: nhấp «+ new» và trình xử lý mẫu mở ra trong trình soạn thảo
- Trong biểu mẫu tiêu đề phía trên trình soạn thảo, đặt đường dẫn — địa chỉ mà trình xử lý sẽ trả lời. Trường này chấp nhận một mẫu với các phần giữ chỗ (ví dụ,
/users/:id)::name— bắt một đoạn của đường dẫn (ví dụ,:idtrong/users/:idkhớp với/users/42);*— bắt phần còn lại của đường dẫn trải qua nhiều đoạn;**— khớp phần còn lại của đường dẫn mà không bắt nó.
- Chọn method —
GET,POST,PUT,DELETE,PATCH,HEAD,OPTIONS, hoặc ANY (trả lời mọi phương thức). - Giữ ô enabled được bật để trình xử lý hoạt động trên trang web trực tiếp. Tắt nó đi để giữ trình xử lý đã lưu nhưng không hoạt động.
- Trong trình soạn thảo ở giữa, viết mã trình xử lý (xem Mã trình xử lý bên dưới).
- Nhấp Lưu (hoặc Cmd+S, trên Windows — Ctrl+S).
Trong danh sách bên trái, mỗi trình xử lý được hiển thị theo phương thức và đường dẫn của nó (một trình xử lý không đặt phương thức được hiển thị là ANY); một trình xử lý bị vô hiệu hóa được đánh dấu tương ứng.
Nếu có nhiều hơn một trình xử lý có thể trả lời cùng một địa chỉ, Qubix chọn trình xử lý cụ thể nhất — một trình xử lý có đường dẫn chính xác thắng trình xử lý có phần giữ chỗ hoặc ký tự đại diện. Vì vậy bạn có thể giữ một trình xử lý chính xác bên cạnh một trình xử lý bắt-tất-cả rộng mà chúng không xung đột.
Mã trình xử lý
Một trình xử lý là một hàm JavaScript nhận một đối tượng yêu cầu — gọi nó là r — phơi bày yêu cầu (phương thức, đường dẫn, các tham số query và form, các header, các đoạn đường dẫn đã bắt) và phản hồi (đặt header, trả về một trạng thái kèm nội dung, hoặc một chuyển hướng). Mẫu mà trình soạn thảo khởi đầu đã cho thấy hình dạng điển hình.
Trình soạn thảo là một trình soạn thảo mã đầy đủ với tô sáng cú pháp và tự động hoàn thành: bắt đầu gõ r. và Qubix gợi ý các trường yêu cầu và phản hồi khả dụng kèm mô tả của chúng, nên bạn không phải ghi nhớ chúng trong đầu.
Bên trong một trình xử lý, bạn cũng có bộ công cụ Qubix dùng chung: các truy vấn cơ sở dữ liệu chỉ-đọc, các yêu cầu đến dịch vụ bên ngoài, và trạng thái được lưu giữ giữa các lần gọi. Chúng hoạt động giống như trong Scripts — xem bài viết đó để biết chi tiết. Các yêu cầu đi ra chỉ được phép tới các địa chỉ mà quản trị viên đã đưa vào danh sách cho phép. Những bảng và cột nào mà một truy vấn có thể truy cập được mô tả trong Bảng cho truy vấn sql.
Tham chiếu đối tượng r
Mọi thứ trình xử lý đọc từ yêu cầu và dùng để xây dựng phản hồi.
Đọc yêu cầu:
| Trường | Ý nghĩa |
|---|---|
r.method | Phương thức HTTP của yêu cầu (GET, POST, …) |
r.uri | Địa chỉ mà trình xử lý đã trả lời (ví dụ, /promo/123) |
r.rawUri | Địa chỉ ngoài đầy đủ, bao gồm tiền tố dịch vụ |
r.args | Các tham số địa chỉ và form (key → value) |
r.params | Các giá trị được bắt từ mẫu đường dẫn (ví dụ, id từ /users/:id) |
r.requestBuffer | Nội dung yêu cầu dưới dạng chuỗi |
r.headersIn | Các header của yêu cầu |
r.remoteAddress | IP của khách truy cập |
r.variables | Ngữ cảnh click: geo, click_id, sub1…sub5, lang |
r.session | Phiên của khách truy cập: get(key), set(key, value), delete(key) |
Xây dựng phản hồi:
| Trường / phương thức | Hành động |
|---|---|
r.headersOut | Các header phản hồi (có thể đặt và xóa) |
r.return(status, body?, location?) | Gửi phản hồi; location là địa chỉ chuyển hướng |
r.log(...), r.warn(...), r.error(...) | Ghi vào nhật ký chạy (hiển thị trong trình chạy thử nghiệm) |
Các hàm trợ giúp crypto
Một trình xử lý cũng có các hàm trợ giúp crypto:
| Phương thức | Chức năng |
|---|---|
crypto.uuid() | Một mã định danh ngẫu nhiên |
crypto.hmac(algo, key, data) | HMAC của data với key, được mã hóa hex; algo là 'sha256', 'sha1', hoặc 'md5' |
Tiện dụng, chẳng hạn, để ký dữ liệu trước khi gửi đến dịch vụ bên ngoài qua fetch.
Thử nghiệm một trình xử lý
Mỗi trình xử lý có một trình chạy thử nghiệm tích hợp sẵn ở bên phải trình soạn thảo — gửi một yêu cầu thử nghiệm và xem chính xác trình xử lý trả lời gì, mà không đụng đến trang web trực tiếp.
- Chọn method và nhập đường dẫn cần thử nghiệm (ví dụ,
/users/42). - (Tùy chọn) Điền các tham số yêu cầu:
- Truy vấn (JSON) — các tham số query dưới dạng một đối tượng JSON;
- Nội dung (raw) — nội dung yêu cầu thô;
- geo và click_id — các giá trị được truyền đến trình xử lý dưới dạng biến yêu cầu.
- Nhấp Chạy.
Kết quả xuất hiện bên dưới:
- status của phản hồi (được tô màu xanh lá / xanh dương / đỏ) và lần chạy mất bao lâu;
- tham số — các giá trị được bắt từ mẫu đường dẫn;
- Chuyển hướng — đích chuyển hướng, nếu trình xử lý đã đặt một đích;
- tiêu đề và nội dung của phản hồi;
- bảng điều khiển — mọi thứ trình xử lý đã ghi log trong lần chạy.
Nếu yêu cầu chạm tới hoặc thay đổi trạng thái được lưu của trình xử lý, bảng cũng đánh dấu phiên là đã bị tác động.
Truy vấn (JSON) phải là JSON hợp lệ. Nếu không, thử nghiệm sẽ không chạy và trường được tô sáng — hãy sửa JSON và nhấp Chạy lại.
Chỉnh sửa tệp của trang web
Nửa còn lại của thẻ là tab Tệp — các tệp tĩnh của website (HTML, CSS, JS, hình ảnh, phông chữ) trong một cây ở bên trái và một trình soạn thảo mã ở bên phải. Các tệp văn bản mở ra với tô sáng cú pháp; lưu bằng Lưu hoặc Cmd+S (trên Windows — Ctrl+S). Hình ảnh, video, âm thanh và các tệp khác nhận được bản xem trước hoặc một liên kết tải xuống. Bạn có thể kéo các tệp giữa các thư mục và thả các tệp mới từ máy tính của mình.
Phần phân tích đầy đủ về tab Tệp nằm trong Websites và Tải lên một website.
Ghi chú về trường và hành vi
đường dẫn — mẫu địa chỉ mà trình xử lý sẽ trả lời. Hỗ trợ :name (một đoạn), * (phần còn lại, được bắt), và ** (phần còn lại, không được bắt). Các đoạn được bắt khả dụng cho trình xử lý và được hiển thị là params trong trình chạy thử nghiệm.
method — phương thức HTTP nào kích hoạt trình xử lý. ANY trả lời mọi phương thức.
enabled — liệu trình xử lý có chạy trên trang web trực tiếp hay không. Một trình xử lý bị vô hiệu hóa vẫn được lưu nhưng bị bỏ qua.
«+ new» — tạo một trình xử lý từ mẫu tích hợp sẵn, sẵn sàng để chỉnh sửa.