Studio Vue
1.0.0
В прошлом году в студии я случайно услышал, что другие студии планируют создать официальный сайт. Тогда я воспользовался прихотью и нашел шаблон, чтобы сделать свой собственный официальный сайт и систему управления бэкендом. имел только вход, регистрацию и страницу для подачи личной информации, в основном для удобства отображения динамической сводки членов команды.
Я обобщил несколько причин, по которым я хочу продолжить разработку этой системы управления студией: ① До этого я также искал подходящие системы управления школьными студиями и лабораториями на gitee и github, но не нашел ни одной более полной или лучшей. ②Для того, чтобы в вашем резюме было несколько ярких моментов. ③ Используйте технологию, которую вы изучили, в сценарии применения, чтобы ускорить свое технологическое обучение и прогресс.
В этом году мы просто воспользовались темой дипломного проекта для продолжения разработки, и на первоначальное улучшение системы управления серверной частью ушло почти месяц.
Эта студийная система в основном предназначена для студий кампусов и может использоваться отдельными людьми и студийными группами.
Благодарности :
Демонстрационный адрес Studio-Vue : https://www.codercl.cn/
Полное руководство по развертыванию и запуску проекта: Учебное пособие по развертыванию и запуску студенческой лабораторной системы Studio-Vue (SpringBoot+Vue) для уровня няни.
Соответствующий адрес мини-программы с открытым исходным кодом: studio-wx (Gitee), studio-wx (Github).
 |  |
 |  |
 |  |
 |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |
| технология | иллюстрировать | Официальный сайт |
|---|---|---|
| SpringBoot | Платформа быстрой интеграции с использованием веб-панели запуска | https://spring.io/projects/spring-boot |
| МибатисПлюс | ORM-фреймворк | https://baomidou.com/ |
| ВеснаБезопасность | log4j2 | https://spring.io/projects/spring-security#learn |
| JWT | Аутентификация входа в систему | https://github.com/jwtk/jjwt |
| log4j2 | Система ведения журналов | https://logging.apache.org/log4j/2.x/manual/index.html |
| PageHelper | Плагин пагинации | https://pagehelper.github.io/ |
| ОСС | Стороннее объектное хранилище | https://github.com/aliyun/aliyun-oss-java-sdk |
| Ломбок | Упрощенные инструменты инкапсуляции объектов | https://projectlombok.org/ |
| пои | Инструменты Excel | https://poi.apache.org/ |
| легкая капча | Инструмент генерации кода подтверждения | https://gitee.com/ele-admin/EasyCaptcha |
| Redis | Промежуточное программное обеспечение для кэширования | https://redis.io/ |
| технология | иллюстрировать | Официальный сайт |
|---|---|---|
| Vue2 | Основной интерфейс фронтенда | https://vuejs.org/ |
| Элемент-UI | Вам нужен фреймворк пользовательского интерфейса? | https://element.eleme.io/ |
| Эчартс | Структура диаграммы Echarts | https://echarts.apache.org/zh/index.html |
| Аксиос | Интерфейсный HTTP-фреймворк | http://www.axios-js.com/ |
| js-cookie | инструменты управления файлами cookie | https://github.com/js-cookie/js-cookie |
| jsencrypt | Инструмент шифрования и дешифрования, асимметричное шифрование RSA | https://github.com/travist/jsencrypt |
| прогресс | управление индикатором выполнения | https://github.com/rstacruz/nprogress |
| live2d | девушка с плаката | Интегрированное руководство по vue: https://blog.csdn.net/hk1052606583/article/details/122718918. |
| технология | иллюстрировать | Официальный сайт |
|---|---|---|
| Нгинкс | Статический сервер ресурсов | https://github.com/nginx/nginx |
| Докер | Механизм контейнера приложений (быстрое развертывание изоляции) | https://www.docker.com/ |
Официальный сайт студии
Первая страница:
Серверная система управления студией
Домашняя страница (отображение данных Echarts): статистика данных студии; графическое отображение сертификатов профессиональных наград и статистики соревнований в зависимости от оценок;
Страница личной информации: обновить личную информацию, сменить пароль.
Модуль персонального управления:
Модуль управления студией:
Модуль управления системой (цитата по Ruoyi):
другой
Интерфейс загрузки файлов: поддерживает локальное хранилище или хранилище Alibaba Cloud OSS, просто настройте его.
Документация API: https://www.apifox.cn/apidoc/shared-456aee99-6931-48e5-bdd4-89c012d0178c.
Проектирование отношений таблиц базы данных:
Дизайн полей таблицы базы данных:
теги
местная среда
Окружающая среда: система Windows
Инструменты разработки: IDEA2020
Инструмент сборки проекта: Maven3.6.3
База данных: MySQL 5.7, Redis.
Фронтенд-среда: Node.js, Npm.
Сборка и запуск локальной среды
1. Клонируйте этот проект
# github仓库
git clone https://github.com/changlua/Studio-Vue.git
# gitee仓库
git clone https://gitee.com/changluJava/studio-vue.git2. Запустите фоновую службу.
① Откройте проект в IDEA и настройте файл yaml.
Измените адрес базы данных в файле studio-admin/application-dev , имя и пароль базы данных подключения, а также пароль для Redis.
②.Импортировать sql/studio.sql.
Метод работы: просто импортируйте его напрямую. В файл sql добавлен оператор sql для создания базы данных. По умолчанию используется студия.
③Запустите стартовый класс studio-admin.
3. Запустите внешний проект vue фоновой системы управления.
Войдите в каталог studio-ui, выполните команду для установки зависимостей и запустите:
# 安装依赖
npm install
# 运行项目
npm run devПосетите: http://localhost:8089.
Текущая система управления имеет только одну учетную запись системного администратора: admin 123.
4. Запускайте статические страницы
Войдите в каталог студии и откройте index.html, чтобы перейти на домашнюю страницу. HTML — это страница команды.
Создайте папку mydata в корневом каталоге сервера / и скопируйте в нее содержимое каталога mydata:
Соответствующее содержимое файла находится в каталоге docker-compose хранилища:
После копирования на сервер получается следующее:
Облачный сервер открывает несколько портов (как показано ниже): в конечном итоге фактически открывается только один порт, а остальные порты необходимо открывать только в процессе тестирования.
Установить Докер
См. этот блог: Быстрое использование Docker для развертывания MySQL, Redis и Nginx.
Установите Docker-Compose
См. этот блог: быстрый старт docker-compose и практический бой
Соответствующий файл docker-compose был загружен в каталог docker-compose :
Шаг 1. Запустите базовый служебный файл docker-compose, запустите MySQL и Redis.
①Перед запуском установите пароль Redis в файле docker-compose-basic.yml , после строки 35 --requirepass .
②Запустите файл docker-compose:
# 进入到/mydata目录
cd /mydata
# 启动docker-compose-basic文件
docker-compose -f docker-compose-basic.yml up -d docker-compose-basic.yml выглядит так:
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"]Шаг 2. Создайте пользователя MySQL и импортируйте файл sql.
①Шаги по установке пароля MySQL следующие:
# 使用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: рекомендуется импортировать через удаленное соединение. Импортированный файл sql выглядит следующим образом:
studio.sql : существует только одна учетная запись пользователя.studio-simple1.sql : соответствует данным демонстрационного веб-сайта. Эффект после импорта studio.sql следующий:
Подготовка : Откройте порт 2375 группы безопасности на облачном сервере. [Совет: пожалуйста, откройте его при загрузке изображения. Если он открыт в течение длительного времени, порт 2375 легко заразить вирусами.]
Шаг 1. Включите прослушивание порта Docker 2375 на сервере.
Измените файл конфигурации:
# 编辑打开其中的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Затем перезагрузите файл docker.server и перезапустите службу docker:
# 重新加载服务配置docker.server
systemctl daemon-reload
# 重新启动docker
systemctl restart dockerДавайте проверим, прослушивается ли в данный момент порт 2375:
# 若是出现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Шаг 2. Используйте локальный IDEA, чтобы проверить, можно ли подключить службу докеров сервера.
tcp://192.168.3.83:2375
Шаг 3. Измените IP-адрес удаленной службы Docker.
< dockerHost > http://192.168.3.83: 2375< /dockerHost >После внесения изменений мы вручную собираем jar-пакет studio.admin:
Затем мы выполняем команду docker:build, чтобы упаковать образ и загрузить его на сервер:
Результат успешной сборки выглядит следующим образом:
Нам нужно заменить файл конфигурации в файле конфигурации nginx/conf.d в каталоге /mydata на этот:
По умолчанию наша конфигурация http находится в каталоге mydata.
Запустите окончательный файл создания сервиса:
docker-compose -f docker-compose-studio.yml up -d ок, теперь мы закончили развертывание сервиса:
Файл конфигурации docker-compose-studio.yml выглядит следующим образом.
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Создайте два файла в каталоге ``/mydata/nginx/html`, а именно: admin и front. Первый размещается во внутренней системе, а второй — на официальном сайте:
Официальная страница сайта на складе: studio-front , статическая страница на чистом HTML.
① Измените главный путь и загрузите страницу официального сайта.
Первая модификация: team.js , это путь к интерфейсу в нем.
# 替换ip地址即可
const url = " http://192.168.3.83/api/common/members "Измените вторую часть: index.html, путь перехода к страницам входа и регистрации.
< ! -- 同样修改ip地址即可 -- >
< li><a class= " loginbtn " href= " http://192.168.3.83/admin/ " target= " _blank " >登陆/注册< /a></li >Наконец, загрузите его на сервер:
Проект проекта на складе — studio-ui , который является проектом vue.
Модификация 1: Измените IP-адрес производственной среды.
# 只需要替换ip地址即可
BASE_URL: ' "http://192.168.3.83/api" 'Затем давайте упакуем проект vue:
# 编译打包
npm run buildПосле завершения упаковки в каталоге dist будут созданы статические ресурсы:
Наконец, мы также перенесли эту статическую страницу в административную директорию сервера:
После завершения развертывания протестируйте его: здесь я использую адрес, созданный локальной виртуальной машиной. Вам нужно только заменить его собственным рабочим IP-адресом.
Официальный сайт: http://192.168.3.83/
Серверная система управления: http://192.168.3.83/admin/, нажмите «Войти и зарегистрироваться» в правой части страницы, чтобы перейти.
В настоящее время существует только одна начальная учетная запись, которая является администратором:
admin 123
2023.12.28: решена проблема сопоставления 443 при развертывании https: не установлено сопоставление порта 443 nginx файла docker-compose.
2023.12.27: Измените имя контейнера MySQL исходного файла рабочей конфигурации и повторно отправьте тег тегов 1.2.0.
2023.7.27: Изменены некоторые проблемы с развертыванием studio-vue версии 1.2, включая невозможность доступа к изображениям после загрузки и развертывания сервера Linux.
2022.10.20: Отправьте версию v1.2.0 (поддерживает развертывание с помощью docker-compose).
2022.9.25: Файл Docker-compose заменяет команду docker, обновите главу о развертывании сервера Linux в README.md.
2022.6.13: Создано хранилище с открытым исходным кодом, а READMEME обновлен и улучшен.
2022.6.3-6.12: Изменение названия модуля проекта, организация документов apifox, подготовка плана с открытым исходным кодом.
2022.6.2: Интерфейс страницы команды обновлен для поддержки личности инструктора.
2022.6.1: Добавлена функция резервного копирования данных, включая ресурсы SQL и изображений веб-сайта.
2022.5.6: две функции загрузки объединены вместе с использованием заводского режима для перезаписи и повторного использования.
2022.4.22: Добавлена функция загрузки и удаления локальных файлов.
2022.4.18: Создайте SQL-запрос члена пользователя для добавления учетных записей, состояние фильтра которых является нормальным.
2022.4.17: Новые наградные грамоты в индивидуальных соревнованиях, ошибка статистики на домашней странице.
2022.4.16: ①Девушка с рекламного щита реализует перетаскивание. ②Учетные данные пользователя для входа изменяют идентификатор пользователя на uuid.
2022.3.21-2022.4.15: версия 1.0.0 изначально завершена и реализованы основные функции.
2021.11.22-2021.12.5: Реализованы официальный сайт студии и серверная система студии. Минимальная основная функция — загрузка информации об участниках студии.
Группа QQ: 571215225
Вопрос автора: 939974883
