Sử dụng Restful API NodeJS hướng dẫn cách gọi API trong trang web. Có thể gọi bằng hàm tìm nạp, xmlHttpRequest, hoặc sử dụng thư viện Jquery, Axios, AngularJS, VueJS …
Bài viết này hướng dẫn bạn sử dụng Fetch API [hàm tìm nạp] và thư viện axios
Chuẩn bị sẵn sàng để sử dụng api yên tĩnh
Bạn phải có 1 bộ restful API cái đã rồi mới được gọi là, ở bài hướng dẫn RESTful API trong NodeJS, bạn đã thực hiện với một bộ restful API cho sản phẩm. Bây giờ bạn tạo nhanh một bộ khác [người dùng] để phục vụ bài viết này nhé, cũng là dịp để ôn lại những gì đã học ở bài trước
1. Tạo cơ sở dữ liệu và bảng
- Vào phpmyadmin, tạo 1 database tên shop [ if có rồi thì khỏi tạo]
- Vào cửa hàng cơ sở dữ liệu, tạo bảng tên người dùng như sau
2. Cài đặt module express và express-generator
Nếu máy của bạn đã cài đặt rồi thì bỏ qua, còn chưa thì mở dòng lệnh rồi nhập lệnh npm install -g express , tiếp tục nhập lệnh npm -g install express-generator
3. Tạo dự án để thực hiện tập tin
– Vẫn trong dòng lệnh rồi chạy lệnh. express –ejs SuDungAPI
– Chuyển vào thư mục SuDungAPI mới tạo và chạy lệnh cài đặt các mô-đun cần thiết
npm install npm install mysql
4. Create model connection db
– Tạo thư mục mô hình trong dự án
– Tạo tệp mô hình/cơ sở dữ liệu. js
var mysql = require['mysql']; var db = mysql.createConnection[{ host: 'localhost', user: 'root', password: '', database: 'shop' }]; db.connect[function[err] { if [err] throw err; console.log['Da ket noi database']; }]; module.exports = db; //lệnh exports để xuất [public] ra cho bên ngoài module có thể dùng được db
– Tạo tập tin models/users. mã js định nghĩa các hàm để tương tác với mysql
var db=require['./database'];
exports.list = function[ callback] {
let sql = `SELECT * FROM users`;
db.query[sql, function[err, d] { callback[d]; } ];
}
exports.create = function[data, callback ] { //hàm chèn user mới vào table
let sql = 'INSERT INTO users SET ?';
db.query[sql, data, function[err, d] { callback[d] } ];
}
exports.update = function[id, data, callback] {
let sql = 'UPDATE users SET ? WHERE idUser = ?';
db.query[sql, [data, id], [err, d] => {
if [err] throw err;
callback[];
}];
}
exports.read= function[id, callback] {
let sql = 'SELECT * FROM users WHERE idUser = ?'
db.query[sql, id, [err, d] => {
data = d[0];
callback[data];
}];
}
5. Tạo bộ điều khiển
– Mở tệp ứng dụng. js, you will see a command app. sử dụng[‘/ user ‘, usersRouter];. Đường định tuyến người dùng đã được tạo sẵn để bạn dẫn vào bộ định tuyến[bộ điều khiển] người dùng. Yêu cầu để từ chối tạo thêm [nhưng nếu muốn có thể sửa đổi hoặc tạo mới]
– Mở tập tin định tuyến/người dùng. js và code
var express = require['express'];
var router = express.Router[];
var db = require['./../models/database'];
var modelUsers = require['./../models/users'];
router.get['/', [req, res] => {
modelUsers.list[ function[listusers] { res.json[listusers]} ];
}];
router.post['/', [req, res] => {
let data = req.body;
modelUsers.create[data , function[]{
res.json[{thongbao:"Đã thêm xong một user mới"}];
}];
}];
router.get['/:id', [req, res] => {
let id = req.params.id;
modelUsers.read[id, function[u]{
res.json[u];
}];
}];
router.put['/:id', [req, res]=> {
let data = req.body;
let id = req.params.id;
modelUsers.update[id, data, function[]{
res.json[{thongbao: 'Đã cập nhật user '}];
}]
}];
module.exports = router;
Bài kiểm tra. Sử dụng người đưa thư để thực hiện bài kiểm tra. xem danh sách người dùng, xem chi tiết 1 người dùng, thêm 1 người dùng , cập nhật 1 người dùng. Tất cả phải thành công nhé
Chuẩn bị công việc đã hoàn thành. Giờ thì gọi nó trong trang web thế nào?
Sử dụng hàm fetch[] để gọi API
Trong Javascript, hàm fetch[url,options] là một hàm dùng để gửi và nhận yêu cầu đến tài nguyên ở xa. You use this function to done the call of APIs made
Create request with method get
Dưới đây là cấu trúc cơ bản của hàm tìm nạp để gọi 1 tài nguyên ở xa với phương thức get. If when request that has error what that, the section. bắt sẽ chạy. Kết quả còn lại từ máy chủ sẽ chuyển đến. sau đó trong phản hồi của biến, Bạn sử dụng phản hồi của biến này để đánh giá kết quả trả về có ok không rồi chuyển nó sang dạng dữ liệu cần thiết để xử lý ở các. rồi sau
window.fetch['//…']
.then[function[response] {
//đánh giá response và chuyển dữ liệu cho .then sau
}]
.then[function[data] {
// xử lý dữ liệu và chuyển dữ liệu cho .then sau
}]
.then[function[data] {
// xử lý dữ liệu
}]
.catch[function[error] {
console.log['Co loi : \n', error];
}];
Ví dụ 1. API call function
1. Tạo tuyến đường. Open routes/index. js và code
router.get['/danhsachuser', [req, res] => {
res.render["listusers"];
}];
2. Tạo lượt xem/người dùng danh sách. ejs
Danh sách users
3. Bài kiểm tra. Chạy dự án [npm start] rồi mở trình duyệt nhập http. //máy chủ cục bộ. 3000/danhsachuser , nếu thấy chữ Danh sách người dùng là OK
4. Mã gọi API trong chế độ xem mới tạo [sau thẻ h1]
fetch["//localhost:3000/users/"]
.then[function[res] {
console.log[res]; //xem thử trong console của trình duyệt nhé
if[!res.ok] {throw new Error["Lỗi = " + res.status]; }
return res.json[];
}]
.then[function[data] {
console.log[data];//xem thử trong console của trình duyệt nhé
}]
.catch[function[error] {
console.log["Lỗi: ", error];
}]
Xem lại thử trang http. //máy chủ cục bộ. 3000/danhsachuser , will see in console
Ví dụ 2. Có thể gọi API theo cách không có các hàm nối lại với nhau
________số 8Hàm tìm nạp yêu cầu tạo url, nhưng dữ liệu không có ngay. Đợi đến khi có kết quả trả lời phản hồi sẽ chuyển đến hàm kiemtra để xử lý, công việc xử lý bao gồm kiểm tra trạng thái ok từ máy chủ và chuyển nội dung của phản hồi thành dạng json, sau đó trả về cho hàm xulydulieu. Hàm xulydulieu sẽ đọc dữ liệu json để xử lý và hiển thị tùy chọn theo yêu cầu. Trong quá trình hoạt động của tìm nạp, nếu có lỗi thì điều khiển sẽ đến hàm trong phần bắt để xử lý [xulyloi]
Chú thích. nếu muốn bạn có thể thêm nhiều lệnh. then to handle tuần tự dữ liệu nếu muốn
Đọc dữ liệu từ 1 đối tượng json
Dữ liệu đối tượng json đổ về từ máy chủ là dữ liệu dạng văn bản có cấu trúc , được trình duyệt hỗ trợ nên rất dễ đọc
you try. Use API HTTP browser. //máy chủ cục bộ. 3000/users/1 sẽ thấy chi tiết người dùng 1 ở định dạng json. Yêu cầu API rồi hiện ra rất dễ dàng
1. Tạo tuyến đường. Open routes/index. js và code
router.get['/chitietuser', [req, res] => {
res.render["chitietuser"];
}];
2. Tạo lượt xem/chitietuser. ejs
var mysql = require['mysql']; var db = mysql.createConnection[{ host: 'localhost', user: 'root', password: '', database: 'shop' }]; db.connect[function[err] { if [err] throw err; console.log['Da ket noi database']; }]; module.exports = db; //lệnh exports để xuất [public] ra cho bên ngoài module có thể dùng được db0
3. Bài kiểm tra. Chạy dự án [npm start] rồi mở trình duyệt nhập http. //máy chủ cục bộ. 3000/chitietuser , nếu thấy chữ Chi user là OK
4. Mã gọi API trong chế độ xem mới tạo [sau thẻ h1]
var mysql = require['mysql']; var db = mysql.createConnection[{ host: 'localhost', user: 'root', password: '', database: 'shop' }]; db.connect[function[err] { if [err] throw err; console.log['Da ket noi database']; }]; module.exports = db; //lệnh exports để xuất [public] ra cho bên ngoài module có thể dùng được db1
Kết quả là bạn sẽ thấy dữ liệu thân thiện , theo cách bạn muốn trình bày cho người dùng xem
Đọc các dãy đối tượng json
you try. Use API HTTP browser. //máy chủ cục bộ. 3000/users/ sẽ thấy mảng người dùng 1 ở định dạng json. Yêu cầu API rồi hiện ra cũng rất dễ dàng
Open views/listuser. ejs rồi mã trong hàm xulydulieu để được như sau
var mysql = require['mysql']; var db = mysql.createConnection[{ host: 'localhost', user: 'root', password: '', database: 'shop' }]; db.connect[function[err] { if [err] throw err; console.log['Da ket noi database']; }]; module.exports = db; //lệnh exports để xuất [public] ra cho bên ngoài module có thể dùng được db2
Thêm thẻ div sau thẻ h1 để chứa kết quả
var mysql = require['mysql']; var db = mysql.createConnection[{ host: 'localhost', user: 'root', password: '', database: 'shop' }]; db.connect[function[err] { if [err] throw err; console.log['Da ket noi database']; }]; module.exports = db; //lệnh exports để xuất [public] ra cho bên ngoài module có thể dùng được db3
Xem thử kết quả. http. //máy chủ cục bộ. 3000/danhsachuser , will see results
Gọi API với phương thức POST
Hàm tìm nạp[url,tùy chọn] giúp gửi yêu cầu đến tài nguyên ở xa, trong đó tùy chọn là cấu hình chi tiết cho hàm. Cách sử dụng có thể thực hiện thông qua ví dụ sau
– Định tuyến/chỉ mục tệp. js
var mysql = require['mysql']; var db = mysql.createConnection[{ host: 'localhost', user: 'root', password: '', database: 'shop' }]; db.connect[function[err] { if [err] throw err; console.log['Da ket noi database']; }]; module.exports = db; //lệnh exports để xuất [public] ra cho bên ngoài module có thể dùng được db4
– Tạo file views/dangky. ejs
var mysql = require['mysql']; var db = mysql.createConnection[{ host: 'localhost', user: 'root', password: '', database: 'shop' }]; db.connect[function[err] { if [err] throw err; console.log['Da ket noi database']; }]; module.exports = db; //lệnh exports để xuất [public] ra cho bên ngoài module có thể dùng được db5
- Bài kiểm tra. http. //máy chủ cục bộ. 3000/dangky ==> nhập thông tin rồi nhắp Đăng ký sẽ lưu thành công vào cơ sở dữ liệu
Sử dụng thư viện Axios
Axios là một thư viện giúp bạn gửi yêu cầu http đến các ứng dụng API. Axios used both at browser or Node. js. Sử dụng Restful API NodeJS sẽ dễ dàng hơn với thư viện này