Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

NETCore Api + VueJs SPA: Actualizando y eliminado un estudiante
Actualizado el 20 Enero, 2018 y leído 1,026 veces
Calificación: 10.00 / 10

NETCore Api + VueJs SPA: Actualizando y eliminado un estudiante

Anexsoft

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"
        });
      });
  }

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2018 Anexsoft, blog y cursos online de TI.