Operaciones Crud Usando Vue.Js: Un Ejemplo Básico

by Luigi Nori Date: 24-09-2019


En este tutorial, te mostramos cómo crear una aplicación CRUD usando vue js. Aquí hay un ejemplo muy básico y simple de vue.js crud app. usando este vuejs crud (crear leer actualizar borrar) que puede ser fácilmente implementado con php mysql o también en el framework laravel o codeigniter. Así que es un ejemplo muy simple de tutorial para principiantes.

Por lo tanto, sigue los siguientes dos archivos y obten una aplicación CRUD muy simple y sorprendente con vue.js. Crearemos los siguientes dos archivos para hacer una aplicación crud simple.

1 - index.html
2 - index.js

Ahora puedes ver abajo el código de ambos archivos:

index.html
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Basic CRUD Operations Using Vue.js Example</title>
    <link rel="stylesheet prefetch" href="bootstrap.min.css">
    <link rel="stylesheet prefetch" href="bootstrap-theme.min.css">
</head>

<body>
<div class="container">
  <header class="page-header">
    <div class="branding">
      <img src="https://vuejs.org/images/logo.png" alt="Logo" title="Home page" class="logo"/>
      <h1>Basic CRUD Operations Using Vue.js Example - HDTuto.com</h1>
    </div>
  </header>
  <main id="app"></main>
</div>

<template id="invoice-list">
  <section>
  <div class="actions">
    <router-link class="btn btn-default" :to="{path: '/invoice-add'}">
      <span class="glyphicon glyphicon-plus"></span>
      Add invoice
    </router-link>
  </div>
  <div class="filters row">
    <div class="form-group col-sm-3">
      <label for="search-element">invoice name</label>
      <input v-model="searchKey" class="form-control" id="search-element" requred/>
    </div>
  </div>
  <table class="table">
    <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th>Price</th>
      <th class="col-sm-2">Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="invoice in filteredinvoices">
      <td>
        <router-link :to="{name: 'invoice', params: {invoice_id: invoice.id}}">{{ invoice.name }}</router-link>
      </td>
      <td>{{ invoice.description }}</td>
      <td>
        {{ invoice.price }}
        <span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
      </td>
      <td>
        <router-link class="btn btn-warning btn-xs" :to="{name: 'invoice-edit', params: {invoice_id: invoice.id}}">Edit</router-link>
        <router-link class="btn btn-danger btn-xs" :to="{name: 'invoice-delete', params: {invoice_id: invoice.id}}">Delete</router-link>
      </td>
    </tr>
    </tbody>
  </table>
  </section>
</template>

<template id="invoice-add">
    <section>
  <h2>Add new invoice</h2>
  <form v-on:submit="createinvoice">
    <div class="form-group">
      <label for="add-name">Name</label>
      <input class="form-control" id="add-name" v-model="invoice.name" required/>
    </div>
    <div class="form-group">
      <label for="add-description">Description</label>
      <textarea class="form-control" id="add-description" rows="10" v-model="invoice.description"></textarea>
    </div>
    <div class="form-group">
      <label for="add-price">Price, <span class="glyphicon glyphicon-euro"></span></label>
      <input type="number" class="form-control" id="add-price" v-model="invoice.price"/>
    </div>
    <button type="submit" class="btn btn-primary">Create</button>
     <router-link class="btn btn-default" :to="{path: '/'}">Cancel</router-link>
  </form>
</section>
</template>

<template id="invoice">
    <section>
  <h2>{{ invoice.name }}</h2>
  <b>Description: </b>
  <div>{{ invoice.description }}</div>
  <b>Price:</b>
  <div>{{ invoice.price }}<span class="glyphicon glyphicon-euro"></span></div>
  <br/>
  <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
  <router-link to="'/'">Back to invoice list</router-link>
</section>
</template>

<template id="invoice-edit">
    <section>
  <h2>Edit invoice</h2>
  <form v-on:submit="updateinvoice">
    <div class="form-group">
      <label for="edit-name">Name</label>
      <input class="form-control" id="edit-name" v-model="invoice.name" required/>
    </div>
    <div class="form-group">
      <label for="edit-description">Description</label>
      <textarea class="form-control" id="edit-description" rows="3" v-model="invoice.description"></textarea>
    </div>
    <div class="form-group">
      <label for="edit-price">Price, <span class="glyphicon glyphicon-euro"></span></label>
      <input type="number" class="form-control" id="edit-price" v-model="invoice.price"/>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
    <router-link to="'/'" class="btn btn-default">Cancel</router-link>
  </form>
</section>
</template>

<template id="invoice-delete">
    <section>
  <h2>Delete invoice {{ invoice.name }}</h2>
  <form v-on:submit="deleteinvoice">
    <p>The action cannot be undone.</p>
    <button type="submit" class="btn btn-danger">Delete</button>
    <router-link to="'/'" class="btn btn-default">Cancel</router-link>
  </form>
</section>
</template>

<script src='vue.min.js'></script>
<script src='vue-router.min.js'></script>
<script src="index.js"></script>

</body>
</html>

index.js

var invoices = [
  {id: 1, name: 'Laravel', description: 'Provide Laravel Information.', price: 100},
  {id: 2, name: 'AngularJS', description: 'Provide AngularJS Information.', price: 100},
  {id: 3, name: 'PHP', description: 'Provide PHP Information.', price: 100}
];

function findinvoice (invoiceId) {
  return invoices[findinvoiceKey(invoiceId)];
};

function findinvoiceKey (invoiceId) {
  for (var key = 0; key < invoices.length; key++) {
    if (invoices[key].id == invoiceId) {
      return key;
    }
  }
};

var List = Vue.extend({
  template: '#invoice-list',
  data: function () {
    return {invoices: invoices, searchKey: ''};
  },
  computed : {
    filteredinvoices: function () {
    var self = this;
    console.log()
    return self.invoices.filter(function (invoice) {
      return invoice.name.indexOf(self.searchKey) !== -1
    })
  }
}
});

var invoice = Vue.extend({
  template: '#invoice',
  data: function () {
    return {invoice: findinvoice(this.$route.params.invoice_id)};
  }
});

var invoiceEdit = Vue.extend({
  template: '#invoice-edit',
  data: function () {
    return {invoice: findinvoice(this.$route.params.invoice_id)};
  },
  methods: {
    updateinvoice: function () {
      var invoice = this.invoice;
      invoices[findinvoiceKey(invoice.id)] = {
        id: invoice.id,
        name: invoice.name,
        description: invoice.description,
        price: invoice.price
      };
      router.push('/');
    }
  }
});

var invoiceDelete = Vue.extend({
  template: '#invoice-delete',
  data: function () {
    return {invoice: findinvoice(this.$route.params.invoice_id)};
  },
  methods: {
    deleteinvoice: function () {
      invoices.splice(findinvoiceKey(this.$route.params.invoice_id), 1);
      router.push('/');
    }
  }
});

var Addinvoice = Vue.extend({
  template: '#invoice-add',
  data: function () {
    return {invoice: {name: '', description: '', price: ''}
    }
  },
  methods: {
    createinvoice: function() {
      var invoice = this.invoice;
      invoices.push({
        id: Math.random().toString().split('.')[1],
        name: invoice.name,
        description: invoice.description,
        price: invoice.price
      });
      router.push('/');
    }
  }
});

var router = new VueRouter({
  routes: [{path: '/', component: List},
    {path: '/invoice/:invoice_id', component: invoice, name: 'invoice'},
    {path: '/invoice-add', component: Addinvoice},
    {path: '/invoice/:invoice_id/edit', component: invoiceEdit, name: 'invoice-edit'},
  {path:   '/invoice/:invoice_id/delete', component: invoiceDelete, name: 'invoice-delete'}
]});

new Vue({
  el: '#app',
  router: router,
  template: '<router-view></router-view>'
});

ahora puedes ejecutar el ejemplo de arriba, los comentarios sobre el guión son muy apreciados


 
 
by Luigi Nori Date: 24-09-2019 visitas : 425  
 
Luigi Nori

Luigi Nori

Lavora in Internet dal 1994 (praticamente una mummia), specializzato in tecnologie Web fa felici i suoi clienti smanettando con applicazioni su larga scala e ad alta disponibilità, frameworks php e js, disegno web, intercambio dati, sicurezza, e-commerce, amministrazione database e server, hacking etico. Convive felicemente con @salvietta150x40, nel (poco) tempo libero cerca di addomesticare un piccolo nano selvaggio appassionato di astri.