spring rest admin

admin istirahat musim semi

Perkenalan

Proyek ini adalah proyek front-end meja manajemen berdasarkan Vue dan ElementUI. Ini digunakan bersama dengan Spring-Rest Backend. Kode kerangka kerja berasal dari Vue-Element-Admin, dengan beberapa perubahan dilakukan pada dasarnya. Terutama mengoptimalkan fungsi manajemen hak. Klik di sini untuk mengakses demo online .

optimasi

• Izin menu dibuat secara otomatis berdasarkan konfigurasi perutean dan disinkronkan ke database backend oleh administrator;

• Anda dapat menambah, mengubah, dan menghapus izin tombol di bawah izin menu yang disinkronkan;

• Selain izin tombol, metadata izin menu dan izin antarmuka secara otomatis dihasilkan oleh ujung depan dan belakang masing-masing. Bahkan jika semua catatan basis data dihapus, administrator hanya perlu menyinkronkannya lagi tanpa memasukkan catatan tabel secara manual;

• Saat menambahkan izin tombol, awalan dibuat secara otomatis dan hanya bagian yang diperlukan yang diisi untuk mencegah kebingungan format;

• Menambahkan fungsi untuk mengaitkan izin menu dan izin tombol dengan izin antarmuka hanya terkait langsung dengan izin menu dan izin tombol;

• Saat mengautentikasi elemen halaman, gunakan konstanta enumerasi untuk menghindari penggunaan string izin secara langsung untuk memfasilitasi pemeliharaan;

• Tentukan hierarki kelas pemanggilan antarmuka API agar konsisten dengan hierarki kelas antarmuka latar belakang untuk menghilangkan redundansi dan meningkatkan penggunaan kembali kode;

• Memperbaiki bug pada komponen el-scrollbar : ketika browser diperkecil sampai batas tertentu, bilah gulir tersembunyi asli akan terlihat. Semakin besar rasio pengurangan, semakin jelas fenomena tersebut;

Persiapan lingkungan pengembangan

Persiapan lingkungan Node.js

Disarankan untuk menggunakan v12 untuk versi Node.js.

Disarankan untuk menggunakan nvm untuk manajemen versi Node.js di Linux dan MacOS. nvm tidak mendukung Windows, tetapi Anda dapat menggunakan nvm-windows alternatif.

Ambil nvm-windows di Windows sebagai contoh (dijalankan di bawah git bash):

 # 设置 nvm 下载 node 和 npm 的镜像地址（直接访问外网太慢）
$ nvm node_mirror https://npm.taobao.org/mirrors/node/
$ nvm npm_mirror https://npm.taobao.org/mirrors/npm/

# 设置 npm 下载包的镜像地址
$ npm config set registry https://registry.npm.taobao.org

# 查看可用的 Node.js版本
$ nvm list available

# 挑选一个最新的 v12 的 LTS 版本进行安装
$ nvm install 12.20.1
$ nvm use 12.20.1

# 查看已经安装的所有 Node.js 版本
$ nvm list
# 切换希望使用的版本
$ nvm use < nodeVersion >

# 查看当前的 Node.js 版本 和 npm 版本
$ node -v
$ npm -v

Checkout dan jalankan proyek

Catatan: Sebelum menjalankan front-end konsol manajemen, yang terbaik adalah menjalankan server di latar belakang terlebih dahulu.

$ git clone https://github.com/bianyun1981/spring-rest-admin.git
$ cd spring-rest-admin
$ npm install

Catatan: Jika terjadi kesalahan saat menjalankan perintah npm install , dan pesan kesalahannya adalah npm ERR! Failed at the [email protected] install script. Anda dapat menjalankan perintah berikut lalu jalankan npm install :

$ npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

Jika ada kesalahan lain yang dilaporkan selama tahap instalasi npm, itu mungkin karena beberapa paket tidak dapat diunduh dari stasiun mirror Taobao dan perlu diunduh langsung dari beberapa alamat jaringan eksternal yang tidak dapat diakses. Namun, unduhan tidak berhasil konfigurasi proksi. Coba lagi nanti.

$ npm config set proxy http://username:password@host:port
$ npm config set https-proxy http://username:password@host:port

Jika npm install berhasil dijalankan dan tidak ada kesalahan yang dilaporkan, Anda dapat terus menjalankannya.

$ npm run serve

Setelah beberapa saat, browser akan otomatis terbuka dan melompat ke alamat http://localhost:9527/login . Pilih pengguna bawaan untuk langsung login.

Catatan: Latar belakang server harus dimulai sebelum Anda berhasil masuk.

file konfigurasi lingkungan

vue-element-admin mendukung beberapa konfigurasi lingkungan. Format nama file konfigurasi lingkungan adalah .env.[环境名] . Jika informasi konfigurasi lingkungan ini hanya perlu digunakan secara lokal, tambahkan akhiran .local di akhir nama file, sehingga file konfigurasi tidak akan diunggah ke repositori oleh git , hanya akan disimpan secara lokal.

Catatan: Selain konfigurasi lingkungan pengembangan .env.development dan .env.development.local , file konfigurasi lingkungan lainnya perlu disetel NODE_ENV = production . Nama lingkungan ENV harus sesuai dengan bagian antara .env dan .local di nama file konfigurasi lingkungan Selain itu, awalan alamat panggilan antarmuka VUE_APP_BASE_API juga harus diubah.

Catatan: Jika Anda ingin mendefinisikan variabel lingkungan lain dalam file konfigurasi, variabel tersebut harus dimulai dengan VUE_APP_ dan mendapatkannya melalui process.env.VUE_APP_xxxx dalam kode.

Penyebaran paket

Catatan: Sebelum pengemasan, harap konfirmasi bahwa npm install dan npm run serve dapat dijalankan secara normal tanpa kesalahan.

Perintah pengemasannya adalah: npm run build -- --mode <环境名> .

$ npm run build -- --mode vm-centos7

Setelah perintah berhasil dijalankan maka file hasil packing akan berada pada direktori dist.

Catatan: Plugin kompresi kode compression-webpack-plugin hanya dapat menggunakan versi sebelumnya v6, dan tidak dapat menggunakan versi v7 terbaru, jika tidak maka akan dilaporkan kesalahan.

Selain itu, mode perutean proyek ini dikonfigurasi sebagai mode riwayat. Jika Anda ingin menjalankan mode ini, nginx perlu dikonfigurasikan sesuai (lihat perutean menggunakan history.pushState untuk detailnya). Pada saat yang sama, konfigurasi terkait gzip harus ditambahkan (hanya baris konfigurasi ini yang diperlukan):

 location / {
  gzip_static on ;
  try_files $uri $uri / /index.html;
}