# formSignUp

**Repository Path**: pmhw/form-sign-up

## Basic Information

- **Project Name**: formSignUp
- **Description**: 基于php 和 ant design开发的轻量报名表 Demo
- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-29
- **Last Updated**: 2025-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# formSignUp 报名表

***基于 PHP和 AntDesign开发的轻量报名报系统 附带微信支付 微信内部***

前端使用 vite 和 react 编写 后端使用原生 php

![alt text](image.png)

环境：php

开发环境：php、node、vite

```md

# 目录结构

📁 antd-demo         前端
    📁 components    插件（表单界面）
    📁 dist          打包后静态文件
    📁 node_modules  依赖相关
    📁 public        公共静态文件
    📁 src           antd 主程序

📁 server            服务端
    🛢️ .sql          数据库文件
    📡 register.php  接口文件

```




## 构建与调试


### 前端

#### 1. 拉取代码

#### 2. 执行以下

```base
# 进入 antd-demo

cd antd-demo

npm install 

```

#### 3. 安装依赖

首先，确保你已经安装了所需的依赖。如果你使用的是 `Vite`，可以使用以下命令来安装相关依赖：

```bash
npm install
```

或者如果你使用 `yarn`：

```bash
yarn install
```

修改上传接口

![alt text](image-1.png)


修改config.ts

```ts
const config = {
    apiUrl: 'https://域名/api.php',  // 接口 URL
    appid:  "公众号id", // 公众号id
  };
  
export default config;
```



#### 4. 运行打包命令

在项目根目录下，运行以下命令来进行打包：

```bash
npm run build
```

或者：

```bash
yarn build
```

这个命令会将你的 React 项目打包到 `dist` 目录下，包含所有的静态文件、JavaScript、CSS、以及你项目中的其它资源。

#### 5. 部署到 Web 服务器

打包完成后，所有的静态文件会在 `dist` 目录中生成。你可以将这个目录部署到 Web 服务器，或者使用像 [Netlify](https://www.netlify.com/) 或 [Vercel](https://vercel.com/) 等服务进行部署。

伪静态：

```nginx
location / {
  try_files $uri /index.html;
}

```

##### 部署示例（例如使用 Nginx）：

1. 将 `dist` 目录的内容 和 `server` register.php 拷贝到服务器上的某个目录。

2. 配置 Nginx，使其指向该目录作为静态文件的根目录。

```nginx
server {
  listen 80;
  server_name your-domain.com;

  location / {
    root /path/to/your/project/dist;
    try_files $uri /index.html;
  }
}
```



3. 重启 Nginx 服务以应用更改。

```bash
sudo service nginx restart
```

#### 6. 验证部署

访问你配置的域名或 IP 地址，确认 React 项目是否已成功部署并可在浏览器中访问。

---

#### 补充 ：使用 `Create React App` 打包（如果你是用 `CRA`）：

1. **生成打包文件**：

```bash
npm run build
```

2. **部署到服务器**：

将 `build` 目录中的所有文件部署到 Web 服务器。

---


### 服务端

#### 1. 同时dist 目录中上传 server 所有 .php 文件

#### 2. 配置

 同时新建***.env*** 并写入：

```env
# 数据库配置
DB_HOST=localhost
DB_NAME=数据库名
DB_USER=数据可用户
DB_PASS=数据可密码

# 微信支付配置
WX_MCH_ID=商户号
WX_SERIAL_NO=证书序列号
WX_APIV3_TOKEN=APIV3秘钥
WX_NOTIFY_URL=https://回调链接/wxpay_notify.php


WX_CERT_PATH=/apiclient_cert.pem 证书
WX_KEY_PATH=/apiclient_key.pem 私钥


WX_PUB_KEY_ID=PUB_KEY_ID_公钥id 非必要
WX_PUE_PATH=/pue.pem 公钥  非必要


# 微信公众号
WX_APPID=公众号APPID
WX_APPSECRET=公众号APPSECRET

# 调试模式
DEBUG=true
```
[微信支付配置参数说明](http://pay.weixin.qq.com/doc/v3/merchant/4013070756)


#### 3. 安装支付依赖

安装框架

```base
composer require wechatpay/wechatpay
```

下载证书

```base
vendor/bin/CertificateDownloader.php -k ${apiV3key} -m ${mchId} -f ${mchPrivateKeyFilePath} -s ${mchSerialNo} -o ${outputFilePath}
```


下载好后修改 ***wxpay_notify.php***一下代码：

```php
$platformPublicKeyMap = [
    '3870E2D5AC48D6DEB211F1546735E61A4AE11B8D' => \WeChatPay\Crypto\Rsa::from(
        'file:///www/wwwroot/h5.codelxy.cn/dist/wechatpay_3870E2D5AC48D6DEB211F1546735E61A4AE11B8D.pem', 
        \WeChatPay\Crypto\Rsa::KEY_TYPE_PUBLIC
    ),
    // 可以添加多个证书
];

```

![alt text](image-2.png)

序列号和证书路径



### 微信支付

[常见错误](https://pay.weixin.qq.com/doc/v3/merchant/4012365347)

[微信支付接口解析](https://wechatpay.im/guide)


## 开发调试

```base
npm run dev
```