150 lines
5.6 KiB
HTML
150 lines
5.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>地址管理测试</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>地址管理API测试</h1>
|
||
|
|
|
||
|
|
<h2>添加地址</h2>
|
||
|
|
<form id="addForm">
|
||
|
|
<div>
|
||
|
|
<label>收货人:</label>
|
||
|
|
<input type="text" id="name" value="测试用户" required>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label>手机号:</label>
|
||
|
|
<input type="text" id="phone" value="13800138000" required>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label>省份:</label>
|
||
|
|
<input type="text" id="province" value="北京市" required>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label>城市:</label>
|
||
|
|
<input type="text" id="city" value="北京市" required>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label>区县:</label>
|
||
|
|
<input type="text" id="district" value="朝阳区" required>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label>详细地址:</label>
|
||
|
|
<input type="text" id="detail" value="测试地址123号" required>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label>设为默认:</label>
|
||
|
|
<input type="checkbox" id="isDefault">
|
||
|
|
</div>
|
||
|
|
<button type="button" onclick="addAddress()">添加地址</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<h2>地址列表</h2>
|
||
|
|
<button onclick="loadAddressList()">加载地址列表</button>
|
||
|
|
<div id="addressList"></div>
|
||
|
|
|
||
|
|
<h2>API响应</h2>
|
||
|
|
<div id="response"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const BASE_URL = 'http://localhost:8080';
|
||
|
|
|
||
|
|
async function addAddress() {
|
||
|
|
const data = {
|
||
|
|
name: document.getElementById('name').value,
|
||
|
|
phone: document.getElementById('phone').value,
|
||
|
|
province: document.getElementById('province').value,
|
||
|
|
city: document.getElementById('city').value,
|
||
|
|
district: document.getElementById('district').value,
|
||
|
|
detail: document.getElementById('detail').value,
|
||
|
|
isDefault: document.getElementById('isDefault').checked ? 1 : 0
|
||
|
|
};
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(BASE_URL + '/api/address/add', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
},
|
||
|
|
body: JSON.stringify(data)
|
||
|
|
});
|
||
|
|
|
||
|
|
const result = await response.json();
|
||
|
|
document.getElementById('response').innerHTML = '<pre>' + JSON.stringify(result, null, 2) + '</pre>';
|
||
|
|
|
||
|
|
if (result.code === 200) {
|
||
|
|
alert('地址添加成功！');
|
||
|
|
loadAddressList();
|
||
|
|
} else {
|
||
|
|
alert('添加失败: ' + result.message);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
document.getElementById('response').innerHTML = '<pre>错误: ' + error.message + '</pre>';
|
||
|
|
alert('请求失败: ' + error.message);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function loadAddressList() {
|
||
|
|
try {
|
||
|
|
const response = await fetch(BASE_URL + '/api/address/list');
|
||
|
|
const result = await response.json();
|
||
|
|
|
||
|
|
document.getElementById('response').innerHTML = '<pre>' + JSON.stringify(result, null, 2) + '</pre>';
|
||
|
|
|
||
|
|
if (result.code === 200) {
|
||
|
|
const addresses = result.data || [];
|
||
|
|
let html = '<ul>';
|
||
|
|
addresses.forEach(addr => {
|
||
|
|
html += `<li>
|
||
|
|
<strong>${addr.name}</strong> ${addr.phone}<br>
|
||
|
|
${addr.province} ${addr.city} ${addr.district}<br>
|
||
|
|
${addr.detail}<br>
|
||
|
|
${addr.isDefault ? '<span style="color: red;">默认</span>' : ''}
|
||
|
|
<button onclick="deleteAddress(${addr.id})">删除</button>
|
||
|
|
</li>`;
|
||
|
|
});
|
||
|
|
html += '</ul>';
|
||
|
|
document.getElementById('addressList').innerHTML = html;
|
||
|
|
} else {
|
||
|
|
document.getElementById('addressList').innerHTML = '加载失败: ' + result.message;
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
document.getElementById('response').innerHTML = '<pre>错误: ' + error.message + '</pre>';
|
||
|
|
document.getElementById('addressList').innerHTML = '请求失败: ' + error.message;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function deleteAddress(id) {
|
||
|
|
if (!confirm('确定要删除这个地址吗？')) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(BASE_URL + `/api/address/delete/${id}`, {
|
||
|
|
method: 'DELETE'
|
||
|
|
});
|
||
|
|
|
||
|
|
const result = await response.json();
|
||
|
|
document.getElementById('response').innerHTML = '<pre>' + JSON.stringify(result, null, 2) + '</pre>';
|
||
|
|
|
||
|
|
if (result.code === 200) {
|
||
|
|
alert('删除成功！');
|
||
|
|
loadAddressList();
|
||
|
|
} else {
|
||
|
|
alert('删除失败: ' + result.message);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
document.getElementById('response').innerHTML = '<pre>错误: ' + error.message + '</pre>';
|
||
|
|
alert('请求失败: ' + error.message);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 页面加载时自动加载地址列表
|
||
|
|
window.onload = function() {
|
||
|
|
loadAddressList();
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|