1839811/ifms-fullstack-docker-example
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor App.vue and Home.vue components

Browse Source
This commit is contained in:
Douglas Barone 2024-03-20 11:58:48 -04:00
parent f4f9dcb163
commit e2b539e94d
2 changed files with 53 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/web/App.vue
View File

@ -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>

55
src/web/views/Home.vue
View File

@ -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>