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

366 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>