http://sitename/route/action/parameter เช่น
http://127.0.0.1:3000/home/login/1 จะหมายถึง เรียกไปยัง site 127.0.0.1 ที่ Port 3000 โดยจะไปเรียก file script ที่ชื่อ home ที่อยู่ใน folder route และมี action ชื่อ login พร้อมทั้งส่ง Parameter =1 โดยที่ค่า action และ parameter จะส่งไปหรือไม่ก็ได้
ต่อไปก็จะลองสร้าง route ขึ้นมาใหม่อีก 1 route ใช้ชื่อว่า news.js อยู่ใน Folder routes โดยที่ข้างในจะมี code คือ
หลังจากนั้นให้เปิด file app.js และเพิ่มคำสั่ง
var news=require('./routes/news');
และ
app.use('/news',news);
เพื่อให้ระบบรู้จัก route ใหม่ที่เราสร้างขึ้นมา ดังรูป
เมื่อ save app.js แล้วลอง run project ใหม่อีกครั้งโดยใช้คำสั่ง npm start ผ่านทาง command line อีกครั้ง
จากนั้นเปิด Browser และใส่ URL 127.0.0.1:3000/news จะขึ้นผลลัพธ์ดังรูป
จะเห็นว่าหน้า Browser จะแสดงข้อมูลเหมือนกับที่เป็นหน้า index.html ทั้งนี้เนื่องจากใน file news.js นั้นเราสั่งเรียก file index.html มาแสดงผล
ทีนี้ลองเพิ่มในส่วนของส่งค่า Action เพิ่มลงใน file news.js โดยการพิมพ์ code ต่อไปนี้
route.get('/feed',function(req,res,next){ res.send('Show Feed Action in Route News');})
เป็นการส่งค่า Action feed โดยจะส่งเป็นแบบ GET ไปให้ และProject จะส่ง Message "Show Feed Action in Route News" กลับมาแสดงลงบน WebPage
ทีนี้สร้าง file ชื่อ news.html ไว้ใน Folder views โดยข้างในมี code คือ
จากนั้นเข้าไปแก้ File news.js ใน Folder routes เป็นตามนี้
แล้วให้ลอง Run Project ใหม่ จากนั้นเปิด Browser เข้า URL เป็น http://127.0.0.1:3000/news จะได้หน้าตาเป็นแบบนี้
ลองพิมพ์คำค้นและกดปุ่ม Search และดูผลลัพธ์ที่เกิดขึ้น
เมื่อมาดูในส่วนของ Commandline จะพบว่ามีข้อมูลที่มาแสดงในรูปแบบของ JSON เยอะไปหมด แต่ที่หน้าสนใจคือ
ในส่วนของที่ขีดเส้นใต้จะเห็นว่าระบบนั้นรับค่าตัวแปรมาเป็น JSON แสดง หากเราต้องการที่จะอ้างอิงก็ทำได้โดยการอ้างอิงผ่านตัวแปร req เช่น
req.body.txtkeyword
เราสามารถส่งค่าแบบ GET ในรูปแบบของ Pretty URL (SEO URL) เช่น
http://127.0.0.1:3000/news/search/2016/
คือ เรียก route news ผ่าน Action search โดยส่ง Parameter หนึ่งตัวมีค่าเท่ากับ 2016
ใน Code ของ file news.js เพิ่มดังนี้
คือ เราจะสร้าง Action ขึ้นมา 2 ตัว ใช้ชื่อ Search เหมือนกัน แต่จะรับ Parameter ต่างกัน โดยที่ Action แรกจะรับเพียง 1 Parameter ชื่อ keyword แต่อีกอันจะรับ 3 Parameter คือ keyword1 ,keyword2 และ keyword3 เมื่อเปิดผ่าน Browser จะเป็นดังนี้
แบบ 1 Parameter
แบบ 3 Parameter
ไม่มีความคิดเห็น:
แสดงความคิดเห็น