Studio Vue
1.0.0
去年在工作室偶然聽到其他工作室要做一個官網，接著趁著一時興起然後也找了個模板來做了一個自己的官網以及一個後台管理系統，當時的後台系統只有一個登錄、註冊還有提交個人資訊的頁面，主要為了方便展示動態匯總團隊成員。
想要將這個工作室管理系統繼續做下去我自己總結了幾個原因：①再此之前我也在gitee、github上搜尋了相關學校工作室、實驗室管理系統，沒有發現比較完善的，較好的。 ②為了在履歷上有些亮點。 ③將自己所學到的一個技術能夠有一個應用場景，助推自己的技術學習與進步。
今年也正好趁畢業設計這個為主題繼續進行了開發，耗時近一個月將後台管理系統進行了初步完善。
此工作室系統主要面向校園工作室，可供個人及工作室團隊學習使用。
鳴謝：
Studio-Vue示範網址：https://www.codercl.cn/
專案部署上線完整教學：Studio-Vue校園實驗室系統(SpringBoot+Vue)部署上線保母級教學
對應小程式端開源位址：studio-wx（Gitee）、studio-wx（Github）
 |  |
 |  |
 |  |
 |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |
| 科技 | 說明 | 官網 |
|---|---|---|
| SpringBoot | 快速整合框架，使用web啟動器 | 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/ |
| OSS | 第三方物件存儲 | https://github.com/aliyun/aliyun-oss-java-sdk |
| Lombok | 簡化物件封裝工具 | https://projectlombok.org/ |
| poi | Excel工具 | https://poi.apache.org/ |
| easy-captcha | 驗證碼產生工具 | https://gitee.com/ele-admin/EasyCaptcha |
| redis | 快取中介軟體 | https://redis.io/ |
| 科技 | 說明 | 官網 |
|---|---|---|
| Vue2 | 前端主流框架 | https://vuejs.org/ |
| Element-UI | 餓了嗎UI框架 | https://element.eleme.io/ |
| Echarts | Echarts圖錶框架 | https://echarts.apache.org/zh/index.html |
| Axios | 前端HTTP框架 | http://www.axios-js.com/ |
| js-cookie | cookie管理工具 | https://github.com/js-cookie/js-cookie |
| jsencrypt | 加密解密工具，非對稱加密RSA | https://github.com/travist/jsencrypt |
| nprogress | 進度條控件 | https://github.com/rstacruz/nprogress |
| live2d | 看板娘 | 整合vue教學：https://blog.csdn.net/hk1052606583/article/details/122718918 |
| 科技 | 說明 | 官網 |
|---|---|---|
| Nginx | 靜態資源伺服器 | https://github.com/nginx/nginx |
| Docker | 應用容器引擎(快速隔離部署) | https://www.docker.com/ |
工作室官網
前台頁面：
工作室後台管理系統
首頁（Echarts數據展示）：工作室數據統計；依據年級，專業獲獎證書以及競賽統計圖表展示；
個人資料頁：更新個人資料、修改密碼
個人管理模組：
工作室管理模組：
系統管理模組（引用若依）：
其他
文件上傳介面：支援本地或阿里雲OSS存儲，僅需配置下即可。
API文件：https://www.apifox.cn/apidoc/shared-456aee99-6931-48e5-bdd4-89c012d0178c
資料庫表格關係設計：
資料庫表格欄位設計：
tags
本地環境
環境：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、啟動後台服務
①、IDEA開啟項目，設定yaml文件
修改studio-admin/application-dev檔案中的資料庫位址以及連接資料庫名稱與密碼、redis的密碼。
②、導入sql/studio.sql
操作方式：直接導入即可，在sql中已經加入了創建資料庫的sql語句了，不用你自己先創建資料庫，預設是studio。
③運行studio-admin的啟動類別。
3.運行後台管理系統前端vue項目
進入到studio-ui目錄下，執行指令安裝依賴並執行：
# 安装依赖
npm install
# 运行项目
npm run dev造訪：http://localhost:8089
目前管理系統只有一個系統管理員帳號：admin 123
4、運行靜態頁面
進入studio-front目錄下，開啟index.html即可進入首頁，team.html即為團隊頁。
在伺服器根目錄/下方建立mydata資料夾，將mydata目錄下的內容拷貝到其中：
對應的文件內容在倉庫的docker-compose目錄下：
複製到伺服器後如下：
雲端伺服器開啟多個端口(如下)：實際上最終只開放一個端口，其他端口僅僅是在過程中會需要開放一下用來測試
安裝Docker
請參閱這篇部落格：快速使用Docker部署MySQL、Redis、Nginx
安裝Docker-Compose
請參閱這篇部落格：docker-compose快速入門及實戰
對應的docker-compose檔案已上傳docker-compose目錄：
步驟一、啟動docker-compose的基礎服務文件，啟動mysql與redis
①啟動前設定docker-compose-basic.yml檔案中的redis密碼，在35行--requirepass後。
②啟動docker-compose檔案：
# 进入到/mydata目录
cd /mydata
# 启动docker-compose-basic文件
docker-compose -f docker-compose-basic.yml up -d docker-compose-basic.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"]步驟二：建立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檔案：建議是進行遠端連線匯入，匯入的sql如下：
studio.sql ：隻隻有一個使用者帳號。studio-simple1.sql ：與示範網站的資料一致。導入studio.sql後的效果如下：
準備：開啟雲端伺服器上安全群組的2375連接埠。 【提示：請在上傳鏡像的時候開啟，開的時間比較長這個2375埠容易被種病毒，我曾中過】
步驟一：開啟伺服器上docker的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-ports步驟二：本機IDEA來測試是否能夠連接伺服器的docker服務
tcp://192.168.3.83:2375
步驟三：修改遠端Docker的服務ip位址
< dockerHost > http://192.168.3.83: 2375< /dockerHost >修改好之後，我們來手動進行建置studio.admin的jar包：
接著我們來執行docker:build指令來進行打包鏡像並上傳伺服器：
建構成功的效果如下：
我們需要自己將/mydata目錄中的nginx/conf.d設定檔下的設定檔替換為這個：
預設在mydata目錄下的是我們http配置。
啟動最終服務compose檔案：
docker-compose -f docker-compose-studio.yml up -d ok，至此我們就已經部署服務結束：
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`下建立兩個文件，分別是admin與front，前者放後台系統，後者放官網：
在倉庫中官網頁面為： studio-front ，純html靜態頁面。
①修改front路徑，上傳官網頁面
修改第一處： 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 >最後就是上傳到伺服器：
在倉庫中的專案工程為studio-ui ，是一個vue項目
修改一：修改生產環境的ip位址
# 只需要替换ip地址即可
BASE_URL: ' "http://192.168.3.83/api" '接著我們來進行打包vue工程：
# 编译打包
npm run build打包完成後就會在dist目錄下產生靜態資源：
最後我們同樣是將這個靜態頁面傳到伺服器的admin目錄下：
部署完成之後來測試：我這裡的話是本地虛擬機器搭建的位址，你只需要替換為你自己的生產ip位址即可
官網：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容器名稱問題，重新提交tags 1.2.0標籤
2023.7.27：修改studio-vue 1.2版本部署部分問題，包含圖片上傳後存取不了、Linux伺服器部署。
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：個人競賽中得獎證書新增、首頁統計bug
2022.4.16：①看板娘實現拖曳。 ②用戶登入憑證將用戶id改為uuid。
2022.3.21-2022.4.15：v1.0.0初步完成，基本功能實現。
2021.11.22-2021.12.5：工作室官網、工作室後台系統實現，最小核心功能就是實現工作室成員的資訊上傳。
QQ群：571215225
作者QQ：939974883
