API .Net Core - Vue.js - PUT/DELETE

Na aula de hoje iremos aprender como fazer um alteração e exclusão de dados em uma API .Net Core utilizando o framework de front-end Vue.js.

Vamos inserir dois componentes do tipo button : um para editar e outro para excluir dados.

      
        < 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>
                < td >
                  < button class="btn btn-primary"> Editar < /button> 
                < /td>
                < td >
                  < button class="btn btn-danger"> Excluir < /button> 
                < /td>

            < /tr>
          < /tbody>
       < /table>
       
    

Vamos criar o método chamado excluir(), utilizando o método delete:

      
           
        import axios from 'axios'
        
        export default{
         name: 'Clientes',
         props: {
          msg:String
         },
         data: () => {
          return {
            clientes: [],
          }
         },
         methods:{
          lista() => {
            axios.get(`https://localhost:5001/clientes`).then((res) => ){
              this.clientes = res.data
            })
          },
          salvar()=> {
            axios.post(`https://localhost:5001/clientes`,
            {
              nome: document.getElementById("nome").value,
              telefone: document.getElementById("telefone").value,
              endereco: document.getElementById("endereco").value
            }).then(() => {
              this.lista()
            }),

          excluir(id)=> {
            if(confirm("Confirm a exclusão?")){
              axios.delete(`https://localhost:5001/clientes/${id}`.then(() => {
                this.lista()
              })
            }
         },
         created() {
          this.lista()
         }
        }
      
       
    

Precisamos fazer a chamada do método no botão Excluir

      
        v-on:click="excluir(cliente.id)
       
    

      
        < 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>
                < td >
                  < button class="btn btn-primary" v-on:click="editar(cliente)"> Editar < /button> 
                < /td>
                < td >
                  < button class="btn btn-danger" v-on:click="excluir(cliente.id)"> Excluir < /button> 
                < /td>

            < /tr>
          < /tbody>
       < /table>
       
    

Vamos criar a função para Editar() os dados e mostrá-los na tela para serem alterados. Criaremos também um objeto chamado cliente em memória que vamos gerenciar o estado, porque se ele estiver preenchido vamos simplesmente fazer a operação, senão deixaremos vazio.

      
        cliente: undefined
       
    

      
           
        import axios from 'axios'
        
        export default{
         name: 'Clientes',
         props: {
          msg:String
         },
         data: () => {
          return {
            clientes: [],
            cliente: undefined,
            mensagem:""
          }
         },
         methods:{
          lista() => {
            axios.get(`https://localhost:5001/clientes`).then((res) => ){
              this.clientes = res.data
            })
          },
          salvar()=> {
            axios.post(`https://localhost:5001/clientes`,
            {
              nome: document.getElementById("nome").value,
              telefone: document.getElementById("telefone").value,
              endereco: document.getElementById("endereco").value
            }).then(() => {
              this.lista()
            }),          
          editar(cliente) {
            document.getElementById("nome").value = cliente.nome,
            document.getElementById("telefone").value = cliente.telefone,
            document.getElementById("endereco").value = cliente.endereco 
            this.cliente = cliente
         },
         created() {
          this.lista()
         }
        }
      
       
    

Vamos criar a função para alterar() para alterar os dados que envia diretamente para o POST. Iremos utilizar o cliente que foi criado em memória para poder atualizá-lo. Vamos pegar os dados na tela e devolver novamente para o objeto cliente.

      
           
        import axios from 'axios'
        
        export default{
         name: 'Clientes',
         props: {
          msg:String
         },
         data: () => {
          return {
            clientes: [],
            cliente: undefined,
            mensagem:""
          }
         },
         methods:{
          lista() => {
            axios.get(`https://localhost:5001/clientes`).then((res) => ){
              this.clientes = res.data
            })
          },
          salvar()=> {
            if(this.cliente){
              this.alterar()
              return
            }
            axios.post(`https://localhost:5001/clientes`,
            {
              nome: document.getElementById("nome").value,
              telefone: document.getElementById("telefone").value,
              endereco: document.getElementById("endereco").value
            }).then(() => {
              this.lista()
            }),          
          editar(cliente) {
            document.getElementById("nome").value = cliente.nome,
            document.getElementById("telefone").value = cliente.telefone,
            document.getElementById("endereco").value = cliente.endereco 
            this.cliente = cliente
          },
          alterar() {
            this.cliente.nome = document.getElementById("nome").value 
            this.cliente.telefone = document.getElementById("telefone").value 
            this.cliente.endereco =  document.getElementById("endereco").value 
            
            axios.put(`https://localhost:5001/clientes/${this.cliente.id}`,this.cliente).then(() => ){
              this.lista()
              this.cliente = undefined
              document.getElementById("nome").value = ""
              document.getElementById("telefone").value = ""
              document.getElementById("endereco").value = "" 
          })
        },
        created() {
          this.lista()
         }
        }