本人纯小白，在AI的帮助下完成制作了这个堪用的《餐厅食谱菜单公示系统》，起因是因为单位内部食堂每日吃食大家只能到饭堂才能看到今天吃什么，而办公楼跟食堂也有一定距离，每次不吃吧饿~吃吧跑过去又不是自己喜欢吃的。然后就给饭堂的管理员做了这个。为的就是让大家能够能够知道每天吃什么，甚至未来吃什么，回顾昨天吃什么！！！妥妥的吃货~~~
因为本人并不专业，系统可能还是存在很多随着时间的增加出现各种未知问题，比如数据文件的大小等。
数据库的问题，本来想做成独立数据库文件，每日一个以日期为名数据库单文件，但是能力有限没成功。
想要达成未达成的，添加订餐打包预订功能，对每日想吃的提前预订打包，饭堂的工作人员看到后提前打包，这样人员可以到饭堂领包就走，节约排队时间。
总之，第一次独立完成。发出来共享给大家，也是请有能力的同志们能够一起完善强大它。还有就是接受大家的各种建议以及提出这个系统存在的隐藏问题，我边学边改。
<!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 href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/all.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fas fa-utensils me-2"></i>
单位食堂菜单公示
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#menu">今日菜单</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reviews">评价反馈</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#suggestions">建议箱</a>
</li>
<li class="nav-item">
<a class="nav-link" href="admin/index.html" target="_blank">
<i class="fas fa-cog"></i> 管理后台
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 主要内容区域 -->
<div class="container mt-4">
<!-- 日期选择器 -->
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">
<i class="fas fa-calendar-alt me-2"></i>
选择查看日期
</h5>
<div class="row align-items-center">
<div class="col-md-6">
<input type="date" class="form-control" id="datePicker" value="">
</div>
<div class="col-md-6">
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-primary" id="prevDay">
<i class="fas fa-chevron-left"></i> 前一天
</button>
<button type="button" class="btn btn-outline-primary" id="today">
今天
</button>
<button type="button" class="btn btn-outline-primary" id="nextDay">
后一天 <i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 菜单展示区域 -->
<div class="row" id="menu">
<div class="col-12">
<h2 class="text-center mb-4">
<i class="fas fa-utensils me-2"></i>
今日菜单
</h2>
</div>
</div>
<!-- 早中晚三餐菜单 -->
<div class="row">
<!-- 早餐 -->
<div class="col-lg-4 mb-4">
<div class="card h-100">
<div class="card-header bg-warning text-dark">
<h5 class="card-title mb-0">
<i class="fas fa-sun me-2"></i>
早餐 (6:30-9:00)
</h5>
</div>
<div class="card-body">
<div id="breakfast-menu">
<!-- 早餐菜单将通过JavaScript动态加载 -->
</div>
</div>
</div>
</div>
<!-- 午餐 -->
<div class="col-lg-4 mb-4">
<div class="card h-100">
<div class="card-header bg-success text-white">
<h5 class="card-title mb-0">
<i class="fas fa-sun me-2"></i>
午餐 (11:30-14:00)
</h5>
</div>
<div class="card-body">
<div id="lunch-menu">
<!-- 午餐菜单将通过JavaScript动态加载 -->
</div>
</div>
</div>
</div>
<!-- 晚餐 -->
<div class="col-lg-4 mb-4">
<div class="card h-100">
<div class="card-header bg-info text-white">
<h5 class="card-title mb-0">
<i class="fas fa-moon me-2"></i>
晚餐 (17:30-20:00)
</h5>
</div>
<div class="card-body">
<div id="dinner-menu">
<!-- 晚餐菜单将通过JavaScript动态加载 -->
</div>
</div>
</div>
</div>
</div>
<!-- 评价反馈区域 -->
<div class="row mt-5" id="reviews">
<div class="col-12">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="fas fa-star me-2"></i>
菜品评价
</h5>
</div>
<div class="card-body">
<div id="reviews-list">
<!-- 评价内容将通过JavaScript动态加载 -->
</div>
<!-- 评价表单 -->
<hr class="my-4">
<h6>提交评价</h6>
<form id="review-form">
<div class="row mb-3">
<div class="col-md-6">
<label for="dish_name" class="form-label">菜品名称：</label>
<input type="text" class="form-control" name="dish_name" id="dish_name" required>
</div>
<div class="col-md-6">
<label for="rating" class="form-label">评分：</label>
<select class="form-control" name="rating" id="rating" required>
<option value="">请选择评分</option>
<option value="5">⭐⭐⭐⭐⭐ 非常好</option>
<option value="4">⭐⭐⭐⭐ 好</option>
<option value="3">⭐⭐⭐ 一般</option>
<option value="2">⭐⭐ 不好</option>
<option value="1">⭐ 很差</option>
</select>
</div>
</div>
<div class="mb-3">
<label for="content" class="form-label">评价内容：</label>
<textarea class="form-control" name="content" id="content" rows="3" placeholder="请分享您对这道菜的评价..."></textarea>
</div>
<div class="mb-3">
<label for="author" class="form-label">您的姓名：</label>
<input type="text" class="form-control" name="author" id="author" required placeholder="请输入您的姓名">
</div>
<button type="submit" class="btn btn-primary">
<i class="fas fa-star me-2"></i>提交评价
</button>
</form>
</div>
</div>
</div>
</div>
<!-- 建议收集区域 -->
<div class="row mt-4" id="suggestions">
<div class="col-12">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">
<i class="fas fa-lightbulb me-2"></i>
我想吃的菜 - 建议箱
</h5>
</div>
<div class="card-body">
<!-- 已批准的建议展示 -->
<div id="suggestions-list" class="mb-4">
<!-- 建议内容将通过JavaScript动态加载 -->
</div>
<hr class="my-4">
<h6>提交新建议</h6>
<form id="suggestion-form">
<div class="mb-3">
<label for="suggestion-text" class="form-label">您的建议：</label>
<textarea class="form-control" name="content" id="suggestion-text" rows="3"
placeholder="请告诉我们您希望食堂提供什么菜品..."></textarea>
</div>
<div class="mb-3">
<label for="suggester-name" class="form-label">您的姓名（可选）：</label>
<input type="text" class="form-control" name="author" id="suggester-name"
placeholder="请输入您的姓名">
</div>
<button type="submit" class="btn btn-primary">
<i class="fas fa-paper-plane me-2"></i>
提交建议
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- 底部信息区 -->
<footer class="bg-dark text-light mt-5 py-4">
<div class="container">
<div class="row">
<div class="col-md-6">
<h6>联系我们</h6>
<p class="mb-1">
<i class="fas fa-phone me-2"></i>
食堂热线：400-123-4567
</p>
<p class="mb-1">
<i class="fas fa-envelope me-2"></i>
邮箱：[email]canteen@company.com[/email]
</p>
</div>
<div class="col-md-6 text-md-end">
<h6>营业时间</h6>
<p class="mb-1">早餐：6:30-9:00</p>
<p class="mb-1">午餐：11:30-14:00</p>
<p class="mb-0">晚餐：17:30-20:00</p>
</div>
</div>
<hr class="my-3">
<div class="text-center">
<p class="mb-0">© 2024 单位食堂菜单公示系统. 保留所有权利.</p>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="js/bootstrap.bundle.min.js"></script>
<!-- 自定义JavaScript -->
<script src="js/main-api.js?v=2025093005"></script>
<!-- 强制日期修复脚本 -->
<script>
// 立即修复日期显示问题
window.addEventListener('load', function() {
console.log('🔧 强制日期修复脚本启动');
setTimeout(function() {
// 使用更可靠的日期计算方法，避免时区问题
const now = new Date();
const today = now.getFullYear() + '-' +
String(now.getMonth() + 1).padStart(2, '0') + '-' +
String(now.getDate()).padStart(2, '0');
console.log('📅 强制设置今日日期:', today);
console.log('🕐 原始时间对象:', now.toString());
// 更新日期选择器
const datePicker = document.getElementById('datePicker');
if (datePicker) {
datePicker.value = today;
console.log('✅ 日期选择器已更新为:', today);
}
// 强制更新菜单标题
const menuTitle = document.querySelector('#menu h2');
if (menuTitle) {
const todayObj = new Date();
const formattedDate = todayObj.toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
});
// 始终显示"今日菜单"，无论是否有菜单数据
menuTitle.innerHTML = '<i class="fas fa-utensils me-2"></i>今日菜单';
console.log('✅ 标题已更新为"今日菜单"');
// 移除任何旧的提示信息
const menuSection = document.getElementById('menu');
if (menuSection) {
const existingAlerts = menuSection.querySelectorAll('.date-fix-alert, .date-fallback-alert');
existingAlerts.forEach(alert => alert.remove());
}
}
console.log('🎉 强制日期修复完成');
}, 2000); // 延迟2秒确保页面完全加载
});
</script>
</body>
</html>链接：https://cloud.189.cn/t/NVzEra6VNJ3q（访问码：hdp7）
本文共 833 个字数,平均阅读时长 ≈ 3分钟
评论 (0)