muteki
- Einführung
- vue3.0 ist eine auf Springboot und Vue basierende Back-End-Verwaltungsvorlage, die Front-End und Back-End trennt. Sie kann auch schnell entwickelt werden, um eine Schnittstelle (Restfull API) zum Front-End bereitzustellen.
- Der Code hat 90 % der Scans und Findbugs der Alibaba-Codierungskonvention bestanden
- Die WEB-Seite unterstützt die Anmeldung an mehreren Terminals und die Terminals können einzeln verwaltet werden.
- Benutzerverwaltung, Rollenverwaltung, Abteilungsverwaltung, Berechtigungsverwaltung, Menüverwaltung, Protokollverwaltung usw.
- Es gibt die Vue3-Ant-Design-Vue-Version und die Vue2-Element-Version
- Das Projekt ist vollständig Open-Source-MIT
- Glanz! Wie eine Sternschnuppe
Entwicklungsdokumentation
- Das Dokument wird laufend aktualisiert. . .
Ursprüngliche Projektadresse
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 , utf8mb4_general_ci ) und importieren Sie SQL (unter dem Dokumentverzeichnis).
- 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-cli , 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
ant-design-vue-Version, vue3.0, ant-design-vue2.0.0
Elementversion, vue2.5
| Konto | Passwort |
|---|
| Superadmin | 111111 |
| Administrator | 111111 |
| admin1 | 111111 |
- Tipp: Die gleichzeitige Anmeldung mehrerer Benutzer kann gesperrt werden. Nur Superadministratoren können alle Seiten sehen.
- Tipp: In der Demoumgebung sind einige Hinzufügungs-, Lösch- und Änderungsvorgänge verboten.
- Tipp: Wenn es andere Ausnahmen gibt, erzwingen Sie bitte die Aktualisierung der Seite (möglicherweise liegt ein Cache-Problem vor). Wenn es immer noch nicht funktioniert, melden Sie bitte Probleme.
Schnittstellendokumentation
- Swagger-Bootstrap
- Tipps: Bitte fügen Sie /muteki manuell vor der Anfrage hinzu. Die Anfrage führt zu einem Zeitstempelfehler. Bitte tragen Sie __t=aktueller Zeitstempel in die Anfrage ein
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 abzulegen. Wenn es nicht konfiguriert ist, kann es unter static im selben Verzeichnis wie das JAR -Paket 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
hinteres Ende:
Springboot, Mybatis, Redis
- Einführung
- Projekt basierend auf der Springboot- Vorlage erstellt
- Grundkonfiguration
- Die .yml- Datei kann relevante Informationen konfigurieren
- Das Konfigurationsverzeichnis enthält allgemeine Modulkonfigurationen.
- Der Filter ist mit domänenübergreifender 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).
- Berechtigungsverwaltung
- Schnittstelle mit
@AuthToken -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
this.$globalFun.getSessionStorage('buttonMap') (Frontend) - 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.
- Die Verpackungsfabrik verwendet CURD und erbt BaseService.
-
baseInsert() und baseUpdate() filtern automatisch Felder mit Nullwerten
- 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
- Protokolle werden täglich gespeichert. Die spezifische Konfiguration befindet sich in resources/config/logback-spring.xml.
- Generieren Sie automatisch Datenbankdokumente basierend auf der Datenbank
- Führen Sie die Methode org.screw.ScrewTest.testScrew() aus
Frontend:
vue:
Einführung
- Projekt basierend auf Vue CLI 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
- Die meisten Projekte haben Kommentare
Grundkonfiguration
- Arbeiten Sie mit dem Backend zusammen, um dynamisches Routing zu implementieren: Geben Sie den Pfadpfad in das Funktionsverwaltungsformular ein. Der Standardstammpfad lautet /src/views/main/**/*/Index.vue/
- Die Dateien .env.produktion/development und vue.config.js sind Konfigurationsdateien
Häufig verwendete Komponenten in Paketen
- 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.
