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