NETCore Api + VueJs SPA: Registrando un nuevo estudiante

Ahora nos toca enviar la información a nuestro endpoint para registrar un nuevo estudiante.

Rodríguez Patiño, Eduardo
2,179 lecturas
Rodríguez Patiño, Eduardo
Hemos migrado hace poco nuestras publicaciones del blog antiguo. Si crees que esta se encuentra incompleta o sin coherencia deja un comentario para restaurarla manualmente.

En esta lección vamos agregar un nuevo método a nuestro studentService para hacer un llamado a nuestro endpoint y registrar al nuevo estudiante.

StudentService

class StudentService {
    axios
    baseUrl
    constructor(axios, apiUrl) {
        this.axios = axios
        this.baseUrl = `${apiUrl}student`
    }
    getAll() {
        let self = this;
        return self.axios.get(`${self.baseUrl}`);
    }
    add(model) {
        let self = this;
        return self.axios.post(`${self.baseUrl}`, model);
    }
}

Nuestro formulario con Element-UI

Luego vamos a crear nuestro formulario y le agregamos reglas de validación usando Element-UI

<template>
<div>
    <h2>{{ pageTitle }}</h2>
    <el-form v-loading="loading" :model="form" :rules="rules" ref="ruleForm">
      <el-form-item label="Nombre" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="Apellido" prop="lastName">
        <el-input v-model="form.lastName"></el-input>
      </el-form-item>
      <el-form-item label="Acerca de mí" prop="bio">
        <el-input type="textarea" v-model="form.bio"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="save" type="primary">Guardar</el-button>
      </el-form-item>
    </el-form>
</div>
</template>

Y en la parte inferior con respecto al javascript vamos agregar los métodos de guardar, las propiedades de nuestro modelo estudiante y las reglas de validación.

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.name;
    }
  },
  created() {},
  methods: {
    save() {
      let self = this;
      self.$refs["ruleForm"].validate(valid => {
        if (valid) {
          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"
              });
            });
        }
      });
    }
  }
};
¿Te gustó nuestra publicación?
Suscríbete a nuestro boletín