admin/app-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
张鑫
2025-11-01 14:51:19 +08:00
parent be7bc940a8
commit b2d7ccd8fd
4 changed files with 154 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
Dockerfile Normal file
View File

@@ -0,0 +1,16 @@
# 使用官方Nginx镜像作为基础镜像
FROM nginx:alpine
# 设置工作目录
WORKDIR /usr/share/nginx/html
# 复制应用文件到容器中
COPY index.html .
COPY styles.css .
COPY app.js .
# 暴露80端口
EXPOSE 80
# 启动Nginx
CMD ["nginx", "-g", "daemon off;"]

38
app.js Normal file
View File

@@ -0,0 +1,38 @@
document.addEventListener('DOMContentLoaded', function() {
const imageInput = document.getElementById('imageInput');
const previewImage = document.getElementById('previewImage');
const recognizeBtn = document.getElementById('recognizeBtn');
const resultText = document.getElementById('resultText');
// 图片选择事件
imageInput.addEventListener('change', function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
previewImage.src = e.target.result;
}
reader.readAsDataURL(file);
}
});
// 识别按钮点击事件
recognizeBtn.addEventListener('click', function() {
if (!imageInput.files[0]) {
alert('请先选择一张图片');
return;
}
// 这里可以添加实际的识别逻辑
// 目前使用模拟识别结果
const fakeResults = [
'这是一只猫',
'这是一只狗',
'这是一朵花',
'这是一辆车'
];
const randomResult = fakeResults[Math.floor(Math.random() * fakeResults.length)];
resultText.textContent = randomResult;
});
});

28
index.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片识别应用</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>图片识别应用</h1>
<div class="upload-section">
<input type="file" id="imageInput" accept="image/*">
<button id="recognizeBtn">识别图片</button>
</div>
<div class="result-section">
<div class="image-preview">
<img id="previewImage" src="#" alt="图片预览">
</div>
<div class="recognition-result">
<h2>识别结果：</h2>
<p id="resultText">请选择图片进行识别</p>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

72
styles.css Normal file
View File

@@ -0,0 +1,72 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
}
.upload-section {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
#imageInput {
flex: 1;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
#recognizeBtn {
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#recognizeBtn:hover {
background-color: #0056b3;
}
.result-section {
display: flex;
gap: 20px;
}
.image-preview {
flex: 1;
}
#previewImage {
max-width: 100%;
height: auto;
border-radius: 4px;
}
.recognition-result {
flex: 1;
}
#resultText {
background-color: #f8f9fa;
padding: 10px;
border-radius: 4px;
min-height: 100px;
}