Tiếp nối bài trước về MVC bài này sẽ thêm database vào và config nodejs
Bài MVC tại đây
Để kết nối với MySQL, bạn phải cài đặt server MySQL và sử dụng thư viện mysql hoặc mysql2 trong Node.
js.
Cách cập nhật cấu trúc MVC của bạn để kết nối với MySQL là như sau.
Cài đặt MySQL và mysql2.
Để bắt đầu, bạn phải cài đặt MySQL server và thư viện mysql2 cho Node.
js.
Để thực hiện điều này, hãy chạy lệnh sau trong thư mục dự án của bạn:
project-root/ │ ├── index.html │ ├── css/ │ └── styles.css │ ├── js/ │ ├── models/ │ │ ├── Order.js │ │ └── database.js │ │ │ ├── views/ │ │ └── OrderView.js │ │ │ ├── controllers/ │ │ └── OrderController.js │ │ │ └── app.js │ ├── server/ │ └── server.js │ └── assets/ └── images/ └── logo.png
Thêm file database.
js vào models hoặc tách riêng ra 1 folder điều được
import mysql from 'mysql2'; const connection = mysql.createConnection({ host: 'localhost', user: 'yourusername', // Thay thế bằng tên người dùng MySQL của bạn password: 'yourpassword', // Thay thế bằng mật khẩu MySQL của bạn database: 'ordersdb' }); connection.connect((err) => { if (err) { console.error('Error connecting to MySQL database:', err); return; } console.log('Connected to MySQL database.'); const createTableQuery = ` CREATE TABLE IF NOT EXISTS orders ( id INT AUTO_INCREMENT PRIMARY KEY, product VARCHAR(255) NOT NULL, quantity INT NOT NULL, price DECIMAL(10, 2) NOT NULL ) `; connection.query(createTableQuery, (err, results) => { if (err) { console.error('Error creating orders table:', err); return; } console.log('Orders table created or already exists.'); }); }); export default connection;
Tạo kết nối đến cơ sở dữ liệu qua query string
host: localhost
port 3306
Bạn nên build 1 phpmyadmin để tiện quản lý
Hoặc đây nhá
mysql+pymysql://root:@localhost/my_hikari
import db from './database.js'; class Order { static getAllOrders(callback) { const sql = "SELECT * FROM orders"; db.query(sql, (err, results) => { if (err) { throw err; } callback(results); }); } static createOrder(product, quantity, price, callback) { const sql = "INSERT INTO orders (product, quantity, price) VALUES (?,?,?)"; db.query(sql, [product, quantity, price], (err, results) => { if (err) { throw err; } callback({ id: results.insertId, product, quantity, price }); }); } } export default Order;
Model kết nối với database tiếng hành lấy dữ liệu
Dùng SQL Query nên hời phèn, bạn có thể đổi qua dùng ORM tại đây nhá nó sẽ bảo mật hơn gấp 10 tỷ lần
ORM
import Order from '../models/Order.js'; import OrderView from '../views/OrderView.js'; class OrderController { constructor(view) { this.view = view; this.loadOrders(); } loadOrders() { Order.getAllOrders((orders) => { this.view.displayOrders(orders); }); } addOrder(product, quantity, price) { Order.createOrder(product, quantity, price, (newOrder) => { this.loadOrders(); // Reload orders after adding new order }); } } export default OrderController;
Tiến hành load model lên Controller
class OrderView { constructor() { this.app = document.getElementById('app'); this.orderList = this.createElement('ul', 'order-list'); this.app.append(this.orderList); } createElement(tag, className) { const element = document.createElement(tag); if (className) element.classList.add(className); return element; } displayOrders(orders) { while (this.orderList.firstChild) { this.orderList.removeChild(this.orderList.firstChild); } orders.forEach(order => { const li = this.createElement('li'); li.textContent = `Order ${order.id}: ${order.product} x ${order.quantity} - $${order.price.toFixed(2)}`; this.orderList.append(li); }); } } export default OrderView;
Để tiết kiệm thời gian nên không tách backend và fontend nên tôi tận dụng lại model có sẵn, nếu theo nguyên tắt bạn nên tách riêng ra nhá thành 2 source
import express from 'express'; import bodyParser from 'body-parser'; import Order from '../js/models/Order.js'; const app = express(); const PORT = 3000; app.use(bodyParser.json()); app.get('/api/orders', (req, res) => { Order.getAllOrders((orders) => { res.json(orders); }); }); app.post('/api/orders', (req, res) => { const { product, quantity, price } = req.body; Order.createOrder(product, quantity, price, (newOrder) => { res.status(201).json(newOrder); }); }); app.listen(PORT, () => { console.log(`Server is running on http://localhost:${PORT}`); });
Khởi Tạo Ứng Dụng và Kết Nối Tới Backend
import OrderView from './views/OrderView.js'; import OrderController from './controllers/OrderController.js'; document.addEventListener('DOMContentLoaded', () => { const app = new OrderController(new OrderView()); });
Giống thế này
Cách chạy source code bên trên
node server/server.js
Cơ sở dữ liệu thiết lập: Mã trong js/models/database.
js cho phép kết nối và thiết lập cơ sở dữ liệu MySQL.
Model Cập nhật: File js/models/Order.
js đã được cập nhật để cho phép sử dụng cơ sở dữ liệu MySQL cho các hoạt động CRUD.
Điều chỉnh điều khiển: Model js/controllers/OrderController.
js sử dụng để lấy và thêm đơn hàng từ cơ sở dữ liệu.
Điều chỉnh tầm nhìn: js/views/OrderView.
js cho phép hiển thị đơn hàng từ cơ sở dữ liệu.
Thiết lập máy chủ: server/server.
js thiết lập máy chủ Express để đáp ứng các yêu cầu API.
Cấu trúc này giúp bạn có một ứng dụng MVC đầy đủ với kết nối dễ bảo trì và mở rộng cơ sở dữ liệu MySQL.
#Mtips5s #Contact
Fanpage: https://www.facebook.com/mtipscoder
Group trao đổi, chia sẻ: https://www.facebook.com/groups/mtipscoder
Website: https://mtips5s.com
Youtube: https://mtips5s.com
Twitter(X): @takagiks99
Instagram: @khuongkara
Threads: @khuongkara
Google Maps: @khuongkara
#Base Code #Souce Code
Npm: @tools.mtips5s.com
Bộ công cụ My Self: @github
Npm: @npm
Docker: @docker
Chúc các bạn thành công!
Leave A Comment