Studio Vue
1.0.0
في العام الماضي، سمعت بالصدفة في الاستوديو أن الاستوديوهات الأخرى كانت تخطط لبناء موقع ويب رسمي، ثم استفدت من نزوة ووجدت قالبًا لإنشاء موقع الويب الرسمي الخاص بي ونظام إدارة الواجهة الخلفية في ذلك الوقت لم يكن لديه سوى تسجيل الدخول والتسجيل وصفحة لإرسال المعلومات الشخصية، وذلك بشكل أساسي لتسهيل عرض أعضاء فريق الملخص الديناميكي.
لقد لخصت عدة أسباب لرغبتي في مواصلة تطوير نظام إدارة الاستوديو هذا: ① قبل ذلك، بحثت أيضًا عن أنظمة إدارة الاستوديو والمختبرات المدرسية ذات الصلة على gitee وgithub، لكنني لم أجد أيًا منها أكثر اكتمالاً أو أفضل. ②من أجل الحصول على بعض النقاط البارزة في سيرتك الذاتية. ③ استخدم التكنولوجيا التي تعلمتها في سيناريو التطبيق لتعزيز تعلمك التكنولوجي وتقدمك.
هذا العام، استفدنا للتو من موضوع مشروع التخرج لمواصلة التطوير، واستغرق الأمر ما يقرب من شهر لتحسين نظام إدارة الواجهة الخلفية في البداية.
نظام الاستوديو هذا مخصص بشكل أساسي لاستوديوهات الحرم الجامعي ويمكن استخدامه من قبل الأفراد وفرق الاستوديو.
شكر وتقدير :
العنوان التجريبي لـ Studio-Vue : https://www.codercl.cn/
برنامج تعليمي كامل لنشر المشروع وإطلاقه: نشر نظام مختبر الحرم الجامعي Studio-Vue (SpringBoot+Vue) وإطلاقه على مستوى المربية
عنوان المصدر المفتوح المقابل للبرنامج المصغر: studio-wx (Gitee)، studio-wx (Github)
 |  |
 |  |
 |  |
 |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |
| تكنولوجيا | يوضح | الموقع الرسمي |
|---|---|---|
| SpringBoot | إطار التكامل السريع باستخدام مشغل الويب | 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 |
| مساعد الصفحة | البرنامج المساعد لترقيم الصفحات | https://pagehelper.github.io/ |
| OSS | تخزين كائنات الطرف الثالث | https://github.com/aliyun/aliyun-oss-Java-sdk |
| لومبوك | أدوات تغليف الكائن المبسطة | https://projectlombok.org/ |
| نقطة | أدوات إكسل | https://poi.Apache.org/ |
| كلمة التحقق سهلة | أداة توليد رمز التحقق | https://gitee.com/ele-admin/EasyCaptcha |
| redis | التخزين المؤقت الوسيطة | https://redis.io/ |
| تكنولوجيا | يوضح | الموقع الرسمي |
|---|---|---|
| فيو2 | الإطار السائد للواجهة الأمامية | https://vuejs.org/ |
| عنصر واجهة المستخدم | هل أنت جائع في إطار واجهة المستخدم؟ | https://element.eleme.io/ |
| الرسوم البيانية | إطار الرسم البياني Echarts | https://echarts.Apache.org/zh/index.html |
| أكسيوس | إطار عمل HTTP للواجهة الأمامية | http://www.axios-js.com/ |
| js-cookie | أدوات إدارة ملفات تعريف الارتباط | https://github.com/js-cookie/js-cookie |
| com.jsencrypt | أداة التشفير وفك التشفير، التشفير غير المتماثل RSA | https://github.com/travist/jsencrypt |
| تقدم | التحكم في شريط التقدم | https://github.com/rstacruz/nprogress |
| Live2d | فتاة الملصق | البرنامج التعليمي المتكامل: https://blog.csdn.net/hk1052606583/article/details/122718918 |
| تكنولوجيا | يوضح | الموقع الرسمي |
|---|---|---|
| نجينكس | خادم الموارد الثابتة | https://github.com/nginx/nginx |
| عامل ميناء | محرك حاوية التطبيق (نشر العزل السريع) | https://www.docker.com/ |
الموقع الرسمي للاستوديو
الصفحة الأولى:
نظام إدارة الواجهة الخلفية للاستوديو
الصفحة الرئيسية (عرض بيانات Echarts): عرض رسومي لبيانات الاستوديو لشهادات الجوائز المهنية وإحصائيات المنافسة على أساس الدرجة؛
صفحة المعلومات الشخصية: تحديث المعلومات الشخصية، تغيير كلمة المرور
وحدة الإدارة الشخصية:
وحدة إدارة الاستوديو:
وحدة إدارة النظام (مقتبسة من Ruoyi):
آخر
واجهة تحميل الملفات: تدعم التخزين المحلي أو تخزين Alibaba Cloud OSS، فقط قم بتكوينه.
وثائق واجهة برمجة التطبيقات: https://www.apifox.cn/apidoc/shared-456aee99-6931-48e5-bdd4-89c012d0178c
تصميم علاقة جدول قاعدة البيانات:
تصميم حقل جدول قاعدة البيانات:
العلامات
البيئة المحلية
البيئة: نظام ويندوز
أدوات التطوير: IDEA2020
أداة بناء المشروع: Maven3.6.3
قاعدة البيانات: ماي إس كيو إل 5.7، ريديس
بيئة الواجهة الأمامية: 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. لا تحتاج إلى إنشاء قاعدة البيانات بنفسك أولاً.
③قم بتشغيل فئة بدء التشغيل لمشرف الاستوديو.
3. قم بتشغيل مشروع vue للواجهة الأمامية لنظام إدارة الخلفية
أدخل دليل studio-ui، وقم بتنفيذ الأمر لتثبيت التبعيات وتشغيل:
# 安装依赖
npm install
# 运行项目
npm run devزيارة: http://localhost:8089
يحتوي نظام الإدارة الحالي على حساب مسؤول نظام واحد فقط: admin 123
4. تشغيل الصفحات الثابتة
أدخل دليل الاستوديو الأمامي وافتح ملف Index.html للدخول إلى الصفحة الرئيسية، وهي صفحة الفريق.
قم بإنشاء مجلد mydata في الدليل الجذر للخادم / وانسخ محتويات دليل mydata إليه:
محتويات الملف المقابلة موجودة في دليل docker-compose الخاص بالمستودع:
بعد النسخ إلى السيرفر يكون كالآتي:
يفتح الخادم السحابي منافذ متعددة (كما هو موضح أدناه): يتم فتح منفذ واحد فقط في النهاية، ولا يلزم فتح المنافذ الأخرى إلا أثناء عملية الاختبار.
قم بتثبيت عامل الميناء
راجع هذه المدونة: استخدم Docker بسرعة لنشر MySQL وRedis وNginx
قم بتثبيت Docker-Compose
راجع هذه المدونة: البداية السريعة لتأليف عامل الإرساء والقتال العملي
تم تحميل ملف docker-compose المقابل إلى دليل docker-compose :
الخطوة 1. ابدأ تشغيل ملف الخدمة الأساسي لـ docker-compose، وابدأ تشغيل mysql وredis
①قم بتعيين كلمة مرور redis في ملف docker-compose-basic.yml قبل البدء، بعد السطر 35 --requirepass .
②ابدأ ملف إنشاء عامل الإرساء:
# 进入到/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 : يوجد حساب مستخدم واحد فقط.studio-simple1.sql : متوافق مع بيانات الموقع التجريبي. التأثير بعد استيراد studio.sql هو كما يلي:
التحضير : فتح المنفذ 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.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 المحلي لاختبار ما إذا كان من الممكن توصيل خدمة الإرساء الخاصة بالخادم
tcp://192.168.3.83:2375
الخطوة 3: تعديل عنوان IP لخدمة Docker البعيدة
< dockerHost > http://192.168.3.83: 2375< /dockerHost >بعد التعديل، نقوم يدويًا ببناء حزمة الجرة الخاصة بـ studio.admin:
ثم نقوم بتنفيذ الأمر docker:build لحزم الصورة وتحميلها على الخادم:
نتيجة البناء الناجح هي كما يلي:
نحتاج إلى استبدال ملف التكوين الموجود ضمن ملف التكوين nginx/conf.d في الدليل /mydata بهذا الملف:
بشكل افتراضي، يكون تكوين http الخاص بنا موجودًا في دليل mydata.
ابدأ ملف إنشاء الخدمة النهائية:
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`، وهما admin وfront، ويتم وضع الأول في نظام الواجهة الخلفية، ويتم وضع الأخير في الموقع الرسمي:
صفحة الموقع الرسمية في المستودع هي: studio-front ، وهي صفحة ثابتة بتنسيق 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 >وأخيرا، قم بتحميله على الخادم:
مشروع المشروع في المستودع هو studio-ui ، وهو مشروع vue
التعديل 1: تعديل عنوان IP الخاص ببيئة الإنتاج
# 只需要替换ip地址即可
BASE_URL: ' "http://192.168.3.83/api" 'ثم دعونا نحزم مشروع vue:
# 编译打包
npm run buildبعد اكتمال عملية التعبئة، سيتم إنشاء موارد ثابتة في دليل dist:
وأخيرًا، قمنا أيضًا بنقل هذه الصفحة الثابتة إلى دليل المسؤول الخاص بالخادم:
بعد اكتمال النشر، اختبره: ما أستخدمه هنا هو العنوان الذي تم إنشاؤه بواسطة الجهاز الظاهري المحلي، ما عليك سوى استبداله بعنوان IP الخاص بالإنتاج.
الموقع الرسمي: http://192.168.3.83/
نظام إدارة الواجهة الخلفية: http://192.168.3.83/admin/، انقر فوق تسجيل الدخول والتسجيل على الجانب الأيمن من الصفحة للانتقال.
يوجد حاليًا حساب أولي واحد فقط وهو المسؤول:
admin 123
2023.12.28: تم حل مشكلة تعيين 443 لنشر https، ولم يتم تعيين تعيين 443 منفذ nginx لملف إنشاء عامل الإرساء
2023.12.27: تعديل اسم حاوية mysql لملف تكوين الإنتاج الأصلي وإعادة إرسال العلامات 1.2.0
2023.7.27: تم تعديل بعض المشكلات المتعلقة بنشر الإصدار 1.2 من studio-vue، بما في ذلك عدم القدرة على الوصول إلى الصور بعد التحميل ونشر خادم Linux.
2022.10.20: إرسال الإصدار v1.2.0 (يدعم نشر عامل الإرساء).
2022.9.25: ملف إنشاء Docker لاستبدال أمر docker، وتحديث فصل نشر خادم Linux في README.md.
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: ①تقوم فتاة اللوحة بتنفيذ السحب والإفلات. ②تغير بيانات اعتماد تسجيل دخول المستخدم معرف المستخدم إلى uuid.
2022.3.21-2022.4.15: اكتمل الإصدار 1.0.0 مبدئيًا وتم تنفيذ الوظائف الأساسية.
2021.11.22-2021.12.5: تم تنفيذ الموقع الرسمي للاستوديو ونظام الواجهة الخلفية للاستوديو. الحد الأدنى من الوظائف الأساسية هو تحميل معلومات أعضاء الاستوديو.
مجموعة QQ: 571215225
المؤلف ف: 939974883
