old springboot vue

springboot2-vue3

Templat latar belakang umum berdasarkan springboot2 dan vue3, tanpa fungsi berlebihan, hanya manajemen izin dan fungsi umum . Proyek pemisahan front-end dan back-end, kode melewati 90% pemindaian konvensi pengkodean Alibaba dan menemukan bug

Alamat versi baru

 * 本项目不再维护，请关注新版 

Panduan Memulai

Panduan berikut akan membantu Anda menginstal dan menjalankan proyek di mesin lokal Anda untuk pengembangan dan pengujian. Untuk informasi tentang cara menyebarkan proyek ini ke lingkungan online, silakan merujuk ke bagian penerapan.

Persyaratan dan langkah instalasi

• Instal dan konfigurasikan lingkungan Java, JDK1.8
• Instal mysql 8 , buat database (utf8mb4) dan impor sql (di direktori doc)
• Untuk menginstal redis , cukup unduh dan instal
• Alat pengembangan perlu menginstal plug-in lombok (IDEA direkomendasikan untuk alat pengembangan)
• --- Operasi back-end (jika ada masalah biasanya kesalahan konfigurasi sumber data di file konfigurasi yml)
• Instal dan konfigurasikan lingkungan node
• Instal vue-cli3 , masuk ke direktori vue dan jalankan npm install
• --- Jalankan npm run serve di front end ( WebStorm atau IDEA bisa langsung klik segitiga hijau di sebelah kiri baris 6 pada file package.json )

Alamat demo

• Alamat demo online
  • Nama pengguna:superadmin
  • Kata sandi:111111
  • Tip: Beberapa pengguna yang masuk secara bersamaan mungkin akan dikeluarkan.
  • Tip: Lingkungan demo melarang operasi penambahan, penghapusan, dan modifikasi.
  • Tip: Jika ada pengecualian lain, silakan segarkan halaman secara paksa (mungkin masalah cache)
• Dokumentasi antarmuka
  • kesombongan-bootstrap
  • Tips: Permintaan akan menampilkan 404, harap tambahkan /github secara manual di depan permintaan

menyebarkan

• Jalankan perintah mvn clean package di direktori springboot untuk mengemas, file yang dihasilkan ada di direktori /target/build.
  • Direktori config menyimpan file konfigurasi.
  • Direktori lib adalah paket jar tempat maven bergantung.
  • direktori statis menyimpan file statis
  • File jar adalah paket jar yang dihasilkan (jika ketergantungan pom tetap tidak berubah di masa mendatang, Anda hanya dapat mengganti paket jar)
• Jalankan perintah npm run build di direktori vue untuk mengemas, file yang dihasilkan ada di direktori /dist.
  • Konfigurasi pengemasan ada di file .env dan file vue.config.js
• Server penerapan perlu mengonfigurasi lingkungan JDK1.8 , mysql 8 , dan redis
• Paket jar menjalankan nohup java -jar springboot.jar & dapat berjalan di latar belakang dan menampilkan log ke file nohup.out di direktori saat ini.
• Disarankan untuk mengkonfigurasi nginx untuk server penerapan. Vue dikemas dan ditempatkan di bawah nginx. Jika tidak dikonfigurasi, itu dapat ditempatkan di bawah statis di direktori yang sama dengan paket jar .

Kesalahan umum

• java.lang.RuntimeException: Cannot resolve classpath entry: E:maven-repositorymysqlmysql-connector-java8.0.15mysql-connector-java-8.0.15.jar
  • Kesalahan: Hasilkan kelas entitas berdasarkan database
  • Solusi: Ubah jalur paket jar di baris 6 resources/config/generator-config.xml ke jalur paket jar Anda sendiri
• npm install
  • Kesalahan: kesalahan ketergantungan instalasi vue, biasanya node-sass
  • Solusi: Ubah image Taobao atau npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
• /login ------请求失败-----error: Error: Cannot find module './q/Index'
  • Kesalahan: Setelah membuat menu baru di latar belakang (menu tidak memiliki bawahan) dan mendapat izin untuk menambahkan menu, kesalahan ini terjadi saat login kembali.
  • Solusi: Tambahkan direktori menu dan file Index.vue ke jalur /src/views/index/ di proyek vue

bagian belakang:

boot musim semi, mybatis, redis

1. Perkenalan
   • Proyek dibuat berdasarkan template springboot
2. Konfigurasi dasar
   • File .yml dapat mengonfigurasi informasi yang relevan
   • Direktori config berisi konfigurasi modul umum.
   • Filter dikonfigurasikan dengan lintas domain , pemfilteran IP , pemfilteran parameter , dll.
     • Permintaan pemfilteran parameter secara otomatis menghapus spasi awal dan akhir , menggunakan Jsoup untuk memfilter tag html (tingkat pemfilteran dapat disesuaikan)
3. Manajemen izin
   • Antarmuka dengan anotasi @AdminAuthToken , header permintaan harus memiliki token untuk diakses
   • Bekerja sama dengan halaman front-end vue untuk merender perutean secara dinamis dan menyembunyikan tombol tampilan: tombol disimpan di $store.state.role['buttons'] (front-end)
   • Sesuai dengan izin tingkat antarmuka, API terkait yang sesuai dengan menu atau tombol dalam manajemen fungsi harus ditingkatkan, jika tidak maka akan diizinkan secara default setelah token ada.
4. Pabrik pengemasan menggunakan CURD dan hanya mewarisi BaseService.
   • baseInsert() dan baseUpdate() akan secara otomatis memfilter bidang dengan nilai nol
   • Harap filter parameter baseUpdate() , atau buat kelas entitas baru untuk operasi penugasan.
5. Secara otomatis menghasilkan kelas entitas berdasarkan database
   • Jalankan metode org.mybatis.generator.plugin.MyBatisTest.main()
   • Sumber daya konfigurasi tertentu/config/generator-config.xml
6. Log disimpan setiap hari, dan konfigurasi spesifiknya ada di resources/config/logback-spring.xml
7. Secara otomatis mencatat log pengguna admin , anotasi @SystemLog dapat ditempatkan pada Kontroler

ujung depan:

lihat:

1. Perkenalan

   • Proyek dibuat berdasarkan vue cli3
   • Antarmuka UI: elemen-ui
   • Permintaan jaringan: aksio
     • Metode pemanggilan global this.$axios({ url: '', data: {}, success(data) {} });
       • url: hanya alamat setelah nama domain yang diperlukan
       • sukses: panggilan balik hanya perlu menangani kasus di mana kodenya adalah 200
   • Variabel dan metode global ada di direktori /src/utils
   • Ganti gaya elemen-ui di file /src/assets/sass/element-variables.scss
   • Perkenalkan perpustakaan font iconfont
     • Timpa saja file di direktori /src/assets/font/iconfont
     • Kutipan <i class="iconfont iconfont-address"></i>
   • Sebagian besar proyek memiliki komentar

2. Konfigurasi dasar

   • Bekerja sama dengan backend untuk mengimplementasikan perutean dinamis: isi jalur di formulir manajemen fungsi, jalur root default adalah /src/views/index/
   • File .env.production/development dan vue.config.js adalah file konfigurasi

3. Komponen yang umum digunakan yang dienkapsulasi ( untuk detailnya, lihat /src/views/index/system/sysUser/ untuk komentar detailnya )

   • dialog: kotak pop-up
     • detail : menampilkan data berupa judul + isi
     • form: penyerahan formulir, @submit hanya perlu menangani situasi setelah verifikasi formulir
     • indeks: kotak pop-up biasa
   • meja: meja
     • Contoh pengembalian yang diterima dengan formulir: {"list":[],"pageNum":1,"pageSize":10}
     • Permintaan data tabel tableDataRequest: { url: '', data: {} }
       • url: alamat permintaan
       • data: parameter tambahan, digunakan dengan pencarian teratas
     • Tampilan tabel tableColumns: [ {prop: 'username', label: '用户名',formatter(){ return ''; }} ] menerima array --- lihat tabel layui
       • formatter: tampilan kompleks, dapat mengembalikan dom

Ucapan Terima Kasih

Pertama-tama, terima kasih kepada springboot , vue , element-ui dan proyek open source luar biasa lainnya. Kedua, proyek ini mengacu pada banyak contoh online. Jika Anda melihat kode serupa, maka hanya ada satu jawabannya.