今天当一回实施工程师，由于客户是局域网，要出差到客户现场。到了现场客户提出一个要求：把视觉检测电脑中的照片在另一台电脑上展示（两台电脑在同一局域网下）。现场总有一些稀奇古怪的需求。虽然没整过这样的需求。但也要装的很懂，没的问题可以给解决，谁叫人家是甲方爸爸呢。正式实施时才感觉有点困难，这文件夹里的图片是实时更新的，而且电脑还得搭web服务，html 界面还得实时更新。啊，一头雾水。不慌，遇事不决先问大模型，哈哈哈。下面是我实施的步骤。
一、准备工作
- 在客户服务器上安装Python和Flask框架。
- 安装flask-cors库。
- 创建一个名为app.py的文件，编写HTTP服务代码。
- 创建一个HTML文件，编写展示图片的前端代码。
二、实施步骤
- 在app.py中，创建一个Flask应用，并添加CORS支持。
- 编写两个路由：/list_images和/serve_image
- 在/list_images路由中，读取客户服务器上的图片文件夹，并按创建时间升序排列。在/list_images路由中，仅返回最新的100个图片。
- 在HTML文件中，创建一个gallery元素，用于展示图片。
- 编写JavaScript代码，定时调用/list_images路由，获取最新图片并展示在gallery元素中。
四、优化与注意事项
- 安全性：确保客户服务器的防火墙允许您的IP地址访问指定的端口。此外，您还可以考虑使用HTTPS来加密传输的数据。
- 错误处理：在app.py和index.html文件中添加更多的错误处理逻辑，以便在出现问题时提供更详细的错误信息。
- 性能优化：如果图片文件夹中的图片数量非常大，加载所有图片可能会导致性能问题。您可以考虑使用分页功能，每次只加载一部分图片。
- 代码组织：将app.py中的路由和函数分离到单独的模块中，以提高代码的可读性和可维护性。
- 跨域资源共享(CORS)：在正式环境中，您可能需要根据实际需求调整CORS设置。例如，您可以允许特定的源访问您的API，而不是允许所有源访问。
- 日志记录：在正式环境中，您可能需要记录更详细的日志，以便在出现问题时进行调试。您可以使用Python的logging模块来记录日志。
- 部署：在正式环境中，您可能需要使用更稳定的部署方法，例如使用WSGI服务器(如Gunicorn或uWSGI)和反向代理服务器(如Nginx或Apache)。
- 版本控制：使用版本控制系统(如Git)来管理您的代码，以便跟踪更改和协作。
- 测试：在部署到正式环境之前，确保对您的代码进行充分的测试，以确保其功能和性能符合预期。
- 监控和维护：在正式环境中，您需要监控您的应用程序以确保其正常运行。您可以使用日志分析工具、性能监控工具和错误跟踪工具来实现这一点。
下面是实施的python和html代码：
-
python：
from flask import Flask, send_from_directory, jsonify from flask_cors import CORS import os app = Flask(__name__) CORS(app) # 启用CORS @app.route('/images/<path:path>') def serve_image(path): return send_from_directory('E:\\Develop\\5线包装线\\supOS', path) @app.route('/list_images', methods=['GET', 'POST']) def list_images(): images_dir = 'E:\\Develop\\5线包装线\\supOS' images = [f for f in os.listdir(images_dir) if os.path.isfile(os.path.join(images_dir, f))] # 按照文件创建时间升序排列 images.sort(key=lambda x: os.path.getctime(os.path.join(images_dir, x))) # 仅返回最新的100个图片 latest_images = images[:100] # print("发生错误:", images) return jsonify({'images': latest_images}) @app.route('/') def home(): return '欢迎来到图片展示页面!' if __name__ == '__main__': app.run(host='192.168.10.11', port=8080) app.debug = True -
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>客户图片实时展示</title>
<style>
#gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 20px;
}
img {
max-width: 30%;
height: auto;
}
</style>
</head>
<body>
<h2>最新图片展示</h2>
<div id="gallery"></div>
<script>
function loadImages() {
let url = 'http://192.168.10.11:8080/list_images';
let requestMethod = 'GET';
fetch(url, { method: requestMethod })
.then(response => {
if (!response.ok) throw new Error('Network response was not ok');
return response.json();
})
.then(data => {
let gallery = document.getElementById('gallery');
gallery.innerHTML = ''; // 清空现有图片，准备加载新图片
let imagesToShow = data.images.slice(-6);
imagesToShow.forEach(image => {
if (image.endsWith('.jpg') || image.endsWith('.png')) {
// console.log(imagesToShow)
let imgElement = document.createElement('img');
imgElement.src = `http://192.168.10.11:8080/images/${image}`; // 动态构建图片URL
imgElement.alt = image; // 设置图片的alt属性
imgElement.loading = 'lazy'; // 设置图片的loading属性为lazy
gallery.appendChild(imgElement);
}
});
})
.catch(error => {
console.error('Error loading images:', error);
// 可以在这里添加错误处理逻辑，比如显示错误信息给用户
alert('加载图片时发生错误，请稍后重试。');
});
}
// 页面加载时立即加载一次图片
window.onload = function() {
loadImages();
// 每隔5秒钟检查一次新图片
setInterval(loadImages, 5000);
};
</script>
</body>
</html>- 下面是测试运行的图片，还不错哦！
请注意，这个示例仅用于演示目的。在实际项目中，您可能需要考虑更多的错误处理和安全性。同时，确保客户服务器的防火墙允许您的IP地址访问指定的端口。如果你也遇到相似问题，不知如何实施可以私信我哦。
