Studio Vue
1.0.0
El año pasado, accidentalmente escuché otros estudios en el estudio para hacer un sitio web oficial, y luego aproveché el aumento y luego encontré una plantilla para hacer un sitio web oficial y un sistema de gestión de fondo. Muestra de miembros del equipo de resumen dinámico.
Quiero continuar con este sistema de gestión de estudio. ② Para tener algunos aspectos destacados en el currículum. ③ Una tecnología que aprendió puede tener un escenario de aplicación para promover su aprendizaje técnico y progreso.
Este año, también continuó desarrollando el tema del diseño de la graduación.
El sistema de estudio se enfrenta principalmente al Campus Studio, que puede usarse para equipos personales y de estudio.
Gracias :
Dirección de demostración de Studio-Vue : https://www.codercl.cn/
Despliegue del proyecto Tutorial completo: Studio-Vue Campus Laboratory System (SpringBoot+Vue) Implementación de tutoriales de clase de la niñera de lanzamiento
Correspondiente a la dirección de código abierto del programa pequeño: Studio-WX (GITEE), Studio-WX (GitHub)
 |  |
 |  |
 |  |
 |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |
| tecnología | ilustrar | Sitio web oficial |
|---|---|---|
| Brote | Marco integrado rápidamente, use inicio web | https://spring.io/projects/spring-boot |
| Mybatisplus | Marco de ORM | https://baomidou.com/ |
| Seguridad | log4j2 | https://spring.io/projects/spring-security#learn |
| Jwt | Acceso | https://github.com/jwtk/jjwt |
| log4j2 | Marco de registro | https://logging.apache.org/log4j/2.x/manual/index.html |
| Pagehelper | Paging Plug -in | https://pagehelper.github.io/ |
| Agotamiento | Tercer almacenamiento de objetos parcial | https://github.com/aliyun/aliyun-l-java-sdk |
| Lombok | Herramientas de embalaje de objetos simplificados | https://projectlombok.org/ |
| POI | Herramienta de Excel | https://poi.apache.org/ |
| Captcha fácil | Herramienta de generación de código de verificación | https://gitee.com/ele- admin/easyCaptcha |
| rehacer | Middleware de caché | https://redis.io/ |
| tecnología | ilustrar | Sitio web oficial |
|---|---|---|
| VUE2 | Front -end marco convencional | https://vuejs.org/ |
| Elemento-ui | ¿Tiene hambre? | https://element.eleme.io/ |
| Echarts | Echarts Chart Framework | https://echarts.apache.org/zh/index.html |
| Axios | Marco HTTP frontal | http://www.axios-js.com/ |
| js-cookie | Herramienta de gestión de cookies | https://github.com/js-cookie/js-cookie |
| jsencrypt | Herramienta de cifrado y descifrado, cifrado asimétrico RSA | https://github.com/travist/jsencrypt |
| NPROGRE | Control de la barra de progreso | https://github.com/rstacruz/nprogress |
| Live2D | Kannin Niang | Tutorial Vue integrado: https://blog.csdn.net/hk1052606583/article/details/1227189188 |
| tecnología | ilustrar | Sitio web oficial |
|---|---|---|
| Nginx | Servidor de recursos estáticos | https://github.com/nginx/nginx |
| Estibador | Motor de contenedores de aplicaciones (implementación de aislamiento rápido) | https://www.docker.com/ |
Sitio web oficial de estudio
Página de recepción:
Sistema de gestión de fondo de estudio
Inicio (visualización de datos Echarts): Estadísticas de datos de estudio;
Página de información personal: actualizar información personal y modificar contraseñas
Módulo de gestión personal:
Módulo de gestión de estudio:
Módulo de gestión del sistema (referencia ruoyi):
otro
Interfaz de carga de archivos: admite el almacenamiento de OSS de la nube local o Alibaba, simplemente configúrelo.
Documento API: https://www.apifox.cn/apidoc/shared-456aee99-6931-48e5-bdd4-89c012d0178c
Diseño de relación de tabla de bases de datos:
Diseño de campo de la tabla de bases de datos:
etiquetas
Entorno local
Medio ambiente: sistema de Windows
Herramienta de desarrollo: IDEA2020
Herramienta de construcción del proyecto: Maven3.6.3
Base de datos: MySQL 5.7, Redis
Front -end Environment: Node.js, NPM
Operación de construcción del medio ambiente local
1. Proyecto de clonación
# github仓库
git clone https://github.com/changlua/Studio-Vue.git
# gitee仓库
git clone https://gitee.com/changluJava/studio-vue.git2. Comenzar el servicio de fondo
① Abra el proyecto de idea y configure el archivo YAML
Modifique la dirección de la base de datos en el archivo studio-admin/application-dev y la contraseña que conecta el nombre y la contraseña de la base de datos, y Redis.
②, import sql/studio.sql
Método de operación: solo importarlo.
③ Ejecute la clase de inicio de Studio-Admin.
3. Ejecute el proyecto Vue del sistema de gestión delantero
Ingrese el directorio Studio-UI, ejecute la instalación del comando y confíe en y ejecuta:
# 安装依赖
npm install
# 运行项目
npm run devVisita: http: // localhost: 8089
El sistema de gestión actual tiene solo un número de cuenta del administrador del sistema: Admin 123
4. Ejecute la página estática
Ingrese el directorio de Studio-Front, abra index.html para ingresar a la página de inicio.
Cree la carpeta MyData en el directorio raíz/debajo del directorio raíz del servidor/copie el contenido en el directorio myData:
El contenido del archivo correspondiente está en el directorio Docker-Compose del almacén:
Copiar al servidor de la siguiente manera:
El servidor en la nube abre múltiples puertos (como sigue): de hecho, solo se abre un puerto.
Instalar Docker
Vea este blog: use Docker para implementar MySQL, Redis, Nginx
Instalar Docker-Compose
Vea este blog: Docker-Compose rápidamente comienza y combate
El archivo Docker-Compose correspondiente ha cargado el directorio Docker-Compose :
Paso 1. Inicie el archivo de servicio básico de Docker-Compose, inicie MySQL y Redis
① Establezca la contraseña de Redis en el archivo docker-compose-basic.yml antes del inicio, después de 35 líneas 35 --requirepass .
② Inicie el archivo Docker-Compose:
# 进入到/mydata目录
cd /mydata
# 启动docker-compose-basic文件
docker-compose -f docker-compose-basic.yml up -d Docker-compose-baseic.yml se muestra a continuación:
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"]Paso 2: cree usuarios de MySQL e importe archivos SQL
① Establezca la operación de contraseña MySQL de la siguiente manera:
# 使用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 archivo SQL: se recomienda llevar a cabo la importación de conexión remota.
studio.sql : solo hay una cuenta de usuario.studio-simple1.sql : de acuerdo con los datos del sitio web de demostración. El efecto después de importar studio.sql es el siguiente:
Preparación : Abra el puerto 2375 en el grupo de seguridad en el servidor en la nube. [Consejo: Ábrelo al cargar la imagen.
Paso 1: Abra el puerto 2375 en el servidor
Modificar el archivo de configuración:
# 编辑打开其中的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.sockLuego vuelva a cargar el archivo Docker.Server y reinicie el servicio Docker:
# 重新加载服务配置docker.server
systemctl daemon-reload
# 重新启动docker
systemctl restart dockerProbemos si el puerto 2375 actual está escuchando:
# 若是出现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-portsPaso 2: idea local para probar si el servicio Docker del servidor se puede conectar
tcp://192.168.3.83:2375
Paso 3: Modifique la dirección IP del servicio del Docker remoto
< dockerHost > http://192.168.3.83: 2375< /dockerHost >Después de modificar, construyamos manualmente un paquete jar de studio.admin:
Luego ejecutemos el comando Docker: Built para el espejo de empaque y cargue el servidor:
El efecto de la construcción exitosa es el siguiente:
Necesitamos reemplazar el archivo de configuración en el archivo de configuración nginx/conf.d en el directorio/mydata a esto:
El valor predeterminado es nuestra configuración HTTP en el directorio MyData.
Inicie el archivo de composición del servicio final:
docker-compose -f docker-compose-studio.yml up -d Ok, en este punto hemos implementado el servicio:
Docker-compose-studio.yml El archivo de configuración es el siguiente
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:
- studioCree dos archivos en el directorio `/myData/nginx/html`, que son administradores y frontales.
La página web oficial en el almacén es: Página estática HTML Pure studio-front .
① Modifique la ruta frontal y cargue la página web oficial
Modifique el primer lugar: team.js , que es la ruta de interfaz en ella
# 替换ip地址即可
const url = " http://192.168.3.83/api/common/members "Modifique el segundo lugar: index.html, inicie sesión en la ruta de salto de la página de registro
< ! -- 同样修改ip地址即可 -- >
< li><a class= " loginbtn " href= " http://192.168.3.83/admin/ " target= " _blank " >登陆/注册< /a></li >Finalmente, suba al servidor:
El proyecto del proyecto en el almacén es studio-ui , que es un proyecto VUE
Modificar 1: Modificar la dirección IP del entorno de producción
# 只需要替换ip地址即可
BASE_URL: ' "http://192.168.3.83/api" 'Luego empacaremos el proyecto VUE:
# 编译打包
npm run buildDespués de completar el embalaje, se generarán recursos estáticos en DISTIL:
Al final, también transmitimos esta página estática al directorio de administración del servidor:
Después de completar la implementación, la prueba es para la dirección de la máquina virtual local.
Sitio web oficial: http://192.168.3.83/
Sistema de gestión de fondo: http://192.168.3.83/admin/, haga clic en el registro de inicio de sesión correcto para saltar.
La cuenta inicial es actualmente solo una es el administrador:
admin 123
2023.12.28: Resolvió el problema de mapeo 443 implementado por HTTPS, el puerto de asignación 443 Nginx del archivo Docker-Compose no está configurado
2023.12.27: Modifique el nombre del contenedor MySQL del archivo de configuración de producción original, re -submara las etiquetas 1.2.0 etiqueta
2023.7.27: Modifique algunos problemas de la implementación de Studio-Vue 1.2, incluida la imagen a la que no se puede acceder después de cargar la imagen y la implementación del servidor de Linux.
2022.10.20: Envíe V1.2.0 (soporte de implementación de Docker-Compose).
2022.9.25: Archivo Docker-Compose para reemplazar el comando Docker y actualizar el capítulo de implementación del servidor Linux en ReadMe.md.
2022.6.13: El establecimiento de almacenes de código abierto, actualizaciones de reademe y perfecta.
2022.6.3-6.12: El módulo del proyecto cambia el nombre, la documentación de Apifox y la preparación del plan de código abierto.
2022.6.2: La interfaz de la página del equipo se actualiza para respaldar la identidad del maestro.
2022.6.1: Función de copia de seguridad de datos agregada, incluidos SQL y los recursos de imagen del sitio web.
2022.5.6: Las dos funciones de carga se fusionan juntas, utilizando el modo de fábrica para reescribir y reutilizar.
2022.4.22: agregado y cargue y elimine las funciones de archivo local
2022.4.18: Genere miembros del usuario para consultar SQL para agregar un estado de cuenta normal a la normalidad.
2022.4.17: Nuevos certificados ganadores en competencia personal, error de estadísticas de la página de inicio
2022.4.16: ① Arrastre y arrastre a la madre de observación. ② Vales de inicio de sesión del usuario cambia la ID de usuario a UUID.
2022.3.21-2022.4.15: V1.0.0 se completa inicialmente, y se realizan funciones básicas.
2021.11.22-2021.12.5: Se implementa el sitio web oficial del estudio y el sistema de fondo del estudio.
Grupo QQ: 571215225
Autor QQ: 939974883
