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 … Show
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ĩnhBạ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
2. Cài đặt module express và express-generatorNế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 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 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
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
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 APITrong 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 getDướ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
Ví dụ 1. API call function 1. Tạo tuyến đường. Open routes/index. js và code
2. Tạo lượt xem/người dùng danh sách. ejs
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 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 jsonDữ 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
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 jsonyou 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 POSTHà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 AxiosAxios 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 |