วันอาทิตย์ที่ 30 พฤษภาคม พ.ศ. 2564

ลองใช้งาน React Node Express Mysql เบื้องหลังแบบง่าย ๆ กัน


 

ลองใช้งาน React Node Express Mysql เบื้องหลังแบบง่าย ๆ กัน หลังจากเพียรพยายามมาหลายวันก็สำเร็จไปจนได้ จึงต้องรีบกลับมาเขียน บอกเล่ากันก่อน เนื้อหานี้จริง ๆ ก็ทำตามบทความของ https://bezkoder.com/node-js-express-sequelize-mysql/ แต่ก็นั่นแหล่ะอ่านอย่างเดียวหากไม่ลองก็นำไปใช้ปรับปรุงพัฒนาไม่ได้ วันนี้เรามาเริ่มต้นกัน 

 ขั้นตอนที่ 1 เข้าไปดาวน์โหลดซอร์สโค๊ดก่อนเลย จากนั้นแก้ไขไฟล์ db.config.js ในโฟลเดอร์ config

sudo git clone https://github.com/bezkoder/nodejs-express-sequelize-mysql
vi config/db.config.js

ขั้นตอนที่ 2 สร้างฐานข้อมูล สำหรับทดสอบตามตารางที่ผู้เขียนทำมาให้

CREATE TABLE `tutorials` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(255) DEFAULT NULL,
`description` varchar(255) DEFAULT NULL,
`published` tinyint(1) DEFAULT NULL,
`createdAt` datetime NOT NULL,
`updatedAt` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;

INSERT INTO `tutorials` VALUES (1,'THE Tutorial REACT','REACT tutorial BACK END' ,1,'2021-05-31 09:53:00','2021-05-31 09:53:00'),(2,'THE REACT','REACT BACK END',0,'2021-05-31 10:53:00','2021-05-31 10:53:00'),(3,'ICE BOOK','ICE BOOK for GRADE 3',0,'2021-05-31 05:28:08','2021-05-31 05:28:08'),(4,'REACT BOOK 3','REACT BOOK 3 Description',0,'2021-05-31 05:34:24','2021-05-31 05:34:24');

ขั้นตอนที่ 3 ติดตั้งแพ็คเกจต่าง ๆ ที่จำเป็นต้องใช้

sudo npm install express sequelize mysql2 body-parser cors --save

ขั้นตอนที่ 4 คอมไพล์และทดสอบการทำงาน

sudo yarn
sudo yarn start

ขั้นตอนที่ 5 ดูผลลัพธ์

sudo curl -X GET -i http://localhost:8080/api/tutorials
HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: http://localhost:8081
Vary: Origin
Content-Type: application/json; charset=utf-8
Content-Length: 660
ETag: W/"294-OW65kZolMUEtVPhNyra4AlrYJuc"
Date: Mon, 31 May 2021 06:05:50 GMT
Connection: keep-alive
Keep-Alive: timeout=5

[{"id":1,"title":"THE Tutorial REACT","description":"REACT tutorial BACK END","published":true,"createdAt":"2021-05-31T09:53:00.000Z","updatedAt":"2021-05-31T09:53:00.000Z"},{"id":2,"title":"THE REACT","description":"REACT BACK END","published":false,"createdAt":"2021-05-31T10:53:00.000Z","updatedAt":"2021-05-31T10:53:00.000Z"},{"id":3,"title":"ICE BOOK","description":"ICE BOOK for GRADE 3","published":false,"createdAt":"2021-05-31T05:28:08.000Z","updatedAt":"2021-05-31T05:28:08.000Z"},{"id":4,"title":"REACT BOOK 3","description":"REACT BOOK 3 Description","published":false,"createdAt":"2021-05-31T05:34:24.000Z","updatedAt":"2021-05-31T05:34:24.000Z"}]

 เป็นอันว่า สำเร็จตามแบบฉบับของผู้เขียน ง่าย ๆ สั้น ๆ กระชับได้ใจความ เนื้อหาส่วนอื่นต้องไปศึกษาเพิ่มเติมเอง เอาเป็นว่าเราเข้าใจแล้วว่า เบื้องหลังทำงานยังไง สร้างเซิร์ฟเวอร์ Express ทำงานร่วมกับ Mysql รวมถึงการสร้าง Api แบบง่าย ๆ ค่อยมาติดตามกันต่อไปเรื่องการสร้าง Front End จริง ๆ จะเอามาต่อกันแต่กลัวจะยาวไป แบ่งเนื้อหาแบบนี้ดีแล้ว

 

 



ไม่มีความคิดเห็น:

แสดงความคิดเห็น