создал роутинг в php и вывел таблицу, как мне ее оформить по красивше в vue?
выводит просто это:
[
{
id: 1,
name: "Анджей Сапковский",
date_birth: "1948-06-21",
biography: "Анджей Сапковский (польск. Andrzej Sapkowski, род. 21 июня 1948 года, Лодзь, Польская Народная Республика) — польский писатель-фантаст и публицист, автор популярной фэнтези-саги «Ведьмак». Произведения Сапковского изданы на чешском, русском, немецком, испанском, финском, литовском, французском, английском, португальском, болгарском, итальянском, шведском, сербском, украинском и китайском языках. По заявлениям издателей, Сапковский входит в пятёрку самых издаваемых авторов Польши.",
date_create: "2019-08-04 08:17:21",
date_change: "2019-08-04 08:17:21"
},
{
id: 2,
name: "Стивен Кинг",
date_birth: "1947-09-21",
biography: "Стивен Эдвин Кинг (англ. Stephen Edwin King; род. 21 сентября 1947, Портленд, Мэн, США) — американский писатель, работающий в разнообразных жанрах, включая ужасы, триллер, фантастику, фэнтези, мистику, драму; получил прозвище «Король ужасов». Продано более 350 миллионов экземпляров его книг, по которым был снят ряд художественных фильмов, телевизионных постановок, а также нарисованы комиксы. Кинг опубликовал 56 романов, в том числе 7 под псевдонимом Ричард Бахман, и 5 научно-популярных книг.\r\n\r\nОн написал около 200 рассказов, большинство из которых были собраны в девять авторских сборников. Действие многих произведений Кинга происходит в его родном штате Мэн.",
date_create: "2019-08-04 08:17:21",
date_change: "2019-08-04 08:17:21"
},
{
id: 3,
name: "Джон Толкин",
date_birth: "1892-01-03",
biography: "Джон Рональд Руэл Толкин (англ. John Ronald Reuel Tolkien; 3 января 1892 года, Блумфонтейн, Оранжевая Республика — 2 сентября 1973 года Борнмут, Англия) — английский писатель, поэт, филолог, профессор Оксфордского университета. Наиболее известен как автор классических произведений «высокого фэнтези»: «Хоббит, или Туда и обратно», «Властелин колец» и «Сильмариллион».",
date_create: "2019-08-04 09:53:41",
date_change: "2019-08-04 10:01:39"
}
]
authors.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class authors extends Model
{
use HasFactory;
}
api.
<?php
use App\Http\Controllers\BooksController;
use App\Http\Controllers\AuthorsController;
use App\Http\Controllers\AdminController;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/
Route::middleware('auth:api')->get('/user', function (Request $request) {
return $request->user();
});
Route::resource('admin', AdminController::class);
Route::resource('authors', AuthorsController::class);
Route::resource('books', BooksController::class);
web
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AdminController;
use App\Http\Controllers\AuthorsController;
use App\Http\Controllers\BooksController;
/*
|--------------------------------------------------------------------------
| 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('index');
});
Auth::routes();
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
Route::get('/admin', [\App\Http\Controllers\AdminController::class, 'getIndex'])->name('admin');
Route::get('/authors', [\App\Http\Controllers\AuthorsController::class, 'getAuthors'])->name('authors');
authors.blade
<!DOCTYPE HTML>
<html lang="en">
<head>
<div><v-authors></v-authors></div>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Vue Datatables Component Example - ItSolutionStuff.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<v-authors></v-authors>
</div>
<script src="{{asset('js/app.js')}}" ></script>
</body>
</html>
authorsController
<?php
namespace App\Http\Controllers;
use App\Models\authors;
use Illuminate\Routing\Controller as BaseController;
class AuthorsController extends BaseController
{
public function getAuthors(): \Illuminate\Http\JsonResponse
{
return response()->json(authors::get());
}
}
vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Laravel Vue Datatables Component Example - ItSolutionStuff.com</div>
<div class="card-body">
<datatable :columns="columns" :data="rows"></datatable>
<datatable-pager v-model="page" type="abbreviated" :per-page="per_page"></datatable-pager>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import DatatableFactory from 'vuejs-datatable';
export default {
components: { DatatableFactory },
mounted() {
console.log('Component mounted.')
},
data(){
return {
columns: [
{label: 'id', field: 'id'},
{label: 'Name', field: 'name'},
{label: 'date_birth', field: 'date_birth'},
{label: 'biography', field: 'biography'}
],
rows: [],
page: 1,
per_page: 10,
}
},
methods:{
getAuthors: function() {
axios.get('/authors').then(function(response){
this.rows = response.data;
}.bind(this));
}
},
created: function(){
this.getAuthors()
}
}
</script>