YoYoCms.AbpProjectTemplate

Situs demo

Mari kita bicarakan proyek ini terlebih dahulu. Sama seperti judulnya, ini adalah kerangka kerja yang dikembangkan berdasarkan VUE+.NET. Ini juga merupakan kerangka kerja ABP yang telah lama ditunggu-tunggu oleh anggota grup untuk versi vue. Mari kita lihat berandanya terlebih dahulu:

Ini cukup keren. Saya akan memberi Anda akun demo.

Alamat demo: http://vue.yoyocms.com/ Akun: demo Kata sandi: bb123456 Tentu saja, Anda juga dapat mendaftarkan akun sendiri untuk verifikasi.

memperkenalkan

Bagi mahasiswa yang belum mengetahui framework ABP terlebih dahulu, mari kita jelaskan apa itu framework ABP:

ABP adalah singkatan dari "ASP.NET Boilerplate Project (ASP.NET Sample Project)". ASP.NET Boilerplate adalah titik awal baru untuk mengembangkan aplikasi WEB modern menggunakan praktik terbaik dan teknologi populer. Hal ini bertujuan untuk menjadi kerangka aplikasi WEB universal dan template proyek. Framework ABP adalah kerangka aplikasi berdasarkan teknologi ASP.NET CORE, ASP.NET MVC, dan Web API terbaru. Dan menggunakan kerangka kerja dan perpustakaan populer, ia menyediakan fungsi-fungsi umum yang mudah digunakan seperti otorisasi, injeksi ketergantungan, validasi, penanganan pengecualian, lokalisasi, logging, caching, dll. Arsitektur ABP mengimplementasikan arsitektur multi-layer (lapisan domain, lapisan aplikasi, lapisan infrastruktur dan lapisan presentasi), serta desain berbasis domain (entitas, repositori, layanan domain, layanan aplikasi, DTO, dll.). Infrastruktur yang baik juga diterapkan dan disediakan untuk menerapkan praktik terbaik seperti injeksi ketergantungan. Templat ABP dengan mudah membuat templat startup untuk proyek Anda. Ini mencakup kerangka kerja dan perpustakaan yang paling umum digunakan secara default. Juga memungkinkan Anda memilih arsitektur satu halaman (Angularjs) atau multi-halaman, EntityFramework atau NHibernate sebagai ORM. Kunjungi situs web resmi untuk mempelajari lebih lanjut.

struktur

Struktur proyek yang dipilih kali ini adalah:

• .kerangka bersih 4.6
• VUE + VUEX + VUE-ROUTER adalah teknologi pemisahan front-end dan back-end, tetapi pemisahannya tidak terlalu murni. Karena desain ABP, jika Anda ingin memisahkan front-end dan back-end secara murni, maka akan dilakukan akan sedikit merepotkan saat melakukan otorisasi, sehingga metode token tidak digunakan.

Pada artikel sebelumnya [ABP Framework] Interception Usage of Dynamic Web Api telah dijelaskan cara menggunakan token untuk verifikasi otorisasi. Namun hal itu tidak mempengaruhi metode pengembangan front-end dan back-end. Lihatlah halaman login:

Realisasi fungsi

• Masuk Daftar
• Peralihan multi-bahasa
• Manajemen pesan
• Manajemen penyewa (multi-penyewa)
• manajemen peran
• Sidang
• Otorisasi (manajemen hak)
• Manajemen pengaturan
• Manajemen multi-bahasa
• Catatan audit
• WebApi Dinamis dan fungsi lainnya, saya harap Anda dapat merasakannya sendiri.

Jika keterampilan .NET Anda kurang solid atau Anda ingin meningkatkannya, ABP adalah kerangka pembelajaran terbaik.

Deskripsi tumpukan teknologi front-end:

####Framework yang digunakan oleh front end 1.vue
2.vuex
3.vue-router
4.jquery

perpustakaan UI

1.elemen-ui
2. gelombang
3.bootstrap
4.BSBADMIN

Struktur proyek

• skrip pembuatan yang dibuat oleh webpack
• config konfigurasi yang dibangun webpack
• File setelah dist build
• direktori kode sumber src
  • aset file sumber daya global
  • metode publik gaya publik umum
    • paket bahasa bahasa (sementara tidak digunakan)
    • kelas alat utils
  • komponen komponen global
  • filter filter
  • mixin menyimpan berbagai gaya sass
  • konfigurasi perutean router
  • lapisan permintaan antarmuka layanan
  • tokovuex
  • vendor menyimpan perpustakaan pihak ketiga
  • melihat melihat file
  • vuePlugin plugin vue khusus
• file statis statis, direktori yang dikompilasi tetap tidak berubah

Berikut ini adalah kata-kata asli dari staf front-end. Terima kasih Huixin666 karena telah meluangkan waktu untuk meningkatkan antarmuka vue.

Langkah-langkah pengembangan

Sebelum melanjutkan pengembangan, kami berasumsi bahwa Anda memiliki dasar keterampilan dasar dalam es6 , sass , vue , vue-router , dan vuex .
Disarankan untuk membaca saran You Yuxi

Instal dependensi front-end

Masuk ke direktori Aset di Web项目

 $ npm i

Jalankan proyek

Ingatlah untuk memulai latar belakang terlebih dahulu

 $ npm run dev

webpack akan menggunakan express untuk memulai server web dengan port 8986

menyebarkan

 $ npm run build

Perintah ini akan mengkompilasi semua file ke dalam direktori dist , lihat diagram struktur proyek di atas

1.Tambahkan halaman

• Pertama pergi ke src/views untuk membuat direktori modul.
  Misalnya, saat ini saya menambahkan direktori bernama administration , yang berisi semua halaman manajemen sistem. Setiap modul juga dapat berisi direktori components dan assets , yang berarti komponen dan sumber daya di dalamnya hanya milik modul saat ini.
• Selanjutnya, tambahkan Index.vue sebagai halaman perutean induk untuk mengontrol semua halaman dalam modul ini.
  Perlu memperhatikan peran keep-alive
• Kemudian tambahkan halaman yang Anda butuhkan, seperti User.vue
  Jika Anda perlu mendapatkan data, tambahkan metode bernama fetchData dalam methods . Dalam metode ini, Anda perlu memanggil abp.view.setContentLoading(false) setelah mendapatkan data untuk menutup lapisan masker pemuatan area konten. (Anda dapat merujuk ke User.vue)

2.Tambahkan rute

• Masuk ke direktori src/router , tambahkan folder modul routing, dan tambahkan file bernama index.js di folder tersebut.
• Kemudian daftarkan informasi perutean yang ditambahkan saat ini di src/router/index.js

3.Tambahkan layanan

• Masuk ke direktori src/services dan tambahkan modul yang sesuai dengan permintaan antarmuka. Misalnya, objek terkait peran ditempatkan di roleService.js Objek yang diekspor oleh file roleService.js sesuai dengan abp.services.yoyocms.role . Keuntungan menggunakan cara ini adalah dapat dikelola dan diperluas secara seragam

Di atas adalah situasi dasar ABP versi vue.

Alamat pengunduhan:

Alamat open source versi vue: https://github.com/yoyocms/YoYoCms.AbpProjectTemplate Alamat demo versi vue: http://vue.yoyocms.com/ Alamat open source versi AngularJS: https ://github.com/ltm0203/YoYoCms alamat demo Versi AngularJS: http://www.yoyocms.com

Jika Anda memiliki saran bagus atau masukan bug, silakan ajukan masalah di github.

Pada saat yang sama, kami juga membuat project generator yang fungsinya mirip dengan template resmi ABP. Fungsi ini akan dirilis pada pertengahan tahun, jadi harap terus menantikannya.