Agregue el grupo QQ que necesita el código fuente del proyecto: 994793967
Video de demostración
[Proyecto] Un proyecto basado en Springboot y Vue para imitar el edificio del laboratorio.
Ejecutar captura de pantalla
Técnica principal
- 1 、 Botas de primavera
- 2, shiro
- 3 、 ventana acoplable
- 4 、 websocket
- 5 、 Ver
1. Software instalado por ubuntu mirror
| primer nombre | ID espejo | Software instalado |
|---|---|---|
| vnmsubuntu | e63ac7f6d854 | vim, ifconfig, passwd openssl openssh-server, mysql, start via dockerjava puede ejecutarse automáticamente en segundo plano |
| esta | fcf91b03907a | vim, ifconfig, start via dockerjava puede ejecutarse automáticamente en segundo plano |
| sshcentos | d70c73f12822 | ifconfig 、 ssh |
| consol / ubuntu-xfce-vnc | a86ae35bf09a | Sistema Ubuntu con interfaz gráfica |
| sqlxfceubuntu | 6a5fefacbf83 | Sistema Ubuntu con interfaz gráfica, mysql instalado |
1、mq-ssh-ub-xfce 4bc3aa73ca0c
安装了MySQL、ssh的Ubuntu的xfce镜像
2、theia-python d537eb288af0
可写python的Ubuntu的theia镜像，python版本：2.7.13
3、theia-java 7ecaa75800bb
可写java的ubuntu的theia的镜像，jdk版本：1.8
4、theia-html 40786e135c9f
可写html的ubuntu的theia镜像
5、pythonxfceubt 9832e7710c5d
可写python3的ubuntu的xfce镜像
6、had-jdk-ct-xfce 242c8e3713fc
安装了Hadoop伪分布式的xfce的centos镜像（hadoop:2.7.7,jdk：1.8），安装了ssh，root密码：123456
1. Inicie sesión en Alibaba Cloud Docker Registry.
$ sudo docker login --username = dawnxlb registry.cn-hangzhou.aliyuncs.com
El nombre de usuario utilizado para iniciar sesión es el nombre completo de la cuenta de Alibaba Cloud y la contraseña es la contraseña que se establece cuando se activa el servicio.
Puede modificar la contraseña de la credencial en la página de credenciales de acceso.
2. Extraiga la imagen del Registro.
$ sudo docker pull registry.cn-hangzhou.aliyuncs.com/dkz/dk1:[Número de versión del espejo]
3. Envíe la imagen al Registro.
$ sudo docker login --username = dawnxlb registry.cn-hangzhou.aliyuncs.com
$ sudo docker tag [ImageId] registry.cn-hangzhou.aliyuncs.com/dkz/dk1:[Mirror version number]
$ sudo docker push registration. cn-hangzhou.aliyuncs.com/dkz/dk1:[ Número de versión del espejo]
2. Funciones actualmente implementadas
1. Conecte el espejo gráfico
Cada vez que ingrese, juzgará si hay containerid y containerport en la cookie para ver si se ha creado el espejo. Si se crea una conexión directa, de lo contrario, el containerid y el containerport se almacenarán en la cookie cuando el usuario haga clic en crear. Se acabó el tiempo o el entorno está cerrado para eliminar el valor de la cookie.
2. Conecte el espejo terminal
Cada vez que ingrese, juzgará si hay un containerid en la cookie para ver si se ha creado un espejo. Si se crea una conexión directa, de lo contrario, el containerid se almacenará en la cookie cuando el usuario haga clic en crear. El tiempo es o el entorno está cerrado para eliminar el valor de la cookie.
3. Pasos detallados del experimento gráfico
En los detalles del experimento, la consulta, el cambio de página, el salto, la actualización y el resaltado de la sección actual de todas las secciones de cada capítulo están bien. Cada vez que se pasa una página, la página actual se almacenará en una cookie y la página actual se registrará al mismo tiempo. Todas las secciones de cada capítulo se consultan a la vez, se almacenan en la matriz JS y luego se cambian los datos a través del subíndice para pasar la página.
¡La barra de progreso del capítulo está bien!
4. Lista de cursos
La lista de cursos se procesa usando vue. En primer lugar, se consulta la dirección inicial y luego se encuentran todas las etiquetas. Luego, cada vez que haga clic en la dirección, se consultarán las etiquetas de la dirección y luego se pueden consultar los cursos de acuerdo con a las etiquetas. Se puede realizar la clasificación más reciente y actual, y también puede elegir la categoría gratuita, membresía, campo de entrenamiento. Haga clic en cada curso para ingresar los detalles del curso.
Inicio Navegación del curso
La navegación del curso en la página de inicio es la dirección y las etiquetas que se consultan en segundo plano para hacer unLinkedHashMap
LinkedHashMap garantiza que el orden de salida es el orden de adición
Luego haga clic en la dirección para pasar el nombre de la dirección y el subíndice de la dirección. Para la etiqueta y la etiqueta, los subíndices son todos 0. Haga clic en la etiqueta para pasar el nombre, subíndice, tid y subíndice de la etiqueta, y transferir al curso interfaz de lista para facilitar el progreso Seleccione la representación y la consulta del curso.
El nombre de la dirección entrante es consultar la etiqueta a continuación, el subíndice de la dirección entrante es ubicar el estado seleccionado,
la identificación de la etiqueta entrante es consultar el curso y el subíndice se pasa para ubicar el estado seleccionado.
5. Detalles del curso
Actualmente completado
Se muestran diferentes estilos en el lado derecho según la categoría del curso (gratis, membresía y campo de entrenamiento). El nombre, la introducción, lo que aprenderá, el contenido del curso y los detalles del curso se muestran en el medio.
Para los cursos de membresía y campamentos de capacitación, juzgue si el usuario es miembro y compra, y agregue comentarios del curso
deshecho
Sin respuesta del curso, pensando en todas las respuestas a los comentarios en una tabla y luego agregue diferentes atributos
6. Barra de navegación
Se muestran diferentes barras de navegación según el inicio de sesión y el no inicio de sesión. Después de iniciar sesión, puede consultar los 5 cursos que ha aprendido recientemente. Determinar si el usuario tiene notificaciones no leídas
7. Centro personal
Puedes modificar el avatar, modificar el apodo ¡
Actualmente, los cursos de aprendizaje de historia se pueden mostrar en páginas! Haga clic en Continuar aprendiendo de cada curso de historia para ir directamente a la interfaz de aprendizaje.
8. Informe de experimento
El usuario puede publicar un informe, cada vez que se publique un informe se le preguntará si se ha publicado el informe de esa sección del capítulo, en caso de que se publique, reemplace el contenido directamente, en caso contrario inserte un informe.
9. Informar y publicar detalles
Haga clic en el informe para ver los detalles, la interfaz de detalles puede descargar el PDF del informe,
haga clic en la publicación para ver los detalles, la
interfaz de detalles de la publicación y el informe tiene un informe que puede saltar a la página de detalles del curso correspondiente o La lista de
publicaciones El lado derecho de los detalles de la publicación se puede basar automáticamente en las etiquetas h1-h6 Generar el catálogo.
10. Informes personales, publicaciones
Los informes y publicaciones personales del usuario se pueden mostrar en páginas
11. Miembro principiante
Darse cuenta de la apertura de miembros estándar y miembros senior del pago de caja de arena de Alipay
12. Los detalles del curso comienzan a aprender
Hacer clic para ingresar a la interfaz de aprendizaje determinará el tipo de curso y luego determinará si el usuario es un VIP o ha comprado el curso.
13. Detalles del curso a la derecha
El lado derecho de los detalles del curso muestra diferentes estilos según la identidad del usuario y el tipo de curso.
14. Chat
1. El chat utiliza websocket para realizar el chat entre varios usuarios. Registrará el historial de chat entre usuarios y agregará amigos automáticamente. Cada vez que se envíe un mensaje, se agregará un mensaje nuevo a la matriz del historial de chat de vue y al chat el historial se mostrará automáticamente. Haga clic en el avatar del usuario para consultar automáticamente el historial de chat entre los dos. Después de que llega un nuevo mensaje, si el usuario actual ya no envía un mensaje, la interfaz de chat del usuario mostrará un cuadro emergente: XX envía un mensaje.
2. Historial de chat Cada vez que chatee con un determinado usuario, se consultarán todos los registros de chat. Al hacer clic en cada registro de chat, se recorrerá la etiqueta img, se extraerá el src y se mostrará una vista previa.
3. Si la otra parte no está en línea, un cuadro emergente le indicará que la otra parte no está en línea.
message = message.replace (/ </ g, "<");
message = message.replace (/> / g, ">");
js 替换 某个 字符
15, buscar
1. Al ingresar a la interfaz de búsqueda, se consultará la cantidad de cursos, publicaciones y discusiones en segundo plano según las palabras clave.
2. En la interfaz de front-end, Vue se utilizará para consultar el contenido de los tres módulos de cursos, publicaciones y discusiones. Después de eso, cada vez que cambia es solo un juicio, y luego muestra uno, oculta el otro.