Appearance
项目启动 ¶
基础环境搭建 ¶
数据库 ¶
启动或者找一台可以使用的MySQL实例,同时在后端项目中
_config/sql
目录下找到dax-pay.sql
数据库脚本文件。
在数据库中新建一个
dax-pay
的schema
空间,编码集选择utf8mb4
。将
dax-pay.sql
数据库脚本文件导入进去。
Redis ¶
启动一个Redis实例,记录可进行连接的各项信息,以备后续使用。
不需要进行额外操作
项目下载 ¶
后端下载
后端项目地址: https://gitee.com/dromara/dax-pay ,
执行命令:git clone https://gitee.com/dromara/dax-pay-ui
前端下载
PC前端项目地址: https://gitee.com/bootx/dax-pay-ui ,
执行命令:git clone https://gitee.com/bootx/dax-pay-ui.git
H5前端项目地址: https://gitee.com/bootx/dax-pay-h5 ,
执行命令:git clone https://gitee.com/bootx/dax-pay-h5.git
项目启动(后端) ¶
基础环境要求
名称 | 介绍 | 参考版本 |
---|---|---|
JDK | Java运行环境 | 1.8/11,推荐使用1.8 |
Maven | 项目构建工具 | 推荐版本3.6.x及以上 |
IDE | 集成开发工具 | IntelliJ IDEA |
MySQL | 数据库 | 5.7.X和8.X,推荐使用5.7系列版本,8.X需要设置为大小写不敏感 |
Redis | 缓存中间件 | 推荐使用5.0及以上版本 |
- 将项目导入到
IDEA
中,等待依赖下载完毕 - 找到
daxpay-single
下的daxpay-single-start
模块,打开配置文件,将其中的数据库连接地址
和Redis缓存连接地址
更换为真实的地址。 - 打开本模块的
DaxpaySingleStart
类文件并运行,启动项目,当控制台打印下列内容说明启动成功。 - 登录系统中,将支付相关的各种定时任务进行开启。
shell
----------------------------------------------------------
应用 'dax-pay-single' 运行成功!
Swagger文档: http://192.168.1.12:9000/doc.html
----------------------------------------------------------
项目启动(PC前端) ¶
基础环境要求
环境 | 版本 | 备注 |
---|---|---|
Node | 18/20 | 推荐使用20 |
pnpm | 8.0.0 - 8.5.1 | 推荐直接使用8.5.1版本,更高版本会导致 pnpm-lock.yaml 失效 |
使用Vs Code
或Webstorm
打开项目,然后执行以下命令启动项目:
shell
# 安装项目依赖
pnpm install
# 启动项目
pnpm run dev
当控制台出现下列内容时说明启动成功:
shell
VITE v4.5.1 ready in 8797 ms
➜ Local: https://localhost:3100/ 13:56:35
➜ Network: https://192.168.1.12:3100/ 13:56:35
➜ press h to show help 13:56:35
启动成功后,点击访问即可,默认的账号密码为:bootx
/123456
项目启动(H5前端) ¶
基础环境要求
环境 | 版本 | 备注 |
---|---|---|
Node | 18+ | 推荐使用20.9.0 |
pnpm | >=8.6.10 | 推荐直接使用8.6.1,版本,否则依赖可能安装不上 |
使用Vs Code
或Webstorm
打开项目,然后执行以下命令启动项目:
shell
# 安装项目依赖
pnpm install
# 启动项目
pnpm run dev
当控制台出现下列内容时说明启动成功:
shell
VITE v5.0.10 ready in 1886 ms
➜ Local: http://localhost:9100/h5 12:29:51
➜ Network: http://192.168.11.229:9100/h5 12:29:51
➜ press h + enter to show help
本地调试示例 ¶
提示
因为支付系统会涉及到一些三方支付网关的交互,以及例如微信授权域名、jsapi安全域名的限制,所以本地调试时,对一些回调和手机端上的操作,需要做一些特殊处理。 假定我们拥有一个域名www.daxpay.com
,并且该域名已经备案,下面就是举一个开发时进行调试的例子。
准备内网穿透 ¶
因为开发时,需要接收各种回调请求,以及手机端开发时,需要能够从外网进行访问,通常我们需要使用内网穿透工具,比如
ngrok
、frp
等,具体可以自行搜索相关资料。
Nginx配置 ¶
在本机安装Nginx,用来转发内网穿透的进来的请求,主要对服务端和手机端进行分发,PC端不映射到外网也不影响开发,所以不做处理。
nginx.conf
配置如下:
shell
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 9999;
# 这个是你用来内网穿透的地址
server_name www.daxpay.cn;
# 手机移动端网站, 用于手机进行调试时使用
location ^~/h5 {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_buffering on;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# H5端在本机的访问路径上
proxy_pass http://localhost:9100/h5;
}
# 将后端接口以 /server 开头的方式映射出去, 供回调、H5端调用接口时进行使用
location /server/ {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_buffering on;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# 后端在本机的访问路径上
proxy_pass http://localhost:9000/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
H5前端配置和启动 ¶
PC端直接启动就可以,不需要进行额外的配置,H5端需要配置
网站根目录
为/h5
和接口前缀
为/server
,从而让H5移动端在外网被访问时, 可以正常被访问以及能够正常调用后端接口。
properties
# 端口号
VITE_PORT = 9100
# 网站根目录
VITE_PUBLIC_PATH = /h5
# 是否删除console
VITE_DROP_CONSOLE = true
# 跨域代理,可以配置多个,请注意不要换行
VITE_PROXY=[["/server","http://localhost:9000"]]
# API 接口地址
# 如果没有跨域问题,直接在这里配置即可
VITE_GLOB_API_URL =
# 图片上传地址
VITE_GLOB_UPLOAD_URL =
# 图片前缀地址
VITE_GLOB_IMG_URL =
# 接口前缀
VITE_GLOB_API_URL_PREFIX = /server
PC端前端 ¶
PC端不映射到外网也不影响开发,不需要进行特殊的处理,所以以默认的方式启动即可。
服务端 ¶
外网请求到服务端的数据经过Nginx进行转发,所以不需要进行特殊的配置,所以以默认的方式启动即可。