spring rest admin

Spring-Rest-Admin

Einführung

Bei diesem Projekt handelt es sich um ein Management-Desk-Frontend-Projekt, das auf Vue und ElementUI basiert. Es wird in Verbindung mit dem Spring-Rest-Backend verwendet. Der Framework-Code stammt von Vue-Element-Admin, auf dessen Basis einige Änderungen vorgenommen wurden. Hauptsächlich wurde die Rechteverwaltungsfunktion optimiert. Klicken Sie hier, um auf die Online-Demo zuzugreifen .

Optimierung

• Menüberechtigungen werden automatisch basierend auf der Routing-Konfiguration generiert und vom Administrator mit der Backend-Datenbank synchronisiert.

• Sie können Schaltflächenberechtigungen unter synchronisierten Menüberechtigungen hinzufügen, ändern und löschen.

• Zusätzlich zu den Schaltflächenberechtigungen werden die Metadaten der Menüberechtigungen und Schnittstellenberechtigungen automatisch vom Front-End bzw. Back-End generiert. Auch wenn alle Datenbankdatensätze gelöscht werden, muss der Administrator sie nur erneut synchronisieren, ohne Tabellendatensätze manuell einzufügen.

• Beim Hinzufügen von Schaltflächenberechtigungen wird das Präfix automatisch generiert und nur die erforderlichen Teile ausgefüllt, um Formatverwechslungen zu vermeiden;

• Es wurde die Funktion hinzugefügt, Menüberechtigungen und Schaltflächenberechtigungen mit Schnittstellenberechtigungen zu verknüpfen. Rollen stehen nur in direktem Zusammenhang mit Menüberechtigungen und Schaltflächenberechtigungen.

• Verwenden Sie bei der Authentifizierung von Seitenelementen Aufzählungskonstanten, um die direkte Verwendung von Berechtigungszeichenfolgen zu vermeiden und die Wartung zu erleichtern.

• Definieren Sie die Aufrufklassenhierarchie der API-Schnittstelle so, dass sie mit der Klassenhierarchie der Hintergrundschnittstelle übereinstimmt, um Redundanz zu beseitigen und die Wiederverwendung von Code zu verbessern.

• Beheben Sie den Fehler der Komponente el-scrollbar : Wenn der Browser bis zu einem bestimmten Grad verkleinert wird, wird die ursprünglich verborgene Bildlaufleiste angezeigt. Je größer das Verkleinerungsverhältnis, desto offensichtlicher wird das Phänomen.

Vorbereitung der Entwicklungsumgebung

Vorbereitung der Node.js-Umgebung

Es wird empfohlen, v12 für die Node.js-Version zu verwenden. Andere Versionen scheinen in Ordnung zu sein.

Es wird empfohlen, nvm für die Node.js-Versionsverwaltung unter Linux und MacOS zu verwenden. nvm unterstützt Windows nicht, Sie können jedoch die Alternative nvm-windows verwenden.

Nehmen Sie als Beispiel nvm-windows unter Windows (ausgeführt unter 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

Projektprüfung und Ausführung

Hinweis: Bevor Sie das Frontend der Verwaltungskonsole ausführen, ist es am besten, zuerst den Serverhintergrund auszuführen.

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

Hinweis: Wenn beim Ausführen des Befehls npm install “ ein Fehler gemeldet wird und die Fehlermeldung npm ERR! Failed at the [email protected] install script. können Sie den folgenden Befehl ausführen und dann npm install ausführen.

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

Wenn während der npm-Installationsphase andere Fehler gemeldet werden, kann dies daran liegen, dass einige Pakete nicht von der Taobao-Spiegelstation heruntergeladen werden können und direkt von einigen nicht zugänglichen externen Netzwerkadressen heruntergeladen werden müssen. Sie können es jedoch versuchen Fügen Sie die Proxy-Konfiguration hinzu. Versuchen Sie es später erneut.

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

Wenn npm install erfolgreich ausgeführt wurde und keine Fehler gemeldet werden, können Sie mit der Ausführung fortfahren.

$ npm run serve

Nach einem Moment öffnet sich der Browser automatisch und springt zur Adresse http://localhost:9527/login . Wählen Sie einen integrierten Benutzer aus, um sich direkt anzumelden.

Hinweis: Der Serverhintergrund muss gestartet werden, bevor Sie sich erfolgreich anmelden können.

Umgebungskonfigurationsdatei

vue-element-admin unterstützt mehrere Umgebungskonfigurationen. Das Format des Umgebungskonfigurationsdateinamens ist .env.[环境名] . Wenn diese Umgebungskonfigurationsinformationen nur lokal verwendet werden müssen, fügen Sie das Suffix .local am Ende hinzu Dateiname, damit die Konfigurationsdatei nicht von git in das Repository hochgeladen wird, sondern nur lokal gespeichert wird.

Hinweis: Zusätzlich zur Entwicklungsumgebungskonfiguration .env.development und .env.development.local müssen andere Umgebungskonfigurationsdateien NODE_ENV = production festlegen. Der Umgebungsname ENV muss dem Teil zwischen .env und .local entsprechen Name der Umgebungskonfigurationsdatei. Darüber hinaus muss auch das Präfix der Schnittstellenaufrufadresse VUE_APP_BASE_API geändert werden.

Hinweis: Wenn Sie andere Umgebungsvariablen in der Konfigurationsdatei definieren möchten, müssen diese mit VUE_APP_ beginnen und sie über process.env.VUE_APP_xxxx im Code abrufen.

Paketbereitstellung

Hinweis: Bitte bestätigen Sie vor dem Packen, dass npm install und npm run serve normal und ohne Fehler ausgeführt werden können.

Der Verpackungsbefehl lautet: npm run build -- --mode <环境名> In der obigen Abbildung lautet der Verpackungsbefehl beispielsweise:

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

Nachdem der Befehl erfolgreich ausgeführt wurde, befindet sich die Verpackungsergebnisdatei im Verzeichnis dist.

Hinweis: Das Codekomprimierungs-Plug-In compression-webpack-plugin kann nur die vorherige Version v6 und nicht die neueste v7-Version verwenden, andernfalls wird anscheinend ein Fehler gemeldet.

Darüber hinaus ist der Routing-Modus dieses Projekts als Verlaufsmodus konfiguriert. Wenn Sie in diesem Modus arbeiten möchten, muss Nginx entsprechend konfiguriert werden (Einzelheiten finden Sie unter Routing mit history.pushState ). Gleichzeitig muss eine gzip-bezogene Konfiguration hinzugefügt werden (nur diese Konfigurationszeile ist erforderlich):

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