Dalam tutorial ini, saya akan menunjukkan cara membangun React + Node. js + Express + contoh MySQL dengan Aplikasi CRUD. Server back-end menggunakan Node. js + Express untuk REST API, front-end side adalah React. klien js dengan React Router, Axios & Bootstrap
Pos terkait
– Bereaksi Redux + Node. js + Ekspres + contoh MySQL. Bangun Aplikasi CRUD
– Bereaksi + Node. js Ekspres. Contoh masuk dengan JWT
– React File Upload dengan Axios dan Progress Bar to Rest API
Jalankan kedua proyek di satu tempat
Bagaimana mengintegrasikan React dengan Node. js Express di Server/Port yang sama
Dockerisasi. Komposisi Docker. Bereaksi, Node. js, contoh MySQL
Isi
Bereaksi + Node. js + Express + Contoh contoh MySQL
Kami akan membangun Aplikasi Tutorial full-stack di dalamnya
- Tutorial memiliki id, judul, deskripsi, status publikasi
- Pengguna dapat membuat, mengambil, memperbarui, menghapus Tutorial
- Ada kotak pencarian untuk menemukan Tutorial berdasarkan judul
Berikut screenshot contohnya
– Tambahkan item
– Tampilkan semua item
– Klik tombol Edit untuk melihat detail item
Di Halaman ini, Anda bisa
- ubah status menjadi Published/Pending menggunakan tombol Publish/UnPublished
- hapus objek dari Database MySQL menggunakan tombol Hapus
- perbarui detail objek ini di Database dengan tombol Perbarui
- Cari objek berdasarkan bidang 'judul'
– Periksa basis data MySQL
Bereaksi, Node. js Express, Arsitektur MySQL
Kami akan membangun aplikasi dengan arsitektur berikut
– simpul. js Express mengekspor REST API & berinteraksi dengan Database MySQL menggunakan Sequelize ORM
– React Client mengirim Permintaan HTTP dan mengambil Respons HTTP menggunakan Axios, mengkonsumsi data pada komponen. React Router digunakan untuk navigasi ke halaman
Video
Ini adalah React Node kami. Demo aplikasi js Express Sequelize (dengan instruksi singkat) berjalan dengan database MySQL
Node. js Ekspres Back-end
Ringkasan
Ini adalah API yang Node. Aplikasi js Express akan diekspor
MethodsUrlsActionsGETapi/tutorialsdapatkan semua TutorialGETapi/tutorials/. idget Tutorial oleh npm init name: (nodejs-express-sequelize-mysql) version: (1.0.0) description: Node.js Rest Apis with Express, Sequelize & MySQL. entry point: (index.js) server.js test command: git repository: keywords: nodejs, express, sequelize, mysql, rest, api author: bezkoder license: (ISC) Is this ok? (yes) yes 6POSTapi/tutorial menambahkan Tutorial baru OUTapi/tutorials/. idupdate Tutorial oleh npm init name: (nodejs-express-sequelize-mysql) version: (1.0.0) description: Node.js Rest Apis with Express, Sequelize & MySQL. entry point: (index.js) server.js test command: git repository: keywords: nodejs, express, sequelize, mysql, rest, api author: bezkoder license: (ISC) Is this ok? (yes) yes 6DELETEapi/tutorials/. idremove Tutorial oleh npm init name: (nodejs-express-sequelize-mysql) version: (1.0.0) description: Node.js Rest Apis with Express, Sequelize & MySQL. entry point: (index.js) server.js test command: git repository: keywords: nodejs, express, sequelize, mysql, rest, api author: bezkoder license: (ISC) Is this ok? (yes) yes 6DELETEapi/tutorialsremove all TutorialsGETapi/tutorials?title=[kw]cari semua Tutorial yang judulnya berisi npm init name: (nodejs-express-sequelize-mysql) version: (1.0.0) description: Node.js Rest Apis with Express, Sequelize & MySQL. entry point: (index.js) server.js test command: git repository: keywords: nodejs, express, sequelize, mysql, rest, api author: bezkoder license: (ISC) Is this ok? (yes) yes 9
Struktur Proyek
– db. config. js mengekspor parameter konfigurasi untuk koneksi MySQL & Sequelize
– Server web ekspres di server. js tempat kami mengonfigurasi CORS, menginisialisasi & menjalankan Express REST API
– Selanjutnya kita tambahkan konfigurasi untuk database MySQL di models/index. js, buat model data Sekuel dalam model/tutorial. model. js
– Pengontrol tutorial dalam pengontrol
– Rute untuk menangani semua operasi CRUD (termasuk pencari kustom) di tutorial. rute. js
Jika Anda ingin menggunakan SQL mentah (tanpa Sequelize), silakan kunjungi
Bangun Node. js Rest API dengan Express & MySQL
Backend ini bekerja dengan baik dengan frontend dalam tutorial ini
Penerapan
Buat Node. Aplikasi js
Pertama kita buat foldernya
$ mkdir nodejs-express-sequelize-mysql $ cd nodejs-express-sequelize-mysql _Selanjutnya, kita menginisialisasi Node. Aplikasi js dengan sebuah paket. file json
npm init name: (nodejs-express-sequelize-mysql) version: (1.0.0) description: Node.js Rest Apis with Express, Sequelize & MySQL. entry point: (index.js) server.js test command: git repository: keywords: nodejs, express, sequelize, mysql, rest, api author: bezkoder license: (ISC) Is this ok? (yes) yesKita perlu menginstal modul yang diperlukan. npm install express sequelize mysql2 cors --save
0, npm install express sequelize mysql2 cors --save
1, npm install express sequelize mysql2 cors --save
2 dan npm install express sequelize mysql2 cors --save
3
Jalankan perintah
Siapkan server web Ekspres
Di folder root, mari buat server baru. file js
const express = require("express"); const cors = require("cors"); const app = express(); var corsOptions = { origin: "//localhost:8081" }; app.use(cors(corsOptions)); // parse requests of content-type - application/json app.use(express.json()); // parse requests of content-type - application/x-www-form-urlencoded app.use(express.urlencoded({ extended: true })); // simple route app.get("/", (req, res) => { res.json({ message: "Welcome to bezkoder application." }); }); // set port, listen for requests const PORT = process.env.PORT || 8080; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}.`); });Apa yang kita lakukan adalah
– impor npm install express sequelize mysql2 cors --save
_0, dan npm install express sequelize mysql2 cors --save
3 modul
- Express adalah untuk membangun Rest apis
- cors menyediakan middleware Express untuk mengaktifkan CORS dengan berbagai opsi
– buat aplikasi Express, lalu tambahkan body-parser (npm install express sequelize mysql2 cors --save
6 dan npm install express sequelize mysql2 cors --save
7) dan npm install express sequelize mysql2 cors --save
3 middlewares menggunakan metode npm install express sequelize mysql2 cors --save
9. Perhatikan bahwa kita menetapkan asal. const express = require("express");
const cors = require("cors");
const app = express();
var corsOptions = {
origin: "//localhost:8081"
};
app.use(cors(corsOptions));
// parse requests of content-type - application/json
app.use(express.json());
// parse requests of content-type - application/x-www-form-urlencoded
app.use(express.urlencoded({ extended: true }));
// simple route
app.get("/", (req, res) => {
res.json({ message: "Welcome to bezkoder application." });
});
// set port, listen for requests
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}.`);
});
_0
– menentukan rute GET yang sederhana untuk pengujian
– dengarkan pada port 8080 untuk permintaan masuk
Sekarang mari jalankan aplikasi dengan perintah. const express = require("express");
const cors = require("cors");
const app = express();
var corsOptions = {
origin: "//localhost:8081"
};
app.use(cors(corsOptions));
// parse requests of content-type - application/json
app.use(express.json());
// parse requests of content-type - application/x-www-form-urlencoded
app.use(express.urlencoded({ extended: true }));
// simple route
app.get("/", (req, res) => {
res.json({ message: "Welcome to bezkoder application." });
});
// set port, listen for requests
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}.`);
});
_1
Buka browser anda dengan url http. // localhost. 8080/, Anda akan melihat
Ya, langkah pertama selesai. Kami akan bekerja dengan Sequelize di bagian selanjutnya
Konfigurasi database MySQL & Sequelize
Di folder app, kita membuat folder config terpisah untuk konfigurasi dengan db. config. file js seperti ini
module.exports = { HOST: "localhost", USER: "root", PASSWORD: "123456", DB: "testdb", dialect: "mysql", pool: { max: 5, min: 0, acquire: 30000, idle: 10000 } };Lima parameter pertama adalah untuk koneksi MySQL
const express = require("express");
const cors = require("cors");
const app = express();
var corsOptions = {
origin: "//localhost:8081"
};
app.use(cors(corsOptions));
// parse requests of content-type - application/json
app.use(express.json());
// parse requests of content-type - application/x-www-form-urlencoded
app.use(express.urlencoded({ extended: true }));
// simple route
app.get("/", (req, res) => {
res.json({ message: "Welcome to bezkoder application." });
});
// set port, listen for requests
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}.`);
});
2 bersifat opsional, ini akan digunakan untuk konfigurasi kumpulan koneksi Sequelize
- const express = require("express"); const cors = require("cors"); const app = express(); var corsOptions = { origin: "//localhost:8081" }; app.use(cors(corsOptions)); // parse requests of content-type - application/json app.use(express.json()); // parse requests of content-type - application/x-www-form-urlencoded app.use(express.urlencoded({ extended: true })); // simple route app.get("/", (req, res) => { res.json({ message: "Welcome to bezkoder application." }); }); // set port, listen for requests const PORT = process.env.PORT || 8080; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}.`); }); _3. jumlah maksimum koneksi dalam kumpulan
- const express = require("express"); const cors = require("cors"); const app = express(); var corsOptions = { origin: "//localhost:8081" }; app.use(cors(corsOptions)); // parse requests of content-type - application/json app.use(express.json()); // parse requests of content-type - application/x-www-form-urlencoded app.use(express.urlencoded({ extended: true })); // simple route app.get("/", (req, res) => { res.json({ message: "Welcome to bezkoder application." }); }); // set port, listen for requests const PORT = process.env.PORT || 8080; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}.`); }); _4. jumlah minimum koneksi di kolam renang
- const express = require("express"); const cors = require("cors"); const app = express(); var corsOptions = { origin: "//localhost:8081" }; app.use(cors(corsOptions)); // parse requests of content-type - application/json app.use(express.json()); // parse requests of content-type - application/x-www-form-urlencoded app.use(express.urlencoded({ extended: true })); // simple route app.get("/", (req, res) => { res.json({ message: "Welcome to bezkoder application." }); }); // set port, listen for requests const PORT = process.env.PORT || 8080; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}.`); }); _5. waktu maksimum, dalam milidetik, koneksi dapat menganggur sebelum dirilis
- const express = require("express"); const cors = require("cors"); const app = express(); var corsOptions = { origin: "//localhost:8081" }; app.use(cors(corsOptions)); // parse requests of content-type - application/json app.use(express.json()); // parse requests of content-type - application/x-www-form-urlencoded app.use(express.urlencoded({ extended: true })); // simple route app.get("/", (req, res) => { res.json({ message: "Welcome to bezkoder application." }); }); // set port, listen for requests const PORT = process.env.PORT || 8080; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}.`); }); _6. waktu maksimum, dalam milidetik, kumpulan itu akan mencoba mendapatkan koneksi sebelum melempar kesalahan
Untuk detail lebih lanjut, silakan kunjungi
Inisialisasi Sekuel
Kita akan menginisialisasi Sequelize di folder app/models yang akan berisi model pada langkah selanjutnya
Sekarang buat app/models/index. js dengan kode berikut
const dbConfig = require("../config/db.config.js"); const Sequelize = require("sequelize"); const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, { host: dbConfig.HOST, dialect: dbConfig.dialect, operatorsAliases: false, pool: { max: dbConfig.pool.max, min: dbConfig.pool.min, acquire: dbConfig.pool.acquire, idle: dbConfig.pool.idle } }); const db = {}; db.Sequelize = Sequelize; db.sequelize = sequelize; db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize); module.exports = db;Jangan lupa untuk memanggil metode const express = require("express"); const cors = require("cors"); const app = express(); var corsOptions = { origin: "//localhost:8081" }; app.use(cors(corsOptions)); // parse requests of content-type - application/json app.use(express.json()); // parse requests of content-type - application/x-www-form-urlencoded app.use(express.urlencoded({ extended: true })); // simple route app.get("/", (req, res) => { res.json({ message: "Welcome to bezkoder application." }); }); // set port, listen for requests const PORT = process.env.PORT || 8080; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}.`); }); 7 di server. js
Dalam pengembangan, Anda mungkin perlu menghapus tabel yang ada dan menyinkronkan ulang database. Cukup gunakan const express = require("express"); const cors = require("cors"); const app = express(); var corsOptions = { origin: "//localhost:8081" }; app.use(cors(corsOptions)); // parse requests of content-type - application/json app.use(express.json()); // parse requests of content-type - application/x-www-form-urlencoded app.use(express.urlencoded({ extended: true })); // simple route app.get("/", (req, res) => { res.json({ message: "Welcome to bezkoder application." }); }); // set port, listen for requests const PORT = process.env.PORT || 8080; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}.`); }); _8 sebagai kode berikut
db.sequelize.sync({ force: true }).then(() => { console.log("Drop and re-sync db."); });Tentukan Model Sekuelisasi
Di folder model, buat tutorial. model. file js seperti ini
module.exports = (sequelize, Sequelize) => { const Tutorial = sequelize.define("tutorial", { title: { type: Sequelize.STRING }, description: { type: Sequelize.STRING }, published: { type: Sequelize.BOOLEAN } }); return Tutorial; };Sequelize Model ini merepresentasikan tabel tutorial di database MySQL. Kolom ini akan dibuat secara otomatis. id, judul, deskripsi, diterbitkan, dibuat, diperbarui
Setelah menginisialisasi Sequelize, kita tidak perlu menulis fungsi CRUD, Sequelize mendukung semuanya
- buat Tutorial baru. const express = require("express"); const cors = require("cors"); const app = express(); var corsOptions = { origin: "//localhost:8081" }; app.use(cors(corsOptions)); // parse requests of content-type - application/json app.use(express.json()); // parse requests of content-type - application/x-www-form-urlencoded app.use(express.urlencoded({ extended: true })); // simple route app.get("/", (req, res) => { res.json({ message: "Welcome to bezkoder application." }); }); // set port, listen for requests const PORT = process.env.PORT || 8080; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}.`); }); _9
- temukan Tutorial dengan id. module.exports = { HOST: "localhost", USER: "root", PASSWORD: "123456", DB: "testdb", dialect: "mysql", pool: { max: 5, min: 0, acquire: 30000, idle: 10000 } }; 0
- dapatkan semua Tutorial. module.exports = { HOST: "localhost", USER: "root", PASSWORD: "123456", DB: "testdb", dialect: "mysql", pool: { max: 5, min: 0, acquire: 30000, idle: 10000 } }; 1
- perbarui Tutorial dengan id. module.exports = { HOST: "localhost", USER: "root", PASSWORD: "123456", DB: "testdb", dialect: "mysql", pool: { max: 5, min: 0, acquire: 30000, idle: 10000 } }; 2
- menghapus Tutorial. module.exports = { HOST: "localhost", USER: "root", PASSWORD: "123456", DB: "testdb", dialect: "mysql", pool: { max: 5, min: 0, acquire: 30000, idle: 10000 } }; 3
- hapus semua Tutorial. module.exports = { HOST: "localhost", USER: "root", PASSWORD: "123456", DB: "testdb", dialect: "mysql", pool: { max: 5, min: 0, acquire: 30000, idle: 10000 } }; 4
- temukan semua Tutorial berdasarkan judul. module.exports = { HOST: "localhost", USER: "root", PASSWORD: "123456", DB: "testdb", dialect: "mysql", pool: { max: 5, min: 0, acquire: 30000, idle: 10000 } }; 5
Fungsi-fungsi ini akan digunakan di Pengontrol kami
Kami dapat meningkatkan contoh dengan menambahkan Komentar untuk setiap Tutorial. Ini adalah Hubungan Satu-ke-Banyak dan saya menulis tutorial untuk ini di
Sekuel Asosiasi. Contoh Satu-ke-Banyak – Node. js,MySQL
Atau Anda dapat menambahkan Tag untuk setiap Tutorial dan menambahkan Tutorial ke Tag (Hubungan Banyak ke Banyak)
Sekuelkan contoh Asosiasi Banyak-ke-Banyak dengan Node. js & mysql
Buat Pengontrol
Di dalam folder app/controllers, mari buat tutorial. pengontrol. js dengan fungsi CRUD ini
- membuat
- Temukan semua
- findOne
- memperbarui
- menghapus
- Hapus semua
- findAllPublished
Anda dapat melanjutkan langkah demi langkah untuk mengimplementasikan Node ini. Aplikasi js Express di pos
Node. Contoh js Rest API dengan Express, Sequelize, dan MySQL
Jalankan Node. js ExpressServer
Jalankan Node kami. aplikasi js dengan perintah. const express = require("express");
const cors = require("cors");
const app = express();
var corsOptions = {
origin: "//localhost:8081"
};
app.use(cors(corsOptions));
// parse requests of content-type - application/json
app.use(express.json());
// parse requests of content-type - application/x-www-form-urlencoded
app.use(express.urlencoded({ extended: true }));
// simple route
app.get("/", (req, res) => {
res.json({ message: "Welcome to bezkoder application." });
});
// set port, listen for requests
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}.`);
});
_1
Konsol menunjukkan
Reaksi. js Depan-end
Ringkasan
– Komponen module.exports = { HOST: "localhost", USER: "root", PASSWORD: "123456", DB: "testdb", dialect: "mysql", pool: { max: 5, min: 0, acquire: 30000, idle: 10000 } }; _7 adalah wadah dengan React module.exports = { HOST: "localhost", USER: "root", PASSWORD: "123456", DB: "testdb", dialect: "mysql", pool: { max: 5, min: 0, acquire: 30000, idle: 10000 } }; 8. Ini memiliki module.exports = { HOST: "localhost", USER: "root", PASSWORD: "123456", DB: "testdb", dialect: "mysql", pool: { max: 5, min: 0, acquire: 30000, idle: 10000 } }; _9 yang terhubung ke jalur rute
– const dbConfig = require("../config/db.config.js");
const Sequelize = require("sequelize");
const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
host: dbConfig.HOST,
dialect: dbConfig.dialect,
operatorsAliases: false,
pool: {
max: dbConfig.pool.max,
min: dbConfig.pool.min,
acquire: dbConfig.pool.acquire,
idle: dbConfig.pool.idle
}
});
const db = {};
db.Sequelize = Sequelize;
db.sequelize = sequelize;
db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize);
module.exports = db;
_0 komponen mendapatkan dan menampilkan Tutorial
– Komponen const dbConfig = require("../config/db.config.js");
const Sequelize = require("sequelize");
const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
host: dbConfig.HOST,
dialect: dbConfig.dialect,
operatorsAliases: false,
pool: {
max: dbConfig.pool.max,
min: dbConfig.pool.min,
acquire: dbConfig.pool.acquire,
idle: dbConfig.pool.idle
}
});
const db = {};
db.Sequelize = Sequelize;
db.sequelize = sequelize;
db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize);
module.exports = db;
_1 memiliki formulir untuk mengedit detail Tutorial berdasarkan const dbConfig = require("../config/db.config.js");
const Sequelize = require("sequelize");
const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
host: dbConfig.HOST,
dialect: dbConfig.dialect,
operatorsAliases: false,
pool: {
max: dbConfig.pool.max,
min: dbConfig.pool.min,
acquire: dbConfig.pool.acquire,
idle: dbConfig.pool.idle
}
});
const db = {};
db.Sequelize = Sequelize;
db.sequelize = sequelize;
db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize);
module.exports = db;
2
– const dbConfig = require("../config/db.config.js");
const Sequelize = require("sequelize");
const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
host: dbConfig.HOST,
dialect: dbConfig.dialect,
operatorsAliases: false,
pool: {
max: dbConfig.pool.max,
min: dbConfig.pool.min,
acquire: dbConfig.pool.acquire,
idle: dbConfig.pool.idle
}
});
const db = {};
db.Sequelize = Sequelize;
db.sequelize = sequelize;
db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize);
module.exports = db;
_3 komponen memiliki formulir untuk pengajuan Tutorial baru
– Komponen ini memanggil metode const dbConfig = require("../config/db.config.js"); const Sequelize = require("sequelize"); const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, { host: dbConfig.HOST, dialect: dbConfig.dialect, operatorsAliases: false, pool: { max: dbConfig.pool.max, min: dbConfig.pool.min, acquire: dbConfig.pool.acquire, idle: dbConfig.pool.idle } }); const db = {}; db.Sequelize = Sequelize; db.sequelize = sequelize; db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize); module.exports = db; 4 yang menggunakan const dbConfig = require("../config/db.config.js"); const Sequelize = require("sequelize"); const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, { host: dbConfig.HOST, dialect: dbConfig.dialect, operatorsAliases: false, pool: { max: dbConfig.pool.max, min: dbConfig.pool.min, acquire: dbConfig.pool.acquire, idle: dbConfig.pool.idle } }); const db = {}; db.Sequelize = Sequelize; db.sequelize = sequelize; db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize); module.exports = db; 5 untuk membuat permintaan HTTP dan menerima tanggapan
Atau Anda dapat menggunakan Bereaksi dengan Redux
Lebih detail di. Bereaksi contoh Aplikasi Redux CRUD dengan Rest API
Teknologi
- Bereaksi 18/17
- react-router-dom 6
- sumbu 0. 27. 2
- tali sepatu 4
Struktur Proyek
- kemasan. json berisi 4 modul utama. const dbConfig = require("../config/db.config.js");
const Sequelize = require("sequelize");
const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
host: dbConfig.HOST,
dialect: dbConfig.dialect,
operatorsAliases: false,
pool: {
max: dbConfig.pool.max,
min: dbConfig.pool.min,
acquire: dbConfig.pool.acquire,
idle: dbConfig.pool.idle
}
});
const db = {};
db.Sequelize = Sequelize;
db.sequelize = sequelize;
db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize);
module.exports = db;
6, const dbConfig = require("../config/db.config.js");
const Sequelize = require("sequelize");
const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
host: dbConfig.HOST,
dialect: dbConfig.dialect,
operatorsAliases: false,
pool: {
max: dbConfig.pool.max,
min: dbConfig.pool.min,
acquire: dbConfig.pool.acquire,
idle: dbConfig.pool.idle
}
});
const db = {};
db.Sequelize = Sequelize;
db.sequelize = sequelize;
db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize);
module.exports = db;
7, const dbConfig = require("../config/db.config.js");
const Sequelize = require("sequelize");
const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
host: dbConfig.HOST,
dialect: dbConfig.dialect,
operatorsAliases: false,
pool: {
max: dbConfig.pool.max,
min: dbConfig.pool.min,
acquire: dbConfig.pool.acquire,
idle: dbConfig.pool.idle
}
});
const db = {};
db.Sequelize = Sequelize;
db.sequelize = sequelize;
db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize);
module.exports = db;
5 & const dbConfig = require("../config/db.config.js");
const Sequelize = require("sequelize");
const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
host: dbConfig.HOST,
dialect: dbConfig.dialect,
operatorsAliases: false,
pool: {
max: dbConfig.pool.max,
min: dbConfig.pool.min,
acquire: dbConfig.pool.acquire,
idle: dbConfig.pool.idle
}
});
const db = {};
db.Sequelize = Sequelize;
db.sequelize = sequelize;
db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize);
module.exports = db;
9
– module.exports = {
HOST: "localhost",
USER: "root",
PASSWORD: "123456",
DB: "testdb",
dialect: "mysql",
pool: {
max: 5,
min: 0,
acquire: 30000,
idle: 10000
}
};
7 adalah wadah yang memiliki module.exports = {
HOST: "localhost",
USER: "root",
PASSWORD: "123456",
DB: "testdb",
dialect: "mysql",
pool: {
max: 5,
min: 0,
acquire: 30000,
idle: 10000
}
};
8 & navbar
– Ada 3 komponen. const dbConfig = require("../config/db.config.js");
const Sequelize = require("sequelize");
const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
host: dbConfig.HOST,
dialect: dbConfig.dialect,
operatorsAliases: false,
pool: {
max: dbConfig.pool.max,
min: dbConfig.pool.min,
acquire: dbConfig.pool.acquire,
idle: dbConfig.pool.idle
}
});
const db = {};
db.Sequelize = Sequelize;
db.sequelize = sequelize;
db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize);
module.exports = db;
0, const dbConfig = require("../config/db.config.js");
const Sequelize = require("sequelize");
const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
host: dbConfig.HOST,
dialect: dbConfig.dialect,
operatorsAliases: false,
pool: {
max: dbConfig.pool.max,
min: dbConfig.pool.min,
acquire: dbConfig.pool.acquire,
idle: dbConfig.pool.idle
}
});
const db = {};
db.Sequelize = Sequelize;
db.sequelize = sequelize;
db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize);
module.exports = db;
1, const dbConfig = require("../config/db.config.js");
const Sequelize = require("sequelize");
const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
host: dbConfig.HOST,
dialect: dbConfig.dialect,
operatorsAliases: false,
pool: {
max: dbConfig.pool.max,
min: dbConfig.pool.min,
acquire: dbConfig.pool.acquire,
idle: dbConfig.pool.idle
}
});
const db = {};
db.Sequelize = Sequelize;
db.sequelize = sequelize;
db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize);
module.exports = db;
3
– http-umum. js menginisialisasi axios dengan HTTP base Url dan header
– const dbConfig = require("../config/db.config.js");
const Sequelize = require("sequelize");
const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
host: dbConfig.HOST,
dialect: dbConfig.dialect,
operatorsAliases: false,
pool: {
max: dbConfig.pool.max,
min: dbConfig.pool.min,
acquire: dbConfig.pool.acquire,
idle: dbConfig.pool.idle
}
});
const db = {};
db.Sequelize = Sequelize;
db.sequelize = sequelize;
db.tutorials = require("./tutorial.model.js")(sequelize, Sequelize);
module.exports = db;
_4 memiliki metode untuk mengirimkan permintaan HTTP ke Apis
–. env mengonfigurasi port untuk Aplikasi React CRUD ini
Untuk versi React Hooks, silakan kunjungi tutorial ini
Untuk versi TypeScript
Silakan kunjungi
Contoh React TypeScript CRUD dengan Web API
Penerapan
Atur Reaksi. Proyek js
Buka cmd di folder yang ingin Anda simpan folder Project, jalankan perintah
...
const app = express();
app.use(...);
const db = require("./app/models");
db.sequelize.sync();
...
6
Setelah proses selesai. Kami membuat folder dan file tambahan seperti pohon berikut
publik
src
komponen
tutorial tambahan. komponen. js
tutorial. komponen. js
daftar tutorial. komponen. js
jasa
tutorial. melayani. js
Aplikasi. css
Aplikasi. js
indeks. js
kemasan. json
Impor Bootstrap untuk Bereaksi Aplikasi CRUD
Jalankan perintah. ... const app = express(); app.use(...); const db = require("./app/models"); db.sequelize.sync(); ... 7
Buka src/Aplikasi. js dan modifikasi kode di dalamnya sebagai berikut-
npm init name: (nodejs-express-sequelize-mysql) version: (1.0.0) description: Node.js Rest Apis with Express, Sequelize & MySQL. entry point: (index.js) server.js test command: git repository: keywords: nodejs, express, sequelize, mysql, rest, api author: bezkoder license: (ISC) Is this ok? (yes) yes _1Tambahkan React Router ke React CRUD App
– Jalankan perintah. ...
const app = express();
app.use(...);
const db = require("./app/models");
db.sequelize.sync();
...
8
– Buka src/index. js dan bungkus komponen module.exports = {
HOST: "localhost",
USER: "root",
PASSWORD: "123456",
DB: "testdb",
dialect: "mysql",
pool: {
max: 5,
min: 0,
acquire: 30000,
idle: 10000
}
};
_7 dengan objek
db.sequelize.sync({ force: true }).then(() => {
console.log("Drop and re-sync db.");
});
0
Tambahkan Navbar ke Bereaksi Aplikasi CRUD
Buka src/Aplikasi. js, komponen module.exports = { HOST: "localhost", USER: "root", PASSWORD: "123456", DB: "testdb", dialect: "mysql", pool: { max: 5, min: 0, acquire: 30000, idle: 10000 } }; _7 ini adalah wadah root untuk aplikasi kita, ini akan berisi module.exports = { HOST: "localhost", USER: "root", PASSWORD: "123456", DB: "testdb", dialect: "mysql", pool: { max: 5, min: 0, acquire: 30000, idle: 10000 } }; 9, dan juga, objek db.sequelize.sync({ force: true }).then(() => { console.log("Drop and re-sync db."); }); 3 dengan beberapa db.sequelize.sync({ force: true }).then(() => { console.log("Drop and re-sync db."); }); 4. Setiap db.sequelize.sync({ force: true }).then(() => { console.log("Drop and re-sync db."); }); _4 menunjuk ke Komponen Bereaksi
npm init name: (nodejs-express-sequelize-mysql) version: (1.0.0) description: Node.js Rest Apis with Express, Sequelize & MySQL. entry point: (index.js) server.js test command: git repository: keywords: nodejs, express, sequelize, mysql, rest, api author: bezkoder license: (ISC) Is this ok? (yes) yes _3Inisialisasi Axios untuk React CRUD HTTP Client
Mari instal axios dengan perintah.
db.sequelize.sync({ force: true }).then(() => {
console.log("Drop and re-sync db.");
});
6
Di bawah folder src, kami membuat http-common. js dengan kode berikut
Anda dapat mengubah db.sequelize.sync({ force: true }).then(() => { console.log("Drop and re-sync db."); }); _7 yang bergantung pada url REST API yang dikonfigurasi oleh Server Anda
Buat Layanan Data
Pada langkah ini, kita akan membuat layanan yang menggunakan objek axios di atas untuk mengirim permintaan HTTP
layanan/tutorial. melayani. js
npm init name: (nodejs-express-sequelize-mysql) version: (1.0.0) description: Node.js Rest Apis with Express, Sequelize & MySQL. entry point: (index.js) server.js test command: git repository: keywords: nodejs, express, sequelize, mysql, rest, api author: bezkoder license: (ISC) Is this ok? (yes) yes 5Kami memanggil axios db.sequelize.sync({ force: true }).then(() => { console.log("Drop and re-sync db."); }); 8, db.sequelize.sync({ force: true }).then(() => { console.log("Drop and re-sync db."); }); 9, module.exports = (sequelize, Sequelize) => { const Tutorial = sequelize.define("tutorial", { title: { type: Sequelize.STRING }, description: { type: Sequelize.STRING }, published: { type: Sequelize.BOOLEAN } }); return Tutorial; }; 0, module.exports = (sequelize, Sequelize) => { const Tutorial = sequelize.define("tutorial", { title: { type: Sequelize.STRING }, description: { type: Sequelize.STRING }, published: { type: Sequelize.BOOLEAN } }); return Tutorial; }; 1 metode yang sesuai dengan Permintaan HTTP. DAPATKAN, POST, PUT, DELETE untuk melakukan Operasi CRUD
Buat Bereaksi Komponen/Halaman
Sekarang kita akan membangun 3 komponen yang sesuai dengan 3 Rute yang telah ditentukan sebelumnya
- Tambahkan Item baru
- Daftar barang
- Detail barang
Anda dapat melanjutkan langkah demi langkah untuk mengimplementasikan Aplikasi React ini di postingan
- Reaksi. js contoh CRUD untuk menggunakan Web API
– atau contoh CRUD React Hooks untuk menggunakan Web API
Menggunakan Bereaksi dengan Redux
– Bereaksi contoh Redux CRUD dengan Rest API
– Bereaksi Kait + Redux. Contoh CRUD dengan Rest API
Untuk versi TypeScript
Contoh React TypeScript CRUD untuk menggunakan Web API
Jalankan Aplikasi React CRUD
Anda dapat menjalankan Aplikasi kami dengan perintah. module.exports = (sequelize, Sequelize) => {
const Tutorial = sequelize.define("tutorial", {
title: {
type: Sequelize.STRING
},
description: {
type: Sequelize.STRING
},
published: {
type: Sequelize.BOOLEAN
}
});
return Tutorial;
};
2
Jika proses berhasil, buka Browser dengan Url. module.exports = (sequelize, Sequelize) => {
const Tutorial = sequelize.define("tutorial", {
title: {
type: Sequelize.STRING
},
description: {
type: Sequelize.STRING
},
published: {
type: Sequelize.BOOLEAN
}
});
return Tutorial;
};
3 dan periksa
Kode sumber
Anda dapat menemukan kode sumber Github untuk tutorial ini di. Bereaksi + Aplikasi Node Github
Kesimpulan
Hari ini kami memiliki ikhtisar tentang React. js + Node.js. js Express + contoh MySQL saat membuat Aplikasi CRUD full-stack
Kami juga melihat arsitektur client-server untuk REST API menggunakan Express dan Sequelize ORM, serta React. struktur proyek js untuk membangun aplikasi front-end untuk membuat permintaan HTTP dan menggunakan respons