Cách sử dụng Vue.js và Axios để hiển thị dữ liệu từ API
Vue.js là một khung JavaScript front-end để xây dựng giao diện user . Nó được thiết kế từ đầu để có thể áp dụng dần dần và tích hợp tốt với các thư viện khác hoặc các dự án hiện có. Điều này làm cho nó phù hợp cho các dự án nhỏ cũng như các ứng dụng trang đơn phức tạp khi được sử dụng với các công cụ và thư viện khác.API, hay Giao diện lập trình ứng dụng, là một phần mềm trung gian cho phép hai ứng dụng nói chuyện với nhau. Một API thường tiết lộ dữ liệu mà các nhà phát triển khác có thể sử dụng trong ứng dụng của riêng họ mà không cần lo lắng về database hoặc sự khác biệt trong ngôn ngữ lập trình. Các nhà phát triển thường xuyên tìm nạp dữ liệu từ một API trả về dữ liệu ở định dạng JSON mà họ tích hợp vào các ứng dụng front-end. Vue.js rất phù hợp để sử dụng các loại API này.
Trong hướng dẫn này, bạn sẽ tạo một ứng dụng Vue sử dụng API Cryptocompare để hiển thị giá hiện tại của hai loại tiền điện tử hàng đầu: Bitcoin và Etherium. Ngoài Vue, bạn sẽ sử dụng thư viện Axios để thực hiện các yêu cầu API và xử lý kết quả thu được. Axios rất phù hợp vì nó tự động chuyển đổi dữ liệu JSON thành các đối tượng JavaScript và nó hỗ trợ Promises , dẫn đến mã dễ đọc và gỡ lỗi hơn. Và để làm cho mọi thứ trông đẹp mắt, ta sẽ sử dụng khuôn khổ Foundation CSS.
Lưu ý : API Cryptocompare chỉ được cấp phép cho mục đích sử dụng phi thương mại. Xem các điều khoản cấp phép của họ nếu bạn muốn sử dụng nó trong một dự án thương mại.
Yêu cầu
Trước khi bắt đầu hướng dẫn này, bạn cần những thứ sau:
- Một editor hỗ trợ tô sáng cú pháp JavaScript, chẳng hạn như Atom , Visual Studio Code hoặc Sublime Text . Các editor này có sẵn trên Windows, macOS và Linux.
- Làm quen với việc sử dụng HTML và JavaScript cùng nhau. Tìm hiểu thêm trong Cách thêm JavaScript vào HTML .
- Làm quen với định dạng dữ liệu JSON, bạn có thể tìm hiểu thêm về Cách làm việc với JSON trong JavaScript .
- Quen thuộc với việc đưa ra các yêu cầu đối với các API. Để có hướng dẫn toàn diện về cách làm việc với API, hãy xem Cách sử dụng API Web trong Python3 . Mặc dù được viết cho Python, nhưng nó vẫn sẽ giúp bạn hiểu các khái niệm cốt lõi của việc làm việc với các API.
Bước 1 - Tạo ứng dụng Vue cơ bản
Hãy tạo một ứng dụng Vue cơ bản. Ta sẽ xây dựng một trang HTML duy nhất với một số dữ liệu giả lập mà cuối cùng ta sẽ thay thế bằng dữ liệu trực tiếp từ API. Ta sẽ sử dụng Vue.js để hiển thị dữ liệu giả này. Đối với bước đầu tiên này, ta sẽ giữ tất cả mã trong một file duy nhất.
Tạo một file mới có tên là index.html bằng editor của bạn.
Trong file này, thêm mã đánh dấu HTML sau để xác định khung HTML và kéo vào khung Foundation CSS và thư viện Vue.js từ mạng phân phối nội dung (CDN). Bằng cách sử dụng CDN, bạn không cần download mã bổ sung để bắt đầu phát triển ứng dụng của bạn .
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css"> <meta charset="utf-8"> <title>Cryptocurrency Pricing Application</title> </head> <body> <div class="container" id="app"> <h3 class="text-center">Cryptocurrency Pricing</h3> <div class="columns medium-4" > <div class="card"> <div class="card-section"> <p> BTC in USD </p> </div> <div class="card-divider"> <p>{{ BTCinUSD }}</p> </div> </div> </div> </div> <script src="https://unpkg.com/vue"></script> </body> </html> Dòng {{ BTCinUSD }} là phần giữ chỗ cho dữ liệu mà Vue.js sẽ cung cấp. Đây là cách Vue cho phép ta hiển thị dữ liệu một cách khai báo trong giao diện user . Hãy xác định dữ liệu đó.
Ngay bên dưới <script> bao gồm Vue, thêm mã này sẽ tạo một ứng dụng Vue mới và xác định cấu trúc dữ liệu mà ta sẽ hiển thị trên trang:
... <script> const vm = new Vue({ el: '#app', //Mock data for the value of BTC in USD data: { BTCinUSD: 3759.91} }); </script> ... Mã này tạo một version ứng dụng Vue mới và đính kèm version đó vào phần tử có id của app . Vue gọi quá trình này là gắn một ứng dụng. Ta xác định một thể hiện Vue mới và cấu hình nó bằng cách truyền một đối tượng cấu hình. Đối tượng này chứa một tùy chọn el chỉ định id của phần tử ta muốn gắn ứng dụng này vào và một tùy chọn data chứa dữ liệu mà ta muốn có sẵn cho chế độ xem.
Trong ví dụ này, mô hình dữ liệu của ta chứa một cặp key-value duy nhất giữ giá trị giả cho giá Bitcoin: { BTCinUSD: 3759.91} . Dữ liệu này sẽ được hiển thị trên trang HTML của ta hoặc chế độ xem của ta , ở nơi ta đã đặt khóa trong dấu ngoặc nhọn kép như sau:
<div class="card-divider"> <p>{{ BTCinUSD }}</p> </div> Cuối cùng, ta sẽ thay thế giá trị được mã hóa cứng này bằng dữ liệu trực tiếp từ API.
Mở file này trong trình duyệt của bạn. Bạn sẽ thấy kết quả sau trên màn hình, hiển thị dữ liệu giả:
Ta đang hiển thị giá bằng đô la Mỹ. Để hiển thị nó bằng một đơn vị tiền tệ bổ sung, như Euro, ta sẽ thêm một cặp key-value khác vào mô hình dữ liệu của bạn và thêm một cột khác trong đánh dấu. Đầu tiên, hãy thay đổi mô hình dữ liệu:
<script> const vm = new Vue({ el: '#app', //Mock data for the value of BTC in USD data: { BTCinUSD: 3759.91, BTCinEURO:3166.21 } }); </script> Sau đó, thêm một phần mới vào phần đánh dấu hiển thị giá bằng Euro bên dưới mã hiện có.
<div class="container" id="app"> <h3 class="text-center">Cryptocurrency Pricing</h3> <div class="columns medium-4" > <div class="card"> <div class="card-section"> <p> BTC in USD </p> </div> <div class="card-divider"> {{BTCinUSD}} </div> </div> </div> <div class="columns medium-4" > <div class="card"> <div class="card-section"> <p> BTC in EURO </p> </div> <div class="card-divider"> {{BTCinEURO}} </div> </div> </div> </div> Bây giờ hãy lưu file và reload trong trình duyệt của bạn. Ứng dụng hiện hiển thị giá Bitcoin cả bằng Euro cũng như đô la Mỹ.
Ta đã thực hiện tất cả công việc trong một file duy nhất. Hãy chia nhỏ mọi thứ ra để cải thiện khả năng bảo trì.
Bước 2 - Tách JavaScript và HTML để rõ ràng
Để tìm hiểu cách mọi thứ hoạt động, ta đã đặt tất cả mã trong một file duy nhất. Bây giờ hãy tách mã ứng dụng thành hai file riêng biệt, index.html và vueApp.js . Tệp index.html sẽ xử lý phần đánh dấu và file JavaScript sẽ chứa logic ứng dụng. Điều này sẽ làm cho ứng dụng của ta dễ bảo trì hơn. Ta sẽ giữ cả hai file trong cùng một folder .
Đầu tiên, hãy sửa đổi index.html và xóa mã JavaScript, thay thế nó bằng một liên kết đến file vueApp.js .
Tìm phần này của file :
... <script src="https://unpkg.com/vue"></script> <script language="JavaScript"> const vm = new Vue({ el: '#app', // Mock data for the value of BTC in USD data: { BTCinUSD: 3759.91, BTCinEURO:3166.21 } }); </script> ... Và sửa đổi nó để nó trông như thế này:
... <script src="https://unpkg.com/vue"></script> <script src="vueApp.js"></script> ... Sau đó, tạo file vueApp.js trong cùng folder với index.html .
Trong file mới này, hãy đặt cùng một mã JavaScript ban đầu trong index.html , không có <script> :
const vm = new Vue({ el: '#app', // Mock data for the value of BTC in USD data: { BTCinUSD: 3759.91, BTCinEURO:3166.21 } }); Lưu file và reload index.html trong trình duyệt. Bạn sẽ thấy cùng một kết quả mà bạn đã thấy trước đó.
Ta muốn hỗ trợ nhiều tiền điện tử hơn là chỉ Bitcoiin, vì vậy hãy xem cách ta thực hiện điều đó.
Bước 3 - Sử dụng Vue để lặp lại dữ liệu
Ta hiện đang hiển thị một số dữ liệu giả về giá Bitcoin. Nhưng hãy thêm Etherium nữa. Để làm điều này, ta sẽ cấu trúc lại dữ liệu của bạn và sửa đổi chế độ xem để làm việc với dữ liệu mới.
Mở file vueApp.js và sửa đổi mô hình dữ liệu để nó trông giống như sau:
const vm = new Vue({ el: '#app', data: { results: {"BTC": {"USD":3759.91,"EUR":3166.21}, "ETH": {"USD":281.7,"EUR":236.25}} } }); Mô hình dữ liệu của ta đã trở nên phức tạp hơn một chút với cấu trúc dữ liệu lồng nhau. Bây giờ ta có một khóa được gọi là results chứa hai bản ghi; một cho giá Bitcoin và một cho giá Etherium. Cấu trúc mới này sẽ cho phép ta giảm bớt sự trùng lặp trong quan điểm của ta . Nó cũng giống với dữ liệu ta sẽ nhận được từ API cryptocompare.
Lưu các file . Bây giờ, hãy sửa đổi đánh dấu của ta để xử lý dữ liệu theo cách có lập trình hơn.
Mở index.html và tìm phần này của file nơi ta hiển thị giá Bitcoin:
... <div class="columns medium-4" > <div class="card"> <div class="card-section"> <p> BTC in USD </p> </div> <div class="card-divider"> {{BTCinUSD}} </div> </div> </div> <div class="columns medium-4" > <div class="card"> <div class="card-section"> <p> BTC in EURO </p> </div> <div class="card-divider"> {{BTCinEURO}} </div> </div> </div> </div> ... Thay thế nó bằng mã này lặp lại trên tập dữ liệu bạn đã xác định.
... <div class="columns medium-4" v-for="(result, index) in results"> <div class="card"> <div class="card-section"> <p> {{ index }} </p> </div> <div class="card-divider"> <p>$ {{ result.USD }}</p> </div> <div class="card-section"> <p> € {{ result.EUR }}</p> </div> </div> </div> ... Mã này sử dụng chỉ thị v-for hoạt động giống như vòng lặp for. Nó lặp lại trên tất cả các cặp key-value trong mô hình dữ liệu của ta và hiển thị dữ liệu cho từng cặp.
Khi reload phần mềm này trong trình duyệt, bạn sẽ thấy giá bị chế nhạo:
Sửa đổi này cho phép ta thêm một loại tiền tệ mới vào dữ liệu results trong vueApp.js và hiển thị nó trên trang mà không có thay đổi nào khác. Thêm một mục nhập giả khác vào tập dữ liệu để thử điều này:
const vm = new Vue({ el: '#app', data: { results: {"BTC":{"USD":3759.91,"EUR":3166.21}, "ETH":{"USD":281.7,"EUR":236.25}, "NEW Currency":{"USD":5.60,"EUR":4.70}} } }); Đừng quên thêm dấu phẩy vào sau phần nhập Etherium.
Nếu bây giờ bạn tải trang trong trình duyệt web, bạn sẽ thấy mục nhập mới được hiển thị:
Khi ta xử lý dữ liệu theo chương trình, ta không cần thêm các cột mới vào đánh dấu theo cách thủ công.
Bây giờ ta hãy tìm nạp dữ liệu thực.
Bước 4 - Lấy dữ liệu từ API
Đã đến lúc thay thế dữ liệu giả mạo của ta bằng dữ liệu trực tiếp từ API cryptocompare để hiển thị giá Bitcoin và Ethereum trên trang web bằng Đô la Mỹ và Euro.
Để lấy dữ liệu cho trang của ta , ta sẽ yêu cầu URL sau, URL này yêu cầu Bitcoin và Etherium bằng Đô la Mỹ và Euro:
https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR API này sẽ trả về phản hồi JSON. Sử dụng curl để đưa ra yêu cầu đối với API để xem phản hồi:
- curl 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR'
Bạn sẽ thấy kết quả như thế này:
Output{"BTC":{"USD":11388.18,"EUR":9469.64},"ETH":{"USD":1037.02,"EUR":865.99}} Kết quả này trông giống hệt như mô hình dữ liệu được mã hóa cứng mà bạn đã sử dụng ở bước trước. Tất cả những gì ta phải làm bây giờ là chuyển đổi dữ liệu bằng cách đưa ra yêu cầu đối với URL này từ ứng dụng của ta .
Để thực hiện yêu cầu, ta sẽ sử dụng hàm mounted() từ Vue kết hợp với hàm GET của thư viện Axios để tìm nạp dữ liệu và lưu trữ nó trong mảng results trong mô hình dữ liệu. Hàm mounted được gọi khi ứng dụng Vue được gắn với một phần tử. Sau khi ứng dụng Vue được mount , ta sẽ thực hiện yêu cầu đối với API và lưu kết quả. Trang web sẽ được thông báo về sự thay đổi và các giá trị sẽ xuất hiện trên trang.
Đầu tiên, mở index.html và tải thư viện Axios bằng cách thêm tập lệnh bên dưới dòng mà bạn đã bao gồm Vue:
... <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> ... Lưu file , sau đó mở vueApp.js và sửa đổi nó để nó đưa ra yêu cầu tới API và điền vào mô hình dữ liệu với kết quả.
const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR"; const vm = new Vue({ el: '#app', data: { results: [] }, mounted() { axios.get(url).then(response => { this.results = response.data }) } }); Lưu ý ta đã xóa giá trị mặc định cho results và thay thế nó bằng một mảng trống. Ta sẽ không có dữ liệu khi ứng dụng của ta tải lần đầu tiên, nhưng ta không muốn mọi thứ bị hỏng. Chế độ xem HTML của ta mong đợi một số dữ liệu sẽ lặp lại khi tải.
Hàm axios.get sử dụng một Lời hứa . Khi API trả về dữ liệu thành công, mã trong khối then được thực thi và dữ liệu được lưu vào biến results của ta .
Lưu file và reload trang index.html trong trình duyệt web. Lần này, bạn sẽ thấy giá hiện tại của tiền điện tử.
Nếu bạn không, hãy xem hướng dẫn Cách sử dụng Control panel dành cho nhà phát triển JavaScript và sử dụng console JavaScript để gỡ lỗi mã của bạn.
Kết luận
Trong chưa đầy năm mươi dòng, bạn đã tạo một ứng dụng sử dụng API chỉ bằng ba công cụ: Vue.js, Axios và Cryptocompare API. Bạn đã học cách hiển thị dữ liệu trên một trang, lặp lại các kết quả và thay thế dữ liệu tĩnh bằng các kết quả từ một API.
Đến đây bạn đã hiểu các nguyên tắc cơ bản, bạn có thể thêm chức năng khác vào ứng dụng của bạn . Sửa đổi ứng dụng này để hiển thị các đơn vị tiền tệ bổ sung hoặc sử dụng các kỹ thuật bạn đã học được trong hướng dẫn này để tạo ứng dụng web khác bằng API khác.
Các tin liên quan
