Téléchargement de Studio Vue - Téléchargement du code source Studio Vue

Studio Vue

Autres catégories

1.0.0

Télécharger

Studio-Vue V1.2.0

Préface

L'année dernière, en studio, j'ai accidentellement entendu dire que d'autres studios envisageaient de créer un site Web officiel. Ensuite, j'ai profité d'un caprice et j'ai trouvé un modèle pour créer mon propre site Web officiel et un système de gestion backend. il n'y avait que la connexion, l'inscription et une page pour soumettre des informations personnelles, principalement pour faciliter l'affichage d'un résumé dynamique des membres de l'équipe.

J'ai résumé plusieurs raisons pour lesquelles je souhaite continuer à développer ce système de gestion de studio : ① Avant cela, j'ai également recherché des systèmes de gestion de studios et de laboratoires scolaires pertinents sur gitee et github, mais je n'en ai trouvé aucun qui soit plus complet ou meilleur. ②Afin d'avoir quelques points forts sur votre CV. ③ Utilisez la technologie que vous avez apprise dans un scénario d'application pour booster votre apprentissage et vos progrès technologiques.

Cette année, nous avons juste profité du thème du projet de fin d'études pour poursuivre le développement, et il a fallu près d'un mois pour améliorer dans un premier temps le système de gestion backend.

Ce système de studio est principalement destiné aux studios de campus et peut être utilisé par des particuliers et des équipes de studio.

Remerciements :

Merci à RUOYI pour avoir fourni le modèle de système de gestion back-end ainsi que le routage back-end et la gestion des autorisations. [La fonction du projet cite le rôle de Ruoyi et la gestion des menus]
Merci au logo du projet : adresse du site source, auteur Hery Mery

Adresse de démonstration Studio-Vue : https://www.codercl.cn/

Nom d'utilisateur : admin Mot de passe : 123

Tutoriel complet pour le déploiement et le lancement du projet : Déploiement et lancement du système de laboratoire du campus Studio-Vue (SpringBoot+Vue) tutoriel au niveau nounou

Adresse open source correspondante du mini programme : studio-wx (Gitee), studio-wx (Github)

Présentation du projet

Démonstration du projet

Site officiel

Système de gestion back-end

Sélection technologique

Technologie back-end

technologie	illustrer	Site officiel
Démarrage de printemps	Cadre d'intégration rapide utilisant le lanceur Web	https://spring.io/projects/spring-boot
MybatisPlus	Cadre ORM	https://baomidou.com/
PrintempsSécurité	log4j2	https://spring.io/projects/spring-security#learn
JWT	Authentification de connexion	https://github.com/jwtk/jjwt
log4j2	Cadre de journalisation	https://logging.apache.org/log4j/2.x/manual/index.html
Aide-page	Plugin de pagination	https://pagehelper.github.io/
OSS	Stockage d'objets tiers	https://github.com/aliyun/aliyun-oss-java-sdk
Lombok	Outils d'encapsulation d'objets simplifiés	https://projectlombok.org/
poi	Outils Excel	https://poi.apache.org/
facile-captcha	Outil de génération de code de vérification	https://gitee.com/ele-admin/EasyCaptcha
redis	Middleware de mise en cache	https://redis.io/

Technologie frontale

technologie	illustrer	Site officiel
Vue2	Cadre grand public front-end	https://vuejs.org/
Élément-UI	Avez-vous faim de framework d'interface utilisateur ?	https://element.eleme.io/
Graphiques électroniques	Cadre de graphiques Echarts	https://echarts.apache.org/zh/index.html
Axios	Cadre HTTP frontal	http://www.axios-js.com/
js-cookie	outils de gestion des cookies	https://github.com/js-cookie/js-cookie
jsencrypt	Outil de cryptage et décryptage, cryptage asymétrique RSA	https://github.com/travist/jsencrypt
progrès	contrôle de la barre de progression	https://github.com/rstacruz/nprogress
vivre2d	affiche fille	Tutoriel vue intégrée : https://blog.csdn.net/hk1052606583/article/details/122718918

Déploiement d’exploitation et de maintenance

technologie	illustrer	Site officiel
Nginx	Serveur de ressources statiques	https://github.com/nginx/nginx
Docker	Moteur de conteneur d'applications (déploiement d'isolation rapide)	https://www.docker.com/

Progrès du développement

Fonctions intégrées

Site officiel de l'Atelier

Première page :

Page d'accueil : affichage d'image de bannière, affichage de certificat,
Page de l'axe du temps
Page d'équipe (affichage dynamique de l'acquisition de données)

Système de gestion back-end du studio

Page d'accueil (affichage des données Echarts) : statistiques des données du studio ; affichage graphique des certificats de récompense professionnels et des statistiques des concours en fonction des notes ;

Page d'informations personnelles : mettre à jour les informations personnelles, changer le mot de passe

Module de gestion personnelle :

Saisie d'informations : saisie d'informations sur les membres pour l'affichage du site Web officiel
Certificat d'attribution : interroger, ajouter, éditer, modifier, supprimer
Concours personnel : interroger, ajouter, éditer, modifier, supprimer
Expérience personnelle : interroger, ajouter, éditer, modifier, supprimer

Module de gestion des studios :

Gestion professionnelle : interroger, ajouter, éditer, modifier, supprimer
Gestion des notes : interroger, ajouter, éditer, modifier, supprimer
Gestion des certificats de récompense : interroger, modifier, exporter
Gestion des compétitions (compétition par équipes engagées) : ajouter, modifier, supprimer, exporter
Gestion des membres : interroger, éditer, modifier, supprimer, se déconnecter, activer, supprimer un compte, créer un nouveau compte, exporter des utilisateurs, transférer un responsable, réinitialiser le mot de passe, sauvegarder les données.

Module de gestion du système (cité par Ruoyi) :

Gestion des menus : interroger, ajouter, modifier, supprimer
Gestion des rôles : interroger, ajouter, modifier, supprimer, modifier le statut ;
- Attribuer des utilisateurs : requête, autorisation par lots

autre

Interface de téléchargement de fichiers : prend en charge le stockage local ou Alibaba Cloud OSS, il suffit de le configurer.

Documentation du projet

Documentation API : https://www.apifox.cn/apidoc/shared-456aee99-6931-48e5-bdd4-89c012d0178c

Conception des relations entre les tables de base de données :

Conception des champs de table de base de données :

démarrage rapide

Emplacement de téléchargement de la version 2

balises

Exécuter localement (version v1.2)

environnement local

Environnement : système Windows

Outils de développement : IDEA2020

Outil de construction de projet : Maven3.6.3

Base de données : MySQL 5.7, Redis

Environnement front-end : Node.js, Npm

Créer et exécuter un environnement local

1. Clonez ce projet

 # github仓库
git clone https://github.com/changlua/Studio-Vue.git

# gitee仓库
git clone https://gitee.com/changluJava/studio-vue.git

2. Démarrez le service en arrière-plan

① Ouvrez le projet dans IDEA et configurez le fichier yaml.

Modifiez l'adresse de la base de données dans le fichier studio-admin/application-dev , le nom et le mot de passe de la base de données de connexion, ainsi que le mot de passe pour redis.

②.Importer sql/studio.sql

Méthode de fonctionnement : importez-le simplement directement. L'instruction sql pour créer la base de données a été ajoutée au SQL. Vous n'avez pas besoin de créer la base de données vous-même au préalable.

③Exécutez la classe de démarrage de studio-admin.

3. Exécutez le projet vue frontale du système de gestion en arrière-plan

Entrez dans le répertoire studio-ui, exécutez la commande pour installer les dépendances et exécutez :

 # 安装依赖
npm install

# 运行项目
npm run dev

Visitez : http://localhost:8089

Le système de gestion actuel n'a qu'un seul compte d'administrateur système : admin 123

4. Exécutez des pages statiques

Entrez dans le répertoire studio-front et ouvrez index.html pour accéder à la page d'accueil team.html est la page de l'équipe.

Team.html enverra une requête en arrière-plan pour obtenir les données de tous les utilisateurs.

Déploiement du serveur Linux (version v1.2)

Préparation

Créez le dossier mydata dans le répertoire racine du serveur / et copiez-y le contenu du répertoire mydata :

Le contenu du fichier correspondant se trouve dans le répertoire docker-compose de l'entrepôt :

Après copie sur le serveur, cela se présente comme suit :

Le serveur cloud ouvre plusieurs ports (comme indiqué ci-dessous) : un seul port est réellement ouvert à la fin, et les autres ports ne doivent être ouverts que pendant le processus de test.

Installer Docker et Docker-Compose

Installer Docker

Voir ce blog : Utilisez rapidement Docker pour déployer MySQL, Redis et Nginx

Installer Docker-Compose

Voir ce blog : démarrage rapide de docker-compose et combat pratique

Le fichier docker-compose correspondant a été téléchargé dans le répertoire docker-compose :

1. Démarrez les services de base (mysql, redis)

Étape 1. Démarrez le fichier de service de base de docker-compose, démarrez mysql et redis

①Définissez le mot de passe redis dans le fichier docker-compose-basic.yml avant de commencer, après la ligne 35 --requirepass .

②Démarrez le fichier docker-compose :

 # 进入到/mydata目录
cd /mydata

# 启动docker-compose-basic文件
docker-compose -f docker-compose-basic.yml up -d

docker-compose-basic.yml ressemble à ceci :

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"]

Étape 2 : Créez un utilisateur MySQL et importez le fichier SQL

①Les étapes pour définir le mot de passe MySQL sont les suivantes :

 # 使用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 ' ;

②Importer un fichier SQL : Il est recommandé d'importer via une connexion à distance. Le SQL importé est le suivant :

studio.sql : Il n'y a qu'un seul compte utilisateur.
studio-simple1.sql : cohérent avec les données du site de démonstration.

L'effet après l'importation studio.sql est le suivant :

2. IDEA construit un serveur de téléchargement d'images

Préparation : Ouvrez le port 2375 du groupe de sécurité sur le serveur cloud. [Conseil : veuillez l'ouvrir lors du téléchargement de l'image. S'il est ouvert pendant une longue période, le port 2375 risque facilement d'être infecté par des virus.]

Étape 1 : Activez l'écoute du port 2375 de Docker sur le serveur

Modifier le fichier de configuration :

 # 编辑打开其中的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.sock

Rechargez ensuite le fichier docker.server et redémarrez le service docker :

 # 重新加载服务配置docker.server
systemctl daemon-reload
# 重新启动docker
systemctl restart docker

Testons si le port 2375 est actuellement en écoute :

 # 若是出现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-ports

Étape 2 : utilisez IDEA local pour tester si le service Docker du serveur peut être connecté

 tcp://192.168.3.83:2375

Étape 3 : Modifier l'adresse IP du service Docker distant

 < dockerHost > http://192.168.3.83: 2375< /dockerHost >

Après modification, nous construisons manuellement le package jar de studio.admin :

Ensuite, nous exécutons la commande docker:build pour empaqueter l'image et la télécharger sur le serveur :

Le résultat d’une build réussie est le suivant :

3. Démarrez le service final (studio-admin, service nginx)

https (si nous voulons utiliser la configuration https, nous devons la modifier)

Nous devons remplacer le fichier de configuration sous le fichier de configuration nginx/conf.d dans le répertoire /mydata par celui-ci :

Par défaut, notre configuration http se trouve dans le répertoire mydata.

version http (choisissez de l'utiliser sans certificat SSL)

Démarrez le fichier de composition du service final :

docker-compose -f docker-compose-studio.yml up -d

ok, maintenant nous avons fini de déployer le service :

Le fichier de configuration docker-compose-studio.yml est le suivant

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:
      - studio

4. Téléchargez la page front-end (site officiel, système back-end)

Préparation

Créez deux fichiers dans le répertoire ``/mydata/nginx/html`, à savoir admin et front. Le premier est placé dans le système backend et le second est placé sur le site officiel :

Site officiel

La page du site officiel de l'entrepôt est : studio-front , une page statique purement HTML.

① Modifiez le chemin d'accès et téléchargez la page du site officiel

La première modification : team.js , qui est le chemin de l'interface qu'il contient

 # 替换ip地址即可
const url = " http://192.168.3.83/api/common/members "

Modifier la deuxième partie : index.html, chemin de saut de la page de connexion et d'inscription

 < ! -- 同样修改ip地址即可 -- >
< li><a class= " loginbtn " href= " http://192.168.3.83/admin/ " target= " _blank " >登陆/注册< /a></li >

Enfin, téléchargez-le sur le serveur :

Système back-end

Le projet de projet dans l'entrepôt est studio-ui , qui est un projet vue

Modification 1 : Modifier l'adresse IP de l'environnement de production

 # 只需要替换ip地址即可
BASE_URL: ' "http://192.168.3.83/api" '

Ensuite, emballons le projet vue :

 # 编译打包
npm run build

Une fois le packaging terminé, les ressources statiques seront générées dans le répertoire dist :

Enfin, nous avons également transféré cette page statique dans le répertoire admin du serveur :

Ce favicon.ico est l’icône du site Web dans le répertoire frontal précédent.

test

Une fois le déploiement terminé, testez-le : ce que j'utilise ici est l'adresse construite par la machine virtuelle locale. Il vous suffit de la remplacer par votre propre adresse IP de production.

Site officiel : http://192.168.3.83/

Système de gestion backend : http://192.168.3.83/admin/, cliquez sur Connexion et inscription sur le côté droit de la page pour accéder.

Il n'existe actuellement qu'un seul compte initial qui est l'administrateur :

 admin  123

enregistrer

2023.12.28 : Résolution du problème de mappage 443 du déploiement https, le mappage 443 du port nginx du fichier docker-compose n'est pas défini

2023.12.27 : modifiez le nom du conteneur mysql du fichier de configuration de production d'origine et soumettez à nouveau la balise tags 1.2.0

2023.7.27 : Modification de certains problèmes avec le déploiement de studio-vue version 1.2, notamment l'impossibilité d'accéder aux images après le téléchargement et le déploiement du serveur Linux.

2022.10.20 : Soumettez la version v1.2.0 (prend en charge le déploiement docker-compose).

2022.9.25 : fichier Docker-compose pour remplacer la commande docker, mettez à jour le chapitre sur le déploiement du serveur Linux dans README.md.

2022.6.13 : L'entrepôt open source est créé et RADEME est mis à jour et amélioré.

2022.6.3-6.12 : Changement de nom du module du projet, organisation du document apifox, préparation du plan open source.

2022.6.2 : L'interface de la page d'équipe est mise à jour pour prendre en charge l'identité de l'instructeur.

2022.6.1 : Ajout d'une fonction de sauvegarde des données, y compris les ressources SQL et les images de sites Web.

2022.5.6 : Les deux fonctions de téléchargement sont fusionnées, en utilisant le mode usine pour la réécriture et la réutilisation.

2022.4.22 : Ajout de la fonction de téléchargement et de suppression de fichiers locaux

2022.4.18 : générez une requête SQL de membre utilisateur pour ajouter des comptes dont l'état de condition de filtre est normal.

2022.4.17 : Nouveaux certificats de récompense dans les compétitions individuelles, bug dans les statistiques de la page d'accueil

2022.4.16 : ①La billboard girl implémente le glisser-déposer. ②Les informations de connexion de l'utilisateur modifient l'identifiant de l'utilisateur en uuid.

2022.3.21-2022.4.15 : la v1.0.0 est initialement terminée et les fonctions de base sont implémentées.

2021.11.22-2021.12.5 : Le site Web officiel du studio et le système backend du studio sont implémentés. La fonction principale minimale est de télécharger les informations des membres du studio.