Continuamos con la segunda parte de la mini-serie en la que estamos creando una app con Lumen como backend y Vue.js 2 como frontend.
Como ya he dicho, vamos a utilizar Vue.js 2 como framework para el frontend desde el cual haremos las peticiones a la API que creamos en el post anterior y mostraremos los resultados (crear, eliminar o listar). Para hacer estas consultas utilizaremos una librería JS llamada Axios que ya utilizamos anteriormente, también utilizaremos otra librería UI llamada Element creada especialmente para Vue.js con componentes para crear una interface de usuario fácilmente. Por último, utilizaremos una librería llamada Vuex (está inspirada en Flux, Redux y Elm) que es una librería que nos permite gestionar el estado de nuestra app y así facilitar la comunicación entre componentes y no tener que estar utilizando eventos (como vimos anteriormente) para pasar información entre componentes, porque conforme la app vaya creciendo cada vez se haría más complicado el utilizar los eventos. Por tanto, con Vuex, podremos tener un store o almacenamiento global con datos y funciones accesibles por todos los componentes.
Primero de todo, vamos a tener que cambiar una cosa en el backend hecho con Lumen en el post anterior. Vamos atener que instalar un paquete para poder hacer peticiones desde Vue.js, sino nos dará un error y no podremos hacer las peticiones. Simplemente, sigue las instrucciones que pone en su web. Un vez ya tengas esto instalado, ya puedes continuar.
Ahora vamos a crear la app base de Vue.js desde vue-cli:
|
1 2 3 |
vue init webpack <nombre> cd my-project npm install |
Donde pone <nombre> ponle el nombre que quieras al proyecto, yo le he puesto frontend. Si ejecutas todos estos comandos uno por uno, ya tendrás la app Vue.js base instalada, pero ahora vamos a instalar unos paquetes más:
|
1 |
npm install axios element-ui vuex style-loader --save |
Cuando finalice, abre el main.js y añade este código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import Vue from 'vue' import App from './App.vue' import store from './store' import axios from 'axios' import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' axios.defaults.baseURL = 'http://localhost:8000/api' Vue.use(ElementUI) new Vue({ el: '#app', store, render: h => h(App) }) |
Estamos importando los paquetes necesarios, definiendo la URL base para hacer las peticiones a la API, para así no tener que poner todo la URL completa cada vez y, también, estamos incluyendo en Vue el paquete ElementUI para poder utilizarlo en los componentes.
Ahora vamos a crear el store con Vuex, primero creamos una carpeta store y dentro creamos tres archivos uno index.js (crea el store con el state, action y mutation), otro actions.js (hará las peticiones a la API y envía los datos a una mutation) y el último mutations.js (coge los datos de la API que recibe de la acción y los aplica al state de la app para que sean accesibles desde la vista).
Esta imagen sacada de la documentación de Vuex, representa visualmente muy bien como funciona Vuex.
Abrimos el index.js :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import Vue from 'vue' import Vuex from 'vuex' import actions from './actions.js' import mutations from './mutations.js' Vue.use(Vuex); export default new Vuex.Store({ state: { links: [] }, actions, mutations }) |
Incluimos los paquetes y ficheros necesarios y creamos el store con el state de la app, nosotros tenemos un array de objetos llamado links que contendrá los links como su nombre indica, también le añadimos las actions y las mutations que ahora crearemos.
Abrimos el actions.js y añadimos este código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
import Vue from 'vue' import axios from 'axios' import { Notification } from 'element-ui'; export default { GETLINKS({commit}) { return new Promise((resolve, reject) => { axios.get('links') .then(function (response) { commit('ALLLINKS', { links: response.data }) }) .catch(function (error) { console.log(error); }); }, error => console.log(error)) }, DELETELINK({commit}, link) { return new Promise((resolve, reject) => { axios.delete('links/'+link.id) .then(function (response) { commit('REMOVELINK', { link //same link: link }) Notification.success({ title: 'Success', message: response.data.msg }) }) .catch(function (error) { Notification.error({ title: 'Error' }) }); }, error => console.log(error)) }, CREATENEWLINK({commit}, newLink) { return new Promise((resolve, reject) => { axios.post('links', { url: newLink.url, description: newLink.description }) .then(function (response) { commit('ADDNEWLINK', { newLink: response.data.newLink }) Notification.success({ title: 'Success', message: response.data.msg }) }) .catch(function (error) { // console.log(error.response.data) var data = error.response.data for(var propName in data) { if(data.hasOwnProperty(propName)) { var propValue = data[propName][0]; Notification.error({ title: 'Error', message: propValue }) } } }); }, error => console.log(error)) }, } |
Hay tres funciones:
- GETLINKS: obtiene el listado de los links y cuando los tiene los envía a la función ALLLINKS ( mutation.js ) para que los aplique en el state de la app y así poder acceder a ellos.
- DELETELINK: hace una petición para eliminar un link específico de la base de datos y después llama a la función REMOVELINK ( mutation.js ) para eliminarlo del state links. Si hay algún error lo muestra.
- CREATENEWLINK: hace una petición POST a la API con los parámetros necesarios para crear un link y envía los datos retornados a la función ADDNEWLINK ( mutation.js ) para que lo añada al array de objetos links del state. Si hay algún error lo muestra.
Abrimos el mutations.js y añadimos este código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import Vue from 'vue' export default { ALLLINKS(state, data) { state.links = data.links }, REMOVELINK(state, data) { var index = state.links.indexOf(data.link) state.links.splice(index, 1) }, ADDNEWLINK(state, data) { state.links.push({ id: data.newLink.id, url: data.newLink.url, description: data.newLink.description, created_at: data.newLink.created_at, updated_at: data.newLink.updated_at }) } } |
Tiene tres funciones que más o menos ya he explicado mientras explicaba las actions, además el código es bastante descriptivo por sí solo.
Ahora vamos a crear los componentes, antes de todo abrimos el App.vue y substituimos el código que hay por éste:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<template> <div id="app"> <el-row :gutter="20"> <el-col :span="12" :offset="6"> <links-list></links-list> </el-col> </el-row> </div> </template> <script> import LinksList from './components/LinksList.vue'; export default { name: 'app', components: { 'links-list' : LinksList }, data () { return { } } } </script> <style lang="scss"> </style> |
Como puedes ver, estamos utilizando componentes de la librería Element. También estamos importando el componente LinksList, que vamos a crear ahora.
Creamos una carpeta llamada components y dentro creamos un archivo llamado LinksList.vue :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<template> <div> <div> <el-input class="input-add-link" placeholder="Url" v-model="newLink.url"></el-input> <el-input class="input-add-link" type="textarea" :rows="2" placeholder="Description" v-model="newLink.description"></el-input> <el-button class="input-add-link" type="primary" @click="createNewLink">Add new link</el-button> </div> <link-item v-for='link in links' :key="link.id" :link='link'></link-item> <p class="no-links-msg" v-if="!links.length">No links!</p> </div> </template> <script> import LinkItem from './LinkItem.vue'; export default { name: 'links-list', components: { 'link-item' : LinkItem }, data() { return { newLink: { url: '', description: '' } } }, computed: { links() { return this.$store.state.links.reverse() } }, created () { this.$store.dispatch('GETLINKS') }, methods: { createNewLink() { this.$store.dispatch('CREATENEWLINK', this.newLink) // console.log(that.newLink) this.newLink.url = '' this.newLink.description = '' } } } </script> <style lang="scss"> .no-links-msg { text-align: center; } .input-add-link { width: 100%; margin-bottom: 5px; } </style> |
Primero, cuando se ejecuta el hook created llamamos a la acción GETLINKS para obtener, nada más acceder al componente, la lista de links, después en las computed properties se accede a esta lista que se encuentra en el state del store (también se podría acceder mediante getters) y se le da la vuelta. Y hacemos un bucle for sobre esta computed property en el componente <link-item>.
También, creamos unos inputs para poder crear un link nuevo. Estamos asignando el valor del input a la propiedad url del objeto newLink de data y el valor del textarea a la propiedad description del objeto newLink de data. Entonces, cuando hacemos click al botón se ejecuta el método createNewLink y se lanza la acción CREATENEWLINK pasóndole el objeto del nuevo link (newLink), lo que hace esta acción está explicado un poquito más para arriba.
Ahora creamos el archivo LinkItem.vue , que se llama desde el LinksList.vue :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<template> <el-card class="box-link"> <p><a v-bind:href="link.url">{{link.url}}</a></p> <div class="description-link">{{link.description}}</div> <el-button type="danger" icon="delete" @click="removeLink(link)"></el-button> </el-card> </template> <script> export default { name: 'link', props: ['link'], data () { return { } }, methods: { removeLink(link) { this.$store.dispatch('DELETELINK', link) } } } </script> <style lang="scss"> .box-link { margin-top: 10px; p { margin-top: 0; } .description-link { margin-bottom: 10px; } } </style> |
Mostramos la URL y la descripción dentro de un componente card de la librería Element y creamos un botón para poder eliminar el link. Le asignamos un evento click a este botón que llama a la acción DELETELINK pasándole el objeto del link que queremos eliminar, lo que hace esta acción está explicado un poquito más arriba.
Con esto ya tendríamos todo el ejemplo funcionando:
Y los errores devueltos desde la API se mostrarían así:
Con esto, damos por finalizada esta mini-serie, hemos tocado muchas cosas y espero que haya quedado claro todo.
Puedes ver el código completo en en GitHub: https://github.com/fullstackseriescom/vuejs-2-series/tree/master/010-011-notes-app-lumen-vuejs
-
– https://vuex.vuejs.org/en/intro.html
– http://element.eleme.io/#/en-US
– https://github.com/vluzrmos/lumen-cors
– https://www.uno-de-piera.com/category/vue-js-2/
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR