Refactor App.vue and Home.vue components
This commit is contained in:
parent
f4f9dcb163
commit
e2b539e94d
|
@ -1,59 +1,7 @@
|
|||
<template>
|
||||
<v-app id="inspire">
|
||||
<v-main>
|
||||
<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>
|
||||
<router-view />
|
||||
</v-main>
|
||||
</v-app>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
<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>
|
||||
|
|
Loading…
Reference in New Issue
Block a user