This commit is contained in:
yiqiu
231
path-test.html
Normal file
231
path-test.html
Normal file
@@ -0,0 +1,231 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user