前端实现的功能是: Minecraft 服务器玩家注册、登录账号后, 在控制台可通过 在线答题/高校认证/正版验证 完全自助地获取服务器白名单.
带有网站账号管理、题目管理、白名单管理等功能
后端提供有关 网站账号(user
)、题目(exam
)、白名单(whitelist
)、网站配置项(website
) 等的内容
前端: https://github.com/JonjsGithub/whitelist-system-frontend
后端: https://github.com/JonjsGithub/whitelist-system-backend
1.访问 [前端开源仓库], 并确保您的电脑上已安装 Git
, 在终端输入以下命令以克隆我的代码
git clone https://github.com/JonjsGithub/whitelist-system-frontend.git
2.确保您的电脑上已安装 Node.JS
(版本 20+
), 进入 whitelist-system-frontend
目录, 依次执行下面两个命令开始构建静态文件
npm install
npm run build
3.等待几秒, 出现成功提示后, 再进入项目目录下的 dist
目录, 这里的文件就是生成的静态网页文件和一些JS、CSS
4.接下来上传这些文件、文件夹到您对应的网站目录下.
5.最后需要进行 Nginx 配置, 即可上线网站.
由于使用了 proxy 代理
和 WebHistory 模式构建路由
, 所以需要配置一下 Nginx
的反向代理和静态资源重定向
打开 nignx.conf
, 在 server { }
块内加入以下内容来实现反向代理后端API, 请注意修改里面的内容.
location ^~ /api/ {
proxy_pass http://你的后端地址:端口号/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-Forwarded-Proto $scheme;
proxy_http_version 1.1;
add_header Cache-Control no-cache;
add_header Strict-Transport-Security "max-age=31536000";
}
打开 nginx.conf
, 在同一个 server { }
块内加入以下内容来实现静态资源重定向
这样可以解决网站部署后, 刷新页面, 报404错误的问题 (当然选用 WebHashHistory 模式路由
将不会出现这个问题)
location / {
index index.html;
try_files $uri $uri/ /index.html;
}
1.访问 [后端开源仓库], 并确保您的电脑上已安装 Git
, 在终端输入以下命令以克隆我的代码
git clone https://github.com/JonjsGithub/whitelist-system-backend.git
2.确保您的电脑上已安装 Java 17+
和一些现代化IDE软件 (教程使用 JetBrains IDEA
演示), 将目录 whitelist-system-backend
使用 IDEA 打开.
3.修改 application.yml 配置文件
server:
port: 8080 # 后端服务开放的端口
servlet:
context-path: "/" # 内容路径
spring: # SpringBoot 相关配置
datasource: # MySQL 驱动
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/whitelist?useSSL=false&useUnicode=true&characterEncoding=utf8
# MySQL 8 连接的时候一定要加?后面那一大串, 否则连不上
# MySQL 5.7 可以不加?后面那一串
username: root
password: root
data:
redis: # Redis 数据库相关配置
host: localhost
port: 6379
username: default #默认用户名是 default
password: ""
rcon: # Minecraft Rcon 相关配置
host: localhost
port: 25575
password: ""
# 对应 server.properties > rcon.password, 可空
time: # JWT 过期时间
token: 720 # 登录token过期时间 单位分钟
vcode: 60 # 找回密码过期时间 单位分钟
aliyun:
# 阿里云账号密钥 ↓
access-key-id: ""
access-key-secret: ""
mail-html: |
<div style="border:2px solid #9400D3;">
<span style="font-size: 36px; color: black; padding-left: 16px">五彩世界白名单自助申请系统</span>
<br />
<span style="font-size: 24px; color: purple; padding-left: 16px">【找回密码】</span>
<br />
<p style="font-size: 18px; padding-left: 16px">
你好, {name}! 你正在通过网页找回您的白名单申请系统密码.
<br />
请在 <span style="color: red; font-size: 21px;">{expire}分钟内</span> 完成找回密码的所有操作!
<br />
点击或复制下面的链接访问来重置密码:
</p>
<a style="font-size: 16px; padding-left: 16px" href="https://whitelist.jonjs.cn/resetPassword/{vcode}"
target="_blank">
https://whitelist.jonjs.cn/resetPassword/{vcode}
</a>
<br />
</div>
3.等待索引和 Maven 初始化完成, 点击右侧侧边栏中的 Maven, 点击 package
项, 开始打包后端jar包.
4.接下来在 target
目录下, 找到构建出的 whitelist-xxx-xxx.jar
上传到您的主机中.
5.根据Github页面生成 MySQL 数据表, 启动 Redis, 运行后端程序, 修改nginx配置后, 即可正常访问.
附上后端程序启动命令:
java -jar whitelist-xxx-xxx.jar --spring.config.location=./application.yml
如果您看到这篇文章,表示您的 blog 已经安装成功.