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: Registrando un nuevo estudiante
Actualizado el 20 Enero, 2018 y leído 1,147 veces
Calificación: 10.00 / 10

NETCore Api + VueJs SPA: Registrando un nuevo estudiante

Anexsoft

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

¡Adquiera ya!

  • 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
  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter

Ú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.