232 lines
8.2 KiB
HTML
232 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>路径测试页面</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
max-width: 1200px;
|
||
margin: 50px auto;
|
||
padding: 20px;
|
||
background: #f5f5f5;
|
||
}
|
||
.test-section {
|
||
background: white;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
}
|
||
h1 {
|
||
color: #333;
|
||
}
|
||
h2 {
|
||
color: #666;
|
||
border-bottom: 2px solid #38BDF8;
|
||
padding-bottom: 10px;
|
||
}
|
||
.path-item {
|
||
padding: 10px;
|
||
margin: 10px 0;
|
||
background: #f9f9f9;
|
||
border-left: 4px solid #38BDF8;
|
||
}
|
||
.success {
|
||
border-left-color: #4CAF50;
|
||
background: #f1f8f4;
|
||
}
|
||
.error {
|
||
border-left-color: #f44336;
|
||
background: #fef1f0;
|
||
}
|
||
code {
|
||
background: #e8e8e8;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
font-family: 'Courier New', monospace;
|
||
}
|
||
.info {
|
||
background: #e3f2fd;
|
||
padding: 15px;
|
||
border-radius: 4px;
|
||
margin: 20px 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>🔍 BlackFruit-UI 路径诊断工具</h1>
|
||
|
||
<div class="info">
|
||
<strong>说明：</strong>此页面用于诊断静态资源路径问题。请查看下方测试结果，找出哪些路径可以正常访问。
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>1. 当前页面信息</h2>
|
||
<div class="path-item">
|
||
<strong>当前 URL：</strong><code id="currentUrl"></code>
|
||
</div>
|
||
<div class="path-item">
|
||
<strong>协议：</strong><code id="protocol"></code>
|
||
</div>
|
||
<div class="path-item">
|
||
<strong>域名：</strong><code id="hostname"></code>
|
||
</div>
|
||
<div class="path-item">
|
||
<strong>路径：</strong><code id="pathname"></code>
|
||
</div>
|
||
<div class="path-item">
|
||
<strong>基础路径：</strong><code id="basePath"></code>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>2. 相对路径测试</h2>
|
||
<div id="relativeTests"></div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>3. 绝对路径测试</h2>
|
||
<div id="absoluteTests"></div>
|
||
</div>
|
||
|
||
<div class="test-section">
|
||
<h2>4. 建议方案</h2>
|
||
<div id="suggestions"></div>
|
||
</div>
|
||
|
||
<script>
|
||
// 显示当前页面信息
|
||
document.getElementById('currentUrl').textContent = window.location.href;
|
||
document.getElementById('protocol').textContent = window.location.protocol;
|
||
document.getElementById('hostname').textContent = window.location.hostname;
|
||
document.getElementById('pathname').textContent = window.location.pathname;
|
||
|
||
const basePath = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
|
||
document.getElementById('basePath').textContent = basePath;
|
||
|
||
// 测试路径列表
|
||
const relativePaths = [
|
||
'common/reset.css',
|
||
'assets/img/index/logo.png',
|
||
'css/index.css',
|
||
'js/index.js',
|
||
'vender/jQuery/jquery-3.5.1.min.js'
|
||
];
|
||
|
||
const absolutePaths = [
|
||
'/common/reset.css',
|
||
'/assets/img/index/logo.png',
|
||
'/css/index.css',
|
||
'/js/index.js',
|
||
'/vender/jQuery/jquery-3.5.1.min.js'
|
||
];
|
||
|
||
// 测试函数
|
||
async function testPath(path, isAbsolute = false) {
|
||
const fullPath = isAbsolute ? path : basePath + path;
|
||
try {
|
||
const response = await fetch(fullPath, { method: 'HEAD' });
|
||
return {
|
||
path: path,
|
||
fullPath: fullPath,
|
||
status: response.status,
|
||
success: response.ok
|
||
};
|
||
} catch (error) {
|
||
return {
|
||
path: path,
|
||
fullPath: fullPath,
|
||
status: 'Error',
|
||
success: false,
|
||
error: error.message
|
||
};
|
||
}
|
||
}
|
||
|
||
// 显示测试结果
|
||
function displayResults(results, containerId) {
|
||
const container = document.getElementById(containerId);
|
||
results.forEach(result => {
|
||
const div = document.createElement('div');
|
||
div.className = `path-item ${result.success ? 'success' : 'error'}`;
|
||
div.innerHTML = `
|
||
<strong>${result.success ? '✅' : '❌'} ${result.path}</strong><br>
|
||
完整路径: <code>${result.fullPath}</code><br>
|
||
状态: <code>${result.status}</code>
|
||
${result.error ? `<br>错误: ${result.error}` : ''}
|
||
`;
|
||
container.appendChild(div);
|
||
});
|
||
}
|
||
|
||
// 生成建议
|
||
function generateSuggestions(relativeResults, absoluteResults) {
|
||
const container = document.getElementById('suggestions');
|
||
const relativeSuccess = relativeResults.filter(r => r.success).length;
|
||
const absoluteSuccess = absoluteResults.filter(r => r.success).length;
|
||
|
||
let suggestion = '';
|
||
|
||
if (relativeSuccess > 0) {
|
||
suggestion = `
|
||
<div class="path-item success">
|
||
<strong>✅ 推荐使用相对路径</strong><br>
|
||
相对路径测试成功 ${relativeSuccess}/${relativeResults.length} 个。<br>
|
||
项目已正确配置，使用相对路径即可。
|
||
</div>
|
||
`;
|
||
} else if (absoluteSuccess > 0) {
|
||
suggestion = `
|
||
<div class="path-item success">
|
||
<strong>✅ 推荐使用绝对路径</strong><br>
|
||
绝对路径测试成功 ${absoluteSuccess}/${absoluteResults.length} 个。<br>
|
||
需要将所有资源路径改为以 <code>/</code> 开头的绝对路径。
|
||
</div>
|
||
`;
|
||
} else {
|
||
suggestion = `
|
||
<div class="path-item error">
|
||
<strong>❌ 服务器配置问题</strong><br>
|
||
所有路径测试均失败。可能的原因：<br>
|
||
1. 服务器文档根目录配置不正确<br>
|
||
2. 项目部署在子目录下，但路径未正确配置<br>
|
||
3. 静态文件未正确上传到服务器<br><br>
|
||
<strong>建议：</strong><br>
|
||
- 检查 Nginx/Apache 的 root 配置<br>
|
||
- 确认项目文件已完整上传<br>
|
||
- 检查文件权限（应为 644）
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
container.innerHTML = suggestion;
|
||
}
|
||
|
||
// 执行测试
|
||
async function runTests() {
|
||
console.log('开始测试路径...');
|
||
|
||
// 测试相对路径
|
||
const relativeResults = await Promise.all(
|
||
relativePaths.map(path => testPath(path, false))
|
||
);
|
||
displayResults(relativeResults, 'relativeTests');
|
||
|
||
// 测试绝对路径
|
||
const absoluteResults = await Promise.all(
|
||
absolutePaths.map(path => testPath(path, true))
|
||
);
|
||
displayResults(absoluteResults, 'absoluteTests');
|
||
|
||
// 生成建议
|
||
generateSuggestions(relativeResults, absoluteResults);
|
||
}
|
||
|
||
// 页面加载后执行测试
|
||
window.addEventListener('load', runTests);
|
||
</script>
|
||
</body>
|
||
</html>
|