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 :
17960
Luigi Nori
He has been working on the Internet since 1994 (practically a mummy), specializing in Web technologies makes his customers happy by juggling large scale and high availability applications, php and js frameworks, web design, data exchange, security, e-commerce, database and server administration, ethical hacking. He happily lives with @salvietta150x40, in his (little) free time he tries to tame a little wild dwarf with a passion for stars.
