pangu-user-platform/scripts/test/index.html

366 lines
12 KiB
HTML
Raw Permalink Normal View History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开放接口 PHP 客户端 - 使用指南</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #333;
background: #f5f7fa;
padding: 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
padding: 40px;
}
h1 {
color: #409eff;
font-size: 32px;
margin-bottom: 20px;
border-bottom: 3px solid #409eff;
padding-bottom: 10px;
}
h2 {
color: #303133;
font-size: 24px;
margin-top: 30px;
margin-bottom: 15px;
}
.file-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 15px;
margin: 20px 0;
}
.file-card {
border: 1px solid #dcdfe6;
border-radius: 6px;
padding: 20px;
transition: all 0.3s;
}
.file-card:hover {
border-color: #409eff;
box-shadow: 0 2px 12px rgba(64, 158, 255, 0.2);
transform: translateY(-2px);
}
.file-icon {
font-size: 40px;
margin-bottom: 10px;
}
.file-name {
font-weight: 600;
color: #409eff;
margin-bottom: 8px;
font-size: 16px;
}
.file-desc {
color: #606266;
font-size: 14px;
}
.quick-start {
background: #f0f9ff;
border-left: 4px solid #409eff;
padding: 20px;
margin: 20px 0;
}
.quick-start h3 {
color: #409eff;
margin-bottom: 10px;
}
.step {
margin: 15px 0;
padding-left: 30px;
position: relative;
}
.step::before {
content: attr(data-step);
position: absolute;
left: 0;
top: 0;
background: #409eff;
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
text-align: center;
line-height: 24px;
font-size: 12px;
font-weight: bold;
}
pre {
background: #f5f7fa;
padding: 15px;
border-radius: 4px;
overflow-x: auto;
margin: 10px 0;
border: 1px solid #dcdfe6;
}
code {
font-family: "Monaco", "Courier New", monospace;
font-size: 14px;
color: #e96900;
}
.command {
background: #282c34;
color: #abb2bf;
padding: 15px;
border-radius: 4px;
margin: 10px 0;
}
.command code {
color: #61afef;
}
.info-box {
background: #fff9f0;
border-left: 4px solid #e6a23c;
padding: 15px;
margin: 15px 0;
}
.success-box {
background: #f0f9ff;
border-left: 4px solid #67c23a;
padding: 15px;
margin: 15px 0;
}
.footer {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #dcdfe6;
text-align: center;
color: #909399;
}
a {
color: #409eff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>🚀 开放接口 PHP 客户端</h1>
<p style="color: #606266; margin-bottom: 30px;">
完整的 PHP 客户端实现,包含签名计算、请求封装、错误处理等功能。
</p>
<h2>📁 文件清单</h2>
<div class="file-list">
<div class="file-card">
<div class="file-icon">📦</div>
<div class="file-name">OpenApiClient.php</div>
<div class="file-desc">PHP 客户端类,封装所有调用逻辑</div>
</div>
<div class="file-card">
<div class="file-icon"></div>
<div class="file-name">quickstart.php</div>
<div class="file-desc">快速开始示例,最简单的调用方式</div>
</div>
<div class="file-card">
<div class="file-icon">🧪</div>
<div class="file-name">openapi-student-list-test.php</div>
<div class="file-desc">完整测试示例,演示多种查询场景</div>
</div>
<div class="file-card">
<div class="file-icon">📖</div>
<div class="file-name">README.md</div>
<div class="file-desc">详细使用文档,包含所有接口说明</div>
</div>
<div class="file-card">
<div class="file-icon">📝</div>
<div class="file-name">使用说明.txt</div>
<div class="file-desc">纯文本快速参考指南</div>
</div>
<div class="file-card">
<div class="file-icon">🌐</div>
<div class="file-name">index.html</div>
<div class="file-desc">本页面,可视化使用指南</div>
</div>
</div>
<div class="quick-start">
<h3>🚀 快速开始3 步)</h3>
<div class="step" data-step="1">
<strong>获取应用凭证</strong>
<p>登录管理后台 → 应用管理 → 获取 AppCode 和 AppSecret</p>
</div>
<div class="step" data-step="2">
<strong>修改配置</strong>
<p>编辑 <code>quickstart.php</code>,填入您的应用信息</p>
</div>
<div class="step" data-step="3">
<strong>运行测试</strong>
<div class="command">
<code>php quickstart.php</code>
</div>
</div>
</div>
<h2>💻 使用示例</h2>
<h3>方式一:命令行调用</h3>
<div class="command">
<code># 基本用法
php openapi-student-list-test.php &lt;appCode&gt; &lt;appSecret&gt;
# 示例
php openapi-student-list-test.php YY000001 a1b2c3d4e5f6789012345678901234ab
# 指定服务地址
php openapi-student-list-test.php YY000001 a1b2c3d4e5f6789012345678901234ab http://your-domain.com:8080</code>
</div>
<h3>方式二:代码集成</h3>
<pre><code>&lt;?php
require_once 'OpenApiClient.php';
// 1. 创建客户端
$client = new OpenApiClient(
'http://localhost:8080',
'YY000001',
'your-app-secret',
false // 调试模式
);
// 2. 调用接口
$result = $client->get('/open/api/student/list', [
'pageNum' => 1,
'pageSize' => 10,
'studentName' => '张'
]);
// 3. 处理响应
if ($result['code'] === 200) {
echo "总记录数: {$result['total']}\n";
foreach ($result['rows'] as $student) {
echo "{$student['studentName']}\n";
}
}
?&gt;</code></pre>
<h2>🔐 签名算法</h2>
<div class="info-box">
<strong>签名计算步骤:</strong>
<ol style="margin-top: 10px; padding-left: 20px;">
<li>收集请求参数(不含签名)</li>
<li>按参数名 ASCII 码升序排序</li>
<li>拼接:<code>key1=value1&amp;key2=value2&amp;appSecret=xxx</code></li>
<li>MD5 加密并转大写</li>
</ol>
</div>
<pre><code>function calculateSign($params, $appSecret) {
ksort($params);
$signStr = '';
foreach ($params as $key => $value) {
if ($signStr) $signStr .= '&';
$signStr .= $key . '=' . $value;
}
$signStr .= '&appSecret=' . $appSecret;
return strtoupper(md5($signStr));
}</code></pre>
<h2>❌ 常见错误</h2>
<table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
<thead>
<tr style="background: #f5f7fa;">
<th style="padding: 12px; border: 1px solid #dcdfe6; text-align: left;">错误信息</th>
<th style="padding: 12px; border: 1px solid #dcdfe6; text-align: left;">原因</th>
<th style="padding: 12px; border: 1px solid #dcdfe6; text-align: left;">解决方法</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 12px; border: 1px solid #dcdfe6;">签名验证失败</td>
<td style="padding: 12px; border: 1px solid #dcdfe6;">appSecret 错误</td>
<td style="padding: 12px; border: 1px solid #dcdfe6;">检查应用密钥</td>
</tr>
<tr>
<td style="padding: 12px; border: 1px solid #dcdfe6;">请求已过期</td>
<td style="padding: 12px; border: 1px solid #dcdfe6;">时间戳超过5分钟</td>
<td style="padding: 12px; border: 1px solid #dcdfe6;">同步服务器时间</td>
</tr>
<tr>
<td style="padding: 12px; border: 1px solid #dcdfe6;">无权访问该接口</td>
<td style="padding: 12px; border: 1px solid #dcdfe6;">未授权</td>
<td style="padding: 12px; border: 1px solid #dcdfe6;">在管理后台配置授权</td>
</tr>
<tr>
<td style="padding: 12px; border: 1px solid #dcdfe6;">应用已停用</td>
<td style="padding: 12px; border: 1px solid #dcdfe6;">应用状态异常</td>
<td style="padding: 12px; border: 1px solid #dcdfe6;">启用应用</td>
</tr>
</tbody>
</table>
<div class="success-box">
<strong>💡 调试技巧:</strong>
<p style="margin-top: 10px;">
创建客户端时设置 <code>debug = true</code>,可以查看完整的请求详情和签名计算过程。
</p>
<div class="command" style="margin-top: 10px;">
<code>$client = new OpenApiClient($url, $code, $secret, true);</code>
</div>
</div>
<h2>🔗 相关资源</h2>
<ul style="line-height: 2; margin: 20px 0; padding-left: 20px;">
<li><a href="README.md">README.md</a> - 详细使用文档</li>
<li><a href="../../docs/应用管理-需求与技术设计方案.md">技术设计方案</a></li>
<li><a href="../../docs/开放接口实现说明.md">实现说明</a></li>
<li><a href="http://localhost:8080/doc.html" target="_blank">Swagger 文档</a></li>
<li><a href="http://localhost:80" target="_blank">管理后台</a></li>
</ul>
<div class="footer">
<p>pangu</p>
<p style="margin-top: 5px;">2026-02-04</p>
</div>
</div>
</body>
</html>