[Tạo server Node API : Vue.js + Express + MySQL] Quick Start - Part 2 : Liên kết DB bằng Express + MySQL
Ở Part 1 chúng ta đã xử lý cách trao đổi thông tin giữa Front-end và Back-end bằng Vue.js và Express.
Ở part này tôi sẽ giới thiệu một ví dụ để có thể nhập thông tin đơn giản của người dùng bằng việc liên kết MySQL trên Express, ngoại trừ Vue.js.
Step1. Cài đặt và chạy MySQL Workbench
Có nhiều cách để chạy MySQL server tuy nhiên MySQL Workbench được tạo bằng GUI nên có ưu điểm là tương đối dễ thiết lập.
Có thể down MySQL Workbench tại địa chỉ dưới đây.
https://dev.mysql.com/downloads/workbench/
Nếu như chạy Workbench đã cài đặt hoàn thành thì sẽ nhìn thấy màn hình dưới đây. Chạy mySQL server bằng tài khoản admin đã setting trong quá trình cài đặt.
Step2. Tạo DB
DB (Schema) mới sẽ được tạo ra khi ấn vào button có hình ổ đĩa (disk).
Nhập tên DB và Charset.
Nếu ấn vào button Apply, query tạo DB (CREATE SCHEMA 'test_crud' DEFAULT CHARACTER SET utf8;) sẽ hiện ra, thêm query sau đây vào bên dưới thì sẽ tạo table lưu ID, tên, địa chỉ của người dùng.
CREATE TABLE test_crud.users (
userid VARCHAR(45) NOT NULL ,
name VARCHAR(45) NULL ,
address VARCHAR(45) NULL ,
PRIMARY KEY (userid) );
Sau khi chọn DB (test_crud) > Tables > Table (users) ở Navigator bên trái, nếu ấn vào icon hình table thì sẽ chạy query tên SELECT * FROM test_crud.users; và đồng thời có thể thấy table được tạo ra bình thường. Vì hiện nay đang không có bất kỳ data nào nên sẽ thấy bảng trống.
Step3. Markup màn hình Front nhận nhập data
Tạo một file là public/index.html rồi thêm markup đơn giản có thể nhận data. Nếu ấn vào submit, sẽ gửi data thông qua giá trị name đã được khai báo trong từng input.
<h1>Please enter your user information.</h1>
<form name="user" method="post" action="/regist">
<div class="input-row">
<label for="userid">ID</label>
<input id="userid" name="userid" type="text">
</div>
<div class="input-row">
<label for="name">Name</label>
<input id="name" name="name" type="text">
</div>
<div class="input-row">
<label for="address">Address</label>
<input id="address" name="address" type="text">
</div>
<button type="submit">Send</button>
</form>
Từ đây ta thêm một chút style là sẽ tạo được màn hình như dưới đây. Sau khi chạy server bằng npm start, kiểm tra tại localhost:3000.
Step4. Xử lý Back-end
Sau khi cài mysql package bằng lệnh npm install mysql --save, thêm nội dung sau vào app.js. Đối tượng connection sẽ thay đổi bằng giá trị đúng với DB đã cài đặt.
var mysql = require('mysql');
// Create Connection object
var connection = mysql.createConnection({
host: 'localhost',
port: 3306,
user: 'root',
password: 'password',
database: 'test_crud'
});
// Connect
connection.connect(function (err) {
if (err) {
console.error('mysql connection error');
console.error(err);
throw err;
}
});
Cú pháp để xử lý giá trị đã nhập sẽ như sau.
// insert
app.post('/regist', function (req, res) {
var user = {
'userid': req.body.userid,
'name': req.body.name,
'address': req.body.address
};
var query = connection.query('insert into users set ?', user, function (err, result) {
if (err) {
console.error(err);
throw err;
}
res.status(200).send('success');
});
});
Chạy lại server bằng npm start, nhập thử data. Nếu như toàn bộ quá trình không có vấn đề gì thì sẽ nhận success message, nhìn thấy một record đã xuất hiện trên DB table.
Vì đã nhập thành công nên nếu như chỉ cần thay đổi query thì có thể gọi về nữa.
Tại Part3 thì tôi sẽ giới thiệu về cách xây dựng tính năng đăng ký thành viên/login đơn giản sử dụng cả Vue.js, Express và MySQL=.
URL tham khảo
Thông tin series
- Part1: Hiểu về trao đổi thông tin giữa Front-end và Back-end bằng Vue.js + Express
- Part2: Liên kết DB bằng Express + MySQL
- Part3: Mix All - Phát triển tính năng login/ đăng ký thành viên
Comments
Post a Comment