Angular 7 CRUD mit Nodejs und MySQL-Beispiel

Blog

Unten sind die Anforderungen für die Erstellung des CRUD auf MEAN



  • Node.js
  • Winkel-CLI
  • Eckig 7
  • Mysql
  • IDE oder Texteditor

Wir gehen davon aus, dass Sie die oben genannten Tools/Frameworks bereits zur Verfügung haben und mit all dem oben genannten vertraut sind, was die einzelnen tatsächlich tun.

Also werden wir jetzt Schritt für Schritt vorgehen, um die Aufgabe zu erfüllen.



1. Angular CLI aktualisieren und Angular 7-Anwendung erstellen

Zuerst müssen wir die Angular CLI auf die neueste Version aktualisieren. Öffnen Sie das Terminal, gehen Sie zum Projektordner und geben Sie den folgenden Befehl ein, um die Angular CLI . zu aktualisieren

sudo npm install -g @angular/cli

Sobald die obige Aufgabe abgeschlossen ist, besteht die nächste Aufgabe darin, eine neue Winkelanwendung mit dem folgenden Befehl zu erstellen. Gehen Sie also zu Ihrem Projektordner und geben Sie den folgenden Befehl ein:



ng new angular7-crud

Gehen Sie dann mit zum neu erstellten Ordner der Winkelanwendung cd / eckig7-crud und geben Sie **ng servieren ein. **Öffnen Sie nun den Browser und gehen Sie zu http://localhost:4200 Sie sollten diese Seite sehen.

Angular 7 CRUD mit Nodejs und MySQL-Beispiel

2. Erstellen Sie einen Server mit node.js Express und Mysql für REST-APIs

Erstellen Sie einen separaten Ordner namens server für serverseitige Dinge. Wechseln Sie dann in den Ordner und erstellen Sie server.js, indem Sie touch server.js eingeben

vergleiche strings in bash

Schauen wir uns die Datei server.js an

let app = require('express')(), server = require('http').Server(app), bodyParser = require('body-parser') express = require('express'), cors = require('cors'), http = require('http'), path = require('path'); let articleRoute = require('./Routes/article'), util = require('./Utilities/util'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({extended: false })); app.use(cors()); app.use(function(err, req, res, next) { return res.send({ 'statusCode': util.statusCode.ONE, 'statusMessage': util.statusMessage.SOMETHING_WENT_WRONG }); }); app.use('/article', articleRoute); // catch 404 and forward to error handler app.use(function(req, res, next) { next(); }); /*first API to check if server is running*/ app.get('*', (req, res) => { res.sendFile(path.join(__dirname, '../server/client/dist/index.html')); }) server.listen(3000,function(){ console.log('app listening on port: 3000'); });

In der obigen Datei sehen wir oben die erforderlichen Pakete für die App. Darunter werden Body-Parsing, Middleware und Routing durchgeführt.

Die nächste Aufgabe besteht darin, Routen zu erstellen und eine Datei article.js zu erstellen. Erstellen Sie also einen Ordnernamen „Routen“ und fügen Sie article.js darin hinzu.

Fügen Sie den folgenden Code für das Routing in article.js im Routing-Ordner hinzu

let express = require('express'), router = express.Router(), util = require('../Utilities/util'), articleService = require('../Services/article'); /**Api to create article */ router.post('/create-article', (req, res) => { articleService.createArticle(req.body, (data) => { res.send(data); }); }); // /**Api to update article */ router.put('/update-article', (req, res) => { articleService.updateArticle(req.body, (data) => { res.send(data); }); }); // /**Api to delete the article */ router.delete('/delete-article', (req, res) => { articleService.deleteArticle(req.query, (data) => { res.send(data); }); }); /**Api to get the list of article */ router.get('/get-article', (req, res) => { documentService.getArticle(req.query, (data) => { res.send(data); }); }); // /**API to get the article by id... */ router.get('/get-article-by-id', (req, res) => { articleService.getArticleById(req.query, (data) => { res.send(data); }); }); module.exports = router;

Erstellen Sie nun einen Ordner namens Utilities für alle Konfigurationen, allgemeine Methoden und die MySQL-Verbindungskonfiguration.

Jetzt füge ich Konfigurationswerte in einer Datei namens config.js hinzu

g..co/recover
let environment = 'dev'; let serverURLs = { 'dev': { 'NODE_SERVER': 'http://localhost', 'NODE_SERVER_PORT': '3000', 'MYSQL_HOST': 'localhost', 'MYSQL_USER': 'root', 'MYSQL_PASSWORD': 'password', 'MYSQL_DATABASE': 'demo_angular7_crud', } } let config = { 'DB_URL_MYSQL': { 'host': `${serverURLs[environment].MYSQL_HOST}`, 'user': `${serverURLs[environment].MYSQL_USER}`, 'password': `${serverURLs[environment].MYSQL_PASSWORD}`, 'database': `${serverURLs[environment].MYSQL_DATABASE}` }, 'NODE_SERVER_PORT': { 'port': `${serverURLs[environment].NODE_SERVER_PORT}` }, 'NODE_SERVER_URL': { 'url': `${serverURLs[environment].NODE_SERVER}` } }; module.exports = { config: config };

Konfigurieren Sie nun die MySQL-Verbindung. Also schreibe ich die Verbindung mit der Datenbank in eine separate Datei. Erstellen Sie also eine Datei namens mysqkConfig.js im Ordner Utilities und fügen Sie die folgende Codezeile für die MySQL-Verbindung hinzu:

var config = require('../Utilities/config').config; var mysql = require('mysql'); var connection = mysql.createConnection({ host: config.DB_URL_MYSQL.host, user: config.DB_URL_MYSQL.user, password: config.DB_URL_MYSQL.password, database: config.DB_URL_MYSQL.database, }); connection.connect(() => { require('../Models/Article').initialize(); }); let getDB = () => { return connection; } module.exports = { getDB: getDB }

Jetzt erstelle ich einen separaten Dateinamen util.js, um allgemeine Methoden und allgemeine Statuscodes/Nachrichten zu speichern:

// Define Error Codes let statusCode = { OK: 200, FOUR_ZERO_FOUR: 404, FOUR_ZERO_THREE: 403, FOUR_ZERO_ONE: 401, FIVE_ZERO_ZERO: 500 }; // Define Error Messages let statusMessage = { SERVER_BUSY : 'Our Servers are busy. Please try again later.', DATA_UPDATED: 'Data updated successfully.', DELETE_DATA : 'Delete data successfully', }; module.exports = { statusCode: statusCode, statusMessage: statusMessage }

Jetzt ist der nächste Teil das Modell. Erstellen Sie also einen Ordner mit dem Namen Modelle und erstellen Sie eine Datei **Article.js ** und fügen Sie den folgenden Code hinzu:

let mysqlConfig = require('../Utilities/mysqlConfig'); let initialize = () => { mysqlConfig.getDB().query('create table IF NOT EXISTS article (id INT auto_increment primary key, category VARCHAR(30), title VARCHAR(24))'); } module.exports = { initialize: initialize }

Jetzt erstellen DAO Ordner und fügen Sie eine Datei hinzu ArtikelDAO.js zum Schreiben der allgemeinen Funktionen von MySQL-Abfragen:

let dbConfig = require('../Utilities/mysqlConfig'); let getArticle = (criteria, callback) => { //criteria.aricle_id ? conditions += ` and aricle_id = '${criteria.aricle_id}'` : true; dbConfig.getDB().query(`select * from article where 1`,criteria, callback); } let getArticleDetail = (criteria, callback) => { let conditions = ''; criteria.id ? conditions += ` and id = '${criteria.id}'` : true; dbConfig.getDB().query(`select * from article where 1 ${conditions}`, callback); } let createArticle = (dataToSet, callback) => { console.log('insert into article set ? ', dataToSet,'pankaj') dbConfig.getDB().query('insert into article set ? ', dataToSet, callback); } let deleteArticle = (criteria, callback) => { let conditions = ''; criteria.id ? conditions += ` and id = '${criteria.id}'` : true; console.log(`delete from article where 1 ${conditions}`); dbConfig.getDB().query(`delete from article where 1 ${conditions}`, callback); } let updateArticle = (criteria,dataToSet,callback) => { let conditions = ''; let setData = ''; criteria.id ? conditions += ` and id = '${criteria.id}'` : true; dataToSet.category ? setData += `category = '${dataToSet.category}'` : true; dataToSet.title ? setData += `, title = '${dataToSet.title}'` : true; console.log(`UPDATE article SET ${setData} where 1 ${conditions}`); dbConfig.getDB().query(`UPDATE article SET ${setData} where 1 ${conditions}`, callback); } module.exports = { getArticle : getArticle, createArticle : createArticle, deleteArticle : deleteArticle, updateArticle : updateArticle, getArticleDetail : getArticleDetail }

Jetzt erstellt man Dienstleistungen Ordner und fügen Sie eine Datei article.js für die gesamte API-Logik hinzu

let async = require('async'), parseString = require('xml2js').parseString; let util = require('../Utilities/util'), articleDAO = require('../DAO/articleDAO'); //config = require('../Utilities/config').config; /**API to create the atricle */ let createArticle = (data, callback) => { async.auto({ article: (cb) => { var dataToSet = { 'category':data.category?data.category:'', 'title':data.title, } console.log(dataToSet); articleDAO.createArticle(dataToSet, (err, dbData) => { if (err) { cb(null, { 'statusCode': util.statusCode.FOUR_ZERO_ONE, 'statusMessage': util.statusMessage.SERVER_BUSY }); return; } cb(null, { 'statusCode': util.statusCode.OK, 'statusMessage': util.statusMessage.DATA_UPDATED,'result':dataToSet }); }); } //] }, (err, response) => { callback(response.article); }); } /**API to update the article */ let updateArticle = (data,callback) => { async.auto({ articleUpdate :(cb) =>{ if (!data.id) { cb(null, { 'statusCode': util.statusCode.FOUR_ZERO_ONE, 'statusMessage': util.statusMessage.PARAMS_MISSING }) return; } console.log('phase 1'); var criteria = { id : data.id, } var dataToSet={ 'category': data.category, 'title':data.title, } console.log(criteria,'test',dataToSet); articleDAO.updateArticle(criteria, dataToSet, (err, dbData)=>{ if(err){ cb(null,{'statusCode':util.statusCode.FOUR_ZERO_ONE,'statusMessage':util.statusMessage.SERVER_BUSY}); return; } else{ cb(null, { 'statusCode': util.statusCode.OK, 'statusMessage': util.statusMessage.DATA_UPDATED,'result':dataToSet }); } }); } }, (err,response) => { callback(response.articleUpdate); }); } /**API to delete the subject */ let deleteArticle = (data,callback) => { console.log(data,'data to set') async.auto({ removeArticle :(cb) =>{ if (!data.id) { cb(null, { 'statusCode': util.statusCode.FOUR_ZERO_ONE, 'statusMessage': util.statusMessage.PARAMS_MISSING }) return; } var criteria = { id : data.id, } articleDAO.deleteArticle(criteria,(err,dbData) => { if (err) { console.log(err); cb(null, { 'statusCode': util.statusCode.FOUR_ZERO_ONE, 'statusMessage': util.statusMessage.SERVER_BUSY }); return; } cb(null, { 'statusCode': util.statusCode.OK, 'statusMessage': util.statusMessage.DELETE_DATA }); }); } }, (err,response) => { callback(response.removeArticle); }); } /***API to get the article list */ let getArticle = (data, callback) => { async.auto({ article: (cb) => { articleDAO.getArticle({},(err, data) => { if (err) { cb(null, {'errorCode': util.statusCode.INTERNAL_SERVER_ERROR,'statusMessage': util.statusMessage.SERVER_BUSY}); return; } cb(null, data); return; }); } }, (err, response) => { callback(response.article); }) } /***API to get the article detail by id */ let getArticleById = (data, callback) => { async.auto({ article: (cb) => { let criteria = { 'id':data.id } articleDAO.getArticleDetail(criteria,(err, data) => { if (err) { console.log(err,'error----'); cb(null, {'errorCode': util.statusCode.INTERNAL_SERVER_ERROR,'statusMessage': util.statusMessage.SERVER_BUSY}); return; } cb(null, data[0]); return; }); } }, (err, response) => { callback(response.article); }) } module.exports = { createArticle : createArticle, updateArticle : updateArticle, deleteArticle : deleteArticle, getArticle : getArticle, getArticleById : getArticleById };

3. Erstellen Sie eine Winkelkomponente zum Ausführen der CRUD-Aufgabe des Artikels

ng g component article

Der obige Befehl generiert alle erforderlichen Dateien für build |_+_| Komponente und fügte diese Komponente auch automatisch zu app.module.ts hinzu.

article

Jetzt müssen wir |_+_| . hinzufügen zu |_+_|. Öffnen und bearbeiten |_+_| Fügen Sie dann diesen Import hinzu. Und füge es zu |_+_| . hinzu Importe nach |_+_|. Jetzt hat unsere app.module.ts folgenden Code:

create src/app/article/article.component.css (0 bytes) create src/app/article/article.component.html (23 bytes) create src/app/article/article.component.spec.ts (614 bytes) create src/app/article/article.component.ts (321 bytes) update src/app/app.module.ts (390 bytes)

Erstellen Sie nun eine Servicedatei, in der wir alle Anfragen an den Server für den CRUD-Vorgang stellen. Befehl zum Erstellen des Dienstes ist von g Serviceartikel , im Moment habe ich gerade eine Datei namens article.service.ts erstellt. Schauen wir uns den Code in dieser Datei an.

HttpClientModule

In der obigen Datei haben wir alle http-Anfragen für die CRUD-Operation gestellt. Observables der rxjs-Bibliothek wurde verwendet, um das Abrufen von Daten von http-Anforderungen zu verarbeiten.

Kommen wir nun zur nächsten Datei, article.component.ts. Hier haben wir den gesamten Login-Teil der App. Sehen wir uns den Code in dieser Datei an:

app.module.ts

Jetzt müssen wir die Aufgabe über den Browser anzeigen, also schauen wir mal rein artikel.komponente.htm l-Datei.

src/app/app.module.ts

Da ich nun Server und Client zwei separate Ordner für nodejs und angle task erstellt habe. So werden beide Apps mit npm start über zwei Registerkarten des Terminals ausgeführt.

Im Browser über Link http://localhost:4200 . Die App sieht wie folgt aus

Angular CRUD mit Nodejs und MySQL Beispiel

Das ist alles für jetzt. Vielen Dank fürs Lesen und ich hoffe, dass dieser Beitrag sehr hilfreich ist, um CRUD-Operationen mit angle7,node.js & mysql zu erstellen.

gsub-Funktion in r

==============================================

Danke fürs Lesen :heart: Wenn dir dieser Beitrag gefallen hat, teile ihn mit all deinen Programmierfreunden! Folge mir auf Facebook | Twitter

#angular #node-js #angularjs #angular-js #nodejs

jsonworld.com

Angular 7 CRUD mit Nodejs und MySQL-Beispiel

Angular7, 8, 9 CRUD mit Nodejs und Mysql-Beispiel. Hey, heute werden wir eine Demo für CRUD mit Mysql, Express, Angular7 (MEAN) und Nodejs von Grund auf mit Angular CLI . erstellen