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.

Queremos mejorar la calidad de nuestros cursos. Por favor ayúdanos llenando esta pequeña encuesta
NETCore Api + VueJs SPA: CORS y nuestro primer listar con Element-UI
Actualizado el 19 Enero, 2018 y leído 2,088 veces
Calificación: 10.00 / 10

NETCore Api + VueJs SPA: CORS y nuestro primer listar con Element-UI

Anexsoft

Habilitando CORS

Lo primero que debemos hacer es habilitar CORS para permitir realizar consultas AJAX a otro servidor que no pertenezca a nuestro dominio actual. Para esto nos vamos a StartUp y creamos un Policy o una política.

public void ConfigureServices(IServiceCollection services)
{
    var connection = Configuration.GetConnectionString("Dev");
    services.AddDbContext<StudentDbContext>(options => options.UseSqlServer(connection));

    services.AddTransient<IStudentService, StudentService>();

    services.AddCors(options =>
    {
        options.AddPolicy("AllowSpecificOrigin", builder =>
            builder.AllowAnyHeader()
                   .AllowAnyMethod()
                   .AllowAnyOrigin()
        );
    });

    services.AddMvc();
}

Lo que estamos diciéndole a esta política es que para cualquiera header, método (put, post, delete, get) u orígen todos estan permitodos. No hay restricciones, es decir que es una política de libre mercado (jaja).

 

Y luego le decimos a NETCore que queremos usar la política creada.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseCors("AllowSpecificOrigin");

    app.UseMvc();
}

 

Creando nuestro servicio en VueJs SPA

En la carpeta src/services vamos a crear nuestro servicio con la finalidad de poder centralizar la lógica y que este sea reutilizable en cualquier parte de nuestro proyecto. Adicionalmente, vamos a registrarlo con Vuex para que sea accesible desde cualquier otro componente evitando la tarea de tener que hacer un import en cada componente.

class StudentService {
    axios
    baseUrl

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

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

export default StudentService

 

Luego en el archivo src/store/services.js declaramos nuestra ruta de la API y lo inyectamos a nuestro constructor.

import Axios from 'axios'
import exampleService from '../services/ExampleService'
import studentService from '../services/StudentService'

let apiUrl = 'http://localhost:64550/'

// Axios Configuration
Axios.defaults.headers.common.Accept = 'application/json'

export default {
    exampleService: new exampleService(Axios),
    studentService: new studentService(Axios, apiUrl)
}

 

Creando nuestro componente

Creamos una archivo en src/components/student/index.vue y declaramos lo siguiente.

<template>
<div>
    <h2>Estudiantes</h2>
    <el-table v-loading="loading" :data="data" style="width: 100%">
        <el-table-column prop="name" label="Nombre" sortable></el-table-column>
        <el-table-column prop="lastName" label="Apellido" width="200" sortable></el-table-column>
        <el-table-column prop="bio" label="Acerca de mi" width="400" sortable></el-table-column>
      </el-table>
</div>
</template>

<script>
export default {
  name: "StudentIndex",
  data() {
    return {
        data: [],
        loading: false
    };
  },
  created() {
      let self = this;
      self.getAll();
  },
  methods: {
    getAll() {
      let self = this;

      self.loading = true;

      self.$store.state.services.studentService
        .getAll()
        .then(r => {
          self.loading = false;
          self.data = r.data;
        }).catch(r => {
          self.$message({
            message: "Ocurrió un error inesperado",
            type: "error"
          });
        });
    }
  }
};
</script>

No olvidemos decirle a nuestro VueRouter (src/router.index.js) que X ruta pertenece a X componente.

import Vue from 'vue'
import Router from 'vue-router'

import Default from '@/components/Default'
import ExampleIndex from '@/components/example/Index'
import ExampleView from '@/components/example/View'
import StudentIndex from '@/components/students/Index'
import StudentCreateOrUpdate from '@/components/students/CreateOrUpdate'

Vue.use(Router)

const routes = [
  { path: '/', name: 'Default', component: Default },
  { path: '/example', name: 'ExampleIndex', component: ExampleIndex },
  { path: '/example/:id', name: 'ExampleView', component: ExampleView },
  { path: '/students/', name: 'StudentIndex', component: StudentIndex },
  { path: '/students/add', name: 'StudentCreate', component: StudentCreateOrUpdate },
  { path: '/students/:id/edit', name: 'StudentEdit', component: StudentCreateOrUpdate },
]

export default new Router({
  routes
})

¡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

¿Cómo nos conociste?

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.