- fork project จาก https://github.com/nattaponkum/nv-webblog-65final-client.git (5 point)
- แก้ไขให้ยิง request data ไปหา backend ที่ http://10.31.27.240:8081 (5 point) *** ถ้าแก้ไขไม่ได้ ให้ส่ง Git Repository ของ Bacakend ที่ใช้ในการทำสอบด้วย ***
- สร้างหน้า UI สำหรับ Create (5 point), Read (5 point), Update (5 point), Delete (5 point) ข้อมูลจาก API ที่ตนเองได้รับ โดยใช้โค้ดเดิมที่เป็นการ CRUD ของ API User เป็นตัวอย่างได้
- push code ที่ทำเสร็จแล้วขึ้น Git Repository ที่ได้ Fork มา (5 point)
*** ถ้า push ขึ้นไม่ได้ ให้ upload files ขึ้น Git Repository เอง ***
โดยให้นำรหัสนิสิตตนเอง mod 4 ได้ค่าเท่าไหร่นั่นคือหมายเลข API ที่นิสิตต้องแก้ไขหน้า UI เช่น รหัสนิสิต 63310001 % 4 = 1 ให้นิสิตทำ API หมายเลข 1. Car เป็นต้น
ส่ง URL ของ Git Repository
endpoint for get all cars: GET http://10.31.27.240:8081/cars
endpoint for get 1 car: GET http://10.31.27.240:8081/car/carId
endpoint for edit 1 car: PUT http://10.31.27.240:8081/car/carId
endpoint for create 1 car: POST http://10.31.27.240:8081/car
endpoint for delete 1 car: DELETE http://10.31.27.240:8081/car/carId
{
"category": "Truck",
"engine_capacity": 2500,
"model": "D-Max",
"brand": "ISUZU",
"color": "red",
"lc_plate": "งง 5555 ยะลา",
"chasis_no": "wdssxx-000001"
}
endpoint for get all courses: GET http://10.31.27.240:8081/courses
endpoint for get 1 course: GET http://10.31.27.240:8081/course/courseId
endpoint for edit 1 course: PUT http://10.31.27.240:8081/course/courseId
endpoint for create 1 course: POST http://10.31.27.240:8081/course
endpoint for delete 1 course: DELETE http://10.31.27.240:8081/course/courseId
{
"title": "Server Side Programming",
"instructor": "Dr. Nattapon Kumyaito",
"description": "Client-server web architecture, overview of server-side programming languages, server-side programming basics including types, arrays, loops, functions, handling form input and validation; database connections and making database queries, object-oriented approaches to server-side programming, designing and writing web services, authentication techniques and session management, use of server-side frameworks, web organization and standards",
"total_student": 50,
"status": "active",
"type": "core subject"
}
endpoint for get all speakers: GET http://10.31.27.240:8081/speakers
endpoint for get 1 speaker: GET http://10.31.27.240:8081/speaker/speakerId
endpoint for edit 1 speaker: PUT http://10.31.27.240:8081/speaker/speakerId
endpoint for create 1 speaker: POST http://10.31.27.240:8081/speaker
endpoint for delete 1 speaker: DELETE http://10.31.27.240:8081/speaker/speakerId
{
"model": "STOCKWELL II",
"brand": "Marshal",
"watt": "5.0",
"power_input": 220,
"status": "not continue",
"type": "portable"
}
endpoint for get all books: GET http://10.31.27.240:8081/books
endpoint for get 1 book: GET http://10.31.27.240:8081/book/bookId
endpoint for edit 1 book: PUT http://10.31.27.240:8081/book/bookId
endpoint for create 1 book: POST http://10.31.27.240:8081/book
endpoint for delete 1 book: DELETE http://10.31.27.240:8081/book/bookId
{
"title": "Metaverse",
"author": "Mark zuckerberg",
"total_page": 550,
"publisher": "Chula Book",
"category": "Text Book",
"price": 150.0
}
nodejs vuejs webblog client
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For a detailed explanation on how things work, check out the guide and docs for vue-loader.