Vue.js + dotNet Core

Nesta aula iremos começar a integrar nossa API feita em .net core com o framework de font-end Vue.js retornando uma lista de clientes por HTTP.

Assine nossa Comunidade

API .Net Core - Vue.js

O Vue.js é um framework front-end que foi criado por um dos criadores do framework angularjs, portanto, o vuejs se aproxima muito da maneira que o angularjs funciona. O objetivo da aula de hoje é criar uma aplicação com Vue.js, buscando os dados da API de clientes e mostrá-los na tela.

Após fazer a instalação do Vue.js ou incluir o CDN no projeto, criaremos um projeto com o comando vue create.

      
        vue create aula_torne-se

Será criada uma pasta com o nome do projeto, entraremos na pasta aula_torne e abriremos o projeto com o VsCode.

Vamos executar o comando npm run server para levantar o servidor na porta padrão 8080.

      
        npm run server

A estrutura das pastas e arquivos do projeto será:

node_modules
public

index.html: Neste arquivo,na tag div id=app, é o local que será renderizado todo o conteúdo do vue.js, que está no arquivo main.js abaixo, dentro da pasta src.

main.js: faz a importação de todos os seus componentes, bibliotecas que você vai usar dentro do vue.js.

            
              import Vue from 'vue'
              import App from './App.vue'

              Vue.config.productionTip = false 

              new Vue ({
                render: h => h(App),
              }).$mount('#app')

App.vue: é o arquivo principal onde vai renderizar nosso layout.Dentro dele tem outro import, o import de Clientes, que dentro dele tem um componente.

            
              < template>
                < Clientes msg="Olá, bem vindo a aula do torne-se um programador."
              < /template>
          
              import Clientes from './componentes/Clientes.vue'
              
              export default{
               name: 'App',
               components: {
                Clientes
               }
              }

Também dentro do arquivo App.vue tem o arquivo de css por padrão.
A pasta components contém o componente Clientes.vue onde a mensagem é passada por parâmetro através da variável msg.

          
            < template>
              < /h1>{{ msg}} < /h1>
            < /template>

Criaremos uma tabela dentro do componente Clientes para mostrar os dados do arquivo JSON. Faremos um loop dos dados utilizando o v-for.

          
            < table >
              < thead>
                < tr>
                    < th >Id< /th>
                    < th >Nome< /th>
                    < th >Telefone< /th>
                    < th >Endereço>< /th>
                < /tr>
              < /thead>
              < tbody>
                < tr v-for="cliente" in clientes  v-bind:key="cliente.id">
                    < td >{{cliente.id}}< /td>
                    < td >{{cliente.nome}}< /td>
                    < td >{{cliente.telefone}}< /td>
                    < td >{{cliente.endereco}}< /td>
                < /tr>
              < /tbody>
           < /table>

gitignore

babel.config.js

package-lock.json

package.json

README.md

Para retornar os dados dos clientes utilizaremos um componente chamado axios, que faz a requisição http para a API.

      
        npm install axios --save

No componente Cliente.vue, vamos fazer a requisição para a API utilizando o axios e assim os dados do arquivo JSON serão mostrados na tabela.

      
           
        import axios from 'axios'
        
        export default{
         name: 'Clientes',
         props: {
          msg:String
         },
         data: () => {
          return {
            clientes: [],
          }
         },
         methods:{
          lista: (scope) => {
            axios.get(`https://localhost:5001/clientes`).then((res) => ){
              scope.clientes = res.data
            })
          }
         },
         created() {
          this.lista(this)
         }
        }