极客观点
项目管理
HarmonyOS
我使用的工具是Node.js Express框架，写代码的工具是Notepad++
我写了一个页面，页面中的业务外包模块中能动态展示E:\wangzhan\ziliao\业务外包中的文件名称，我在这些动态展示的文件右方加了一个打开按钮，点击这个打开按钮会有一个弹窗，因此当我点击丹丹文件名右方的弹窗中应该能动态展示E:\wangzhan\ziliao\业务外包\丹丹中的文件，但是实际情况是弹窗中仍然动态展示的是E:\wangzhan\ziliao\业务外包中的文件，我不知道错误在哪，尝试多次仍然无法解决，不知哪位大神可以帮小弟解决这个问题，跪谢！
以下是我页面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内控园地</title>
<style>
body {
margin: 0;
font-family: "仿宋", Arial, sans-serif; /* Use "仿宋" as a fallback font */
}
header {
background: linear-gradient(to right, #4e54c8, #8f94fb);
color: #fff;
text-align: center;
padding: 60px 20px; /* Increase header height by 100% */
width: 100%;
height: 250%; /* Increase header height by 100% */
position: relative;
}
header h1 {
margin: 0;
font-size: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
section {
display: flex;
flex-wrap: wrap; /* Allow items to wrap to the next line */
justify-content: center;
padding: 20px;
}
.module {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
width: 30%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 0 10px 20px; /* Add margin-bottom to create space between rows */
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; /* Center text horizontally and vertically */
height: 100%;
}
.module h2 {
color: #000; /* Set text color to black */
font-size: 40px;
font-weight: bold; /* Make the title bold */
font-family: "仿宋", Arial, sans-serif; /* Use "仿宋" as a fallback font */
margin-top: 0;
}
.file-list {
margin-top: 15px;
list-style-type: none;
padding: 0;
text-align: left;
}
.file-list li {
margin-bottom: 5px;
font-size: 24px; /* Set text size to 24px */
color: #000; /* Set text color to black */
font-family: "仿宋", Arial, sans-serif; /* Use "仿宋" as a fallback font */
cursor: pointer; /* Set cursor to pointer */
display: flex; /* Enable flexbox */
align-items: center; /* Center items vertically */
}
.file-list li button {
margin-left: 50px; /* Add margin to create space between file name and button */
padding: 5px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<header>
<h1>内 控 园 地</h1>
</header>
<section>
<!-- 业务外包模块 -->
<div class="module" id="业务外包">
<h2>业务外包</h2>
<ul class="file-list" id="业务外包-list"></ul>
<!-- Add the back button -->
<button class="back-button" onclick="redirectToIndex()">返回内控园地</button>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Fetch files for 业务外包 module
fetchAndDisplayFiles('业务外包-list');
});
function fetchAndDisplayFiles(listId) {
const fileList = document.getElementById(listId);
fetch('/files/业务外包')
.then(response => response.json())
.then(files => {
files.forEach(file => {
// Extract file name without extension
const fileName = file.replace(/\..+$/, '');
const listItem = document.createElement('li');
listItem.textContent = fileName;
const openButton = document.createElement('button');
openButton.textContent = '打开';
openButton.classList.add('open-button');
openButton.onclick = () => openFolderWindow('/files/业务外包', fileName);
listItem.appendChild(openButton);
fileList.appendChild(listItem);
});
})
.catch(error => {
console.error(error);
});
}
function openFolderWindow(folderPath, windowTitle) {
const left = (screen.width - 600) / 2;
const top = (screen.height - 400) / 2;
const newWindow = window.open('', windowTitle, `width=600, height=400, left=${left}, top=${top}`);
fetch(folderPath)
.then(response => response.json())
.then(files => {
newWindow.document.write(`<h2>${windowTitle}</h2>`);
newWindow.document.write('<ul>');
files.forEach(file => {
const listItem = newWindow.document.createElement('li');
const downloadLink = newWindow.document.createElement('a');
downloadLink.textContent = file;
downloadLink.href = `${folderPath}/${file}`;
downloadLink.download = file;
listItem.appendChild(downloadLink);
newWindow.document.write(listItem.outerHTML);
});
newWindow.document.write('</ul>');
const closeButton = newWindow.document.createElement('button');
closeButton.textContent = '关闭';
closeButton.onclick = () => newWindow.close();
newWindow.document.body.appendChild(closeButton);
})
.catch(error => {
console.error(error);
});
}
function redirectToIndex() {
window.location.href = 'index.html';
}
</script>
</body>
</html>
文件夹内容如下：
修改后server.js文件内容如下：
const express = require('express');
const path = require('path');
const fs = require('fs');
const app = express();
const port = 3000;
app.use(express.static('public'));
app.get(/\/files\/(.+)/, (req, res) => {
const folder = req.params[0];
const folderPath = path.join('E:', 'wangzhan', 'ziliao', folder);
fs.readdir(folderPath, (err, files) => {
if (err) {
console.error(err);
res.status(500).send('Internal Server Error');
} else {
res.json(files);
}
});
});
app.get(/\/file\/(.+)/, (req, res) => {
const filePath = path.join('E:', 'wangzhan', 'ziliao', req.params[0]);
const filename = path.basename(filePath)
res.download(filePath, filename, (err) => {
if (err) {
console.error(err);
res.status(500).send('Internal Server Error');
}
});
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});