Vue aplikace pro přístup k API č.8 – Vypíšeme si produkty v naší vue aplikaci
- Vue aplikace pro přístup k API č.1 – Instalace Vue
- Vue aplikace pro přístup k API č.2 – Připojení k našemu API
- Vue aplikace pro přístup k API č.3 – Přidáme si do Vue stránky
- Vue aplikace pro přístup k API č.4 – Přihlášení ve Vue
- Vue aplikace pro přístup k API č.5 – Zabezpečení stránek pouze pro přihlášené
- Vue aplikace pro přístup k API č.6 – Přidáme si Vuetify
- Vue aplikace pro přístup k API č.7 – Vytvoříme si základní layout aplikace
- Vue aplikace pro přístup k API č.8 – Vypíšeme si produkty v naší vue aplikaci
Tak konečně se dostáváme k výpisu produktů z našeho API.
Upravíme si teda Products.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
<!-- views/Products.vue --> <template> <v-container> <v-card> <v-card-title> Produkty <v-spacer></v-spacer> <v-text-field v-model="search" append-icon="mdi-magnify" label="Hledat" single-line hide-details ></v-text-field> </v-card-title> <v-data-table :headers="headers" :items="products" :search="search" :loading="loading" class="elevation-1" > <template v-slot:loading> <v-skeleton-loader type="table-row" class="my-2" ></v-skeleton-loader> </template> <template v-slot:no-data> Žádné produkty k zobrazení. </template> <template v-slot:no-results> Nenalezeny žádné výsledky pro "{{ search }}" </template> <!-- Volitelně můžete přidat formátování pro jednotlivé sloupce --> <template v-slot:item.price="{ item }"> {{ formatPrice(item.price) }} Kč </template> </v-data-table> </v-card> <!-- Error Alert --> <v-alert v-if="error" type="error" class="mt-4" dismissible > {{ error }} </v-alert> </v-container> </template> <script> import api from '@/services/api' export default { name: 'Products', data() { return { search: '', loading: false, error: null, products: [], headers: [ { title: 'Název', align: 'start', key: 'name', // upravte podle skutečného názvu pole z vašeho API sortable: true }, { title: 'Popis', key: 'description', sortable: true }, { title: 'Cena', key: 'price', sortable: true, align: 'end' } ] } }, methods: { async fetchProducts() { this.loading = true this.error = null try { const response = await api.get('/products') // upravte endpoint podle vašeho API this.products = response.data } catch (error) { console.error('Chyba při načítání produktů:', error) this.error = 'Nepodařilo se načíst produkty. Zkuste to prosím později.' } finally { this.loading = false } }, formatPrice(price) { return new Intl.NumberFormat('cs-CZ').format(price) } }, mounted() { this.fetchProducts() } } </script> <style scoped> .v-data-table { width: 100%; } </style> |
a ještě si musíme upravit api.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
// services/api.js import axios from 'axios'; import Cookies from 'js-cookie' const api = axios.create({ baseURL: 'http://api.local/api', // přidáno /api do base URL timeout: 5000, withCredentials: true, headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' } }); // Přidejte authtoken do každého požadavku api.interceptors.request.use(config => { const token = Cookies.get('authtoken') // změněno z 'auth_token' na 'authtoken' if (token) { // Přidáme token do hlavičky config.headers['authtoken'] = token // pro jistotu přidáme i tuto hlavičku } console.log('Request headers:', config.headers) // pro debugging return config }, error => { return Promise.reject(error) }) api.interceptors.response.use( response => { console.log('Response:', response) return response }, error => { console.error('Error:', error.config, error.message) if (error.response?.status === 401) { Cookies.remove('authtoken') window.location.href = '/login' } return Promise.reject(error) } ) export default api; |
a zkusíme si zobrazit produkty z naší databáze
Krása střídá nádheru. Funguje nám to