old springboot vue

springboot2-vue3

Eine gemeinsame Hintergrundvorlage basierend auf Springboot2 und Vue3, ohne redundante Funktionen, nur Berechtigungsverwaltung und gemeinsame Funktionen . Front-End- und Back-End-Trennungsprojekt, Code hat 90 % der Alibaba-Codierungskonventionen beim Scannen und Finden von Fehlern bestanden

Neue Versionsadresse

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

Leitfaden „Erste Schritte“.

Die folgende Anleitung hilft Ihnen bei der Installation und Ausführung des Projekts auf Ihrem lokalen Computer für Entwicklungs- und Testzwecke. Informationen zur Bereitstellung dieses Projekts in einer Online-Umgebung finden Sie im Abschnitt „Bereitstellung“.

Installationsanforderungen und -schritte

• Installieren und konfigurieren Sie die Java-Umgebung JDK1.8
• Installieren Sie MySQL 8 , erstellen Sie eine Datenbank (utf8mb4) und importieren Sie SQL (im Doc-Verzeichnis).
• Um Redis zu installieren, laden Sie es einfach herunter und installieren Sie es
• Entwicklungstools müssen das Lombok -Plug-In installieren (IDEA wird für Entwicklungstools empfohlen)
• --- Back-End-Betrieb (wenn ein Problem auftritt, handelt es sich normalerweise um einen Fehler in der Konfiguration der Datenquelle in der YML-Konfigurationsdatei)
• Installieren und konfigurieren Sie die Knotenumgebung
• Installieren Sie vue-cli3 , geben Sie das Vue-Verzeichnis ein und führen Sie npm install aus
• ---Führen Sie npm run serve im Frontend aus ( WebStorm oder IDEA können direkt auf das grüne Dreieck links von Zeile 6 in der Datei package.json klicken)

Demo-Adresse

• Online-Demo-Adresse
  • Benutzername:Superadmin
  • Passwort:111111
  • Tipp: Mehrere Benutzer, die sich gleichzeitig anmelden, können ausgeschlossen werden.
  • Tipp: In der Demoumgebung sind Hinzufügungs-, Lösch- und Änderungsvorgänge verboten. Ignorieren Sie einfach den Fehler.
  • Tipp: Wenn es andere Ausnahmen gibt, erzwingen Sie bitte die Aktualisierung der Seite (möglicherweise liegt ein Cache-Problem vor).
• Schnittstellendokumentation
  • Swagger-Bootstrap
  • Tipps: Die Anfrage wird 404 anzeigen. Bitte fügen Sie /github manuell vor der Anfrage hinzu

einsetzen

• Führen Sie den Befehl mvn clean package im Springboot-Verzeichnis aus, um das Paket zu erstellen. Nach dem Packen befindet sich die generierte Datei im Verzeichnis /target/build.
  • Das Konfigurationsverzeichnis speichert Konfigurationsdateien.
  • Das lib-Verzeichnis ist das JAR-Paket, von dem Maven abhängt.
  • Das statische Verzeichnis speichert statische Dateien
  • Die JAR-Datei ist das generierte JAR-Paket (wenn die POM-Abhängigkeit in Zukunft unverändert bleibt, können Sie nur das JAR-Paket ersetzen).
• Führen Sie den Befehl npm run build im zu verpackenden Vue-Verzeichnis aus. Nach dem Packen befindet sich die generierte Datei im Verzeichnis /dist.
  • Die Verpackungskonfiguration befindet sich in der .env- Datei und der vue.config.js -Datei
• Der Bereitstellungsserver muss die JDK1.8- , MySQL 8- und Redis -Umgebung konfigurieren
• Das JAR-Paket führt nohup java -jar springboot.jar & kann im Hintergrund ausgeführt werden und das Protokoll in die Datei nohup.out im aktuellen Verzeichnis ausgeben.
• Es wird empfohlen, Nginx für den Bereitstellungsserver zu konfigurieren und unter nginx zu platzieren. Wenn es nicht konfiguriert ist, kann es unter static im selben Verzeichnis des JAR- Pakets abgelegt werden.

Häufige Fehler

• java.lang.RuntimeException: Cannot resolve classpath entry: E:maven-repositorymysqlmysql-connector-java8.0.15mysql-connector-java-8.0.15.jar
  • Fehler: Entitätsklasse basierend auf der Datenbank generieren
  • Lösung: Ändern Sie den JAR-Paketpfad in Zeile 6 von resources/config/generator-config.xml in Ihren eigenen JAR-Paketpfad
• npm install
  • Fehler: Vue-Installationsabhängigkeitsfehler, normalerweise Node-Sass
  • Lösung: Ändern Sie das Taobao-Image oder 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'
  • Fehler: Nach dem Erstellen eines neuen Menüs im Hintergrund (das Menü hat keine Untergeordneten) und der Berechtigung zum Hinzufügen des Menüs tritt dieser Fehler beim erneuten Anmelden auf.
  • Lösung: Fügen Sie das Menüverzeichnis und die Datei Index.vue zum Pfad /src/views/index/ im Vue-Projekt hinzu

hinteres Ende:

Springboot, Mybatis, Redis

1. Einführung
   • Projekt basierend auf der Springboot- Vorlage erstellt
2. Grundkonfiguration
   • Die .yml- Datei kann relevante Informationen konfigurieren
   • Das Konfigurationsverzeichnis enthält allgemeine Modulkonfigurationen.
   • Der Filter ist mit domänenübergreifender Filterung, IP-Filterung , Parameterfilterung usw. konfiguriert.
     • Parameterfilteranforderungen entfernen automatisch führende und nachfolgende Leerzeichen und verwenden Jsoup zum Filtern von HTML-Tags (die Filterstufe kann angepasst werden).
3. Berechtigungsverwaltung
   • Schnittstelle mit @AdminAuthToken -Annotation, der Anforderungsheader muss über ein Token verfügen, um darauf zugreifen zu können
   • Arbeiten Sie mit der Vue-Frontend-Seite zusammen, um das Routing dynamisch zu rendern und die Anzeigeschaltfläche auszublenden: Die Schaltfläche wird in $store.state.role['buttons'] (Frontend) gespeichert.
   • Entsprechend den Berechtigungen auf Schnittstellenebene muss die entsprechende API , die dem Menü oder der Schaltfläche in der Funktionsverwaltung entspricht, verbessert werden, andernfalls wird sie standardmäßig zugelassen, nachdem das Token vorhanden ist.
4. Die Verpackungsfabrik verwendet CURD und erbt lediglich BaseService.
   • baseInsert() und baseUpdate() filtern automatisch Felder mit Nullwerten
   • Bitte filtern Sie die Parameter baseUpdate() oder erstellen Sie eine neue Entitätsklasse für den Zuweisungsvorgang.
5. Entitätsklassen basierend auf der Datenbank automatisch generieren
   • Führen Sie die Methode org.mybatis.generator.plugin.MyBatisTest.main() aus
   • Spezifische Konfigurationsressourcen /config/generator-config.xml
6. Protokolle werden täglich gespeichert und die spezifische Konfiguration befindet sich in resources/config/logback-spring.xml
7. Zeichnen Sie das Administratorbenutzerprotokoll automatisch auf. Die Annotation @SystemLog kann auf dem Controller platziert werden

Frontend:

vue:

1. Einführung

   • Projekt basierend auf vue cli3 erstellt
   • Benutzeroberfläche der Benutzeroberfläche: element-ui
   • Netzwerkanfrage: axios
     • Globale Aufrufmethode this.$axios({ url: '', data: {}, success(data) {} });
       • URL: Es ist nur die Adresse nach dem Domainnamen erforderlich
       • Erfolg: Der Rückruf muss nur den Fall behandeln , bei dem der Code 200 ist
   • Globale Variablen und Methoden befinden sich im Verzeichnis /src/utils
   • Überschreiben Sie den Element-UI-Stil in der Datei /src/assets/sass/element-variables.scss
   • Einführung der Iconfont-Schriftartenbibliothek
     • Überschreiben Sie einfach die Dateien im Verzeichnis /src/assets/font/iconfont
     • Zitieren Sie <i class="iconfont iconfont-address"></i>
   • Die meisten Projekte haben Kommentare

2. Grundkonfiguration

   • Arbeiten Sie mit dem Backend zusammen, um dynamisches Routing zu implementieren: Geben Sie den Pfad in das Funktionsverwaltungsformular ein. Der Standardstammpfad lautet /src/views/index/
   • Die Dateien .env.produktion/development und vue.config.js sind Konfigurationsdateien

3. Häufig verwendete Komponenten, die gekapselt sind ( Einzelheiten finden Sie unter /src/views/index/system/sysUser/ für detaillierte Kommentare ).

   • dialog:Popup-Box
     • Detail: Daten in Form von Titel + Inhalt anzeigen
     • Formular: Formularübermittlung, @submit muss die Situation erst nach der Formularüberprüfung behandeln
     • Index: gewöhnliches Popup-Feld
   • Tisch: Tisch
     • Von der Form akzeptiertes Rückgabebeispiel: {"list":[],"pageNum":1,"pageSize":10}
     • Tabellendatenanforderung tableDataRequest: { url: '', data: {} }
       • URL: Anfrageadresse
       • Daten: zusätzliche Parameter, die bei der Top-Suche verwendet werden
     • Tabellenanzeige tableColumns: [ {prop: 'username', label: '用户名',formatter(){ return ''; }} ] akzeptiert ein Array --- siehe Laui-Tabelle
       • Formatierer: komplexe Anzeige, kann einen Dom zurückgeben

Danksagungen

Erstens dank springboot , vue , element-ui und anderen hervorragenden Open-Source-Projekten. Zweitens verweist dieses Projekt auf viele Online-Beispiele. Wenn Sie ähnlichen Code sehen, gibt es nur eine Antwort.