Studio Vue
1.0.0
昨年、スタジオで他のスタジオが公式 Web サイトを構築する予定であることを偶然聞き、そのときの気まぐれを利用して自分の公式 Web サイトとバックエンド管理システムを作成するためのテンプレートを見つけました。主に動的な集計チームのメンバーを表示するための利便性を目的として、ログイン、登録、および個人情報を送信するための A ページしかありませんでした。
このスタジオ管理システムの開発を続けたい理由をいくつかまとめました。 ① その前に、関連する学校のスタジオや研究室の管理システムを gitee や github で探しましたが、これよりも完全で優れたものは見つかりませんでした。 ②履歴書にハイライトを記載するため。 ③ 学んだ技術を応用シナリオで使用して、技術の学習と進歩を促進します。
今年は卒業制作というテーマを活かして開発を進めたところ、当初のバックエンド管理システムの改善に1か月近くかかりました。
主にキャンパススタジオ向けのスタジオシステムで、個人からスタジオチームまでご利用いただけます。
謝辞：
Studio-Vue デモのアドレス: https://www.codercl.cn/
プロジェクトのデプロイメントと起動のための完全なチュートリアル: Studio-Vue キャンパス実験室システム (SpringBoot+Vue) のデプロイメントと起動、ナニーレベルのチュートリアル
ミニ プログラムの対応するオープンソース アドレス:studio-wx (Gitee)、studio-wx (Github)
 |  |
 |  |
 |  |
 |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |
| テクノロジー | 説明する | 公式ウェブサイト |
|---|---|---|
| スプリングブーツ | Web ランチャーを使用した迅速な統合フレームワーク | https://spring.io/projects/spring-boot |
| マイバティスプラス | ORMフレームワーク | https://baomidou.com/ |
| スプリングセキュリティ | ログ4j2 | https://spring.io/projects/spring-security#learn |
| JWT | ログイン認証 | https://github.com/jwtk/jjwt |
| ログ4j2 | ロギングフレームワーク | https://logging.apache.org/log4j/2.x/manual/index.html |
| ページヘルパー | ページネーションプラグイン | https://pagehelper.github.io/ |
| OSS | サードパーティのオブジェクトストレージ | https://github.com/aliyun/aliyun-oss-java-sdk |
| ロンボク島 | 簡素化されたオブジェクトカプセル化ツール | https://projectlombok.org/ |
| ポイ | Excelツール | https://poi.apache.org/ |
| 簡単なキャプチャ | 検証コード生成ツール | https://gitee.com/ele-admin/EasyCaptcha |
| レディス | キャッシュミドルウェア | https://redis.io/ |
| テクノロジー | 説明する | 公式ウェブサイト |
|---|---|---|
| Vue2 | フロントエンドの主流フレームワーク | https://vuejs.org/ |
| 要素UI | UI フレームワークに飢えていますか? | https://element.eleme.io/ |
| Eチャート | Echarts チャート フレームワーク | https://echarts.apache.org/zh/index.html |
| アクシオス | フロントエンドHTTPフレームワーク | http://www.axios-js.com/ |
| js-クッキー | クッキー管理ツール | https://github.com/js-cookie/js-cookie |
| jsencrypt | 暗号化および復号化ツール、非対称暗号化 RSA | https://github.com/travist/jsencrypt |
| 進捗 | プログレスバーコントロール | https://github.com/rstacruz/nprogress |
| ライブ2D | 看板娘 | 統合された Vue チュートリアル: https://blog.csdn.net/hk1052606583/article/details/122718918 |
| テクノロジー | 説明する | 公式ウェブサイト |
|---|---|---|
| Nginx | 静的リソースサーバー | https://github.com/nginx/nginx |
| ドッカー | アプリケーションコンテナエンジン（迅速な分離展開） | https://www.docker.com/ |
スタジオ公式サイト
フロントページ:
Studio バックエンド管理システム
ホームページ (Echarts データ表示): スタジオ データ統計、プロの賞状およびグレードに基づく競技統計のグラフィック表示。
個人情報ページ：個人情報の更新、パスワードの変更
個人管理モジュール:
スタジオ管理モジュール:
システム管理モジュール (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. バックグラウンドサービスを開始します
①.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
現在の管理システムには、システム管理者アカウントが 1 つだけあります: admin 123
4. 静的ページを実行する
Studio-front ディレクトリに入り、index.html を開いてホームページにアクセスします。team.html はチーム ページです。
サーバーのルート ディレクトリ / に mydata フォルダーを作成し、mydata ディレクトリの内容をそこにコピーします。
対応するファイルの内容は、ウェアハウスの docker-compose ディレクトリにあります。
サーバーにコピーすると以下のようになります。
クラウド サーバーは複数のポートを開きます (以下を参照)。最終的に実際に開かれるのは 1 つのポートだけであり、他のポートはテストのプロセス中に開く必要があるだけです。
Dockerをインストールする
このブログを参照してください: Docker を使用して MySQL、Redis、および Nginx を迅速にデプロイする
Docker-Compose をインストールする
このブログを参照してください: docker-compose クイック スタートと実践的な戦闘
対応する docker-compose ファイルが docker-compose ディレクトリにアップロードされています。
ステップ1. docker-composeの基本サービスファイルを起動し、mysqlとredisを起動します。
①開始前にdocker-compose-basic.ymlファイルの 35 行目--requirepass以降に redis パスワードを設定します。
②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"]ステップ 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ファイルのインポート：リモート接続経由でインポートすることを推奨します。インポートされたSQLは次のとおりです。
studio.sql : ユーザー アカウントは 1 つだけです。studio-simple1.sql : デモ Web サイトのデータと一致します。 studio.sqlをインポートした後の効果は次のとおりです。
準備：クラウドサーバー上のセキュリティグループのポート2375を開きます。 【ヒント：2375ポートは長時間開いているとウイルスに感染しやすくなりますので、アップロードする際は開いてください。
ステップ 1: サーバー上でリッスンする 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ステップ 2: ローカル IDEA を使用して、サーバーの 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 設定ファイルの下にある設定ファイルを次のものに置き換える必要があります。
デフォルトでは、http 設定は mydata ディレクトリにあります。
最終的なサービス構成ファイルを開始します。
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」に 2 つのファイル (admin とfront) を作成します。前者はバックエンド システムに配置され、後者は公式 Web サイトに配置されます。
ウェアハウス内の公式 Web サイトのページは、純粋な HTML 静的ページであるstudio-frontです。
①フロントパスを修正し、公式サイトのページをアップロードします。
最初の変更: team.js 、その中のインターフェイスパスです
# 替换ip地址即可
const url = " http://192.168.3.83/api/common/members "2 番目の部分を変更します: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パッケージ化が完了すると、静的リソースが dist ディレクトリに生成されます。
最後に、この静的ページもサーバーの admin ディレクトリに転送しました。
デプロイメントが完了したら、テストします。ここで使用するのは、ローカル仮想マシンによって構築されたアドレスです。これを独自の実稼働 IP アドレスに置き換えるだけで済みます。
公式サイト：http://192.168.3.83/
バックエンド管理システム: http://192.168.3.83/admin/、ページの右側にある [ログインと登録] をクリックしてジャンプします。
現在、管理者である初期アカウントは 1 つだけです。
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 コマンドを置き換える Docker-compose ファイル、README.md の Linux サーバー展開の章を更新。
2022.6.13: オープンソース ウェアハウスが確立され、READEME が更新および改善されました。
2022.6.3-6.12: プロジェクトモジュール名の変更、apifox ドキュメントの整理、オープンソース計画の準備。
2022.6.2: インストラクターの ID をサポートするためにチーム ページのインターフェイスが更新されました。
2022.6.1: SQLやWebサイトの画像リソースを含むデータバックアップ機能を追加しました。
2022.5.6: 2 つのアップロード機能が統合され、書き換えと再利用にファクトリー モードが使用されます。
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
