Refactor App.vue and Home.vue components
This commit is contained in:
parent
f4f9dcb163
commit
e2b539e94d
|
@ -1,59 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<v-app id="inspire">
|
<v-app id="inspire">
|
||||||
<v-main>
|
<v-main>
|
||||||
<v-container style="max-width: 960px">
|
<router-view />
|
||||||
<v-row>
|
|
||||||
<v-col>
|
|
||||||
<v-card title="Funciona!">
|
|
||||||
<v-card-text>
|
|
||||||
<p>Este é um projeto Vue 3 com Vite e Vuetify.</p>
|
|
||||||
<p>
|
|
||||||
Para começar, edite o arquivo <code>src/web/App.vue</code> e
|
|
||||||
salve para recarregar a página.
|
|
||||||
</p>
|
|
||||||
<v-btn
|
|
||||||
variant="text"
|
|
||||||
block
|
|
||||||
size="x-large"
|
|
||||||
href="https://git.pp.ifms.edu.br/1839811/ifms-fullstack-docker-example"
|
|
||||||
target="_blank"
|
|
||||||
><v-icon>mdi-git</v-icon></v-btn
|
|
||||||
>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
|
|
||||||
<v-col>
|
|
||||||
<v-card title="Data fetching">
|
|
||||||
<v-card-text>
|
|
||||||
<p>
|
|
||||||
Este é um teste para verificar a comunicação do frontend com o
|
|
||||||
servidor
|
|
||||||
</p>
|
|
||||||
<p>Clique no botão para buscar os dados do servidor.</p>
|
|
||||||
</v-card-text>
|
|
||||||
<v-card-actions>
|
|
||||||
<v-btn @click="fetchData" color="primary">Buscar dados</v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
<v-card-text>
|
|
||||||
<p>{{ data }}</p>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-col>
|
|
||||||
</v-row>
|
|
||||||
</v-container>
|
|
||||||
</v-main>
|
</v-main>
|
||||||
</v-app>
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const data = ref('')
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
|
||||||
const response = await fetch(`${import.meta.env.VITE_SERVER_URL}/hello`)
|
|
||||||
const result = await response.json()
|
|
||||||
|
|
||||||
data.value = result
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
|
@ -1,7 +1,56 @@
|
||||||
<template>
|
<template>
|
||||||
<HelloWorld />
|
<v-container style="max-width: 960px">
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-card title="Funciona!">
|
||||||
|
<v-card-text>
|
||||||
|
<p>Este é um projeto Vue 3 com Vite e Vuetify.</p>
|
||||||
|
<p>
|
||||||
|
Para começar, edite o arquivo <code>src/web/App.vue</code> e salve
|
||||||
|
para recarregar a página.
|
||||||
|
</p>
|
||||||
|
<v-btn
|
||||||
|
variant="text"
|
||||||
|
block
|
||||||
|
size="x-large"
|
||||||
|
href="https://git.pp.ifms.edu.br/1839811/ifms-fullstack-docker-example"
|
||||||
|
target="_blank"
|
||||||
|
><v-icon>mdi-git</v-icon></v-btn
|
||||||
|
>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col>
|
||||||
|
<v-card title="Data fetching">
|
||||||
|
<v-card-text>
|
||||||
|
<p>
|
||||||
|
Este é um teste para verificar a comunicação do frontend com o
|
||||||
|
servidor
|
||||||
|
</p>
|
||||||
|
<p>Clique no botão para buscar os dados do servidor.</p>
|
||||||
|
</v-card-text>
|
||||||
|
<v-card-actions>
|
||||||
|
<v-btn @click="fetchData" color="primary">Buscar dados</v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
<v-card-text>
|
||||||
|
<p>{{ data }}</p>
|
||||||
|
</v-card-text>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script setup lang="ts">
|
||||||
import HelloWorld from '@/components/HelloWorld.vue'
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const data = ref('')
|
||||||
|
|
||||||
|
const fetchData = async () => {
|
||||||
|
const response = await fetch(`${import.meta.env.VITE_SERVER_URL}/hello`)
|
||||||
|
const result = await response.json()
|
||||||
|
|
||||||
|
data.value = result
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user