Angular 6 HttpClient Crud + Node.js Express Sequelize + MySQL

Angular 6 HttpClient Crud + Node.js Express Sequelize + MySQL - Get/Post/Put/Delete RestAPIs

https://grokonez.com/frontend/angular/angular-6/angular-6-httpclient-node-js-express-sequelize-mysql-get-post-put-delete-restapis

Sequelize는 Node.js v4 이상을 위한 약속 기반 ORM입니다. 이 자습서에서는 Sequelize ORM을 사용하여 NodeJs/Express RestAPI를 사용하여 Angular 6 클라이언트에서 MySQL로 요청GET/POST/PUT/DELETE하는 방법을 보여줍니다.

관련 게시물:

Sequelize ORM – Build CRUD RestAPIs with NodeJs/Express, Sequelize, MySQL

Node.js/Express RestAPIs – Angular 6 HttpClient – Get/Post/Put/Delete requests + Bootstrap 4

기술

각진 6

RxJS 6

부트스트랩 4

Visual Studio Code – 버전 1.24.0

Nodejs - v8.11.3

시퀄라이즈

MySQL

개요

데모

목표

2개의 프로젝트를 만듭니다.

– Angular 클라이언트 프로젝트:



– Node.js RestAPIs 프로젝트:



사용자 사례

Node.js 서버 시작 -> 로그:

> node server.js

App listening at http://:::8080
Executing (default): DROP TABLE IF EXISTS `customers`;
Executing (default): DROP TABLE IF EXISTS `customers`;
Executing (default): CREATE TABLE IF NOT EXISTS `customers` (`id` INTEGER NOT NULL auto_increment , `firstname` VARCHAR(255), `lastname` VARCHAR(255), `age` INTEGER, `createdAt` DATETIME NOT NULL, `updatedAt` DATETIME NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB;
Executing (default): SHOW INDEX FROM `customers`
Drop and Resync with { force: true }
Executing (default): INSERT INTO `customers` (`id`,`firstname`,`lastname`,`age`,`createdAt`,`updatedAt`) VALUES (1,'Joe','Thomas',36,'2018-07-06 13:01:05','2018-07-06 13:01:05');
Executing (default): INSERT INTO `customers` (`id`,`firstname`,`lastname`,`age`,`createdAt`,`updatedAt`) VALUES (2,'Peter','Smith',18,'2018-07-06 13:01:05','2018-07-06 13:01:05');
Executing (default): INSERT INTO `customers` (`id`,`firstname`,`lastname`,`age`,`createdAt`,`updatedAt`) VALUES (3,'Lauren','Taylor',31,'2018-07-06 13:01:05','2018-07-06 13:01:05');
Executing (default): INSERT INTO `customers` (`id`,`firstname`,`lastname`,`age`,`createdAt`,`updatedAt`) VALUES (4,'Mary','Taylor',24,'2018-07-06 13:01:05','2018-07-06 13:01:05');
Executing (default): INSERT INTO `customers` (`id`,`firstname`,`lastname`,`age`,`createdAt`,`updatedAt`) VALUES (5,'David','Moore',25,'2018-07-06 13:01:05','2018-07-06 13:01:05');
Executing (default): INSERT INTO `customers` (`id`,`firstname`,`lastname`,`age`,`createdAt`,`updatedAt`) VALUES (6,'Holly','Davies',27,'2018-07-06 13:01:05','2018-07-06 13:01:05');
Executing (default): INSERT INTO `customers` (`id`,`firstname`,`lastname`,`age`,`createdAt`,`updatedAt`) VALUES (7,'Michael','Brown',45,'2018-07-06 13:01:05','2018-07-06 13:01:05');

– Angular 클라이언트는 Node.js RestAPI에서 모든 고객을 검색합니다.



– Angular 클라이언트 업데이트 고객 -> 첫 번째 고객의 firstname 변경: 'Joe'에서 'Robert'로.



-> 결과:



– 'Peter' 고객 삭제:



– 새 고객 추가:



-> 결과:



– 최종 고객 목록 확인:



https://grokonez.com/frontend/angular/angular-6/angular-6-httpclient-node-js-express-sequelize-mysql-get-post-put-delete-restapis