167 lines
4.5 KiB
Vue
167 lines
4.5 KiB
Vue
<template>
|
||
<view class="data-structure-test-page">
|
||
<view class="test-section">
|
||
<text class="section-title">数据结构测试</text>
|
||
<button @click="testStandardStructure" class="test-btn">测试标准结构</button>
|
||
<button @click="testAlternativeStructure" class="test-btn">测试备用结构</button>
|
||
<button @click="testInvalidStructure" class="test-btn">测试无效结构</button>
|
||
</view>
|
||
|
||
<view class="result-section">
|
||
<text class="section-title">测试结果</text>
|
||
<text class="result-text">{{ testResult }}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
testResult: ''
|
||
}
|
||
},
|
||
methods: {
|
||
// 模拟标准数据结构：response.data.list.rows
|
||
testStandardStructure() {
|
||
const mockResponse = {
|
||
code: 200,
|
||
msg: "操作成功",
|
||
data: {
|
||
donorCount: 3,
|
||
proProfile: "简介",
|
||
list: {
|
||
total: 2,
|
||
rows: [
|
||
{
|
||
id: "13",
|
||
formedId: "5",
|
||
realName: "吴键辉",
|
||
amount: 100.10,
|
||
donationDate: "2025-07-23 00:00:00"
|
||
},
|
||
{
|
||
id: "14",
|
||
formedId: "5",
|
||
realName: "张三",
|
||
amount: 200.50,
|
||
donationDate: "2025-07-24 00:00:00"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
|
||
this.parseDataStructure(mockResponse, '标准结构测试')
|
||
},
|
||
|
||
// 模拟备用数据结构：response.data 直接是数组
|
||
testAlternativeStructure() {
|
||
const mockResponse = {
|
||
code: 200,
|
||
msg: "操作成功",
|
||
data: [
|
||
{
|
||
id: "13",
|
||
formedId: "5",
|
||
realName: "李四",
|
||
amount: 150.00,
|
||
donationDate: "2025-07-25 00:00:00"
|
||
}
|
||
]
|
||
}
|
||
|
||
this.parseDataStructure(mockResponse, '备用结构测试')
|
||
},
|
||
|
||
// 模拟无效数据结构
|
||
testInvalidStructure() {
|
||
const mockResponse = {
|
||
code: 200,
|
||
msg: "操作成功",
|
||
data: {
|
||
someOtherField: "不是数组"
|
||
}
|
||
}
|
||
|
||
this.parseDataStructure(mockResponse, '无效结构测试')
|
||
},
|
||
|
||
// 解析数据结构的通用方法
|
||
parseDataStructure(response, testName) {
|
||
this.testResult = `${testName}开始...\n`
|
||
this.testResult += `原始响应: ${JSON.stringify(response, null, 2)}\n\n`
|
||
|
||
if (response.code === 200) {
|
||
let dataArray = []
|
||
|
||
const structureInfo = {
|
||
hasData: !!response.data,
|
||
hasDataList: !!(response.data && response.data.list),
|
||
hasDataListRows: !!(response.data && response.data.list && response.data.list.rows),
|
||
dataIsArray: Array.isArray(response.data),
|
||
hasRows: !!response.rows,
|
||
rowsIsArray: Array.isArray(response.rows)
|
||
}
|
||
|
||
this.testResult += `数据结构分析: ${JSON.stringify(structureInfo, null, 2)}\n\n`
|
||
|
||
if (response.data && response.data.list && response.data.list.rows) {
|
||
dataArray = response.data.list.rows
|
||
this.testResult += '✅ 使用标准结构: response.data.list.rows\n'
|
||
} else if (response.data && Array.isArray(response.data)) {
|
||
dataArray = response.data
|
||
this.testResult += '✅ 使用备用结构: response.data\n'
|
||
} else if (response.rows && Array.isArray(response.rows)) {
|
||
dataArray = response.rows
|
||
this.testResult += '✅ 使用备用结构: response.rows\n'
|
||
} else {
|
||
this.testResult += '❌ 无法找到数据数组\n'
|
||
return
|
||
}
|
||
|
||
this.testResult += `✅ 成功解析数据，共 ${dataArray.length} 条记录\n`
|
||
this.testResult += `数据内容: ${JSON.stringify(dataArray, null, 2)}\n`
|
||
} else {
|
||
this.testResult += `❌ API响应失败: ${response.msg}\n`
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.data-structure-test-page {
|
||
padding: 40rpx;
|
||
}
|
||
|
||
.test-section {
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 20rpx;
|
||
display: block;
|
||
}
|
||
|
||
.test-btn {
|
||
margin: 20rpx 0;
|
||
padding: 20rpx;
|
||
background-color: #007aff;
|
||
color: white;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.result-section {
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.result-text {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
word-break: break-all;
|
||
white-space: pre-wrap;
|
||
}
|
||
</style> |