Studio Vue
1.0.0
Letztes Jahr hörte ich zufällig im Studio, dass andere Studios planten, eine offizielle Website zu erstellen. Dann nutzte ich eine Laune und fand eine Vorlage, um meine eigene offizielle Website und ein Backend-Verwaltungssystem zu erstellen Es gab nur Login, Registrierung und eine Seite zur Übermittlung persönlicher Informationen, hauptsächlich zur bequemen Anzeige dynamischer Zusammenfassungen der Teammitglieder.
Ich habe mehrere Gründe zusammengefasst, warum ich dieses Studio-Management-System weiterentwickeln möchte: ① Zuvor habe ich auch auf Gitee und Github nach relevanten Schulstudio- und Labor-Management-Systemen gesucht, aber keines gefunden, das vollständiger oder besser war. ②Um einige Highlights in Ihrem Lebenslauf zu haben. ③ Nutzen Sie die erlernte Technologie in einem Anwendungsszenario, um Ihr technologisches Lernen und Ihren Fortschritt zu steigern.
In diesem Jahr nutzten wir einfach das Thema Abschlussprojekt, um die Entwicklung fortzusetzen, und es dauerte zunächst fast einen Monat, das Backend-Managementsystem zu verbessern.
Dieses Studiosystem ist hauptsächlich für Campusstudios gedacht und kann von Einzelpersonen und Studioteams genutzt werden.
Danksagungen :
Studio-Vue-Demo-Adresse : https://www.codercl.cn/
Vollständiges Tutorial für die Bereitstellung und den Start des Projekts: Tutorial für die Bereitstellung und den Start des Studio-Vue-Campus-Laborsystems (SpringBoot+Vue).
Entsprechende Open-Source-Adresse des Miniprogramms: studio-wx (Gitee), studio-wx (Github)
 |  |
 |  |
 |  |
 |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |
| Technologie | veranschaulichen | Offizielle Website |
|---|---|---|
| SpringBoot | Schnelles Integrationsframework mit Web Launcher | https://spring.io/projects/spring-boot |
| MybatisPlus | ORM-Framework | https://baomidou.com/ |
| SpringSecurity | log4j2 | https://spring.io/projects/spring-security#learn |
| JWT | Login-Authentifizierung | https://github.com/jwtk/jjwt |
| log4j2 | Protokollierungsframework | https://logging.apache.org/log4j/2.x/manual/index.html |
| PageHelper | Paginierungs-Plugin | https://pagehelper.github.io/ |
| OSS | Objektspeicher von Drittanbietern | https://github.com/aliyun/aliyun-oss-java-sdk |
| Lombok | Vereinfachte Tools zur Objektkapselung | https://projectlombok.org/ |
| poi | Excel-Tools | https://poi.apache.org/ |
| Einfaches Captcha | Tool zur Generierung von Bestätigungscodes | https://gitee.com/ele-admin/EasyCaptcha |
| redis | Caching-Middleware | https://redis.io/ |
| Technologie | veranschaulichen | Offizielle Website |
|---|---|---|
| Vue2 | Front-End-Mainstream-Framework | https://vuejs.org/ |
| Element-UI | Sind Sie hungrig nach einem UI-Framework? | https://element.eleme.io/ |
| Echarts | Echarts-Diagramm-Framework | https://echarts.apache.org/zh/index.html |
| Axios | Front-End-HTTP-Framework | http://www.axios-js.com/ |
| js-cookie | Cookie-Verwaltungstools | https://github.com/js-cookie/js-cookie |
| jsencrypt | Verschlüsselungs- und Entschlüsselungstool, asymmetrische Verschlüsselung RSA | https://github.com/travist/jsencrypt |
| Fortschritt | Fortschrittsbalkensteuerung | https://github.com/rstacruz/nprogress |
| live2d | Postergirl | Integriertes Vue-Tutorial: https://blog.csdn.net/hk1052606583/article/details/122718918 |
| Technologie | veranschaulichen | Offizielle Website |
|---|---|---|
| Nginx | Statischer Ressourcenserver | https://github.com/nginx/nginx |
| Docker | Anwendungscontainer-Engine (schnelle Isolationsbereitstellung) | https://www.docker.com/ |
Offizielle Website des Studios
Titelseite:
Studio-Backend-Managementsystem
Startseite (Echarts-Datenanzeige): Studiodatenstatistik; grafische Darstellung professioneller Auszeichnungszertifikate und Wettbewerbsstatistiken basierend auf der Note;
Seite „Persönliche Informationen“: Persönliche Informationen aktualisieren, Passwort ändern
Persönliches Verwaltungsmodul:
Studioverwaltungsmodul:
Systemverwaltungsmodul (zitiert von Ruoyi):
andere
Datei-Upload-Schnittstelle: Unterstützt lokalen oder Alibaba Cloud OSS-Speicher, konfigurieren Sie ihn einfach.
API-Dokumentation: https://www.apifox.cn/apidoc/shared-456aee99-6931-48e5-bdd4-89c012d0178c
Design der Datenbanktabellenbeziehung:
Design des Datenbanktabellenfelds:
Tags
lokale Umgebung
Umgebung: Windows-System
Entwicklungstools: IDEA2020
Projekterstellungstool: Maven3.6.3
Datenbank: MySQL 5.7, Redis
Front-End-Umgebung: Node.js, Npm
Erstellen Sie eine lokale Umgebung und führen Sie sie aus
1. Klonen Sie dieses Projekt
# github仓库
git clone https://github.com/changlua/Studio-Vue.git
# gitee仓库
git clone https://gitee.com/changluJava/studio-vue.git2. Starten Sie den Hintergrunddienst
① Öffnen Sie das Projekt in IDEA und konfigurieren Sie die Yaml-Datei
Ändern Sie die Datenbankadresse in der Datei studio-admin/application-dev , den Namen und das Passwort der Verbindungsdatenbank sowie das Passwort für Redis.
②.Importieren Sie sql/studio.sql
Betriebsmethode: Importieren Sie sie einfach direkt. Die SQL-Anweisung zum Erstellen der Datenbank muss nicht zuerst selbst erstellt werden.
③Führen Sie die Startklasse von Studio-Admin aus.
3. Führen Sie das Front-End-Vue-Projekt des Hintergrundverwaltungssystems aus
Geben Sie das Studio-UI-Verzeichnis ein, führen Sie den Befehl zum Installieren der Abhängigkeiten aus und führen Sie Folgendes aus:
# 安装依赖
npm install
# 运行项目
npm run devBesuchen Sie: http://localhost:8089
Das aktuelle Verwaltungssystem verfügt nur über ein Systemadministratorkonto: Admin 123
4. Führen Sie statische Seiten aus
Geben Sie das Studio-Front-Verzeichnis ein und öffnen Sie index.html, um die Homepage zu öffnen. team.html ist die Teamseite.
Erstellen Sie den Ordner „mydata“ im Stammverzeichnis des Servers / und kopieren Sie den Inhalt des Verzeichnisses „mydata“ hinein:
Der entsprechende Dateiinhalt befindet sich im Docker-Compose-Verzeichnis des Warehouse:
Nach dem Kopieren auf den Server sieht es wie folgt aus:
Der Cloud-Server öffnet mehrere Ports (wie unten gezeigt): Am Ende wird tatsächlich nur ein Port geöffnet, und andere Ports müssen nur während des Testvorgangs geöffnet werden.
Installieren Sie Docker
Sehen Sie sich diesen Blog an: Verwenden Sie Docker schnell, um MySQL, Redis und Nginx bereitzustellen
Installieren Sie Docker-Compose
Siehe diesen Blog: Docker-Compose-Schnellstart und praktischer Kampf
Die entsprechende Docker-Compose-Datei wurde in das Docker-Compose-Verzeichnis hochgeladen :
Schritt 1. Starten Sie die Basisdienstdatei von Docker-Compose, starten Sie MySQL und Redis
①Legen Sie das Redis-Passwort in der Datei docker-compose-basic.yml fest, bevor Sie beginnen, nach Zeile 35 --requirepass .
②Starten Sie die Docker-Compose-Datei:
# 进入到/mydata目录
cd /mydata
# 启动docker-compose-basic文件
docker-compose -f docker-compose-basic.yml up -d docker-compose-basic.yml sieht folgendermaßen aus:
docker-compose-basic.yml :
version : ' 3.1 '
networks :
studio-net : # 网络名
name : studio-net
driver : bridge
services :
mysql :
image : library/mysql:5.7.36
restart : always
container_name : mysql
ports :
- 3306:3306
environment :
- MYSQL_ROOT_PASSWORD=root
volumes :
- " /etc/localtime:/etc/localtime "
- " /mydata/mysql/log:/var/log/mysql "
- " /mydata/mysql/data:/var/lib/mysql "
- " /mydata/mysql/conf:/etc/mysql/mysql.conf.d "
networks :
- studio-net
redis :
image : library/redis:5
restart : always
container_name : redis
ports :
- 6379:6379
volumes :
- " /mydata/redis/redis.conf:/etc/redis/redis.conf "
- " /mydata/redis/data:/data "
networks :
- studio-net
command : ["redis-server","/etc/redis/redis.conf","--appendonly yes", "--requirepass SZcmfGJGUD4v"]Schritt 2: Erstellen Sie einen MySQL-Benutzer und importieren Sie die SQL-Datei
①Die Schritte zum Festlegen des MySQL-Passworts sind wie folgt:
# 使用mysql容器中的命令行
docker exec -it mysql /bin/bash
# 使用MySQL命令打开客户端：
mysql -uroot -proot --default-character-set=utf8
# 接着创建一个账户，该账号所有ip都能够访问
# 用户名：root 密码：123456
grant all privileges on * . * to ' root ' @ ' % ' identified by ' 123456 ' ;②SQL-Datei importieren: Es wird empfohlen, über eine Remote-Verbindung zu importieren. Die importierte SQL-Datei lautet wie folgt:
studio.sql : Es gibt nur ein Benutzerkonto.studio-simple1.sql : stimmt mit den Daten der Demo-Website überein. Der Effekt nach dem Import von studio.sql ist wie folgt:
Vorbereitung : Öffnen Sie Port 2375 der Sicherheitsgruppe auf dem Cloud-Server. [Tipp: Bitte öffnen Sie es beim Hochladen des Bildes, da der 2375-Port leicht mit Viren infiziert werden kann.]
Schritt 1: Aktivieren Sie die 2375-Portüberwachung von Docker auf dem Server
Konfigurationsdatei ändern:
# 编辑打开其中的docker.service文件
vim /usr/lib/systemd/system/docker.service
# 将其中的execstart进行替换
ExecStart=/usr/bin/dockerd -H tcp://0.0.0.0:2375 -H unix://var/run/docker.sockLaden Sie dann die Datei docker.server neu und starten Sie den Docker-Dienst neu:
# 重新加载服务配置docker.server
systemctl daemon-reload
# 重新启动docker
systemctl restart dockerTesten wir, ob Port 2375 derzeit lauscht:
# 若是出现json文件内容说明已经在监听了
curl http://127.0.0.1:2375/version
# 查看下2375端口是否被监听
netstat -nlpt
# 服务器防火墙开启2375端口
firewall-cmd --add-port=2375/tcp --permanent
firewall-cmd --reload
firewall-cmd --zone=public --list-portsSchritt 2: Verwenden Sie lokales IDEA, um zu testen, ob der Docker-Dienst des Servers verbunden werden kann
tcp://192.168.3.83:2375
Schritt 3: Ändern Sie die IP-Adresse des Remote-Docker-Dienstes
< dockerHost > http://192.168.3.83: 2375< /dockerHost >Nach der Änderung erstellen wir manuell das JAR-Paket von studio.admin:
Dann führen wir den Befehl docker:build aus, um das Image zu packen und auf den Server hochzuladen:
Das Ergebnis eines erfolgreichen Builds ist wie folgt:
Wir müssen die Konfigurationsdatei unter der Konfigurationsdatei nginx/conf.d im Verzeichnis /mydata durch diese ersetzen:
Standardmäßig befindet sich unsere http-Konfiguration im mydata-Verzeichnis.
Starten Sie die endgültige Dienstkompositionsdatei:
docker-compose -f docker-compose-studio.yml up -d Ok, jetzt haben wir die Bereitstellung des Dienstes abgeschlossen:
Die Konfigurationsdatei docker-compose-studio.yml lautet wie folgt
version: ' 3.1 '
# 外部网络声明（否则无法使用之前已经定义好的网络）
networks:
studio-net:
external: true
services:
studio: # studio实验室
image: studio/studio-admin:latest
container_name: studo-admin
ports:
- 8999:8999
volumes:
- " /etc/localtime:/etc/localtime "
- " /mydata/project/studio-admin/logs:/tmp/logs "
- " /mydata/nginx/html/static:/tmp/static "
networks:
- studio-net
nginx: # nginx服务
image: library/nginx:1.10
container_name: nginx
ports:
- 80:80
- 443:443
volumes:
- " /mydata/nginx/html:/usr/share/nginx/html "
- " /mydata/nginx/logs:/var/log/nginx "
- " /mydata/nginx/conf:/etc/nginx "
networks:
- studio-net
depends_on:
- studioErstellen Sie zwei Dateien im Verzeichnis „/mydata/nginx/html“, nämlich admin und front. Ersteres wird im Backend-System und letzteres auf der offiziellen Website abgelegt:
Die offizielle Website im Warehouse ist: studio-front , eine reine statische HTML-Seite.
① Ändern Sie den vorderen Pfad und laden Sie die offizielle Website-Seite hoch
Die erste Änderung: team.js , der darin enthaltene Schnittstellenpfad
# 替换ip地址即可
const url = " http://192.168.3.83/api/common/members "Ändern Sie den zweiten Teil: index.html, Sprungpfad für die Anmelde- und Registrierungsseite
< ! -- 同样修改ip地址即可 -- >
< li><a class= " loginbtn " href= " http://192.168.3.83/admin/ " target= " _blank " >登陆/注册< /a></li >Laden Sie es abschließend auf den Server hoch:
Das Projektprojekt im Lager ist studio-ui , ein Vue-Projekt
Änderung 1: Ändern Sie die IP-Adresse der Produktionsumgebung
# 只需要替换ip地址即可
BASE_URL: ' "http://192.168.3.83/api" 'Dann packen wir das Vue-Projekt:
# 编译打包
npm run buildNach Abschluss der Verpackung werden statische Ressourcen im dist-Verzeichnis generiert:
Abschließend haben wir auch diese statische Seite in das Admin-Verzeichnis des Servers übertragen:
Nachdem die Bereitstellung abgeschlossen ist, testen Sie sie: Ich verwende hier die von der lokalen virtuellen Maschine erstellte Adresse. Sie müssen sie nur durch Ihre eigene Produktions-IP-Adresse ersetzen.
Offizielle Website: http://192.168.3.83/
Backend-Verwaltungssystem: http://192.168.3.83/admin/, klicken Sie rechts auf der Seite auf „Anmelden und Registrieren“, um zu springen.
Derzeit gibt es nur ein erstes Konto, das als Administrator fungiert:
admin 123
28.12.2023: Das 443-Zuordnungsproblem der https-Bereitstellung wurde gelöst. Die Zuordnung 443-Port-Nginx der Docker-Compose-Datei ist nicht festgelegt
27.12.2023: Ändern Sie den MySQL-Containernamen der ursprünglichen Produktionskonfigurationsdatei und übermitteln Sie das Tag 1.2.0 erneut
27.07.2023: Einige Probleme bei der Bereitstellung von Studio-vue Version 1.2 wurden geändert, darunter die Unfähigkeit, nach dem Hochladen und der Linux-Serverbereitstellung auf Bilder zuzugreifen.
2022.10.20: Version v1.2.0 einreichen (unterstützt Docker-Compose-Bereitstellung).
2022.9.25: Docker-Compose-Datei zum Ersetzen des Docker-Befehls, Aktualisierung des Kapitels zur Linux-Serverbereitstellung in README.md.
13.06.2022: Das Open-Source-Warehouse wird eingerichtet und READEME wird aktualisiert und verbessert.
2022.6.3-6.12: Namensänderung des Projektmoduls, Organisation von Apifox-Dokumenten, Vorbereitung des Open-Source-Plans.
2022.6.2: Die Benutzeroberfläche der Teamseite wurde aktualisiert, um die Identität des Dozenten zu unterstützen.
2022.6.1: Datensicherungsfunktion hinzugefügt, einschließlich SQL und Website-Bildressourcen.
2022.5.6: Die beiden Upload-Funktionen werden zusammengeführt und verwenden den Werksmodus zum Umschreiben und Wiederverwenden.
2022.4.22: Funktion zum Hochladen und Löschen lokaler Dateien hinzugefügt
2022.4.18: Benutzermitgliedsabfrage-SQL generieren, um Konten hinzuzufügen, deren Filterbedingungsstatus normal ist.
17.04.2022: Neue Auszeichnungsurkunden in Einzelwettbewerben, Fehler bei der Homepage-Statistik
16.04.2022: ①Das Billboard-Girl implementiert Drag & Drop. ②Die Anmeldeinformationen des Benutzers ändern die Benutzer-ID in uuid.
2022.3.21-2022.4.15: v1.0.0 ist zunächst fertiggestellt und Grundfunktionen sind implementiert.
22.11.2021 – 5.12.2021: Die offizielle Studio-Website und das Studio-Backend-System sind implementiert. Die minimale Kernfunktion besteht darin, Informationen von Studiomitgliedern hochzuladen.
QQ-Gruppe: 571215225
Autor QQ: 939974883
