Dalam beberapa tahun terakhir, saya berhasil mengerjakan beberapa proyek besar dan tidak terlalu menggunakan kerangka kerja back-end dan front-end yang berbeda. Menghadapi berbagai masalah yang muncul seiring pertumbuhan aplikasi.Sekarang saya dapat menyimpulkan dari mana solusi berhasil dan mana yang tidak terlalu sukses.Menggunakan akumulasi pengalaman, saya berangkat untuk mengumpulkan semua solusi terbaik, menurut pendapat saya, dan membuat yayasan saya sendiri untuk SPA.Cara membuat situs di Laravel atau apa itu SPA, saya tidak akan memberi tahu. Ada informasi yang cukup di Internet. Artikel ini ditujukan untuk pengembang yang kurang lebih berpengalaman, jadi saya akan kehilangan beberapa detail.Siapa yang tidak bisa menunggu, di akhir artikel adalah tautan ke repositori github saya.Teknologi utama dipilih oleh Laravel dan Vue.js + Vuex karena ini adalah tumpukan utama saya.Untuk pengembangan cepat, saya mengambil Kit UI - ElementUI .tujuan utamanya
Untuk membuat fondasi untuk proyek menengah dan besar yang:- akan membantu menghindari kohesi modul yang kaku
- dimengerti untuk seorang programmer dengan sedikit pengalaman
- membantu menghindari duplikasi kode
- akan mudah berkembang
- mengurangi waktu mulai proyek
- mengurangi waktu dukungan proyek dan navigasi kode
Untuk membuat hidup semudah mungkin, jangan bingung dalam proyek ini, Anda perlu menyusun ego Anda dengan benar. Awalnya, aplikasi harus dibagi ke dalam tingkat tanggung jawab, seperti antarmuka pengguna, basis data, logika bisnis.Selanjutnya, setiap lapisan harus dibagi pertama berdasarkan fungsionalitas, dan kemudian setiap modul fungsional harus dibagi sesuai dengan pola yang dipilih.Terinspirasi oleh filosofi DDD, saya memutuskan untuk membagi front-end dan back-end menjadi modul semantik. Tapi ini bukan domain klasik yang dijelaskan Evans. Modelnya juga tidak sempurna. Dalam aplikasi apa pun, seiring berjalannya waktu, hubungan antar komponen selalu muncul - hubungan yang sama antar model.Dia meninggalkan model sebagai lapisan terpisah, karena mereka sepertinya menduplikasi database, dengan semua koneksinya.Membuat direktori di bagian depansumber daya / js / modul , di mana modul yang berbeda akan ditempatkan. Masing-masing akan memiliki api - metode untuk bekerja dengan back-end, komponen - semua komponen dan halaman, penyimpanan - penyimpanan, dan rute .{moduleName}/
│
├── routes.js
│
├── api/
│ └── index.js
│
├── components/
│ ├── {ModuleName}List.vue
│ ├── {ModuleName}View.vue
│ └── {ModuleName}Form.vue
│
└── store/
├── store.js
├── types.js
└── actions.js
Dalam sumber daya / js , folder inti dibuat , di mana komponen utama sistem berada.Ada juga bootstrap dan menyertakan folder untuk mengonfigurasi pustaka dan utilitas tambahan masing-masing.Proyek ini menggunakan pemuatan dinamis model. Yaitu, di core / route dan di core / state, kami memuat file routing dan penyimpanan yang sesuai secara otomatis (tidak perlu didaftarkan).Berikut adalah contoh bagaimana store.js dimuat dari modul yang berbeda secara otomatis.
const requireContext = require.context('../../modules', true, /store\.js$/)
let modules = requireContext.keys()
.map(file =>
[file.replace(/(^.\/)|(\.js$)/g, ''), requireContext(file)]
)
.reduce((modules, [path, module]) => {
let name = path.split('/')[0]
return { ...modules, [name]: module.store }
}, {})
modules = {...modules, core}
export default new Vuex.Store({
modules
})
Di backend di direktori aplikasi akan ada modul serupa. Setiap modul akan berisi folder Controllers, Requests, Resources . File dengan rute juga telah dipindahkan ke sini - routes_api.php .{ModuleName}/
│
├── routes_api.php
│
├── Controllers/
│ └──{ModuleName}Controller.php
│
├── Requests/
│ └──{ModuleName}Request.php
│
└── Resources/
└── {ModuleName}Resource.php
Pola desain lainnya seperti acara, pekerjaan, kebijakan, dll. tidak akan dimasukkan dalam modul, karena lebih jarang digunakan dan lebih logis untuk menyimpannya di lapisan terpisah.Semua manipulasi dengan pemuatan dinamis modul dilakukan sehingga keterlibatan minimal mengalahkan di antaranya. Ini memungkinkan Anda untuk menambah dan menghapus modul tanpa konsekuensi. Sekarang Anda dapat membuat pengrajin membuat perintah untuk membuat modul seperti itu. Dengan bantuannya, kami dapat dengan cepat mengisi proyek dengan entitas yang diperlukan bersama dengan fungsionalitas CRUD.Setelah menjalankan perintah php artisan make:module {ModuleName}, kita akan memiliki semua file yang diperlukan, termasuk model dan migrasi, agar CRUD lengkap dapat berfungsi. Anda hanya perlu menyelesaikan migrasiphp artisan migratedan semuanya akan bekerja. Kemungkinan besar Anda perlu menambahkan bidang tambahan, jadi sebelum migrasi, jangan lupa menambahkannya ke model, migrasi, dan juga keluaran ke vue.Dalam templat ini, teknologi JWT-Auth digunakan untuk otentikasi , tetapi mungkin berlebihan dan harus dibuat ulang untuk Laravel Sanctum. Pada gilirannya, vue-auth digunakan di front-end , membuatnya mudah untuk mengelola otorisasi dan peran pengguna.Di masa depan, saya ingin meningkatkan sistem. Tambahkan bus acara global, hubungkan soket web. Tambahkan tes. Dimungkinkan untuk membuat opsi manajemen peran di cabang terpisah atau membuat cabang dengan Kit UI lainnya. Akan menyenangkan mendengar rekomendasi, komentar.Awalnya, templat ini dikembangkan untuk kebutuhan Anda, tetapi sekarang saya berharap ini akan bermanfaat bagi pengguna lain.Semua kode dapat dilihat di repositori github saya .