Adicionar grupo QQ que precisa do código-fonte do projeto: 994793967
Vídeo de demonstração
[Projeto] Um projeto baseado em Springboot e Vue para imitar a construção do laboratório
Executar captura de tela
Técnica principal
- 1 、 Springboot
- 2, shiro
- 3 、 docker
- 4 、 websocket
- 5 、 Vista
1. Software instalado pelo espelho do ubuntu
| primeiro nome | Mirror ID | Software instalado |
|---|---|---|
| vnmsubuntu | e63ac7f6d854 | vim, ifconfig, passwd openssl openssh-server, mysql, iniciar via dockerjava pode ser executado automaticamente em segundo plano |
| isto | fcf91b03907a | vim, ifconfig, iniciar via dockerjava pode ser executado automaticamente em segundo plano |
| sshcentos | d70c73f12822 | ifconfig 、 ssh |
| consol / ubuntu-xfce-vnc | a86ae35bf09a | Sistema Ubuntu com interface gráfica |
| sqlxfceubuntu | 6a5fefacbf83 | Sistema Ubuntu com interface 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. Faça login no Alibaba Cloud Docker Registry
$ sudo docker login --username = dawnxlb registry.cn-hangzhou.aliyuncs.com
O nome de usuário usado para fazer login é o nome completo da conta do Alibaba Cloud e a senha é a senha definida quando o serviço é ativado.
Você pode modificar a senha da credencial na página de credencial de acesso.
2. Retire a imagem do registro
$ sudo docker pull registry.cn-hangzhou.aliyuncs.com/dkz/dk1:[Número da versão do espelho]
3. Envie a imagem para o registro
$ sudo docker login --username = dawnxlb registry.cn-hangzhou.aliyuncs.com
$ sudo docker tag [ImageId] registry.cn-hangzhou.aliyuncs.com/dkz/dk1:[Número da versão do espelho]
$ sudo docker push registry. cn-hangzhou.aliyuncs.com/dkz/dk1:[Número da versão do espelho]
2. Funções implementadas atualmente
1. Conecte o espelho gráfico
Cada vez que você entrar, ele julgará se há containerid e containerport no cookie para ver se o espelho foi criado. Se uma conexão direta for criada, caso contrário, o containerid e o containerport serão armazenados no cookie quando o usuário clicar em criar. O tempo acabou ou o ambiente está fechado para deletar o valor do cookie.
2. Conecte o espelho do terminal
Cada vez que você entrar, ele irá julgar se há um containerid no cookie para ver se um espelho foi criado. Se uma conexão direta for criada, caso contrário, o containerid será armazenado no cookie quando o usuário clicar em criar. A hora é ou o ambiente é fechado para excluir o valor do cookie.
3. Etapas detalhadas do experimento gráfico
Nos detalhes do experimento, a consulta, a virada de página, o salto, a atualização e o destaque da seção atual de todas as seções em cada capítulo estão ok. Cada vez que uma página é virada, a página atual será armazenada em um cookie e a página atual será gravada ao mesmo tempo. Todas as seções de cada capítulo são consultadas de uma vez, armazenadas na matriz JS e, em seguida, alteradas os dados por meio do subscrito para virar a página!
A barra de progresso do capítulo está ok!
4. Lista de cursos
A lista de cursos é renderizada usando vue. Em primeiro lugar, a direção inicial é consultada e, em seguida, todas as tags são encontradas. Então, toda vez que você clicar na direção, as tags da direção serão consultadas e, em seguida, os cursos podem ser consultados para as tags. A classificação mais recente e mais quente pode ser feita, e você também pode escolher a categoria de campo de treinamento gratuita, Associação. Clique em cada curso para inserir os detalhes do curso.
Navegação em casa
A navegação do curso na página inicial é a direção e as tags que são consultadas em segundo plano para fazer umLinkedHashMap
LinkedHashMap garante que a ordem de saída é a ordem de adição
Em seguida, clique na direção para passar o nome da direção e o subscrito da direção. Para o rótulo e o rótulo, os subscritos são todos 0. Clique no rótulo para passar o nome, subscrito, tid e subscrito do rótulo e transferir para o curso interface de lista para fácil progresso Selecione renderização e consulta de curso.
O nome da direção de entrada é para consultar o rótulo abaixo, o subscrito da direção de entrada é para localizar o estado selecionado,
o id do rótulo de entrada é para consultar o curso e o subscrito é passado para localizar o estado selecionado.
5. Detalhes do curso
Atualmente concluído
Diferentes estilos são exibidos no lado direito de acordo com a categoria do curso (grátis, associação e campo de treinamento). O nome, a introdução, o que você aprenderá, o conteúdo do curso e os detalhes do curso são exibidos no meio.
Para cursos de associação e campo de treinamento, julgue se o usuário é um membro e compre e adicione comentários sobre o curso
desfeito
Sem resposta do curso, pensando em todas as respostas de comentários em uma tabela e, em seguida, adicione diferentes atributos
6. Barra de navegação
Diferentes barras de navegação são exibidas de acordo com o login e o não login. Após o login, você pode consultar os 5 cursos que aprendeu recentemente. Determinar se o usuário tem notificações não lidas
7. Centro Pessoal
Você pode modificar o avatar, modificar o apelido.Atualmente
, os cursos de aprendizagem de história podem ser exibidos em páginas! Clique em continuar aprendendo de cada curso de história para pular diretamente para a interface de aprendizagem.
8. Relatório de experimento
O usuário pode publicar um relatório. Cada vez que um relatório for publicado, será questionado se o relatório dessa seção do capítulo foi publicado. Se for publicado, substitua o conteúdo diretamente, caso contrário, insira um relatório.
9. Reportar e publicar detalhes
Clique no relatório para ver os detalhes, a interface de detalhes pode baixar o PDF do relatório,
clique na postagem para ver os detalhes, a
interface de detalhes da postagem e do relatório tem um relatório que pode saltar para a página de detalhes do curso correspondente ou a lista de
postagens. O lado direito dos detalhes da postagem pode ser automaticamente baseado nas tags h1-h6 Gerar o catálogo.
10. Relatórios pessoais, publicações
Os relatórios e postagens pessoais do usuário podem ser exibidos nas páginas
11. Membro iniciante
Perceba a abertura de membros padrão e membros seniores do pagamento sandbox Alipay
12. Os detalhes do curso começam a aprender
Clicar para entrar na interface de aprendizagem determinará o tipo de curso e, em seguida, determinará se o usuário é VIP ou se adquiriu o curso.
13. Detalhes do curso à direita
O lado direito dos detalhes do curso mostra diferentes estilos de acordo com a identidade do usuário e o tipo de curso.
14. Bate-papo
1. O chat usa websocket para realizar o chat entre vários usuários. Ele gravará o histórico do chat entre os usuários e adicionará amigos automaticamente. Cada vez que uma mensagem for enviada, uma nova mensagem será adicionada ao array de histórico de chat vue e ao chat o histórico será renderizado automaticamente. Clique no avatar do usuário para consultar automaticamente o histórico de bate-papo entre os dois. Depois que uma nova mensagem chegar, se o usuário atual não enviar mais uma mensagem, a interface de bate-papo do usuário exibirá uma caixa de prompt: XX envia uma mensagem.
2. Histórico de bate-papo Cada vez que você conversa com um determinado usuário, todos os registros de bate-papo serão consultados.Clique em cada registro de bate-papo para percorrer a tag img nele, extrair o src dele e, em seguida, abrir uma visualização.
3. Se a outra parte não estiver online, uma caixa pop-up avisará que a outra parte não está online.
mensagem = mensagem.replace (/ </ g, "<");
mensagem = mensagem.replace (/> / g, ">");
js 替换 某个 字符
15, pesquisa
1. Ao entrar na interface de pesquisa, o número de cursos, publicações e discussões será consultado em segundo plano com base em palavras-chave
2. Na interface front-end, o Vue será usado para consultar o conteúdo dos três módulos de cursos, postagens e discussões.Após isso, cada vez que você muda é apenas um julgamento e, em seguida, exibe um, esconde o outro.