Backend ของไซต์ (ตัวจัดการแบบไดนามิก)
นอกเหนือจากไฟล์สแตติกแล้ว เว็บไซต์ที่อัปโหลดยังสามารถมี backend จริงได้ — ตัวจัดการ JavaScript ขนาดเล็กที่ผูกกับแต่ละที่อยู่ ตัวจัดการแต่ละตัวจะผูกกับพาธและเมธอด HTTP เมื่อผู้เข้าชมเปิดที่อยู่นั้น Qubix จะรันตัวจัดการและส่งคืนสิ่งที่มันสร้างขึ้น — หน้าเว็บ, คำตอบ JSON, การเปลี่ยนเส้นทาง หรือรหัสสถานะ
ใช้เมื่อหน้าเว็บต้องทำงานบางอย่างบนเซิร์ฟเวอร์แทนที่จะแสดงเนื้อหาสแตติกเพียงอย่างเดียว: รับลีดผ่านคำขอ POST, ตอบพาธเฉพาะด้วย HTML ที่สร้างขึ้น หรือส่งการเปลี่ยนเส้นทางตามคำขอ สำหรับ whitepage และแลนดิ้งแบบสแตติกทั่วไป คุณไม่จำเป็นต้องใช้สิ่งนี้ — ปล่อยแท็บ Backend ให้ว่างไว้ แล้วเว็บไซต์จะถูกให้บริการเป็นไฟล์ธรรมดา
เปิดแท็บ Backend
การ์ดเว็บไซต์มีสามแท็บที่ด้านบน: ไฟล์, Backend และ ตัวอย่าง แท็บที่เปิดอยู่จะถูกบันทึกไว้ในแถบที่อยู่ ดังนั้นคุณสามารถคัดลอกลิงก์ไปยังแท็บเฉพาะได้โดยตรง
- เปิดส่วน «เว็บไซต์» แล้วคลิกเว็บไซต์ที่คุณต้องการ
- สลับไปที่แท็บ Backend
หากเว็บไซต์ยังไม่มีตัวจัดการ รายการจะแสดงคำแนะนำว่า «+ ใหม่» สร้างตัวจัดการจากเทมเพลต
แท็บ Backend จำเป็นเฉพาะเมื่อหน้าเว็บต้องประมวลผลบางอย่างบนเซิร์ฟเวอร์ หน้าเว็บที่เป็นสแตติกล้วนทำงานได้โดยไม่ต้องมีตัวจัดการใดๆ
สร้างตัวจัดการ
- ในแท็บ Backend คลิก «+ ใหม่» ที่มุมซ้ายบน เหนือรายการตัวจัดการ ตัวจัดการใหม่จะถูกสร้างจากเทมเพลตสำเร็จรูปและเปิดขึ้นในตัวแก้ไข
🎬 GIF: การคลิก «+ ใหม่» และตัวจัดการเทมเพลตที่เปิดขึ้นในตัวแก้ไข
- ในฟอร์มส่วนหัวเหนือตัวแก้ไข ให้กำหนด พาธ — ที่อยู่ที่ตัวจัดการตอบสนอง ฟิลด์นี้รับเทมเพลตที่มีตัวยึดตำแหน่ง (เช่น
/users/:id)::name— จับหนึ่งเซกเมนต์ของพาธ (เช่น:idใน/users/:idจับคู่กับ/users/42);*— จับส่วนที่เหลือของพาธข้ามหลายเซกเมนต์;**— จับคู่ส่วนที่เหลือของพาธโดยไม่จับเก็บไว้
- เลือก method —
GET,POST,PUT,DELETE,PATCH,HEAD,OPTIONSหรือ ANY (ตอบทุกเมธอด) - เปิดเช็กบ็อกซ์ เปิด ไว้เพื่อให้ตัวจัดการทำงานบนไซต์จริง ปิดไว้เพื่อเก็บตัวจัดการไว้แต่ไม่ให้ทำงาน
- ในตัวแก้ไขตรงกลาง ให้เขียนโค้ดของตัวจัดการ (ดู โค้ดของตัวจัดการ ด้านล่าง)
- คลิก บันทึก (หรือ Cmd+S, บน Windows — Ctrl+S)
ในรายการทางด้านซ้าย ตัวจัดการแต่ละตัวจะแสดงเป็นเมธอดและพาธของมัน (ตัวจัดการที่ไม่ได้ตั้งเมธอดจะแสดงเป็น ANY) ตัวที่ถูกปิดจะถูกทำเครื่องหมายตามนั้น
หากมีตัวจัดการมากกว่าหนึ่งตัวที่สามารถตอบที่อยู่เดียวกันได้ Qubix จะเลือกตัวที่เฉพาะเจาะจงที่สุด — ตัวจัดการที่มีพาธตรงทุกประการจะชนะตัวที่มีตัวยึดตำแหน่งหรือไวลด์การ์ด ดังนั้นคุณสามารถเก็บตัวจัดการที่แม่นยำไว้ข้างๆ ตัวจับทั้งหมดแบบกว้างได้โดยไม่ขัดแย้งกัน
โค้ดของตัวจัดการ
ตัวจัดการคือฟังก์ชัน JavaScript ที่รับออบเจกต์คำขอ — เรียกมันว่า r — ซึ่งเปิดเผยคำขอ (เมธอด, พาธ, อาร์กิวเมนต์ query และฟอร์ม, ส่วนหัว, เซกเมนต์พาธที่จับเก็บไว้) และการตอบสนอง (ตั้งค่าส่วนหัว, ส่งคืนสถานะพร้อมเนื้อหา หรือการเปลี่ยนเส้นทาง) เทมเพลตที่ตัวแก้ไขเริ่มต้นด้วยจะแสดงรูปแบบทั่วไปไว้แล้ว
ตัวแก้ไขเป็นตัวแก้ไขโค้ดเต็มรูปแบบพร้อมการเน้นไวยากรณ์และการเติมข้อความอัตโนมัติ: เริ่มพิมพ์ r. แล้ว Qubix จะแนะนำฟิลด์คำขอและการตอบสนองที่ใช้ได้พร้อมคำอธิบาย เพื่อที่คุณจะไม่ต้องจดจำไว้ในใจ
ภายในตัวจัดการ คุณยังมีชุดเครื่องมือ Qubix ที่ใช้ร่วมกัน: การสอบถามฐานข้อมูลแบบอ่านอย่างเดียว, คำขอไปยังบริการภายนอก และสถานะที่คงอยู่ระหว่างการเรียก สิ่งเหล่านี้ทำงานในแบบเดียวกับใน สคริปต์ — ดูบทความนั้นสำหรับรายละเอียด คำขอออกภายนอกอนุญาตเฉพาะไปยังที่อยู่ที่ผู้ดูแลระบบใส่ไว้ใน allowlist เท่านั้น ตารางและคอลัมน์ที่คำสั่งค้นหาเข้าถึงได้มีระบุไว้ใน ตารางสำหรับคำสั่ง sql
เอกสารอ้างอิงออบเจกต์ r
ทุกสิ่งที่ตัวจัดการอ่านจากคำขอและใช้ในการสร้างการตอบสนอง
การอ่านคำขอ:
| ฟิลด์ | คืออะไร |
|---|---|
r.method | เมธอด HTTP ของคำขอ (GET, POST, …) |
r.uri | ที่อยู่ที่ตัวจัดการตอบสนอง (เช่น /promo/123) |
r.rawUri | ที่อยู่ภายนอกแบบเต็ม รวมถึงคำนำหน้าบริการ |
r.args | พารามิเตอร์ที่อยู่และฟอร์ม (key → value) |
r.params | ค่าที่จับเก็บจากเทมเพลตพาธ (เช่น id จาก /users/:id) |
r.requestBuffer | เนื้อหาคำขอเป็นสตริง |
r.headersIn | ส่วนหัวของคำขอ |
r.remoteAddress | IP ของผู้เข้าชม |
r.variables | บริบทการคลิก: geo, click_id, sub1…sub5, lang |
r.session | เซสชันของผู้เข้าชม: get(key), set(key, value), delete(key) |
การสร้างการตอบสนอง:
| ฟิลด์ / เมธอด | การกระทำ |
|---|---|
r.headersOut | ส่วนหัวของการตอบสนอง (สามารถตั้งค่าและลบได้) |
r.return(status, body?, location?) | ส่งการตอบสนอง; location คือที่อยู่การเปลี่ยนเส้นทาง |
r.log(...), r.warn(...), r.error(...) | เขียนลงในบันทึกการรัน (มองเห็นได้ในตัวรันการทดสอบ) |
ฟังก์ชันช่วย crypto
ตัวจัดการยังมีฟังก์ชันช่วย crypto ด้วย:
| เมธอด | ทำอะไร |
|---|---|
crypto.uuid() | ตัวระบุสุ่ม |
crypto.hmac(algo, key, data) | HMAC ของ data ด้วย key เข้ารหัสเป็น hex; algo คือ 'sha256', 'sha1' หรือ 'md5' |
มีประโยชน์ เช่น สำหรับการลงนามข้อมูลก่อนส่งไปยังบริการภายนอกผ่าน fetch
ทดสอบตัวจัดการ
ตัวจัดการแต่ละตัวมีตัวรันการทดสอบในตัวอยู่ทางด้านขวาของตัวแก้ไข — ส่งคำขอทดสอบและดูได้อย่างแม่นยำว่าตัวจัดการตอบอะไร โดยไม่กระทบกับไซต์จริง
- เลือก method และป้อน พาธ ที่จะทดสอบ (เช่น
/users/42) - (ไม่บังคับ) กรอกข้อมูลคำขอ:
- คำสั่งค้นหา (JSON) — พารามิเตอร์ query เป็นออบเจกต์ JSON;
- เนื้อหา (raw) — เนื้อหาคำขอแบบดิบ;
- geo และ click_id — ค่าที่ส่งให้ตัวจัดการเป็นตัวแปรคำขอ
- คลิก รัน
ผลลัพธ์จะปรากฏด้านล่าง:
- สถานะ ของการตอบสนอง (สีเขียว / น้ำเงิน / แดง) และระยะเวลาที่ใช้รัน;
- พารามิเตอร์ — ค่าที่จับเก็บจากเทมเพลตพาธ;
- การเปลี่ยนเส้นทาง — เป้าหมายของการเปลี่ยนเส้นทาง หากตัวจัดการตั้งค่าไว้;
- ส่วนหัว และ เนื้อหา ของการตอบสนอง;
- คอนโซล — ทุกสิ่งที่ตัวจัดการบันทึกไว้ระหว่างการรัน
หากคำขอเข้าถึงหรือเปลี่ยนแปลงสถานะที่จัดเก็บไว้ของตัวจัดการ แผงนี้จะทำเครื่องหมาย เซสชัน ว่าถูกแตะต้องด้วย
คำสั่งค้นหา (JSON) ต้องเป็น JSON ที่ถูกต้อง หากไม่ถูกต้อง การทดสอบจะไม่รันและฟิลด์จะถูกเน้น — แก้ไข JSON แล้วคลิก รัน อีกครั้ง
แก้ไขไฟล์ของไซต์
อีกครึ่งหนึ่งของการ์ดคือแท็บ ไฟล์ — ไฟล์สแตติกของเว็บไซต์ (HTML, CSS, JS, รูปภาพ, ฟอนต์) ในแผนผังทางด้านซ้ายและตัวแก้ไขโค้ดทางด้านขวา ไฟล์ข้อความจะเปิดพร้อมการเน้นไวยากรณ์ บันทึกด้วย บันทึก หรือ Cmd+S (บน Windows — Ctrl+S) รูปภาพ, วิดีโอ, เสียง และไฟล์อื่นๆ จะได้รับตัวอย่างหรือการดาวน์โหลด คุณสามารถลากไฟล์ระหว่างโฟลเดอร์และวางไฟล์ใหม่จากคอมพิวเตอร์ของคุณได้
รายละเอียดทั้งหมดของแท็บ ไฟล์ อยู่ใน เว็บไซต์ และ การอัปโหลดเว็บไซต์
หมายเหตุเกี่ยวกับฟิลด์และพฤติกรรม
พาธ — เทมเพลตที่อยู่ที่ตัวจัดการตอบสนอง รองรับ :name (หนึ่งเซกเมนต์), * (ส่วนที่เหลือ, จับเก็บ) และ ** (ส่วนที่เหลือ, ไม่จับเก็บ) เซกเมนต์ที่จับเก็บจะพร้อมใช้งานสำหรับตัวจัดการและแสดงเป็น พารามิเตอร์ ในตัวรันการทดสอบ
method — เมธอด HTTP ใดที่กระตุ้นตัวจัดการ ANY ตอบทุกเมธอด
เปิด — ตัวจัดการทำงานบนไซต์จริงหรือไม่ ตัวจัดการที่ถูกปิดจะยังคงถูกบันทึกไว้แต่จะถูกข้าม
«+ ใหม่» — สร้างตัวจัดการจากเทมเพลตในตัว พร้อมสำหรับการแก้ไข