Laravel + Vue.js AdminPanel Jeneratör

Laravel ve Vue.js genellikle birlikte kullanılır. Bu teknolojilerle ilgili daha fazla araç piyasaya sürüldüğünde, bunlardan biri de size – Vue + Laravel Yönetici Paneli Üreticisi'ni sunmak.

Feragatname : Bu aracın geliştiricisi ve geliştiricilerinden biri ve aynı zamanda Laravel'in yalnızca QuickAdminPanel üreticisi olduğum ama bu makaledeki amacın sadece size ürün sunmak değil, ne ürettiğini ve Vue + Laravel'in nasıl olduğunu açıklamaktır. birlikte çalışmak. Ayrıca, Github'da mevcut bir kaynak ile örnek bir proje bulacaksınız.

How does the generator work?

Videoyu tercih edenler için hızlı bir demo:

Şimdi, daha fazla ayrıntıya bakalım.

1. adım Panelinizi kodlamadan oluşturursunuz, sadece menü öğeleri ve alanlar ekleyerek.

2. adım Herhangi bir noktada, oluşturulan kodu, dosyaya göre görüntüleyebilirsiniz.

3. adım Ardından kodu indirip yerel olarak veya uzak sunucunuzda bu komutlarla yüklersiniz:

composer install
php artisan key:generate
php artisan migrate --seed
php artisan passport:install

Elbette, .env dosyanız bu noktada yapılandırılmalıdır.

Ve sonra, ön tarafta:

npm install
npm run dev

4. Adım Bu kadar; panelin var.

5. adım En önemli şey: istediğin kodu değiştirebilirsin, saf Laravel + Vue, jeneratörümüzün paketi bağımlı olarak değil. Bu Voyager veya Laravel Sırt Çantası gibi paketlerden (bu arada her ikisi de mükemmel!) En büyük farktır.

What are we generating – structure of the project

Projeyi indirdikten sonra, bunun gibi bir şey görürsünüz:

Oluşturulan Kod: Arka uç Laravel

Önce API olarak hizmet eden arka uç Laravel parçasını analiz edelim:

İşte yolları / api.php dosyası:

Route::group(['prefix' => '/v1', 'middleware' => ['auth:api'], 'namespace' => 'Api\V1', 'as' => 'api.'], function () {
Route::post('change-password', 'ChangePasswordController@changePassword')->name('auth.change_password');
Route::apiResource('roles', 'RolesController');
Route::apiResource('users', 'UsersController');
Route::apiResource('companies', 'CompaniesController');
Route::apiResource('employees', 'EmployeesController');
});

Her CRUD için apiResource ve şifreyi değiştirmek için ayrı bir POST görebilirsiniz.

Kontrolörler, Api / V1 altında isim alanlarıdır, bu yüzden bizim app / Http / Kontrolörler / Api / V1 / CompaniesController.php :

namespace App\Http\Controllers\Api\V1;

use App\Company;
use App\Http\Controllers\Controller;
use App\Http\Resources\Company as CompanyResource;
use App\Http\Requests\Admin\StoreCompaniesRequest;
use App\Http\Requests\Admin\UpdateCompaniesRequest;
use Illuminate\Http\Request;

class CompaniesController extends Controller
{
public function index()
{
return new CompanyResource(Company::with([])->get());
}

public function show($id)
{
$company = Company::with([])->findOrFail($id);

return new CompanyResource($company);
}

public function store(StoreCompaniesRequest $request)
{
$company = Company::create($request->all());

return (new CompanyResource($company))
->response()
->setStatusCode(201);
}

public function update(UpdateCompaniesRequest $request, $id)
{
$company = Company::findOrFail($id);
$company->update($request->all());

return (new CompanyResource($company))
->response()
->setStatusCode(202);
}

public function destroy($id)
{
$company = Company::findOrFail($id);
$company->delete();

return response(null, 204);
}
}

Bir istisna ile tipik bir becerikli Denetleyicimiz var – Laravel 5.5'ten beri mevcut olan Kaynaklar sınıfları.

Bizim durumumuzda, her kaynak bir diziye basit bir dönüşüm, burada bir dosya uygulaması / Http / Resources / Company.php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class Company extends JsonResource
{
/**
* Transform the resource into an array.
*
* @param \Illuminate\Http\Request $request
* @return array
*/
public function toArray($request)
{
return parent::toArray($request);
}
}

Fakat bunu genişletebilir, mantığınızı zirveye ekleyebilir – burada ve burada daha fazla örnek görebilirsiniz.

Son olarak, Laravel Passport tüm rotaları korur – projeyi kurarken bunu çalıştırmanız gerekir:

php artisan passport:install

Genel bir arka uç sonucu olarak, her bir Kontrolör, Vue.js ön uçundan API'ye çağrılan belirli CRUD operasyonlarından sorumludur.

Oluşturulan Kod: Ön Uç Vue.js

Şimdi, ön uç kısmına bir bakalım. Bunun ana dosyası, Vue ve bazı kütüphaneleri başlattığımız kaynaklar / istemci / varlıklar / js / app.js'dir :

// ...
window.Vue = require('vue')
Vue.prototype.$eventHub = new Vue()

import router from './routes'
import store from './store'
import Datatable from 'vue2-datatable-component'
import VueAWN from 'vue-awesome-notifications'
import vSelect from 'vue-select'
import datePicker from 'vue-bootstrap-datetimepicker'
import VueSweetalert2 from 'vue-sweetalert2'
import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css'

Vue.use(Datatable)
Vue.use(VueAWN, {
position: 'top-right'
})
Vue.use(datePicker)
Vue.use(VueSweetalert2)

Vue.component('back-buttton', require('./components/BackButton.vue'))
Vue.component('bootstrap-alert', require('./components/Alert.vue'))
Vue.component('event-hub', require('./components/EventHub.vue'))
Vue.component('vue-button-spinner', require('./components/VueButtonSpinner.vue'))
Vue.component('v-select', vSelect)

moment.updateLocale(window.app_locale, {
week: {
dow: 1
}
})

const app = new Vue({
data: {
relationships: {},
dpconfigDate: {
format: window.date_format_moment
},
dpconfigTime: {
format: window.time_format_moment
},
dpconfigDatetime: {
format: window.datetime_format_moment,
sideBySide: true
}
},
router,
store
}).$mount('#app')

Ardından, her CRUD kendi bileşen kümesine sahiptir:

Veri tablosunu göstermek için vue2-datatable-component kullanıyoruz – işte tam kaynak kodları / client / assets / components / cruds / Companies / Index.vue :

<template>
<section class="content-wrapper" style="min-height: 960px;">
<section class="content-header">
<h1>Companies</h1>
</section>

<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">List</h3>
</div>

<div class="box-body">
<div class="btn-group">
<router-link :to="{ name: xprops.route + '.create' }" class="btn btn-success btn-sm">
<i class="fa fa-plus"></i> Add new
</router-link>
<button type="button" class="btn btn-default btn-sm" @click="fetchData">
<i class="fa fa-refresh" :class="{'fa-spin': loading}"></i> Refresh
</button>
</div>
</div>

<div class="box-body">
<div class="row" v-if="loading">
<div class="col-xs-4 col-xs-offset-4">
<div class="alert text-center">
<i class="fa fa-spin fa-refresh"></i> Loading
</div>
</div>
</div>

<datatable
v-if="!loading"
:columns="columns"
:data="data"
:total="total"
:query="query"
:xprops="xprops"
/>
</div>
</div>
</div>
</div>
</section>
</section>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import DatatableActions from '../../dtmodules/DatatableActions'
import DatatableSingle from '../../dtmodules/DatatableSingle'
import DatatableList from '../../dtmodules/DatatableList'
import DatatableCheckbox from '../../dtmodules/DatatableCheckbox'

export default {
data() {
return {
columns: [
{ title: '#', field: 'id', sortable: true, colStyle: 'width: 50px;' },
{ title: 'Name', field: 'name', sortable: true },
{ title: 'Description', field: 'description', sortable: true },
{ title: 'Actions', tdComp: DatatableActions, visible: true, thClass: 'text-right', tdClass: 'text-right', colStyle: 'width: 130px;' }
],
query: { sort: 'id', order: 'desc' },
xprops: {
module: 'CompaniesIndex',
route: 'companies'
}
}
},
created() {
this.$root.relationships = this.relationships
this.fetchData()
},
destroyed() {
this.resetState()
},
computed: {
...mapGetters('CompaniesIndex', ['data', 'total', 'loading', 'relationships']),
},
watch: {
query: {
handler(query) {
this.setQuery(query)
},
deep: true
}
},
methods: {
...mapActions('CompaniesIndex', ['fetchData', 'setQuery', 'resetState']),
}
}
</script>

<style scoped>

</style>

Çok fazla kod var, değil mi? Tabii ki, daha basit olabilir, ancak daha büyük projeler için genişletilebilecek vakalar için kod üreten resmi belgeleri ve en iyi uygulamaları takip etmeye çalıştık.

Ardından, Create.vue'ye bir göz atabiliriz :

<template>
<section class="content-wrapper" style="min-height: 960px;">
<section class="content-header">
<h1>Companies</h1>
</section>

<section class="content">
<div class="row">
<div class="col-xs-12">
<form @submit.prevent="submitForm">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Create</h3>
</div>

<div class="box-body">
<back-buttton></back-buttton>
</div>

<bootstrap-alert />

<div class="box-body">
<div class="form-group">
<label for="name">Name</label>
<input
type="text"
class="form-control"
name="name"
placeholder="Enter Name"
:value="item.name"
@input="updateName"
>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea
rows="3"
class="form-control"
name="description"
placeholder="Enter Description"
:value="item.description"
@input="updateDescription"
>
</textarea>
</div>
</div>

<div class="box-footer">
<vue-button-spinner
class="btn btn-primary btn-sm"
:isLoading="loading"
:disabled="loading"
>
Save
</vue-button-spinner>
</div>
</div>
</form>
</div>
</div>
</section>
</section>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
data() {
return {
// Code...
}
},
computed: {
...mapGetters('CompaniesSingle', ['item', 'loading'])
},
created() {
// Code ...
},
destroyed() {
this.resetState()
},
methods: {
...mapActions('CompaniesSingle', ['storeData', 'resetState', 'setName', 'setDescription']),
updateName(e) {
this.setName(e.target.value)
},
updateDescription(e) {
this.setDescription(e.target.value)
},
submitForm() {
this.storeData()
.then(() => {
this.$router.push({ name: 'companies.index' })
this.$eventHub.$emit('create-success')
})
.catch((error) => {
console.error(error)
})
}
}
}
</script>

<style scoped>

</style>

CRUD için bileşenleri Düzenle ve Göster oldukça benzer, bu yüzden burada tartışmayacağım.

Bu Vue koduna ek olarak, Sweet Alert, Notifications, Datepickers gibi birçok küçük ayrıntı ve yardımcılar ve formlar için ilişki verileri ayarlama / alma. Sanırım analiz etmen için onu bırakacağım.

Not : Vue.js kitaplıklarının seçimi oldukça özneldir ve projenin en zor kısmıydı – güvenmek için Vue kitaplıklarını seçmek. Ekosistem hala standartlara ya da% 100 güvenilir açık kaynağa sahip değil – piyasada çok fazla hareket, bazı kütüphaneler diğerlerinden daha iyi destekleniyor. Bu yüzden tahmin etmek her zaman zordur ve en iyi kütüphaneler muhtemelen zamanla değişecektir veya yeni olanlar görünecektir.

Bu, Vue + Laravel QuickAdminPanel'in hızlı bir özetinin sonudur, buradan deneyin: https://vue.quickadminpanel.com

Son olarak, iki CRUD'lu bir demo-projenin kaynağı: Şirketler ve Müşteriler.

Umarım jeneratörümüz size sadece kod yazma konusunda zaman kazandırmaz, aynı zamanda Vue'nin Laravel ile nasıl çalışabileceğini gösterir. Bu kodu yapılandırmanın tek yolu değildir ve kodunuzu farklı şekilde yapılandırabilirsiniz, ancak standartlara sadık kalmak için elimizden gelenin en iyisini yapmaya çalıştık.

Bir önceki yazımız olan Ubuntu'da "apt" ile Java Nasıl Kurulur 18.04 başlıklı makalemizi de okumanızı öneririz.

About This Author

Comments are closed

%d blogcu bunu beğendi: