NETCore Api + VueJs SPA: Actualizando y eliminado un estudiante

Es hora de implementar los métodos pendientes de nuestro proyecto, el eliminar y actualizar.

StudentService

Nuestro servicio queda de la siguiente manera

class StudentService {
    axios
    baseUrl

    constructor(axios, apiUrl) {
        this.axios = axios
        this.baseUrl = `${apiUrl}student`
    }

    get(id) {
        let self = this;
        return self.axios.get(`${self.baseUrl}/${id}`);
    }

    getAll() {
        let self = this;
        return self.axios.get(`${self.baseUrl}`);
    }

    add(model) {
        let self = this;
        return self.axios.post(`${self.baseUrl}`, model);
    }

    update(model) {
        let self = this;
        return self.axios.put(`${self.baseUrl}`, model);
    }

    remove(id) {
        let self = this;
        return self.axios.delete(`${self.baseUrl}/${id}`);
    }
}

export default StudentService

CreateOrUpdate.vue

En nuestro componente no hay mucha ciencia, recuerden que ya teníamos todo maqueteado y vamos a reuilizarlo tanto como para crear o editar. Simplemente modificamos el script y lo que hice fue agregar un método Get para obtener la información del estudiante actualizar.

La forma de obtener el parámetro especificado en la url es la siguiente

self.get(self.$route.params.id);

El código completo con los cambios sería el siguiente:

export default {
  name: "StudentCreateOrUpdate",
  data() {
    return {
      loading: false,
      form: {
        studentId: 0,
        name: null,
        lastName: null,
        bio: null
      },
      rules: {
        name: [
          { required: true, message: "Debe ingresar un nombre" },
          { min: 3, message: "Debe contener como mínimo 3 caracteres" }
        ],
        lastName: [{ required: true, message: "El apellido es requerido" }],
        bio: [{ required: true, message: "Este campo es requerido" }]
      }
    };
  },
  computed: {
    pageTitle() {
      return this.form.studentId === 0 ? "Nuevo estudiante" : `${this.form.lastName}, ${this.form.name}`;
    }
  },
  created() {
    let self = this;
    self.get(self.$route.params.id);
  },
  methods: {
    get(id) {
      if(id == undefined) return;

      let self = this;

      self.loading = true;
      self.$store.state.services.studentService
        .get(id)
        .then(r => {
          self.loading = false;
          self.form.studentId = r.data.studentId;
          self.form.name = r.data.name;
          self.form.lastName = r.data.lastName;
          self.form.bio = r.data.bio;
        })
        .catch(r => {
          self.$message({
            message: "Ocurrió un error inesperado",
            type: "error"
          });
        });
    },
    save() {
      let self = this;
      self.$refs["ruleForm"].validate(valid => {
        if (valid) {
          self.loading = true;

          if(self.form.studentId > 0) {
            self.$store.state.services.studentService
            .update(self.form)
            .then(r => {
              self.loading = false;
              self.$router.push('/students');
            })
            .catch(r => {
              self.$message({
                message: "Ocurrió un error inesperado",
                type: "error"
              });
            });
          } else {
            self.$store.state.services.studentService
              .add(self.form)
              .then(r => {
                self.loading = false;
                self.$router.push('/students');
              })
              .catch(r => {
                self.$message({
                  message: "Ocurrió un error inesperado",
                  type: "error"
                });
              });
          }
        }
      });
    }
  }
};

Implementando el eliminar

Modificamos nuestra tabla para agregar botones de Element-UI y le asignamos 2 eventos, uno para editar y el otro para eliminar.

<el-table v-loading="loading" :data="data" style="width: 100%">
    <el-table-column prop="name" label="Nombre" sortable>
      <template slot-scope="scope">
        {{ scope.row.lastName }}, {{ scope.row.name }}
      </template>
    </el-table-column>
    <el-table-column prop="bio" label="Acerca de mi" width="500" sortable></el-table-column>
    <el-table-column align="right">
      <template slot-scope="scope">
        <el-button type="danger" @click="remove(scope.row.studentId)">Eliminar</el-button>
        <el-button @click="$router.push(`/students/${scope.row.studentId}/edit`)">Editar</el-button>
      </template>
    </el-table-column>
</el-table>

En la parte del script implementas la lógica para eliminar el estudiante

remove(id) {
  let self = this;

  self
    .$confirm("Esta seguro de realizar esta acción?", "Confirmación", {
      confirmButtonText: "Si",
      cancelButtonText: "Cancelar",
      type: "warning"
    })
    .then(() => {
      _remove();
    })
    .catch(() => {});

  function _remove() {
    self.$store.state.services.studentService
      .remove(id)
      .then(r => {
        self.loading = false;
        self.getAll();
      })
      .catch(r => {
        self.$message({
          message: "Ocurrió un error inesperado",
          type: "error"
        });
      });
  }