Studio Vue
1.0.0
No ano passado, no estúdio, ouvi acidentalmente que outros estúdios estavam planejando construir um site oficial. Então aproveitei um capricho e encontrei um modelo para fazer meu próprio site oficial e um sistema de gerenciamento de backend. contava apenas com login, cadastro e página para envio de informações pessoais, principalmente pela comodidade de exibir resumo dinâmico dos membros da equipe.
Resumi vários motivos para querer continuar desenvolvendo este sistema de gerenciamento de estúdio: ① Antes disso, também pesquisei sistemas de gerenciamento de estúdios escolares e laboratórios relevantes no gitee e no github, mas não encontrei nenhum que fosse mais completo ou melhor. ②Para ter alguns destaques em seu currículo. ③ Use a tecnologia que você aprendeu em um cenário de aplicação para impulsionar seu aprendizado e progresso tecnológico.
Este ano, aproveitamos apenas o tema do projeto de formatura para continuar o desenvolvimento, e demoramos quase um mês para melhorar inicialmente o sistema de gerenciamento backend.
Este sistema de estúdio é principalmente para estúdios de campus e pode ser usado por indivíduos e equipes de estúdio.
Agradecimentos :
Endereço de demonstração do Studio-Vue : https://www.codercl.cn/
Tutorial completo para implantação e lançamento do projeto: implantação do sistema de laboratório do campus Studio-Vue (SpringBoot + Vue) e tutorial de lançamento em nível de babá
Endereço de código aberto correspondente do miniprograma: studio-wx (Gitee), studio-wx (Github)
 |  |
 |  |
 |  |
 |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |
| tecnologia | ilustrar | Site oficial |
|---|---|---|
| SpringBoot | Estrutura de integração rápida usando web launcher | https://spring.io/projects/spring-boot |
| Mybatis Plus | Estrutura ORM | https://baomidou.com/ |
| PrimaveraSegurança | log4j2 | https://spring.io/projects/spring-security#learn |
| JWT | Autenticação de login | https://github.com/jwtk/jjwt |
| log4j2 | Estrutura de registro | https://logging.apache.org/log4j/2.x/manual/index.html |
| Ajuda de página | Plug-in de paginação | https://pagehelper.github.io/ |
| OSS | Armazenamento de objetos de terceiros | https://github.com/aliyun/aliyun-oss-java-sdk |
| Lombok | Ferramentas simplificadas de encapsulamento de objetos | https://projectlombok.org/ |
| então | Ferramentas Excel | https://poi.apache.org/ |
| captcha fácil | Ferramenta de geração de código de verificação | https://gitee.com/ele-admin/EasyCaptcha |
| redis | Middleware de cache | https://redis.io/ |
| tecnologia | ilustrar | Site oficial |
|---|---|---|
| Vue2 | Estrutura principal de front-end | https://vuejs.org/ |
| Elemento-UI | Você está com fome de estrutura de UI? | https://element.eleme.io/ |
| Gráficos eletrônicos | Estrutura do gráfico Echarts | https://echarts.apache.org/zh/index.html |
| Eixos | Estrutura HTTP de front-end | http://www.axios-js.com/ |
| js-cookie | ferramentas de gerenciamento de cookies | https://github.com/js-cookie/js-cookie |
| jsencrypt | Ferramenta de criptografia e descriptografia, criptografia assimétrica RSA | https://github.com/travist/jsencrypt |
| progresso | controle da barra de progresso | https://github.com/rstacruz/nprogress |
| ao vivo2d | garota propaganda | Tutorial vue integrado: https://blog.csdn.net/hk1052606583/article/details/122718918 |
| tecnologia | ilustrar | Site oficial |
|---|---|---|
| Nginx | Servidor de recursos estáticos | https://github.com/nginx/nginx |
| Docker | Mecanismo de contêiner de aplicativos (implantação de isolamento rápido) | https://www.docker.com/ |
Site oficial do estúdio
Primeira página:
Sistema de gerenciamento de back-end do Studio
Página inicial (exibição de dados Echarts): estatísticas de dados de estúdio de certificados de prêmios profissionais e estatísticas de competição com base na nota;
Página de informações pessoais: atualize informações pessoais, altere a senha
Módulo de gerenciamento pessoal:
Módulo de gerenciamento de estúdio:
Módulo de gerenciamento do sistema (citado por Ruoyi):
outro
Interface de upload de arquivos: suporta armazenamento local ou Alibaba Cloud OSS, basta configurá-lo.
Documentação da API: https://www.apifox.cn/apidoc/shared-456aee99-6931-48e5-bdd4-89c012d0178c
Design de relacionamento de tabela de banco de dados:
Design de campo da tabela de banco de dados:
etiquetas
ambiente local
Ambiente: sistema Windows
Ferramentas de desenvolvimento: IDEA2020
Ferramenta de construção de projeto: Maven3.6.3
Banco de dados: MySQL 5.7, Redis
Ambiente front-end: Node.js, Npm
Construir e executar ambiente local
1. Clone este projeto
# github仓库
git clone https://github.com/changlua/Studio-Vue.git
# gitee仓库
git clone https://gitee.com/changluJava/studio-vue.git2. Inicie o serviço em segundo plano
① Abra o projeto no IDEA e configure o arquivo yaml.
Modifique o endereço do banco de dados no arquivo studio-admin/application-dev , o nome e a senha do banco de dados de conexão e a senha para redis.
②.Importar sql/studio.sql
Método de operação: basta importá-lo diretamente. A instrução sql para criar o banco de dados foi adicionada ao sql. Você não precisa criar o banco de dados primeiro.
③Execute a classe inicial do studio-admin.
3. Execute o projeto vue front-end do sistema de gerenciamento de segundo plano
Entre no diretório studio-ui, execute o comando para instalar as dependências e execute:
# 安装依赖
npm install
# 运行项目
npm run devVisite: http://localhost:8089
O sistema de gerenciamento atual possui apenas uma conta de administrador do sistema: admin 123
4. Execute páginas estáticas
Entre no diretório studio-front e abra index.html para entrar na página inicial team.html é a página da equipe.
Crie a pasta mydata no diretório raiz do servidor / e copie o conteúdo do diretório mydata para ela:
O conteúdo do arquivo correspondente está no diretório docker-compose do warehouse:
Depois de copiar para o servidor, fica da seguinte forma:
O servidor em nuvem abre várias portas (conforme mostrado abaixo): apenas uma porta é realmente aberta no final e as outras portas só precisam ser abertas durante o processo de teste.
Instale o Docker
Veja este blog: Use rapidamente o Docker para implantar MySQL, Redis e Nginx
Instale o Docker-Compose
Veja este blog: início rápido do docker-compose e combate prático
O arquivo docker-compose correspondente foi carregado no diretório docker-compose :
Etapa 1. Inicie o arquivo de serviço básico do docker-compose, inicie o mysql e o redis
①Defina a senha redis no arquivo docker-compose-basic.yml antes de iniciar, após a linha 35 --requirepass .
②Inicie o arquivo docker-compose:
# 进入到/mydata目录
cd /mydata
# 启动docker-compose-basic文件
docker-compose -f docker-compose-basic.yml up -d docker-compose-basic.yml se parece com isto:
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"]Etapa 2: Crie um usuário mysql e importe o arquivo sql
①As etapas para definir a senha do mysql são as seguintes:
# 使用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 ' ;②Importar arquivo sql: Recomenda-se importar via conexão remota O sql importado é o seguinte:
studio.sql : Existe apenas uma conta de usuário.studio-simple1.sql : consistente com os dados do site de demonstração. O efeito após a importação studio.sql é o seguinte:
Preparação : Abra a porta 2375 do grupo de segurança no servidor em nuvem. [Dica: abra-o ao enviar a imagem. Se ficar aberto por muito tempo, a porta 2375 é fácil de ser infectada.]
Etapa 1: ativar a escuta da porta 2375 do docker no servidor
Modifique o arquivo de configuração:
# 编辑打开其中的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.sockEm seguida, recarregue o arquivo docker.server e reinicie o serviço docker:
# 重新加载服务配置docker.server
systemctl daemon-reload
# 重新启动docker
systemctl restart dockerVamos testar se a porta 2375 está escutando:
# 若是出现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-portsEtapa 2: use o IDEA local para testar se o serviço docker do servidor pode ser conectado
tcp://192.168.3.83:2375
Etapa 3: modificar o endereço IP do serviço Docker remoto
< dockerHost > http://192.168.3.83: 2375< /dockerHost >Após a modificação, construímos manualmente o pacote jar de studio.admin:
Em seguida, executamos o comando docker:build para empacotar a imagem e carregá-la no servidor:
O resultado de uma construção bem-sucedida é o seguinte:
Precisamos substituir o arquivo de configuração no arquivo de configuração nginx/conf.d no diretório /mydata por este:
Por padrão, nossa configuração http está no diretório mydata.
Inicie o arquivo de composição do serviço final:
docker-compose -f docker-compose-studio.yml up -d ok, agora terminamos de implantar o serviço:
O arquivo de configuração docker-compose-studio.yml é o seguinte
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:
- studioCrie dois arquivos no diretório ``/mydata/nginx/html`, ou seja, admin e front. O primeiro é colocado no sistema backend e o último é colocado no site oficial:
A página do site oficial no warehouse é: studio-front , uma página estática em HTML puro.
① Modifique o caminho frontal e carregue a página do site oficial
A primeira modificação: team.js , que é o caminho da interface nele
# 替换ip地址即可
const url = " http://192.168.3.83/api/common/members "Modifique a segunda parte: index.html, caminho de salto da página de login e registro
< ! -- 同样修改ip地址即可 -- >
< li><a class= " loginbtn " href= " http://192.168.3.83/admin/ " target= " _blank " >登陆/注册< /a></li >Por fim, carregue-o no servidor:
O projeto do projeto no warehouse é studio-ui , que é um projeto vue
Modificação 1: Modifique o endereço IP do ambiente de produção
# 只需要替换ip地址即可
BASE_URL: ' "http://192.168.3.83/api" 'Então vamos empacotar o projeto vue:
# 编译打包
npm run buildApós a conclusão do empacotamento, os recursos estáticos serão gerados no diretório dist:
Por fim, também transferimos esta página estática para o diretório admin do servidor:
Após a conclusão da implantação, teste-a: O que uso aqui é o endereço criado pela máquina virtual local. Você só precisa substituí-lo pelo seu próprio endereço IP de produção.
Site oficial: http://192.168.3.83/
Sistema de gerenciamento de backend: http://192.168.3.83/admin/, clique em Login e Cadastre-se no lado direito da página para pular.
Atualmente existe apenas uma conta inicial que é o administrador:
admin 123
2023.12.28: Resolvido o problema de mapeamento 443 da implantação https, o mapeamento da porta 443 nginx do arquivo docker-compose não está definido
2023.12.27: Modifique o nome do contêiner mysql do arquivo de configuração de produção original e reenvie as tags 1.2.0
2023.7.27: Modificados alguns problemas com a implantação do Studio-vue versão 1.2, incluindo incapacidade de acessar imagens após o upload e implantação do servidor Linux.
2022.10.20: Envie a versão v1.2.0 (suporta implantação do docker-compose).
2022.9.25: arquivo Docker-compose para substituir o comando docker, atualize o capítulo de implantação do servidor Linux em README.md.
2022.6.13: O warehouse de código aberto é estabelecido e o READEME é atualizado e melhorado.
2022.6.3-6.12: Alteração do nome do módulo do projeto, organização de documentos apifox, preparação do plano de código aberto.
2022.6.2: A interface da página da equipe foi atualizada para oferecer suporte à identidade do instrutor.
2022.6.1: Adicionada função de backup de dados, incluindo SQL e recursos de imagem de site.
2022.5.6: As duas funções de upload são mescladas, usando o modo de fábrica para reescrever e reutilizar.
2022.4.22: Adicionada a função de upload e exclusão de arquivos locais
2022.4.18: Gere consulta SQL de membro do usuário para adicionar contas cujo status de condição de filtro seja normal.
17/04/2022: Novos certificados de premiação em competições individuais, bug nas estatísticas da página inicial
16/04/2022: ①A garota do outdoor implementa arrastar e soltar. ②As credenciais de login do usuário alteram o ID do usuário para uuid.
2022.3.21-2022.4.15: a v1.0.0 é inicialmente concluída e as funções básicas são implementadas.
2021.11.22-2021.12.5: O site oficial do estúdio e o sistema backend do estúdio são implementados. A função principal mínima é fazer upload de informações dos membros do estúdio.
Grupo QQ: 571215225
Autor QQ: 939974883
