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

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 is a promise-based ORM for Node.js v4 and later. In the tutorial, we will show how to GET/POST/PUT/DELETE requests from Angular 6 Client to MySQL with NodeJs/Express RestAPIs using Sequelize ORM.

Related posts:

Technologies

  • Angular 6
  • RxJS 6
  • Bootstrap 4
  • Visual Studio Code – version 1.24.0
  • Nodejs – v8.11.3
  • Sequelize
  • MySQL

Overview

Demo

Goal

We create 2 projects:

– Angular Client Project:

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +angular-6-client-project-structure

– Node.js RestAPIs project:

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +nodejs-project-structure

UserCase

Start Node.js server -> Logs:


> 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 client retrieve all customers from Node.js RestAPIs:

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +angular-6-client-retrieve-all-customeres

– Angular client update a customer -> Change the firstname of first customer: ‘Joe’ to ‘Robert’.

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +angular-6-client-edit-customer

-> result:

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +update-customer

– Delete ‘Peter’ customer:

– Delete <em>‘Peter’</em> customer:

– Add a new customer:

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql + add-customer

-> result:

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +submmit-customer-successfully

– Check final customer’s list:

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +final-check

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

188 bài viết.
63 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 5 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 4 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 4 tháng trước
1 0
Bài viết liên quan
Male avatar
0 0
https://grokonez.com/nodejs/multer/nodejsexpressuploadtextfieldsmultipartfilewithmulterjqueryajaxbootstrap4 NodeJS/Express – Upload TextFields + M...
loveprogramming viết 9 ngày trước
0 0
Male avatar
0 0
Angular Node.js Mysql Crud Example Link: https://loizenai.com/angularnodejsmysqlcrudexample/ (Ảnh) Tutorial: “Angular Node.js Mysql Crud Example...
loveprogramming viết 4 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
188 bài viết.
63 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!