Tìm nạp mảng javascript

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
Tìm nạp mảng javascript
Tìm nạp mảng javascript

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

Tìm nạp mảng javascript
Bạn sẽ thấy thư mục SuDungAPI xuất hiện, các thư mục và tập tin trong đó

– 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('http://…')
.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)

Xem lại thử trang http. //máy chủ cục bộ. 3000/danhsachuser , will see in console

Tìm nạp mảng javascript

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ố 8

Hà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 db
0

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 db
1

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

Tìm nạp mảng javascript

Đọ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 db
2

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 db
3

Xem thử kết quả. http. //máy chủ cục bộ. 3000/danhsachuser , will see results

Tìm nạp mảng javascript

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 db
4

– 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 db
5

- 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