Studio Vue
1.0.0
ปีที่แล้วในสตูดิโอ ฉันได้ยินมาโดยบังเอิญว่าสตูดิโออื่นๆ กำลังวางแผนที่จะสร้างเว็บไซต์อย่างเป็นทางการ จากนั้นฉันก็ใช้ประโยชน์จากความตั้งใจและพบเทมเพลตเพื่อสร้างเว็บไซต์อย่างเป็นทางการของตัวเอง และระบบการจัดการแบ็กเอนด์ ในเวลานั้น มีเพียงล็อกอิน ลงทะเบียน และหน้าสำหรับส่งข้อมูลส่วนบุคคลเป็นหลักเพื่อความสะดวกในการแสดงสมาชิกในทีมสรุปแบบไดนามิก
ฉันได้สรุปเหตุผลหลายประการที่ต้องการพัฒนาระบบการจัดการสตูดิโอนี้ต่อไป: 1 ก่อนหน้านั้น ฉันยังได้ค้นหาระบบการจัดการสตูดิโอและห้องปฏิบัติการของโรงเรียนที่เกี่ยวข้องบน gitee และ github แต่ไม่พบสิ่งใดที่สมบูรณ์กว่าหรือดีกว่า ②เพื่อให้มีจุดเด่นในเรซูเม่ของคุณ 3 ใช้เทคโนโลยีที่คุณได้เรียนรู้ในสถานการณ์การใช้งานเพื่อเพิ่มการเรียนรู้และความก้าวหน้าทางเทคโนโลยีของคุณ
ปีนี้ เราเพิ่งใช้ประโยชน์จากธีมของโครงการสำเร็จการศึกษาเพื่อพัฒนาต่อไป และต้องใช้เวลาเกือบหนึ่งเดือนในการปรับปรุงระบบการจัดการแบ็กเอนด์ในขั้นต้น
ระบบสตูดิโอนี้มีไว้สำหรับสตูดิโอของมหาวิทยาลัยเป็นหลัก และสามารถใช้ได้โดยบุคคลและทีมงานในสตูดิโอ
กิตติกรรมประกาศ :
ที่อยู่สาธิต Studio-Vue : https://www.codercl.cn/
บทช่วยสอนที่สมบูรณ์สำหรับการปรับใช้และการเปิดตัวโครงการ: การปรับใช้ระบบห้องปฏิบัติการในวิทยาเขต Studio-Vue (SpringBoot+Vue) และการเปิดตัวบทช่วยสอนระดับพี่เลี้ยงเด็ก
ที่อยู่โอเพ่นซอร์สที่สอดคล้องกันของมินิโปรแกรม: studio-wx (Gitee), studio-wx (Github)
 |  |
 |  |
 |  |
 |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |  |
 |
| เทคโนโลยี | แสดงให้เห็น | เว็บไซต์อย่างเป็นทางการ |
|---|---|---|
| สปริงบูต | เฟรมเวิร์กการรวมอย่างรวดเร็วโดยใช้ตัวเรียกใช้งานเว็บ | https://spring.io/projects/spring-boot |
| มายบาติสพลัส | กรอบการทำงานออม | https://baomidou.com/ |
| ฤดูใบไม้ผลิการรักษาความปลอดภัย | log4j2 | https://spring.io/projects/spring-security#learn |
| เจดับบลิว | การรับรองความถูกต้องเข้าสู่ระบบ | https://github.com/jwtk/jjwt |
| log4j2 | กรอบการบันทึก | https://logging.apache.org/log4j/2.x/manual/index.html |
| ตัวช่วยเพจ | ปลั๊กอินการแบ่งหน้า | https://pagehelper.github.io/ |
| อสส | พื้นที่จัดเก็บอ็อบเจ็กต์ของบริษัทอื่น | 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/ |
| เทคโนโลยี | แสดงให้เห็น | เว็บไซต์อย่างเป็นทางการ |
|---|---|---|
| วิว2 | กรอบกระแสหลักส่วนหน้า | https://vuejs.org/ |
| องค์ประกอบ-UI | คุณหิวโหยกรอบ UI หรือไม่? | https://element.eleme.io/ |
| อีชาร์ท | กรอบแผนภูมิ Echarts | https://echarts.apache.org/zh/index.html |
| แอ็กซิออส | กรอบงาน HTTP ส่วนหน้า | http://www.axios-js.com/ |
| js-คุกกี้ | เครื่องมือการจัดการคุกกี้ | https://github.com/js-cookie/js-cookie |
| jsencrypt.js | เครื่องมือเข้ารหัสและถอดรหัส RSA การเข้ารหัสแบบไม่สมมาตร | https://github.com/travist/jsencrypt |
| ความคืบหน้า | การควบคุมแถบความคืบหน้า | https://github.com/rstacruz/nprogress |
| ไลฟ์2ดี | สาวโปสเตอร์ | บทช่วยสอน vue แบบบูรณาการ: https://blog.csdn.net/hk1052606583/article/details/122718918 |
| เทคโนโลยี | แสดงให้เห็น | เว็บไซต์อย่างเป็นทางการ |
|---|---|---|
| งินซ์ | เซิร์ฟเวอร์ทรัพยากรแบบคงที่ | https://github.com/nginx/nginx |
| นักเทียบท่า | โปรแกรมคอนเทนเนอร์แอปพลิเคชัน (การปรับใช้การแยกอย่างรวดเร็ว) | https://www.docker.com/ |
เว็บไซต์อย่างเป็นทางการของสตูดิโอ
หน้าแรก:
ระบบการจัดการแบ็กเอนด์สตูดิโอ
หน้าแรก (การแสดงข้อมูล Echarts): สถิติข้อมูลสตูดิโอ การแสดงกราฟิกใบรับรองรางวัลระดับมืออาชีพและสถิติการแข่งขันตามเกรด
หน้าข้อมูลส่วนบุคคล: อัปเดตข้อมูลส่วนบุคคล เปลี่ยนรหัสผ่าน
โมดูลการจัดการส่วนบุคคล:
โมดูลการจัดการสตูดิโอ:
โมดูลการจัดการระบบ (อ้างโดย Ruoyi):
อื่น
อินเทอร์เฟซการอัปโหลดไฟล์: รองรับที่เก็บข้อมูล OSS ในเครื่องหรือ Alibaba Cloud เพียงกำหนดค่า
เอกสาร 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. เริ่มบริการพื้นหลัง
1. เปิดโปรเจ็กต์ใน IDEA และกำหนดค่าไฟล์ yaml
แก้ไขที่อยู่ฐานข้อมูลในไฟล์ studio-admin/application-dev ชื่อและรหัสผ่านของฐานข้อมูลการเชื่อมต่อ และรหัสผ่านสำหรับ Redis
2. นำเข้า sql/studio.sql
วิธีดำเนินการ: เพียงนำเข้าโดยตรง คำสั่ง sql เพื่อสร้างฐานข้อมูลได้ถูกเพิ่มลงใน sql แล้ว คุณไม่จำเป็นต้องสร้างฐานข้อมูลด้วยตัวเองก่อน
3.รันคลาสเริ่มต้นของ studio-admin
3. รันโปรเจ็กต์ vue ส่วนหน้าของระบบการจัดการเบื้องหลัง
เข้าสู่ไดเร็กทอรี studio-ui รันคำสั่งเพื่อติดตั้งการขึ้นต่อกันและรัน:
# 安装依赖
npm install
# 运行项目
npm run devเยี่ยมชม: http://localhost:8089
ระบบการจัดการปัจจุบันมีบัญชีผู้ดูแลระบบเพียงบัญชีเดียวเท่านั้น: ผู้ดูแลระบบ 123
4. เรียกใช้เพจแบบคงที่
ป้อนไดเร็กทอรีด้านหน้าสตูดิโอและเปิด index.html เพื่อเข้าสู่หน้าแรก team.html คือหน้าทีม
สร้างโฟลเดอร์ mydata ในไดเร็กทอรีรากของเซิร์ฟเวอร์ / และคัดลอกเนื้อหาของไดเร็กทอรี mydata ลงไป:
เนื้อหาไฟล์ที่เกี่ยวข้องอยู่ในไดเร็กทอรี docker-compose ของคลังสินค้า:
หลังจากคัดลอกไปยังเซิร์ฟเวอร์แล้วจะเป็นดังนี้:
เซิร์ฟเวอร์คลาวด์เปิดหลายพอร์ต (ดังแสดงด้านล่าง): จริงๆ แล้วมีเพียงพอร์ตเดียวเท่านั้นที่เปิดในตอนท้าย และพอร์ตอื่นๆ จะต้องเปิดในระหว่างกระบวนการทดสอบเท่านั้น
ติดตั้งนักเทียบท่า
ดูบล็อกนี้: ใช้ Docker อย่างรวดเร็วเพื่อปรับใช้ MySQL, Redis และ Nginx
ติดตั้ง Docker-Compose
ดูบล็อกนี้: การเริ่มต้นอย่างรวดเร็วของนักเทียบท่าและการต่อสู้เชิงปฏิบัติ
ไฟล์นักเทียบท่าเขียนที่เกี่ยวข้องได้รับการอัปโหลดไปยังไดเร็กทอรีนักเทียบท่าเขียน :
ขั้นตอนที่ 1 เริ่มไฟล์บริการพื้นฐานของ docker-compose เริ่ม mysql และ redis
1. ตั้งรหัสผ่าน 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
1 ขั้นตอนในการตั้งรหัสผ่าน 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 จะติดไวรัสได้ง่าย]
ขั้นตอนที่ 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 >หลังจากแก้ไขแล้ว เราจะสร้างแพ็คเกจ jar ของ 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 ล้วนๆ
1 แก้ไขเส้นทางด้านหน้าและอัปโหลดหน้าเว็บไซต์อย่างเป็นทางการ
การแก้ไขครั้งแรก: 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 project กัน:
# 编译打包
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 ของไฟล์นักเทียบท่า
12.27.2023: แก้ไขชื่อคอนเทนเนอร์ mysql ของไฟล์การกำหนดค่าการใช้งานจริงดั้งเดิม และส่งแท็ก 1.2.0 อีกครั้ง
2023.7.27: แก้ไขปัญหาบางอย่างเกี่ยวกับการปรับใช้ studio-vue เวอร์ชัน 1.2 รวมถึงการไม่สามารถเข้าถึงรูปภาพหลังจากการอัปโหลดและการปรับใช้เซิร์ฟเวอร์ Linux
2022.10.20: ส่งเวอร์ชัน v1.2.0 (รองรับการปรับใช้งาน docker-compose)
2022.9.25: ไฟล์เขียนนักเทียบท่าเพื่อแทนที่คำสั่งนักเทียบท่า อัปเดตบทการปรับใช้เซิร์ฟเวอร์ Linux ใน README.md
2022.6.13: ก่อตั้งคลังสินค้าโอเพ่นซอร์สแล้ว และ README ได้รับการอัปเดตและปรับปรุง
6.3-6.12.2022: การเปลี่ยนชื่อโมดูลโครงการ, การจัดระเบียบเอกสาร 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: v1.0.0 เสร็จสมบูรณ์ในช่วงแรกและมีการนำฟังก์ชันพื้นฐานไปใช้
2021.11.22-2021.12.5: เว็บไซต์อย่างเป็นทางการของสตูดิโอและระบบแบ็กเอนด์ของสตูดิโอถูกนำมาใช้ ฟังก์ชันหลักขั้นต่ำคือการอัปโหลดข้อมูลของสมาชิกสตูดิโอ
กลุ่ม QQ: 571215225
ผู้เขียน QQ: 939974883
