开发一个题库系统App和小程序的心得

news/2024/7/7 8:52:12/文章来源:https://www.cnblogs.com/Vrapile/p/18283068

序言

对于一名开发者来说，独自开发一款小程序与App，也许总会有一些疑问：

1. 需要掌握哪些技术？

答：java、vue、及常规Linux命令

2. 需要多少成本？

答：服务器购买，云服务器新人50多三年；

域名购买，10块的域名够用，后续每年30左右的续期费用；

短信套餐购买，50块钱，够用很久了；

微信小程序发布，需要300块钱的审核费用；

ios版本的App发布，貌似也要钱。

3.需要多久完成？

答：如果第一次，需完成域名备案、服务器环境搭建、程序基础功能开发等，可能用时较久；

如果第二次，仅仅在第一次的基础加改代码，短时间可以完成就够了。

1. 心得说明

本文基于个人开发和发布《九云题库》H5/微信小程序/APP的经验，分享从零到完成一套完整系统开发、发布的全过程，其中涉及到部署资源的获取，开发过程、部分程序设计思路、注意事项以及最终部署方法等。

1.1 功能说明

实现PC端/H5/App/小程序4端的常规登陆/注册/更新等
实现题目分类和题目的增删改查功能，支持手机端和PC端操作
实现题目收藏/取消收藏，移动端
实现错题记录/移除记录，移动端
实现刷题/看题/搜题功能，移动端
实现题目提问/留言讨论功能，移动端
其它移动端的基础必备功能

1.2 附件截图

以下是App、H5、微信小程序三个移动端的部分截图

2. 实现方案

1.1 资源方案

2.1.1 服务器选择与规划

服务器选择，系统需要有一个承载平台，因此需要一个服务器，购买云服务器centos7系统是一个不错的选择，或者使用其它服务器。

服务器规划，软件和应用尽可能都放在/home路径，方便统一管理，如：/home/app放系统软件

/home/nginx放nginx配置

/home/docker放docker镜像

/home/minio放minio文件

/home/mysql_tump放mysql备份文件

注：软件安装最好修改默认端口，否则服务器容易被攻击。

2.1.2 服务器-jdk环境

将下载好的 jdk-8u211-linux-x64.tar.gz 放在 /home/app 路径

# 进入目录解压
tar -zxvf jdk-8u211-linux-x64.tar.gz# 修改环境变量
vi /etc/profile# 添加以下配置
export JAVA_HOME=/home/app/jdk1.8.0_211export CLASSPATH=${JAVA_HOME}/lib
export PATH=$PATH:${JAVA_HOME}/bin# 应用配置
source /etc/profile# 校验是否成功
javac
java -version
echo $PATH

2.1.3 服务器-端口开通

云服务器平台需要开通端口，服务器启用防火墙，开通各个服务的端口，以下是centos7下的防火墙相关操作，同时云服务器平台也需要开通对应的端口

# 查看防火墙状态
systemctl status firewalld.service# 永久启用防火墙
systemctl enable firewalld.service# 查看防火墙配置情况
firewall-cmd --list-all# 查看端口
netstat -apn | grep 8080# 添加/移除端口
firewall-cmd --permanent --zone=public --add-port=8080/tcp
firewall-cmd --permanent --zone=public --remove-port=80/tcp# 添加区间类型的端口
firewall-cmd --zone=public--add-port=4400-4600/udp --permanent
firewall-cmd --zone=public--add-port=4400-4600/tcp --permanent# 重新加载防火墙
firewall-cmd --reload

2.1.4 服务器-Nginx

执行命令-增加支持ssl

# 下载nginx包，解析到/home/app/nginx，安装命令
./configure --prefix=/home/app/nginx --with-http_ssl_module
make
make install
nginx -V# 启动nginx服务,切换目录到/home/app/nginx/sbin下面
./nginx# 重新加载配置|重启|停止|退出
./nginx -s reload|reopen|stop|quit  # 查看nginx服务是否启动成功
ps -ef | grep nginx# 配置nginx全局
vim /etc/profile# nginx
NGINX_HOME=/home/app/nginx
export PATH=$PATH:$NGINX_HOME/sbin# 应用配置
source /etc/profile

Nginx配置说明，在/home/app/nginx/conf/nginx.conf的http下增加引用配置，其具体nginx配置只需在引用目录添加即可，方便管理和维护

include /home/nginx/conf/conf.d/*.conf;

在引用目录下编写对应各个需求的nginx配置，一个nginx配置写一个文件，cert专门放ssl证书

2.1.5 服务器-gitea

安装源码管理工具，gitea很占用服务器性能资源，也可以使用开源平台

# nginx配置
server {listen  443 ssl;server_name  git.ninecloud.top;ssl_certificate /home/nginx/conf/conf.d/cert/git.pem;  ssl_certificate_key /home/nginx/conf/conf.d/cert/git.key; ssl_session_timeout 5m;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on;location / {proxy_pass http://127.0.0.1:3000/;
        proxy_set_header Host $http_host;proxy_set_header X-Forwarded-For $remote_addr;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection $http_connection;}
}

2.1.6 服务器-docker

安装docker并设置远程访问，设置远程访问后，方便idea直接发布后端

# 安装docker
yum install docker-ce# 启动docker
systemctl start docker# 设置开机自启
systemctl enable docker# 配置docker远程访问
vi /usr/lib/systemd/system/docker.service# 在ExecStart=/usr/bin/dockerd后面添加
-H tcp://0.0.0.0:2375

# 重新加载和重启
systemctl daemon-reload
systemctl restart docker.service

2.1.7 服务器-minio

安装成功后，浏览器打开9090端口，创建Minio仓库并设置权限，既可在后端配置使用，此处通过docker安装minio

# 下载镜像 
docker pull minio/minio# 查看镜像
ddocker images# 创建两个目录，一个用来存放配置，一个用来存储上传文件的目录，启动前需要先创建Minio外部挂载的配置文件（ /home/minio/config）,和存储上传文件的目录（ /home/minio/data）
mkdir -p /home/minio/config
mkdir -p /home/minio/data# 启动
docker run -p 9000:9000 -p 9090:9090 \--net=host \--name minio \-d --restart=always \-e "MINIO_ACCESS_KEY=yourAccount" \-e "MINIO_SECRET_KEY=yourPassword" \-v /home/minio/data:/data \-v /home/minio/config:/root/.minio \minio/minio server \/data --console-address ":9090" -address ":9000"

2.1.8 服务器-redis

# 安装
wget http://download.redis.io/releases/redis-6.2.1.tar.gz
tar xzvf redis-6.2.1.tar.gz
cd redis-6.2.1
make
cd src
make install PREFIX=/home/app/redis# redis全局环境/etc/profile
REDIS_HOME=/home/app/redis
export PATH=$PATH:$REDIS_HOME/bin# 设置密码，配置/home/app/redis/redis.conf
# bind 127.0.0.1 -::1
daemonize yes
protected-mode no
requirepass yourPassword

最后这步很重要，修改redis端口，个人服务器曾因未修改端口被攻击，修改端口号方式

/home/app/redis/redis.conf
# 改变默认端口号port 5268

2.1.9 服务器-mysql8

安装mysql8后，对于每个系统，要使用单独的数据库以及单独的账号，避免某个数据库账号泄露导致所有数据库数据泄露的风险。

备份数据很重要，通过Linux的定时任务crontab，实现数据库每日备份，并删除过期的备份

在scripts中写入备份和删除备份脚本

// 备份脚本
vim /home/mysql_tump/scripts/backup.sh
#!/bin/bash
# 备份目录
BACKUP_ROOT=/home/mysql_tump
BACKUP_FILEDIR=$BACKUP_ROOT/files
BACKUP_LOGDIR=$BACKUP_ROOT/logs
# 当前日期
DATE=$(date +%Y%m%d)
DATABASES=(testdb test2db)
# 循环备份
echo 'Begin for mysql tump!'
for db in ${DATABASES[@]}
do echo 'Is tumpping' ${db}
mysqldump --defaults-extra-file=/etc/my.cnf --default-character-set=utf8 --lock-all-tables --flush-logs --log-error=$BACKUP_LOGDIR/${db}_$DATE.error.log -E -R -B ${db} | gzip> $BACKUP_FILEDIR/${db}_$DATE.sql.gz 
done
echo 'Success for mysql tump!'

// 删除过期备份
vim /home/mysql_tump/scripts/backup_rm.sh
#!/bin/bash
# 删除备份
echo 'Begin for remove tump!'
find /home/mysql_tump/files -type f -mtime +5 | xargs rm -f
find /home/mysql_tump/logs -type f -mtime +5 | xargs rm -f
echo 'Success for remove tump!'

编辑Linux自带的crontab任务，加入备份和删除备份两个任务

// 定时任务
crontab -e 
00 05 * * * bash /home/mysql_tump/scripts/backup.sh
30 05 * * * bash /home/mysql_tump/scripts/backup_rm.sh

2.1.10 域名选择与规划

小程序只支持https域名式地址，因此必须有一个域名。可在云服务商注册购买域名或其它域名方式，域名需要进行备案。

域名规划，可以解析多个子域名。子域名全部指向服务器IP，具体子域名通过nginx指向不同的端口，负载均衡也由nginx完成，通过不同域名指向不同的领域系统或功能，如：

www.ninecloud.top — 网站首页与静态文件路径

api.ninecloud.top — 接口

fs.ninecloud.top — Nginx文件服务

minio.ninecloud.top — Minio文件服务

git.ninecloud.top — Gitea服务

doc.ninecloud.top —文档服务

每个子域名需要各自申请ssl证书，将证书文件放在服务器并在nginx里配置，即可实现https访问，在云服务商购买的域名都有免费的ssl证书可用。

2.1.11 短信方案

系统存在验证码登录，找回密码等场景，因此有短信发送需求，可购买各服务商平台的短信套餐，接入系统

发送短信需要在服务商的云平台申请签名和模版，各个云平台管理都比较严格，尤其是个人用户，申请签名和模版很难成功，需要耐心。

2.1.12 微信公众平台

微信发布小程序，需要在微信公众平台注册小程序账号，进行一些认证，https地址白名单设置，权限设置等，拿到后续开发需要的AppID，AppSecret等关键数据。

2.1.13 其它小程序平台

尝试成功发布过支付宝小程序，和微信小程序大同小异。

2.1.14 App发布

通过jre生成Android签名证书，然后使用开发工具HbuilderX工具打包成apk文件，放在服务器，用户直接通过浏览器下载即可安装使用。

Window本地生成App证书方式，dos命令进入jre目录

// 生成证书 
#  testalias为证书别名，test.keystore为证书名称
keytool -genkey -alias testalias -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore# 中间的内容不用填，在最后的提示中，确认证书密码
Enter key password for <testalias>  (RETURN if same as keystore password):

在HbuilderX中，打包app时，需要用到上面的文件，别名，和密码

1.2 代码方案

2.2.1 开发发布说明

工具说明：

后端工具idea 框架若依Plus

前端工具VsCode 框架若依vue3

移动端工具HbuilderX 框架uniapp vue3

微信小程序的devtools

数据库工具dbever

服务器工具Xshell、Xftp

其它工具，接口调试postman，P图工具photoshop，redis客户端等

发布说明：

后端发布，在idea设置docker远程连接，打包jar，以docker命令部署

前端部署，生成静态文件，上传服务器/home/www/msw/目录

移动端H5，生成静态文件，上传服务器/home/www/uquestion目录

移动端App，打包生成Apk后，上传/home/nginx/apk目录，通过系统配置指定路径和版本确定apk地址，App端可自动触发升级，H5端可点击下载

移动端微信小程序，HbuilderX生成小程序项目文件，通过微信小程序工具打开文件上传即可，然后进入微信公众平台，进行审核升级

2.2.2 后端开发-数据库设计

分类表

问题表

评论表

日志表

2.2.3 后端开发-框架基于若依Plus

在若依plus基础上增加ruoyi-question模块，单独存放题库相关功能。

其中四个controller分别是：class-题目分类，option-题目，log-收藏和错题，comment-提问与回复

通过SaToken的SaMode.OR模式，给PC端和手机端都需要的接口增加两个任意满足权限，手机端通用基础权限可固定为app:base:api，用户注册会默认给到相关权限，权限代码例如：

@SaCheckPermission(value = {"question:class:list", "app:base:api"}, mode = SaMode.OR)@GetMapping("/getAllList")public R<List<QuestionClass>> getAllList(QuestionClass entry) {return R.ok(baseService.getAllList(entry));}

2.2.4 后端开发-登陆/注册机制

登录有两种方式，账号密码登录和手机号验证码登录，个人版的微信小程序只能获取OpenId无法获取手机号，OpenId唯一可用于登录，但由于多端可注册可登录，避免同一用户出现两个账号，因此小程序放弃OpenId登录，与其它端保持一致。

以下是登陆Body文件，其中通过登陆类型type来区分两种登陆方式，通过registerFlag来判断手机号验证码登录时，系统没有账号是否自动注册。

@Data
public class AppLoginBody {/*** 登录类型，0-密码登录，1-验证码登录*/@NotBlank(message = "登录类型不允许为空")private String type;/*** 用户账号*/@NotBlank(message = "{user.username.not.blank}")@Length(min = UserConstants.USERNAME_MIN_LENGTH, max = UserConstants.USERNAME_MAX_LENGTH, message = "{user.username.length.valid}")private String username;/*** 用户密码*/private String password;/*** 验证码*/private String smsCode;/*** 注册标记 为1表示无用户则注册*/private String registerFlag;}