https://medium.com/@atingenkay/creating-a-todo-app-with-node-js-express-8fa51f39b16f
อธิบายตามหน้า slide ซึ่งเพื่อนทำสอบขั้นต้นใน slide 3-7 ส่วนผมทำ slide 8 ขึ้นไป(ตาม link ข้างบน)
- slide 3-4 : npm init เพื่อสร้าง package.js จะมี description ของ project ที่เราจะสร้าง
- slide 5 : ทำการ install express
- slide 6 : สร้าง localhost server แบบง่ายๆ(send 'Hello Node.js') ในการทดสอบโดยใช้ port 7777 และแสดงใน cmd ว่า Starting node.js on port 7777
- slide 7 : รูปประกอบ slide 6
- slide 8 : ทดสอบสร้าง localhost server แบบง่ายๆ(send 'Hello World!') ในการทดสอบโดยใช้ port 3000 และแสดงใน cmd ว่า 'Example app listening on port 3000!'
- slide 9 : install ejs เพื่อใช้ template คล้าย django โดยสร้าง folder views ไว้เก็บ template และไฟล์ .html ต้องเปลี่ยนนามสกุลเป็น .ejs
- slide 10 : สร้าง template แรกของเราโดย โดยมี input ไว้ใส่ task และ added task ไว้แสดง task ที่เรา add เข้าไป
- slide 11 : สร้าง url path function แรกให้ render index.ejs
- slide 12 : รูปประกอบ slide 11
- slide 13 : สร้าง url path function ที่สองสำหรับ add task ในหน้า index.ejs
- slide 14 : install body-parser สำหรับ stored เก็บค่าไว้ใน req-body object ขณะเปิด server ไว้ได้ (ถ้าปิด server ค่าใน req-body object จะหาย) เพื่อใช้เก็บ task และ request body object ในไฟล์ ejs
- slide 15 : import body-parser แล้วสร้าง Array task สำหรับเก็บ task และ req-body object ค่าที่ post มา push มาลง array เมื่อเรียกใช้
- slide 16 : เพิ่ม loop สำหรับใส่ check box สำหรับ task ไว้ติ๊กเพื่อย้าย task ไปใส่ complete task
- slide 17 : รูปประกอบการทำงาน slide 16
- slide 18 : ทดสอบใส่ task
- slide 19 : สร้าง url path function ที่สองสำหรับ remove task และสร้าง Array complete สำหรับเก็บ task ที่กด remove มา(เสร็จแล้ว) จะ splice (ย้าย) จาก Array task มายัง Array complete
- slide 20 : วนลูด show complete task ใน template index.ejs
- slide 21 : ภาพทดสอบ run server
- slide 22 : ทดสอบ remove task
slide 23 ขึ้นไปเป็นการทดสอบใช้ data แบบยังไม่ได้ใช้ sequelize ที่ทดสอบทำในสัปดาห์นั้น (แต่ผลออกมาไม่ค่อยดีนัก)
โดยการใช้งาน sequelize จะ update ใน commit ที่ 8 (link)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น