¡Buenas tardes!; tengo realizado un sistema de compras - ventas realizado en Lavarel 5.7 y vue.js de los cuales la mayoría de las opciones del menú si muestran, en la opción de Roles, del menú que adjunto la pantalla:
En la que se muestra la opción de los Roles:
Para ello se especificó el esquema de la tabla de roles de migración que para ello se realizó mediante el comando php artisan make:migration create_rol_table que crea el esquema de migración: ( de acuerdo al siguiente link Documentación de Laravel - Database (Migraciones)
El esquema de la tabla de roles en la migración es el siguiente:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateRolesTable extends Migration
{
/**
* Run the migrations
*
* @return void
*/
public function up()
{
if (Schema::hasTable('roles')) {
exit (0);
} else{
Schema::create('roles', function (Blueprint $table) {
$table->increments('id');
$table->string('nombre',30)->unique();
$table->string('descripcion',100)->nullable();
$table->boolean('condicion')->default(1);
//$table->timestamps();
});
DB::table('roles')->insert(array('id'=>'1','nombre'=>'Administrador','descripcion'=>'Administrador'));
DB::table('roles')->insert(array('id'=>'2','nombre'=>'Vendedor','descripcion'=>'Vendedor'));
DB::table('roles')->insert(array('id'=>'3','nombre'=>'Comprador','descripcion'=>'Comprador'));
}
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('roles');
}
}
Luego se definió el controlador RolController con el comando php artisan make:controller RolController, que queda así mi controlador:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Resources\RolesResource;
use App\Http\Controllers\Controller;
use App\Rol;
class RolController extends Controller
{
public function index(Request $request)
{
//
if(!$request->ajax()) return redirect('/');
$buscar= $request->buscar;
$criterio= $request->criterio;
if($buscar==''){
$roles= Rol::orderBy('id','desc')->paginate(3);
} else{
$roles= Rol::where($criterio,'like','%'.$buscar.'%')->orderBy('id','desc')->paginate(3);
}
//return $categorias;
return[
'pagination' => [
'total' => $roles->total(),
'current_page' => $roles->currentPage(),
'per_page' => $roles->perPage(),
'last_page' => $roles->lastPage(),
'from' => $roles->firstItem(),
'to' => $roles->lastitem(),
],
'roles' => $roles
];
}
}
Ahora bien se definio la ruta al controlador en el archivo web.php de la carpeta /routes
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('contenido/contenido');
});
Route::get('/categoria', 'CategoriaController@index');
Route::get('/categoria/selectCategoria', 'CategoriaController@selectCategoria');
Route::post('/categoria/registrar', 'CategoriaController@store');
Route::put('/categoria/actualizar', 'CategoriaController@update');
Route::put('/categoria/desactivar', 'CategoriaController@desactivar');
Route::put('/categoria/activar', 'CategoriaController@activar');
Route::get('/producto', 'ProductoController@index');
Route::post('/producto/registrar', 'ProductoController@store');
Route::put('/producto/actualizar', 'ProductoController@update');
Route::put('/producto/desactivar', 'ProductoController@desactivar');
Route::put('/producto/activar', 'ProductoController@activar');
Route::get('/proveedor', 'ProveedorController@index');
Route::post('/proveedor/registrar', 'ProveedorController@store');
Route::put('/proveedor/actualizar', 'ProveedorController@update');
Route::get('/cliente', 'ClienteController@index');
Route::post('/cliente/registrar', 'ClienteController@store');
Route::put('/cliente/actualizar', 'ClienteController@update');
Route::get('/rol', 'RolController@index');
Y ahora el componente Rol.Vue para que muestre la lista de los Roles que no muestra en el componente Rol.vue que el componente Rol.vie es el siguiente:
<template>
<main class="main">
<!-- Breadcrumb -->
<ol class="breadcrumb">
<li class="breadcrumb-item active"><a href="/">BACKEND - SISTEMA DE COMPRAS - VENTAS</a></li>
</ol>
<div class="container-fluid">
<!-- Ejemplo de tabla Listado -->
<div class="card">
<div class="card-header">
<h2>Listado de Roles</h2><br/>
</div>
<div class="card-body">
<div class="form-group row">
<div class="col-md-6">
<div class="input-group">
<select class="form-control col-md-3" v-model="criterio">
<option value="nombre">Rol</option>
<option value="descripcion">Descripción</option>
</select>
<input type="text" @keyup.enter="listarRol(1,buscar,criterio);" v-model="buscar" class="form-control" placeholder="Buscar texto">
<button type="submit" @click="listarRol(1,buscar,criterio);" class="btn btn-primary"><i class="fa fa-search"></i> Buscar</button>
</div>
</div>
</div>
<table class="table table-bordered table-striped table-sm">
<thead>
<tr class="bg-primary">
<th>Rol</th>
<th>Descripción</th>
<th>Estado</th>
</tr>
</thead>
<tbody>
<tr v-for="rol in arrayRol" :key="rol.id">
<td v-text="rol.nombre"></td>
<td v-text="rol.descripcion"></td>
<td>
<button type="button" class="btn btn-success btn-md" v-if="rol.condicion">
<i class="fa fa-check fa-2x"></i> Activo
</button>
<button type="button" class="btn btn-danger btn-md" v-else>
<i class="fa fa-check fa-2x"></i> Desactivado
</button>
</td>
</tr>
</tbody>
</table>
<nav>
<ul class="pagination">
<li class="page-item" v-if="pagination.current_page > 1">
<a class="page-link" href="#" @click.prevent="cambiarPagina(pagination.current_page -1,buscar,criterio)">Anterior</a>
</li>
<li class="page-item" v-for="page in pagesNumber" :key="page" :class="[page] == isActived ? 'active' : ']'">
<a class="page-link" href="#" @click.prevent="cambiarPagina(page,buscar,criterio)" v-text="page"></a>
</li>
<li class="page-item" v-if="pagination.current_page < pagination.last_page">
<a class="page-link" href="#" @click.prevent="cambiarPagina(pagination.curent_page + 1,buscar,criterio)">Siguiente</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- Fin ejemplo de tabla Listado -->
</div>
</main>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
export default {
data(){
return {
rol_id:0,
nombre:'',
descripcion:'',
arrayRol:[],
pagination:{
'total':0,
'current_page':0,
'per_page':0,
'last_page':0,
'from':0,
'to':0,
},
offset:3,
criterio:'nombre',
buscar:''
}
},
computed:{
isActived: function(){
return this.pagination.current_page;
},
pagesNumber: function(){
if(!this.pagination.to){
return[];
}
var from = this.pagination.current_page - this.offset;
if(from < 1){
from = 1;
}
var to = from + (this.offset * 2);
if(to >= this.pagination.last_page){
to = this.pagination.last_page;
}
var pageArray = [];
while(from <= to){
pageArray.push(from);
from++;
}
return pageArray;
}
},
methods:{
listarRol(page,buscar,criterio){
let me=this;
var url = 'http://localhost/proyectolaravel/public/rol?page=' +page + '&buscar=' + buscar + '&criterio='+criterio;
axios.get(url).then(function (response) {
// handle success
//console.log(response);
var respuesta=response.data;
me.arrayRol=respuesta.roles.data;
me.pagination= respuesta.pagination;
})
.catch(function (error) {
// handle error
console.log(error);
});
},
cambiarPagina(page,buscar,criterio){
let me=this;
me.pagination.current_page=page;
me.listarRol(page,buscar,criterio);
},
},
mounted() {
//console.log('Component mounted.')
this.listarRol(1,this.buscar,this.criterio);
}
}
</script>
<style>
.modal-content{
width:100% !important;
position:absolute !important;
}
.mostrar{
display:list-item !important;
opacity:1 !important;
position:absolute !important;
background-color:#3c29297a !important;
}
.div-error{
display:flex;
justify-content:center;
}
.text-error{
color:red !important;
font-weight:bold;
font-size:20px;
}
</style>
Una vez creado el componente Rol.Vue al compilar el proyecto con el comando npm run dev y ejecutar el proyecto y entrar al componente Rol.Vue sale un mensaje de error y no se ¿por qué no muestra la información?; adjunto pantalla con el mensaje de error que sale:
¿Cuál sería la solución al error que me sale? y ¿como corregirlo?, si me podrían ayudar con este error. ¡Gracias!
Estimado @azeós ¡Buenas noches!, tengo en el método listarRol, en donde se debe de listarRol que hay en la tabla pero no se ¿Cuál es el error en la url?; ya que no muestra (adjunto el método ListarRol() del componente Rol.vue)
listarRol(page,buscar,criterio){
let me=this;
var url= 'http://localhost/proyectolaravel/public/rol?page=' + page + '&buscar=' + buscar + '&criterio='+criterio;
axios.get(url).then(function (response) {
// handle success
//console.log(response);
var respuesta = response.data;
me.arrayRol=respuesta.roles.data;
me.pagination= respuesta.pagination;
})
.catch(function (error) {
// handle error
console.log(error);
});
},
¿Estaría bien la cadena de url que se envía mediante axios a buscar el rol?; ya que mi archivo de ruta que esta en /routes/web.php esta correcto:
<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('contenido/contenido');
});
Route::get('/categoria', 'CategoriaController@index');
Route::get('/categoria/selectCategoria', 'CategoriaController@selectCategoria');
Route::post('/categoria/registrar', 'CategoriaController@store');
Route::put('/categoria/actualizar', 'CategoriaController@update');
Route::put('/categoria/desactivar', 'CategoriaController@desactivar');
Route::put('/categoria/activar', 'CategoriaController@activar');
Route::get('/producto', 'ProductoController@index');
Route::post('/producto/registrar', 'ProductoController@store');
Route::put('/producto/actualizar', 'ProductoController@update');
Route::put('/producto/desactivar', 'ProductoController@desactivar');
Route::put('/producto/activar', 'ProductoController@activar');
Route::get('/proveedor', 'ProveedorController@index');
Route::post('/proveedor/registrar', 'ProveedorController@store');
Route::put('/proveedor/actualizar', 'ProveedorController@update');
Route::get('/cliente', 'ClienteController@index');
Route::post('/cliente/registrar', 'ClienteController@store');
Route::put('/cliente/actualizar', 'ClienteController@update');
Route::get('/rol', 'RolController@index');
Estimado amigo @azeós en el controlador RolController.php lo que hace es devolver con return primero los parámetros de la paginación para que luego resultado de la consulta en parámetro $roles pero no esta devolviendo nada. ¿Cuál sería la solución?; adjunto RolController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Resources\RolesResource;
use App\Http\Controllers\Controller;
use App\Rol;
class RolController extends Controller
{
public function index(Request $request)
{
//
if(!$request->ajax()) return redirect('/');
$buscar= $request->buscar;
$criterio= $request->criterio;
if($buscar==''){
$roles= Rol::orderBy('id','desc')->paginate(3);
} else{
$roles= Rol::where($criterio,'like','%'.$buscar.'%')->orderBy('id','desc')->paginate(3);
}
//return $categorias;
return[
'pagination' => [
'total' => $roles->total(),
'current_page' => $roles->currentPage(),
'per_page' => $roles->perPage(),
'last_page' => $roles->lastPage(),
'from' => $roles->firstItem(),
'to' => $roles->lastitem(),
],
'roles' => $roles
];
}
}
console.log(response)
dentro de la consulta axios que está enlistarRol()
, devuelve algo? No hace falta que armes el return del controlador a mano. Si hacés directamentereturn $roles
se va a generar un JSON con todas las propiedades..RolController
hacés unreturn
creando un array a mano. Lo que digo es que no hace falta crear ese array a mano, con solo hacerreturn $roles
es suficiente, eso ya arma un JSON con las keys que estás creando. Olvidate lo que te dije de JS, el error tiene que estar en PHP. Probá hacer undd($roles)
antes delreturn
a ver si ahí está devolviendo todo bien.