Appearance
项目启动 ¶
基础环境搭建 ¶
数据库 ¶
启动或者找一台可以使用的MySQL或Postgresql实例，同时在后端项目中
_config/sql目录下找到dax-pay.sql数据库脚本文件。
在数据库中进行新建，MySQL编码集选择
utf8mb4，Postgresql选UTF8编码。将
dax-pay.sql数据库脚本文件导入进去。
Redis ¶
启动一个Redis实例，记录可进行连接的各项信息，以备后续使用。
不需要进行额外操作
项目下载 ¶
后端下载
后端项目地址: https://gitee.com/dromara/dax-pay
执行命令：git clone https://gitee.com/dromara/dax-pay
前端下载
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运行环境 | 21+ 推荐使用 Corretto JDK |
| Maven | 项目构建工具 | 推荐版本3.8.x及以上, 并使用 网易云镜像 加速 |
| IDE | 集成开发工具 | IntelliJ IDEA |
| MySQL | 数据库 | 8.0+, 需要设置为大小写不敏感 |
| postgresql | 数据库 | 12+ |
| Redis | 缓存中间件 | 推荐使用5.0及以上版本 |
- 将项目导入到
IDEA中，等待依赖下载完毕 - 找到项目中的
daxpay-single-server模块，打开配置文件，将其中的数据库连接地址、Redis缓存连接地址各种内容更换为真实的地址。 - 打开本模块的
DaxpayServer类文件并运行，启动项目，当控制台打印下列内容说明启动成功。
shell
----------------------------------------------------------
应用 ''dax-pay-server' 运行成功!
Swagger文档: http://192.168.1.12:9000/doc.html
----------------------------------------------------------切换数据库类型 ¶
如果不想使用postgresql数据库而是想使用MySQL数据库, 需要更换数据库驱动和对应的连接配置, 这两项需要在
daxpay-single-server模块下进行配置
更换驱动 ¶
将daxpay-single-server模块下的pom.xml文件，找到<dependencies>标签，删除postgresql依赖，添加mysql依赖。
xml
<!-- 数据库驱动 PG -->
<!-- <dependency>-->
<!-- <groupId>org.postgresql</groupId>-->
<!-- <artifactId>postgresql</artifactId>-->
<!-- </dependency>-->
<!-- 数据库驱动 MySQL -->
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
</dependency>修改数据库配置 ¶
yaml
spring:
datasource:
dynamic:
primary: master
datasource:
master:
# Postgresql连接
# driver-class-name: org.postgresql.Driver
# url: jdbc:postgresql://postgresql:5432/dax-pay-single?serverTimezone=Asia/Shanghai&autoReconnect=true&reWriteBatchedInserts=true
# username: root
# password: root
# MySQL连接
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://mysql/dax-pay-single?serverTimezone=GMT%2B8&characterEncoding=utf8&allowMultiQueries=true&useSSL=false&nullCatalogMeansCurrent=true&allowPublicKeyRetrieval=true
username: root
password: root项目启动（PC前端） ¶
基础环境要求
| 环境 | 版本 | 备注 |
|---|---|---|
| Node | >=18.12.0 | 推荐使用20.9.0+ |
| pnpm | >=9.0.2+ | 低版本会导致 pnpm-lock.yaml 失效 |
使用Vs Code或Webstorm打开项目，然后执行以下命令启动项目：
shell
# 安装项目依赖
pnpm install
# 启动项目
pnpm run dev当控制台出现下列内容时说明启动成功：
shell
VITE v5.4.7 ready in 9868 ms
➜ Local: http://localhost:13333/web 13:59:18
➜ Network: http://192.168.1.104:13333/web 13:59:18
➜ Network: http://172.24.221.1:13333/web 13:59:18
➜ Vue DevTools: Open http://localhost:13333/web/__devtools__/ as a separate window 13:59:18
➜ Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools 13:59:18
➜ press h + enter to show help 13:59:18启动成功后，点击访问即可，默认的超级管理员账号密码为：bootx/123456
项目启动（H5移动端） ¶
基础环境要求
| 环境 | 版本 | 备注 |
|---|---|---|
| Node | >=20.6.0 | 推荐使用20.9.0+ |
| pnpm | >= 9.0.2+ | 低版本会导致 pnpm-lock.yaml 失效 |
使用Vs Code或Webstorm打开项目，然后执行以下命令启动项目：
shell
# 安装项目依赖
pnpm install
# 启动项目
pnpm run dev当控制台出现下列内容时说明启动成功：
shell
VITE v5.4.6 ready in 2130 ms
➜ Local: http://localhost:9100/h5 14:31:40
➜ Network: http://192.168.11.229:9100/h5 14:31:40
➜ Network: http://172.24.224.1:9100/h5 14:31:40
➜ press h + enter to show help 14:31:40本地调试示例 ¶
提示
因为支付系统会涉及到一些三方支付网关的交互，以及例如微信授权域名、jsapi安全域名的限制，所以本地调试时，对一些回调和手机端上的操作，需要做一些特殊处理。 假定我们拥有一个域名frp.daxpay.com，并且该域名已经备案，下面就是举一个开发时进行调试的例子。
准备内网穿透 ¶
因为开发时，需要接收各种回调请求，以及手机端开发时，需要能够从外网进行访问，通常我们需要使用内网穿透工具，比如
ngrok、frp等，具体可以自行搜索相关资料。
toml
serverAddr = "8.8.8.8" # frp地址服务
serverPort = 7000 # 服务端口好
auth.method = 'token' # 客户端访问验证方式
auth.token = 'daxpay' # 客户端访问验证密码
[[proxies]]
name = "dev" # 名称
type = "tcp" # 转发类型
localIP = "127.0.0.1" # 本地IP
localPort = 11688 # 本地接收端口号
remotePort = 19100 # 远程服务端口号映射关系 ¶
| 项目 | 域名分配 | 说明 |
|---|---|---|
| server | https://www.daxpay.com/server/ | 后端独立部署类不同的机器样，通常也不会被直接被访问，所以做个请求转发即可满足回调和接口调用的需求 |
| H5 | https://www.daxpay.com/h5/ | H5手机端通常使用手机访问 |
| PC | https://www.daxpay.com/web/ | PC端是用户和管理员访问的入口，所以让其可以直接访问 |
H5前端配置和启动 ¶
H5端需要配置
网站根目录为/h5，接口前缀为/server，从而让H5移动端在外网被访问时，
properties
# 端口号
VITE_PORT=9100
# 网站根目录
VITE_PUBLIC_PATH=/h5
# API 接口地址
VITE_GLOB_API_URL=
# 接口前缀
VITE_GLOB_API_URL_PREFIX=/server
# 虚拟控制台
VITE_V_CONSOLE=truePC端前端 ¶
H5端需要配置
网站根目录为/web，接口前缀为/server，从而让H5移动端在外网被访问时，
# 名称
VITE_GLOB_APP_TITLE=DaxPay服务端
# 发布路径
VITE_PUBLIC_PATH=/web
# 接口地址
VITE_GLOB_API_URL=/server
# 接口前缀
VITE_GLOB_API_URL_PREFIX=
# 终端类型
VITE_GLOB_APP_CLIENT=dax-pay
# 超时时间
VITE_GLOB_API_TIMEOUT=30000服务端 ¶
外网请求到服务端的数据经过Nginx进行转发，所以不需要进行特殊的配置，所以以默认的方式启动即可。
Nginx配置 ¶
在本机安装Nginx，用来转发内网穿透的进来的请求，示例
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 11688;
# 这个是你用来内网穿透的地址
server_name frp.daxpay.com;
# 手机移动端网站， 用于手机进行调试时使用
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;
}
# 电脑网站
location ^~/web {
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:13333/web;
}
# 将后端接口以 /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;
# websocket协议升级
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# 后端在本机的访问路径上
proxy_pass http://localhost:9999/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# Swagger 映射
location /server/v3/api-docs/ {
proxy_pass http://localhost:9999/v3/api-docs/;
}
}
}