Aplicacion del uso de Rutas: Crear un post

En todo proyecto hay un momento en el que debemos crear elementos o introducir información. En este instante, el uso de las rutas en nuestro proyecto, sea del tipo que sea, es clave tal y como vimos con la creación de formularios.

Aunque trabajaremos sobre el mismo componente, vamos a ir dividiendo en partes su creación para poder tener una mejor comprensión.

<template>

    <h1>Create Post</h1>

    <div class="grid grid-cols-2 gap-3">
        <o-field label="Content">
            <o-input v-model="form.content" type="textarea"></o-input>
        </o-field>
        <o-field label="Description">
            <o-input v-model="form.description" type="textarea"></o-input>
        </o-field>
        <o-field label="Slug">
            <o-input v-model="form.slug"></o-input>
        </o-field>
        <o-field label="Posted">
            <o-select v-model="form.posted" placeholder="Selected a option">
                <option value="yes">Yes</option>
                <option value="Not">No</option>
            </o-select>
        </o-field>
        <o-field label="Category">
            <o-select v-model="form.category_id" placeholder="Selected a option">
                <option value=""></option>
                <option v-for="c in categories" v-bind:key="c.id" :value="c.id">{{ c.title }}</option>
            </o-select>
        </o-field>

    </div>
    <div class="mt-3"></div>
    <o-button variant="primary" @click="send">Send</o-button>

</template>

Esto sería la estructura del componente de crear un post. Una vez tenemos este esqueleto, faltaría hacer la parte del proyecto reactivo:

<script>
export default {
    async mounted() {
        this.getCategory()
    },
    data() {
        return {
            post: '',
            form: {
                title: '',
                slug: '',
                description: '',
                content: '',
                category_id: '',
                posted: '',

            },
            categories: []
        }
    },
    methods: {

        getCategory() {
            this.$axios.get('/api/category/all').then((res) => {
                this.categories = res.data
            })
        },
        send() {
            this.$axios.post('/api/post', this.form)
        } 
    }
},
</script>

En las líneas destacadas vemos como hacemos uso del método get() y del método post() que nos permite hacer consumo de nuestra api.

Crear un post con validaciones

Está claro que en la función send() anterior nos hace falta validaciones y recibir un mensaje de confirmación o capturar errores, y para ello debemos editar parte del código que hemos visto de nuestro componente.

Necesitamos tener claro los errores de validación que se están dando, por ello debemos devolverlos junto con la información de la propia aplicación. Este error vendrá dado tras realizar la petición y se nos devolverá.

<script>
export default {
    async mounted() {
        this.getCategory()
    },
    data() {
        return {
            post: '',
            form: {
                title: '',
                slug: '',
                description: '',
                content: '',
                category_id: '',
                posted: '',

            },errors: {
                title: '',
                slug: '',
                description: '',
                content: '',
                category_id: '',
                posted: '',
            },
            categories: []
        }
    },
    methods: {
        cleanErrorsForm() {
            this.errors.title = ''
            this.errors.content = ''
            this.errors.posted = ''
            this.errors.description = ''
            this.errors.slug = ''
            this.errors.category_id = ''
        },
        getCategory() {
            this.$axios.get('/api/category/all').then((res) => {
                this.categories = res.data
            })
        },
        send() {
            this.cleanErrorsForm()
            this.$axios.post('/api/post', this.form).then(res => {}).catch(error => {
                if (error.response.data.errors.title) {
                    this.errors.title = error.response.data.errors.title[0]
                }
                if (error.response.data.errors.slug) {
                    this.errors.slug = error.response.data.errors.slug[0]
                }
                if (error.response.data.errors.description) {
                    this.errors.description = error.response.data.errors.description[0]
                }
                if (error.response.data.errors.posted) {
                    this.errors.posted = error.response.data.errors.posted[0]
                }
                if (error.response.data.errors.content) {
                    this.errors.content = error.response.data.errors.content[0]
                }
                if (error.response.data.errors.category_id) {
                    this.errors.category_id = error.response.data.errors.category_id[0]
                }
            })
        } 
    }
},
</script>

Ahora debemos aprovechar todo la parte reactiva de nuestro proyecto, y modificaremos el html del componente para poder trasladar los errores, en caso de que se den, a nuestra aplicación:

<o-field label="Title" :variant="errors.title ? 'danger' : 'primary'" :message="errors.title">
    <o-input v-model="form.title"></o-input>
</o-field>

De este modo, si no hay error mostrará la clase por defecto, en este caso primary, si no la de danger. Esto habría que extrapolarlo a todos los campos y posibles errores.

También se puede validar desde el cliente

Los errores de validación que estamos mostrando son los que nos responde el servidor. Lo ideal, para no sobrecargar el servidor de nuestro proyecto, sería realizar ciertas validaciones en la parte del cliente (que un campo esté relleno o no, que sea un email...). Es por ello que debemos ser muy minuciosos y cautos con las validaciones y en dónde deben hacerse, ya que esto supondrá un mejor o peor rendimiento de nuestro proyecto reactivo.

Actividades

• PR 907. (RA9 / CE9c CE9d CE9e CE9h / IC2 / 5p) - En la aplicación de notas, genera el formulario de Login para el alumno. Además, haz otro por el que el docente pueda ingresar las notas y anotaciones por alumno.

• RE 908. (RA9 / CE9a CE9b CE9c CE9d CE9e CE9f CE9h / IC2 / 10p) Durante esta fase se inicia el desarrollo técnico del Reto 05, cuyo objetivo es construir una aplicación web reactiva que consuma la API del Reto 04.

  Durante esta fase deben abordarse los siguientes aspectos:

  • Configurar Axios para conectarse a la API Laravel del Reto 04.
  • Implementar navegación básica con Vue Router.
  • Probar el consumo inicial de la API (listado de publicaciones).