Contoh aplikasi web mysql node js

Question

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

Table of Contents Show

Bereaksi + Node. js + Express + Contoh contoh MySQL
Bereaksi, Node. js Express, Arsitektur MySQL
Node. js Ekspres Back-end
Struktur Proyek
Reaksi. js Depan-end
Struktur Proyek
Kode sumber
Bisakah saya menggunakan simpul JS dengan MySQL?
Bagaimana cara membuat proyek node js dengan MySQL?
Bisakah menggunakan Nodejs untuk aplikasi Web?
Bagaimana cara menampilkan data MySQL dalam HTML menggunakan Node js?

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) yes

Kita 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

npm install express sequelize mysql2 cors --save

_

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: "http://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: "http://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: "http://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: "http://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: "http://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: "http://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: "http://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: "http://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 berikutnya

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: "http://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

...
const app = express();
app.use(...);

const db = require("./app/models");
db.sequelize.sync();

...

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: "http://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: "http://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

const db = require("../models");
const Tutorial = db.tutorials;
const Op = db.Sequelize.Op;

// Create and Save a new Tutorial
exports.create = (req, res) => {
  
};

// Retrieve all Tutorials from the database.
exports.findAll = (req, res) => {
  
};

// Find a single Tutorial with an id
exports.findOne = (req, res) => {
  
};

// Update a Tutorial by the id in the request
exports.update = (req, res) => {
  
};

// Delete a Tutorial with the specified id in the request
exports.delete = (req, res) => {
  
};

// Delete all Tutorials from the database.
exports.deleteAll = (req, res) => {
  
};

// Find all published Tutorials
exports.findAllPublished = (req, res) => {
  
};

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: "http://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

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

0

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

_1

Tambahkan 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

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

_2

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

_3

Inisialisasi 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

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

_4

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

5

Kami 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

Bisakah saya menggunakan simpul JS dengan MySQL?

Simpul. js dapat digunakan dalam aplikasi database . Salah satu database yang paling populer adalah MySQL.

Bagaimana cara membuat proyek node js dengan MySQL?

Mari kita cepat menggunakan MySQL di Node dalam tiga langkah mudah. .

Langkah 1. Buat Node baru. proyek js. Buat direktori baru dan inisialisasi proyek Node menggunakan NPM. .

Langkah 2. Instal modul simpul mysql. Instal modul simpul mysql menggunakan NPM. .

Langkah 3. Terhubung dengan MySQL. Buat aplikasi

Bisakah menggunakan Nodejs untuk aplikasi Web?

Simpul. js banyak digunakan untuk back-end aplikasi , seperti menggunakan Express. js untuk membangun back-end aplikasi web klasik. Juga, ini digunakan untuk pemrograman sisi server dan non-pemblokiran, server berbasis peristiwa seperti situs web biasa dan layanan API backend.