编写一网站,可上传个人信息(头像,姓名学号) ,并在网页中显示, 可进行基于文件的简单的匹配查询。 思路:每上传一个用户信息生成一个新的html文件
时间: 2024-03-30 08:37:31 浏览: 10
好的,让我来为你解答这个问题。
针对你的需求,我们可以按以下步骤来实现一个可上传个人信息并进行匹配查询的网站:
1. 创建一个新的文件夹,比如 "personal-info",并在其中创建一个 HTML 文件,比如 "index.html",一个 CSS 文件,比如 "style.css",和一个 JavaScript 文件,比如 "main.js"。
2. 在 "index.html" 文件中添加一个表单,包含上传头像、姓名、学号等个人信息的输入框和一个提交按钮。并在表单下方添加一个用于显示所有已上传个人信息的列表容器。比如:
```html
<form id="info-form">
<input type="file" name="avatar" id="avatar-input">
<input type="text" name="name" placeholder="姓名">
<input type="text" name="student-id" placeholder="学号">
<button type="submit">提交</button>
</form>
<div id="info-list"></div>
```
3. 在 "main.js" 文件中编写一个函数,用于处理表单的提交事件。在函数中,获取表单中的所有输入值,将它们保存为一个对象,然后将对象转换为 JSON 字符串,并将其作为内容创建一个新的 HTML 文件,并将其保存到 "personal-info" 文件夹中。最后,更新列表容器,将新的个人信息添加到列表中。比如:
```javascript
const infoForm = document.getElementById('info-form');
const infoList = document.getElementById('info-list');
infoForm.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(infoForm);
const info = Object.fromEntries(formData.entries());
const infoJSON = JSON.stringify(info);
const filename = `${info.name}_${info['student-id']}.html`;
const content = `<html>
<head>
<title>${info.name}</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>${info.name}</h1>
<img src="${formData.get('avatar')}" alt="${info.name}">
<p>学号:${info['student-id']}</p>
</body>
</html>`;
const file = new File([content], filename, { type: 'text/html' });
const fileURL = URL.createObjectURL(file);
const listItem = document.createElement('a');
listItem.setAttribute('href', fileURL);
listItem.setAttribute('target', '_blank');
listItem.innerText = info.name;
infoList.appendChild(listItem);
fetch(filename, { method: 'PUT', body: file })
.then(response => console.log(response))
.catch(error => console.error(error));
});
```
4. 在 "index.html" 和 "style.css" 文件中编写样式,美化页面和列表容器。
5. 在 "main.js" 文件中添加一个搜索框和一个按钮,用于进行基于文件的简单匹配查询。在按钮的点击事件中,获取搜索框中的输入值,然后遍历列表容器中的所有链接,匹配链接的文本内容是否包含搜索值。如果包含,则将链接的样式设置为高亮。比如:
```javascript
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
searchButton.addEventListener('click', () => {
const searchValue = searchInput.value.toLowerCase();
const listItems = infoList.querySelectorAll('a');
listItems.forEach((listItem) => {
const listItemText = listItem.innerText.toLowerCase();
if (listItemText.includes(searchValue)) {
listItem.classList.add('highlight');
} else {
listItem.classList.remove('highlight');
}
});
});
```
6. 最后,在终端中进入 "personal-info" 文件夹,并运行 "python -m http.server" 命令,启动一个简单的 HTTP 服务器。然后在浏览器中打开 "index.html" 文件,就可以看到上传表单和个人信息列表。在搜索框中输入关键词并点击搜索按钮,就可以进行简单的匹配查询。
希望这些步骤能够帮助你实现所需的功能。如果还有其他问题,请随时问我。