Express Node.js web application framework

express js สร้าง routes ใหม่บนเส้นทางสายด่วน

Express JS เป็นเครื่องมือสำหรับพัฒนา website สำหรับ Node.js ที่น่าจะได้รับการยอมรับแล้วว่าใช้งานง่าย ไม่ยุ่งยากเพราะว่ามีความนิยมเพิ่มมากขึ้นเรื่อยๆในการนำไปใช้งาน และเหมาะสำหรับเว็บไซต์ยุคใหม่ที่ต้องการการปรับตัวเพื่อรองรับอนาคตได้เป็นอย่างดี ลองมาดูวิธีการสร้าง Routes ใหม่ๆเพื่อเพิ่มการเข้าถึง Web Application ของเรากันครับ

Express Node.js web application framework

Express Node.js web application framework

Create New Routes Express JS

แนะนำสำหรับคนที่ยังไม่ได้อ่าน Series EP 1

Routes คืออะไร?
ถนนหรือเส้นทางครับ มันคือเส้นทางที่เราเอาไว้ใช้สำหรับเข้าถึง web application ของเรานั้นแหละครับ เพราะนอกจาก domain มาแล้วถัดมาก็จะเป็น การเรียงหน้าเพจต่าๆตามที่เราสร้างขึ้นถ้าลองนึกถึงภาพแบบ PHP เก่าๆก็จะได้ www.domain.com/index.php เจ้าคำว่า index.php นี่ที่ชี้ไปยังไฟล์ index ก็คือ routes เริ่มต้นนั้นเองแหละครับ ทีนี้หากเราต้องการสร้างเพิ่มขึ้นมาอีก 1 หน้าที่ชื่อ users เราก็จะได้ url แบบนี้ www.domain.com/users.php เห็นไหมครับมันเป็นการนำผู้ใช้เข้าสู่ระบบของเราตามปลายทางที่ต้องการนั้นเอง

สำหรับคนที่คุ้นเคย PHP มาเป็นอย่างดี Routes คงเป็นเรื่องคุ้นชินแล้วเพราะเราต้องทำกับ PHP Framework ยุคใหม่ๆอยู่เป็นประจำ (บาง Framework สร้างให้เราตาม Controller / method ที่เราสร้างขึ้นมา) แต่สำหรับ EX ขอเรียกสั้นๆหน่อยแล้วกันนะครับ ผมว่า EX ทำความเป็น minimal ได้ดีไม่น้อยเลยเพราะว่าการติดตั้งก็ง่ายดาย แถมการ Set ค่าเพื่อเริ่มต้นใหม่ก็ไม่ได้ซับซ้อนอะไร เริ่มต้นหลังจากที่เราทำการติดตั้ง Framework ลงไป เราจะได้ในส่วนของ Routes หลักๆมา 2 เส้นทางก็คือ “/” สำหรับใช้กับหน้า index และ “/users” สำหรับใช้เรียกหน้า users ขึ้นมาโดยไฟล์ที่ใช้งานนี้จะอยู่ใน app.js

file app

file app

appjs

appjs

ทีนี้เราก็จะมาลองเปิดไฟล์ app.js ดูกันนะครับว่าเป็นดังภาพนี้ไหม คุณจะเห็นว่าในบรรทัดที่ 8-9 นั้นมีการประกาศค่า routes เอาไว้ ค่าแรกคือ var routes ซึ่งเก็บการ require มาจากไฟล์ที่ชื่อ index ส่วนอีกตัวแปรนั้นชื่อ users เก็บค่า require มาจากไฟล์ชื่อ users ซึ่งทั้งสองไฟล์นี้อยู่ใน folder ที่ชื่อว่า routes ครับ

folder routes

folder routes

และเราจะเห็นว่าในไฟล์ที่ชื่อ app.js นั้นยังมีอีกส่วนที่เกี่ยข้องกับ routes นะครับนั้นก็คือ app.use หรือคำสั่งสำหรับเรียกใช้งานนั้นเองคือ 2 บรรทัดแรกเราแค่ประกาศตัวแปรคือเหมือนกับ สร้างเส้นทางเอาไว้แต่ไม่ได้ใช้อ่ะครับ ทีนี้เราก็จำเป็นต้องมาเปิดให้บริการด้วยว่า OK ชั้นพร้อมเข้าใช้เส้นทางสายนี้ได้แล้วน๊า โดยที่ความสำคัญจะอยู่ตรง parameter ตัวแรกที่รับเข้าไปใน function นะครับนั้นเป็นคำสั่งรับค่าผ่านทาง url คือต้องการให้พิมพ์ อะไรแล้วเข้ามาถึงตรงจุดนี้ได้ก็เลือกกรอกที่ตรงนี้เลยครับ

ทีนี้เราจะมาดูกันในส่วนของรายละเอียดหรือวัสดุในการนำมาสร้างเป็นพื้นถนนกันบ้างว่าเป็นอย่างไร เริ่มจากในไฟล์แรกของหน้ากันก่อนเลยนะครับ index.js

index.js

index.js

จากในไฟล์นี้เราจะเห็ฯว่า เริ่มต้นเลยก็คือการประการตัวแปรเพื่อเรียกใช้พลังของเจ้า ex กันก่อนจากนั้นก็บอกว่าเราจะใช้ function ที่ชื่อ router นะ ส่วน 5-7 ก็เป็นการระบุลงไปว่าเราจะรับค่ามาเป็นเครื่องหมาย / นะหากมีเครื่องหมายนี้เรียกมาใน url ให้เข้ามาเรียกไฟล์ที่เรา render นี้ขึ้นมานะ ซึ่งตรงนี้เราได้ทำการ render ไฟล์ที่เป็น HTML layout ของ Jade ลง….หมายความว่าเดี๋ยวเราต้องตามไปดูไฟล์ index ใน HTML engine อีกนั้นแหละครับ ทีนี้เราก็ประกาศตัวแปรพ่วงไปด้วยตัวหนึ่งในลักษณะของ JSON ก็คือ title เพื่อเก็บข้อความสำหรับนำไปใช้กับหน้า HTML ที่เป็นส่วนของ view นั้นเอง และสุดท้ายก่อนจะจบไฟล์ เราก็ทำการสั่งให้ router นี้มันทำงานนั้นเองครับ เป็นอันจบ ตามไปดูไฟล์ jade view กันดีกว่า

index jade

index jade

นี่เป็นไฟล์ index.jade นะครับจะเห็นว่า JADE นั้นเปลี่ยนแปลงโลกของ HTML ไปซะเยอะเลยทีเดียวเพราะเล่นตัดเครื่องหมาย <> หรือมากกว่าน้อยกว่าออกไปซะหมดเลย ทีนี้เริ่มจากบรรทัดแรกสุด extends layout นั้นมันเป็นการไปเรียกความสามารถของ layout ที่เราทำเอาไว้อีกไฟล์มานั้นเอง คล้ายๆกับการ include นั้นแหละครับ ส่วนที่เหลือก็ tag h1 กับ tag p ปรกติ แต่จะเห็นว่ามีการนำ #{title} มาใช้นั้นคือการนำเอาตัวแปรที่อยู่ในรูปของ JSON ที่ index.js สร้างเอาไว้มาใช้งานร่วมกันนะครับ อันนี้จะเห็นว่า h1 นั้นพิมพ์แค่ h1= title เท่านั้นก็สามารถเรียกตัวแปรมาใช้ได้แล้วแต่ถ้าอยู่ใน p ละก็ต้องใส่เต็มทั้ง #{} ไม่งั้นไม่เห็นเป็นตัวแปรนะครับ

view

view

 

จากนั้นเรามาลองทำการสร้าง Routes ใหม่ใช้กันบ้างครับ

ถึงเวลาลงมือ Coding กันแล้วนะครับ ขอเริ่มแบบง่ายๆก่อนะครับจะได้เข้าใจ แบบชัดเจน ผมจะสร้างหน้าใหม่ขึ้นมาชื่อว่า blog โดยในหน้านี้จะมีหัวข้อข่าวแล้วก็เนื้อหาข่าวสั้นๆแบบมากๆ มาลองดูกันว่าจะทำอย่างไร

1.สร้างไฟล์ชื่อ blog.js ใน routes



var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
 res.render('blog');
});

module.exports = router;

2.สร้าง view ใน jade ชื่อ blog.jade



extends layout

block content
 h1 This is my blog
 p Welcome to my new blog create from nodejs it so cool!!


3.require route ใหม่ที่ชื่อ blog ในไฟล์ app.js

var blog = require('./routes/blog');

 

4.เรียกใช้งาน routes ใหม่ ในไฟล์ app.js

app.use('/blog', blog);

 

5.restart service อีกรอบแล้วรันดูผลลัพธ์

blog routes

blog routes

 

เรียบร้อย ตัดถนนใหม่เอี่ยมเสร็จเรียบร้อยพร้อมให้บริการแล้วครับ เขียนไปเรื่อยยาวไปมากแล้วไม่แน่ใจว่าคุณผู้อ่านติดตรงไหนกันไหม ใครมีคำแนะนำอะไรดีๆหรือติดขัดตรงไหนก็เข้าไปพูดคุยกันได้ใน Facebook fanpage นะครับ ขอบคุณที่ติดตามครับ

Website อ้างอิง

EX is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.