GALAXY TECH
Chuyên gia Công nghệ
Thứ tư, 23/09/2020 | 00:00 GMT+7

Cách thêm chỉ báo tải vào ứng dụng Vue.js

Chỉ số tải cải thiện UX (trải nghiệm user ) trong bất kỳ ứng dụng nào — web hoặc thiết bị di động. Những hoạt ảnh này cung cấp phản hồi cho user rằng một hành động đang được thực hiện và kết quả sẽ sớm trả về.

Trong các ứng dụng web, có hai sự kiện chính cần trình tải:

  • Yêu cầu mạng như chuyển đến một trang khác hoặc yêu cầu AJAX.
  • Khi một tính toán nặng đang chạy.

Bài viết này sẽ giới thiệu một số cách bạn có thể thêm trình tải vào các ứng dụng Vue.js của bạn .

Yêu cầu

Để hoàn thành hướng dẫn này, bạn cần :

Hướng dẫn này đã được xác minh với Node v14.2.0, npm v6.14.5, vue v2.6.11, và vue-router v3.1.6.

Bước 1 - Cài đặt dự án

Hãy tạo một dự án Vue mới. Hướng dẫn này sẽ sử dụng Vue CLI (giao diện dòng lệnh) để giới thiệu ứng dụng của bạn:

  • npx @vue/cli@4.5.4 create --inlinePreset='{ "useConfigFiles": false, "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-eslint": { "config": "base", "lintOn": ["save"] } }, "vuex": true, "router": true, "routerHistoryMode": true }' vue-loading-indicators

Lệnh dài này là một tập hợp các giá trị đặt trước dựa trên các giá trị mặc định được cài đặt bởi @vue/cli/packages/@vue/cli/lib/options.js . Khi được định dạng lại để dễ đọc, nó trông giống như sau:

{   "useConfigFiles": false,   "plugins": {     "@vue/cli-plugin-babel": {},     "@vue/cli-plugin-eslint": {       "config": "base",       "lintOn": ["save"]     }   },   "vuex": true,   "router": true,   "routerHistoryMode": true }

Các cài đặt trước này thêm vue-router dưới dạng plugin ( cli-plugin-router ), thêm vuex làm plugin ( cli-plugin-vuex ), bật chế độ lịch sử , thêm Babel và thêm ESLint.

Đối với nhu cầu của hướng dẫn này, bạn sẽ không yêu cầu hỗ trợ TypeScript, Progressive Web App (PWA), Vuex, bộ xử lý trước CSS, kiểm tra đơn vị hoặc kiểm tra end-to-end (E2E).

Tiếp theo, thay đổi vào folder dự án mới:

  • cd vue-loading-indicators

Bạn có thể xem ứng dụng của bạn trong trình duyệt web bằng cách chạy lệnh sau:

  • npm run serve

Khi bạn truy cập localhost:8080 trong trình duyệt web, bạn sẽ thấy thông báo "Welcome to Your Vue.js App" . Cũng sẽ có các liên kết đến Trang chủ và trang Giới thiệu vì bạn đã bao gồm Bộ định tuyến Vue. Mục tiêu của bạn sẽ là thêm chỉ báo tải khi chuyển giữa hai trang này.

Nếu bạn muốn tìm hiểu thêm về Vue CLI, bạn có thể tham khảo tài liệu Vue CLI .

Bây giờ, bạn đã sẵn sàng để bắt đầu xây dựng.

Bước 2 - Sử dụng nprogress

Bạn có thể sử dụng bất kỳ chỉ báo tải nào mà bạn chọn. Đối với hướng dẫn này, bạn sẽ cài đặt nprogress để sử dụng làm chỉ báo tải của bạn .

Bạn sẽ không sử dụng npm hoặc yarn cho việc này. Bạn sẽ tham chiếu nó từ CDN (mạng phân phối nội dung).

Trong dự án Vue CLI đã tạo, chuyển đến public/index.html :

  • nano public/index.html

Và thêm đoạn mã bên dưới trước thẻ đóng </head> :

public / index.html
<head>   <!-- ... -->   <link href="https://unpkg.com/nprogress@0.2.0/nprogress.css" rel="stylesheet" />   <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script> </head>

nprogress cho thấy một số phương thức API , nhưng đối với bài viết này, bạn sẽ yêu cầu hai— start và done . Các phương pháp này bắt đầu và dừng thanh tiến trình.

nprogress cũng có thể được cấu hình để làm thế nào để tiến trình bộ tải. Mặc dù điều này có thể được tùy chỉnh theo cách thủ công, bài viết này sẽ sử dụng hành vi mặc định.

Bước 3 - Sử dụng Bộ định tuyến

Khi bạn sử dụng bộ định tuyến để thêm thanh tiến trình vào trang web của bạn , chức năng điển hình mà bạn mong đợi sẽ là:

“Khi user chuyển đến một trang mới, trình tải bắt đầu đánh dấu ở đầu trang hiển thị cho user tiến trình download của trang tiếp theo.”

Ảnh động gif mô tả thanh tiến trình tải trên đầu màn hình.

Vue Router đi kèm với các hook mà bạn có thể mắc vào để thực hiện chức năng này.

Mở file src/router/index.js :

  • nano src/router/index.js

Và thêm mã bên dưới trước khi export :

src / router / index.js
// ...  router.beforeResolve((to, from, next) => {   // If this isn't an initial page load.   if (to.name) {     // Start the route progress bar.     NProgress.start()   }   next() })  router.afterEach((to, from) => {   // Complete the animation of the route progress bar.   NProgress.done() })  export default router

Khi bạn kết nối với tuyến beforeResolve , bạn đang yêu cầu bộ định tuyến bắt đầu nprogress khi một yêu cầu trang xảy ra. afterEach cho bộ định tuyến biết rằng sau khi một liên kết đã được đánh giá hoàn toàn để dừng thanh tiến trình, nó không cần quan tâm đến việc yêu cầu trang có thành công hay không.

Đến đây, bạn có thể chạy ứng dụng của bạn :

  • npm run serve

Khi bạn truy cập localhost:8080 trong trình duyệt web của bạn , bạn có thể chuyển giữa Trang chủ và trang Giới thiệu . Khi làm như vậy, bạn sẽ thấy chỉ báo tải mà bạn đã thêm vào ứng dụng của bạn .

Bước tiếp theo sẽ khám phá thêm về các chỉ số tải.

Bước 4 - Khám phá cách sử dụng nâng cao

Trong phần này, bạn sẽ được giới thiệu các trường hợp sử dụng khác để tải các chỉ báo trong ứng dụng của bạn .

Chúng sẽ được trình bày với các ví dụ và bạn sẽ không trực tiếp thực hiện chúng trong hướng dẫn của bạn trừ khi bạn muốn tự mình khám phá.

Sử dụng thư viện HTTP

Một phần khác của ứng dụng mà bạn có thể cần thêm thanh tiến trình là khi user của bạn thực hiện yêu cầu AJAX.

Hầu hết các thư viện HTTP ngày nay đều có một loại phần mềm trung gian hoặc phần mềm chặn kích hoạt trước khi một yêu cầu hoặc phản hồi xảy ra. Do đó, bạn cũng có thể kết nối vào thư viện mà bạn lựa chọn.

Đối với hướng dẫn này, bạn sẽ sử dụng axios . Thư viện này sử dụng thuật ngữ đánh chặn.

Cài đặt axios :

  • npm install axios@0.20.0

Sau đó, tạo file HTTP.js :

  • nano HTTP.js

Sau đó, bạn có thể cấu hình axios để hoạt động như sau:

HTTP.js
import axios from 'axios'  // create a new axios instance const instance = axios.create({   baseURL: '/api' })  // before a request is made start the nprogress instance.interceptors.request.use(config => {   NProgress.start()   return config })  // before a response is returned stop nprogress instance.interceptors.response.use(response => {   NProgress.done()   return response })  export default instance

Mã này cho phép bạn xử lý các kết nối của bạn và nhận thanh tiến trình mỗi khi yêu cầu được thực hiện.

Sử dụng bộ nạp trong các thành phần

Đôi khi bạn không thực hiện yêu cầu trang hoặc yêu cầu AJAX. Nó có thể chỉ là một hành động phụ thuộc vào trình duyệt cần thời gian.

Hãy xem xét một thành phần DownloadButton tùy chỉnh có thể thay đổi trạng thái của nó thành trạng thái tải do một số hành động bên ngoài.

Thành phần sẽ chỉ nhận một chỗ dựa, loading :

<template>   <DownloadButton :loading="loading">Download</DownloadButton> </template>

Thành phần ví dụ sẽ giống như sau:

Lưu ý: Một số chi tiết tốt hơn của SVG viewBox , path và style không được xác định trong ví dụ này.

src / components / DownloadButton.vue
<template>   <button class="Button" :disabled="loading">     <svg v-if="loading" class="Button__Icon Button__Spinner" viewBox="...">       <path d="..."/>     </svg>     <svg v-else class="Button__Icon" viewBox="0 0 20 20">       <path d="..."/>     </svg>     <span v-if="!loading" class="Button__Content">       <slot/>     </span>   </button> </template>  <script> export default {   props: {     loading: { type: Boolean }   } } </script>  <style>   /* ... */ </style>

Đây là một minh chứng về những gì mã này sẽ tạo ra:

Ảnh động gif của user tương tác với nút download và vòng tròn tải xuất hiện.

Sử dụng các thành phần có thứ tự cao hơn cho các bộ nạp tái sử dụng

Bạn có thể tạo trình tải dưới dạng shell bọc (HOC) cho các thành phần của ta mà sau đó bạn có thể sửa đổi trạng thái của chúng thông qua đạo cụ.

Những loại bộ tải này phù hợp với các thành phần không ảnh hưởng đến trạng thái chung của ứng dụng của bạn, nhưng bạn vẫn muốn user cảm thấy được kết nối với hành động tại chỗ.

Đây là một ví dụ:

Lưu ý: Một số chi tiết tốt hơn về nội dung của Stats không được xác định trong ví dụ này.

// This loader will add an overlay with the text of 'Loading...' const Loader = {   template: `     <div class="{'is-loading': loading}">       <slot/>     </div>   `,   props: ['loading'] }  const Stats = {   template: `     <Loader :loading="updating">       ...     </Loader>   `,   props: ['updating'] }  const app = new Vue({   template: `     <div class="widget">       <Stats :updating="fetchingStats"/>       <Button @click="fetchingStats = true">         Latest stats       </Button>     </div>   `, })

Đây là một minh chứng về những gì mã này sẽ tạo ra:

Hộp có nút cập nhật, user nhấp vào cập nhật và hộp chuyển sang màu xám để hiển thị thông báo đang tải

Sử dụng các thành phần Vue không đồng bộ

Các thành phần không đồng bộ của Vue chỉ cho phép bạn tìm nạp các thành phần từ server khi bạn cần. Thay vì cung cấp các thành phần user cuối mà họ có thể không bao giờ sử dụng, user cuối chỉ được phục vụ những gì họ cần.

Các thành phần không đồng bộ cũng đi kèm với hỗ trợ root cho các trạng thái tải và lỗi , vì vậy không cần bất kỳ cấu hình bổ sung nào ở đây.

Đây là một ví dụ:

const AsyncComponent = () => ({   component: import('./MyComponent.vue'),   // show this component during load   loading: LoadingComponent,   // show this component if it fails to load   error: ErrorComponent,   // delay before showing the loading component   delay: 200,   // error if the component failed to loadin is allotted time in milliseconds default in Infinity   timeout: 3000 })

Để sử dụng các thành phần không đồng bộ với phương thức ở đây, bạn cần sử dụng tải lười Vue Router.

Kết luận

Trong bài viết này, bạn đã khám phá một số cách để thêm chỉ báo tải vào ứng dụng Vue.js của bạn . Chỉ số tải là một công cụ hữu ích để cung cấp phản hồi cho user .

Nếu bạn muốn tìm hiểu thêm về Vue.js, hãy xem trang chủ đề Vue.js của ta để biết các bài tập và dự án lập trình.

Tags:

Các tin liên quan