Studio Vue
1.0.0
작년에 나는 스튜디오의 다른 스튜디오에서 공식 웹 사이트를 만들기 위해 실수를 듣고 공식 웹 사이트와 배경 관리 시스템을 만들기위한 템플릿을 찾았습니다. 동적 요약 팀원의 표시.
이 스튜디오 관리 시스템을 계속하고 싶습니다. ② 이력서에 약간의 하이라이트를 갖기 위해. 짐 배운 기술은 기술 학습과 진행 상황을 촉진하기위한 응용 프로그램 시나리오를 가질 수 있습니다.
올해도 졸업식 주제를 계속 개발했습니다.
스튜디오 시스템은 주로 개인 및 스튜디오 팀에 사용할 수있는 캠퍼스 스튜디오를 향하고 있습니다.
감사합니다 :
Studio-vue 데모 주소 : https://www.codercl.cn/
프로젝트 배포 전체 자습서 : Studio-Vue Campus Laboratory System (SpringBoot+VUE) 출시 보모 수업 자습서 배포
작은 프로그램 오픈 소스 주소에 해당 : Studio-Wx (Gitee), Studio-Wx (Github)
 |  |
 |  |
 |  |
 |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |
| 기술 | 설명 | 공식 웹 사이트 |
|---|---|---|
| 스프링 부츠 | 빠르게 통합 된 프레임 워크, 웹 시작을 사용하십시오 | https://spring.io/projects/spring-boot |
| mybatisplus | ORM 프레임 워크 | https://baomidou.com/ |
| Springsecurity | 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-l-java-sdk |
| 롬복 | 단순화 된 객체 포장 도구 | https://projectlombok.org/ |
| 포이 | Excel 도구 | https://poi.apache.org/ |
| Easy-Captcha | 검증 코드 생성 도구 | https://gitee.com/ele- admin/easycaptcha |
| 레 디스 | 캐시 미들웨어 | https://redis.io/ |
| 기술 | 설명 | 공식 웹 사이트 |
|---|---|---|
| vue2 | 프론트 엔드 주류 프레임 워크 | https://vuejs.org/ |
| 요소 UI | 배가 고픈가요? UI 프레임 워크 | https://element.eleme.io/ |
| echarts | Echarts 차트 프레임 워크 | https://echarts.apache.org/zh/index.html |
| axios | 프론트 엔드 HTTP 프레임 워크 | http://www.axios-js.com/ |
| JS-Cookie | 쿠키 관리 도구 | https://github.com/js-cookie/js-cookie |
| jsencrypt | 암호화 및 암호 해독 도구, 비대칭 암호화 RSA | https://github.com/travist/jsencrypt |
| nprogress | 진행률 바 제어 | https://github.com/rstacruz/nprogress |
| Live2d | Kannin Niang | 통합 VUE 자습서 : https://blog.csdn.net/hk1052606583/article/details/1227189188 |
| 기술 | 설명 | 공식 웹 사이트 |
|---|---|---|
| nginx | 정적 리소스 서버 | https://github.com/nginx/nginx |
| 도커 | 애플리케이션 컨테이너 엔진 (빠른 분리 배포) | https://www.docker.com/ |
스튜디오 공식 웹 사이트
프론트 데스크 페이지 :
스튜디오 배경 관리 시스템
HOME (Echarts Data Display) : 스튜디오 데이터 통계;
개인 정보 페이지 : 개인 정보를 업데이트하고 비밀번호를 수정합니다
개인 관리 모듈 :
스튜디오 관리 모듈 :
시스템 관리 모듈 (참조 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. 배경 서비스를 시작하십시오
project 아이디어 프로젝트를 열고 Yaml 파일을 구성합니다.
studio-admin/application-dev 파일의 데이터베이스 주소와 데이터베이스 이름과 비밀번호를 연결하는 비밀번호와 Redis에서 데이터베이스 주소를 수정하십시오.
sql/studio.sql 가져 오기
작업 방법 : 데이터베이스를 작성하는 SQL 문이 데이터베이스를 직접 만들 필요가 없습니다.
studio-admin의 스타트 업 수업을 실행하십시오.
3. Front -End Management System Vue 프로젝트를 실행하십시오
스튜디오 -UI 디렉토리를 입력하고 명령 설치를 실행하고 의존하고 실행하십시오.
# 安装依赖
npm install
# 运行项目
npm run dev방문 : http : // localhost : 8089
현재 관리 시스템에는 하나의 시스템 관리자 계정 번호가 있습니다 : Admin 123
4. 정적 페이지를 실행하십시오
Studio-Front Directory, Open Index.html을 입력하여 홈페이지를 입력하십시오. html은 팀 페이지입니다.
루트 디렉토리에서 MyData 폴더를 작성/서버 루트 디렉토리 아래/myData 디렉토리의 내용을 다음으로 복사하십시오.
해당 파일 내용은 창고의 Docker-Compose 디렉토리 아래에 있습니다.
다음과 같이 서버에 복사하십시오.
클라우드 서버는 여러 포트를 엽니 다 (다음과 같이). 실제로 하나의 포트 만 열려있다.
Docker를 설치하십시오
이 블로그보기 : Docker를 사용하여 MySQL, Redis, Nginx를 배포하십시오.
Docker-Compose를 설치하십시오
이 블로그를 참조하십시오 : Docker-Compose는 빠르게 시작하고 전투를 벌입니다
해당 Docker-Compose 파일이 Docker-Compose 디렉토리를 업로드했습니다 .
1 단계. Docker-Compose의 기본 서비스 파일을 시작하고 MySQL 및 Redis를 시작하십시오.
35 라인 35 --requirepass 이후 시작하기 전에 docker-compose-basic.yml 파일에 Redis 비밀번호를 설정하십시오.
docker-compose 파일을 시작하십시오.
# 进入到/mydata目录
cd /mydata
# 启动docker-compose-basic文件
docker-compose -f docker-compose-basic.yml up -d docker-compose-baseic.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 파일 가져 오기 : 원격 연결 가져 오기를 수행하는 것이 좋습니다.
studio.sql : 사용자 계정은 하나뿐입니다.studio-simple1.sql : 데모 웹 사이트의 데이터와 일치합니다. studio.sql 가져온 후 효과는 다음과 같습니다.
준비 : 클라우드 서버의 안전 그룹에서 포트 2375를 엽니 다. [팁 : 이미지를 업로드 할 때는이 2375 포트가 발생하기 쉽습니다.
1 단계 : 서버에서 포트 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-ports2 단계 : 서버의 Docker 서비스를 연결할 수 있는지 테스트하는 로컬 아이디어
tcp://192.168.3.83:2375
3 단계 : 원격 Docker의 서비스 IP 주소 수정
< dockerHost > http://192.168.3.83: 2375< /dockerHost >수정 후 Studio.admin의 JAR 패키지를 수동으로 만들어 봅시다.
그런 다음 포장 미러를위한 Docker : Build 명령을 실행하고 서버를 업로드합시다.
성공적인 건축의 효과는 다음과 같습니다.
/mydata 디렉토리의 nginx/conf.d configuration 파일의 구성 파일을 다음과 같이 바꿔야합니다.
기본값은 MyData 디렉토리의 HTTP 구성입니다.
최종 서비스 작성 파일을 시작합니다.
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`에서 두 개의 파일을 만듭니다.
창고의 공식 웹 페이지는 다음과 같습니다. studio-front , Pure 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 >마지막으로 서버에 업로드하십시오.
창고의 프로젝트 프로젝트는 Vue 프로젝트 인 studio-ui 입니다.
1 수정 : 생산 환경의 IP 주소 수정
# 只需要替换ip地址即可
BASE_URL: ' "http://192.168.3.83/api" '그런 다음 VUE 프로젝트를 포장합니다.
# 编译打包
npm run build포장이 완료되면 정적 자원이 Distil에서 생성됩니다.
결국, 우리는이 정적 페이지를 서버의 관리자 디렉토리로 전송합니다.
배포가 완료되면 테스트는 로컬 가상 머신의 주소입니다.
공식 웹 사이트 : http://192.168.3.83/
배경 관리 시스템 : http://192.168.3.83/admin/, 오른쪽 로그인 등록을 클릭하여 점프하십시오.
초기 계정은 현재 하나의 관리자입니다.
admin 123
2023.12.28 : HTTPS에 의해 배치 된 443 매핑 문제 해결, Docker-Compose 파일의 매핑 443 포트 nginx가 설정되지 않았습니다.
2023.12.27 : 원래 생산 구성 파일의 MySQL 컨테이너 이름 수정, 태그 1.2.0 태그를 다시 제출하십시오.
2023.7.27 : 사진 업로드 후에 액세스 할 수없는 사진과 Linux 서버 배포를 포함하여 Studio-Vue 1.2 배포의 일부 문제를 수정하십시오.
2022.10.20 : v1.2.0을 제출하십시오 (Docker-Compose 배포 지원).
2022.9.25 : Docker-Compose 파일 Docker 명령을 대체하고 readme.md에서 Linux 서버 배포 장을 업데이트합니다.
2022.6.13 : 오픈 소스 창고 설립, Reademe 업데이트 및 완벽.
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 : ①보기 어머니를 끌고 드래그합니다. ② 사용자 로그인 바우처 사용자 ID를 UUID로 변경합니다.
2022.3.21-2022.4.15 : V1.0.0이 처음 완료되었으며 기본 기능이 실현되었습니다.
2021.11.22-2021.12.5 : 스튜디오의 공식 웹 사이트와 스튜디오의 배경 시스템은 스튜디오 멤버의 정보를 실현하는 것입니다.
QQ 그룹 : 571215225
저자 QQ : 939974883
