- vừa được xem lúc

Gọi API trong project Nuxtjs

0 0 22

Người đăng: Bùi Huy Hoàng

Theo Viblo Asia

Mở Đầu

Xin chào các bạn hôm nay mình sẽ giới thiệu đến mọi người một cách gọi api trong project nuxtjs. Để xem nó có gì khác so với gọi api trong Angular mà mình cũng đã có dịp giới thiệu ở bài một bài trước đó nhé ? .

Chuẩn bị

Đầu tiên chúng ta sẽ cần tạo api mình sẽ dùng mockpi để tạo api nhé mọi người vào đây tạo projects mới ấn New resource đặt tên cho resource rồi thêm các trường, kiểu dữ liệu, cuối cùng ấn Create, rồi ấn vào tên resource đó nó sẽ hiển thị ra như thế này

Ở đây đây mình tạo 1 api có các trường là: id, ngày tạo, tên, email, và địa chỉ. Chúng ta cần copy địa chỉ của api trên URL để tí nữa còn gọi nó vào.

Tiếp theo là bên Nuxjs. Ở bài trước mình đã tạo một project Nuxjs và có sử dụng elementUI để tạo ra một trang giao diện admin. Ở bài này mình sẽ sử dụng lại giao diện đó để có thể gọi api và đổ dữ liệu ra đó. Nếu các bạn quan tâm thì có thể xem lại hai bài viết Tạo một dự án Nuxtjs, tìm hiểu cấu trúc thư mục trong NuxtjsXây dựng UI web nhanh hơn với Element UI thì các bạn có thể tham khảo tại đây.

Thực hiện

Như ở bài Xây dựng UI web nhanh hơn với Element UI thì mình đã có một trang index.vue là nơi chứa giao diện, trong phần export default mình thêm đoạn code như sau

 data() { return { tableData: [] }; }, async fetch() { this.tableData = await fetch( "https://5fc09c43cb4d020016fe5b04.mockapi.io/Uses" ).then(res => res.json()); },

Hàm async fetch() được dùng để gọi dữ liệu api theo URL và trả về dạng json. Các bạn muốn lấy data của api nào thì chỉ cần chuyền đúng URL Của api đó vào là được. Hàm data chứa data ở đây là theo kiểu mảng. Chúng ta cần chuyền data vào bảng để hiển thị ra bảng ở đây chính là components tableList hôm trước mình tạo , Nhưng ở đây chúng ta lại đang gọi data ở file index nên không thể và cũng không nên trực tiếp gọi tới parent data trong child component template. Vì thế mình sử dụng một thuộc tính đó là props để có thể truyền data từ component cha xuống cho component con.

Ở file tableList.vue mình có đoạn props để lấy data như sau:

<script>
export default { props: { tableData: Array }
};
</script>

Còn đây là code phần table

<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="id" label="STT" width="80"></el-table-column> <el-table-column label="Name" width="180"> <template slot-scope="scope"> <el-popover trigger="hover" placement="top"> <p>Name: {{ scope.row.name }}</p> <div slot="reference" class="name-wrapper"> <el-tag size="medium">{{ scope.row.name }}</el-tag> </div> </el-popover> </template> </el-table-column> <el-table-column label="Date" width="280"> <template slot-scope="scope"> <i class="el-icon-time"></i> <span style="margin-left: 10px">{{ scope.row.createdAt }}</span> </template> </el-table-column> <el-table-column prop="Email" label="Email" width="280"></el-table-column> <el-table-column prop="add" label="Address" width="280"></el-table-column> <el-table-column label="Operations"> <template> <el-button size="mini">Edit</el-button> <el-button size="mini" type="danger">Delete</el-button> </template> </el-table-column> </el-table>
</template>

Kết quả chúng ta được

Kết luận

Như vậy là mình đã giới thiệu một cách call api trong nuxtjs ngoài ra chúng ta còn có thể sử dụng axios để gọi api. Bài tiếp theo mình sẽ làm thêm chức năng thêm sửa xóa.... Bài viết của mình xin được dừng lại ở đây, cảm ơn các bạn đã quan tâm. Mọi ý kiến đóng góp các bạn hãy comment xuống bên dưới để mình được biết và bổ sung cho bài viết hoàn thiện hơn. Một lần nữa cảm ơn các bạn.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Ví dụ CRUD với Laravel và Vuejs.

1. Cài đặt Laravel. composer create-project --prefer-dist laravel/laravel vuelaravelcrud. .

0 0 163

- vừa được xem lúc

Bài 1: Cài đặt Vue và chạy chương trình Hello world đầu tiên

Ở bài đầu tiên này mình sẽ hướng dẫn các bài cài đặt VueJS vào project Laravel, sau đó chúng ta sẽ cùng xem những thứ cơ bản của Vue nhé. Vì Laravel đã hỗ trợ tích hợp VueJS nên việc cài đặt của chúng ta sẽ hết sức đơn giản.

0 0 138

- vừa được xem lúc

Lazy loading and code splitting in Vue.js

Việc giữ cho ứng dụng của bạn tải nhanh ngày càng khó hơn. Trong loạt bài này, tôi sẽ đi sâu vào các kỹ thuật tối ưu hiệu suất Vue và bạn có thể sử dụng trong các ứng dụng Vue.

0 0 115

- vừa được xem lúc

Validating Vue.js Forms Using Vuelidate

Introduction. Validate thông tin đầu vào trên các ứng dụng web là rất quan trọng.

0 0 217

- vừa được xem lúc

5 Good Practices mình đang sử dụng trong Vuejs

Mở đầu. Mình đã sử dụng vuejs được cũng được 1 năm trở lại đây.

0 0 101

- vừa được xem lúc

[P5] VueJS - Một vài Interpolations khác trong Vue

Ở bài viết trước, mình đã nói về một vài keyword trong Vue như v-if, v-else, v-show, v-for, ... Chúng thực chất là các syntax đặc biệt của Vue để thao tác linh hoạt với các DOM ảo, được gọi là Interpolations. Ngoài ra, Vue còn các Interpolations khác. Mục đích của nó thì đã quá rõ ràng, hiển thị tex

0 0 61