目 录
1 绪论 1
1.1选题背景及意义 1
1.1.1选题背景 1
1.1.2选题意义 1
1.2 国内外研究现状 1
1.2.1国内研究现状 1
1.2.2国外研究现状 2
1.3 研究主要内容 3
2 系统开发环境 4
2.1 Java简介 4
2.2 MySQL数据库 4
2.3 B/S结构 5
2.4 JSP技术介绍 6
3 系统分析 7
3.1 可行性分析 7
3.1.1 技术可行性 8
3.1.2操作可行性 9
3.1.3 经济可行性 9
3.1.4 法律可行性 9
3.2系统流程分析 10
3.2.1系统开发流程 10
3.2.2 用户登录流程 11
3.2.3 系统操作流程 11
3.2.4 添加信息流程 12
3.2.5 修改信息流程 13
3.2.6 删除信息流程 14
3.3系统用例分析 14
3.3.1管理员用例图 14
3.3.2用户用例图 15
4 系统设计 16
4.1 系统原理 16
4.2 系统结构设计 17
4.3数据库设计 18
4.3.1 数据库设计原则 18
4.3.2 数据库实体 18
4.3.3 数据库表设计 19
5系统实现 23
5.1前台首页功能模块 23
5.2管理员功能模块 25
5.3食堂功能模块 30
5.4用户功能模块 33
6系统测试 36
6.1系统测试的意义 36
6.2 测试方法 37
6.3测试分析 37
结 论 39
致 谢 40
参考文献 41
1.3 研究主要内容
本文深入探讨了基于Spring Boot的校园食堂订餐系统的设计与实现过程。借助开发工具IntelliJ IDEA 2019、Tomcat服务器、JDK 1.9开发环境以及MySQL数据库，系统被精心划分为前台和后台两大部分。
在前台部分，用户可以通过简单的注册流程创建账号并登录系统。系统提供直观的菜品展示界面，用户可轻松浏览各类菜品，并利用搜索功能快速定位心仪之选。此外，购物车功能使得用户可以方便地挑选并购买多道菜品。对于忘记密码的用户，系统还提供了找回密码的便捷途径。
后台部分则侧重于管理员的操作体验。管理员通过后台管理系统，能够高效地进行菜品、员工和订单的管理。包括增删改查各类信息，实时查看员工订单状态并进行确认。这种设计不仅提升了管理效率，也确保了数据的准确性和安全性。
在模块划分上，系统明确区分了用户前台和后台管理员端。用户前台聚焦于用户的日常操作，如注册、登录、购买餐饮和提交订单等；而后台管理员端则专注于管理员的管理需求，如添加和删除菜品、处理订单、管理用户信息等。这种前后台分离的模式显著增强了系统的可维护性和可扩展性。
文章还详细阐述了系统的开发流程，从需求分析到设计、实现和测试，每一步都经过精心策划和执行。在实现阶段，采用Spring Boot框架和MySQL数据库等技术，确保了系统的稳定性和可扩展性。在测试阶段，通过严格的单元测试和集成测试，系统的质量和性能得到了充分保障。
综上所述，本文深入研究了基于Spring Boot的校园食堂订餐系统的设计与实现过程，包括前后台分离模式的设计、模块划分以及开发流程的详细描述。该系统的应用将极大地提升校园食堂的管理效率和服务质量，为学生和教职工带来更加便捷和愉悦的就餐体验。同时，它也为相关领域的研究提供了有价值的参考和借鉴，有助于推动相关技术的进一步发展。
<!-- 首页 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>首页</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<link rel="stylesheet" href="./xznstatic/css/common.css"/>
<link rel="stylesheet" href="./xznstatic/css/style.css"/>
</head>
<style type="text/css">
html, body {
height: 100%;
}
#iframe {
width: 100%;
margin-top: 00px;
padding-top: 70px;
}
#header {
height: auto;
background: #fff;
border-bottom: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#header .nav-top {
display: flex;
align-items: center;
padding: 0 20px;
font-size: 16px;
color: #2a8a15;
box-sizing: border-box;
height: 00px;
background-color: rgba(46, 78, 126, 1);
box-shadow: 0 10px 8px #fff143;
justify-content: space-between;
position: relative;
}
#header .nav-top-img {
width: 124px;
height: 40px;
padding: 0;
margin: 0;
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
box-shadow: 0 0 6px rgba(0,0,0,.3);
}
#header .nav-top-title {
line-height: 40px;
font-size: 30px;
color: rgba(255, 251, 240, 1);
padding: 0 10px;
margin: 0 10px;
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
box-shadow: 0 0 0px ;
}
#header .nav-top-tel {
line-height: 40px;
font-size: 18px;
color: rgba(240, 252, 255, 1);
padding: 0 10px;
margin: 0;
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
box-shadow: 0 0 0px ;
}
#header .navs {
display: flex;
padding: 0 20px;
align-items: center;
box-sizing: border-box;
height: 70px;
background-color: rgba(0, 85, 119, 1);
box-shadow: 0 0px 0px rgba(0,0,0,0);
justify-content: flex-start;
}
#header .navs .title {
width: auto;
line-height: 40px;
font-size: 30px;
color: rgba(255, 255, 255, 1);
padding: 10px 10px 10px;
margin: 50px;
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
box-shadow: 0 0 6px rgba(0,0,0,0);
}
#header .navs li {
display: inline-block;
width: auto;
line-height: 66px;
padding: 0 10px ;
margin: 10px ;
color: rgba(255, 255, 255, 1);
font-size: 22px;
border-radius: 4px;
border-width: 0;
border-style: solid;
border-color: rgba(6, 82, 121, 1);
background-color: rgba(0, 85, 119, 1);
box-shadow: 1px 0 3px rgba(0, 85, 119, 1);
text-align: center;
}
#header .navs li a{
color: inherit;
}
#header .navs li.current a{
color: inherit;
}
#header .navs li a:hover{
color: inherit;
}
#header .navs li.current {
color: rgba(255, 255, 255, 1);
font-size: 22px;
border-radius: 0px;
border-width: 0px;
border-style: solid;
border-color: rgba(255, 255, 255, 1);
background-color: rgba(0, 85, 119, 1);
box-shadow: 0px 3px 0px #ffffff;
}
#header .navs li:hover {
color: #fff;
font-size: 22px;
border-radius: 0px;
border-width: 0;
border-style: solid;
border-color: rgba(255, 255, 255, 1);
background-color: rgba(0, 85, 119, 1);
box-shadow: 0px 3px 0px #ffffff;
}
</style>
<body>
<!-- start 顶部导航栏 -->
<div id="header">
<div v-if='true' class="nav-top">
<img v-if='false' class="nav-top-img" src='https://www.baidu.com/img/flexible/logo/pc/result@2.png'>
<div v-if="false" class="nav-top-title">{{projectName}}</div>
<div class="nav-top-tel"></div>
</div>
<div class="navs">
<!-- <div class="logo" style="font-size: 20px;top: 32px;color: #fff;font-weight: bold;margin-left: -200px;width: 240px;" v-text="projectName"></div> -->
<div class="title" v-if="true" v-text="projectName"></div>
<div class="list">
<ul>
<li class='current'><a href="javascript:navPage('./pages/home/home.html')" class="menumain"><i v-if="false" class="layui-icon layui-icon-home"></i>首页</a></li>
<li v-for="(item,index) in indexNav" v-bind:key="index"><a :href="'javascript:navPage(\''+item.url+'\')'" class="menumain" style="cursor: pointer;"><i v-if="false" class="layui-icon" :class="iconArr[index]"></i>{{item.name}}</a></li>
<li><a href="javascript:centerPage();" class="menumain"><i v-if="false" class="layui-icon layui-icon-username"></i>个人中心</a></li>
<li><a :href="adminurl" target="_blank" class="menumain" style="cursor: pointer;"><i v-if="false" class="layui-icon layui-icon-link"></i>后台管理</a></li>
<li v-if="cartFlag"><a href="javascript:navPage('./pages/shop-cart/list.html')" class="menumain"><i v-if="false" class="layui-icon"></i>购物车</a></li>
<li v-if="chatFlag"><a href="javascript:chatTap()" class="menumain"><i v-if="false" class="layui-icon"></i>客服</a></li>
</ul>
</div>
</div>
</div>
<!-- end 顶部导航栏 -->
<iframe src="./pages/home/home.html" id="iframe" frameborder="0" scrolling="no" width="100%" οnlοad="changeFrameHeight"></iframe>
<div id="tabbar" v-if="true" class="tabbar" :style='{"padding":"30px 0","boxShadow":"0 0 6px ","margin":"30px 0 0 0","borderColor":"rgba(255, 255, 255, 0.3)","backgroundColor":"rgba(6, 82, 121, 1)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}' style="position: relative;z-index: 999;">
<img v-if='false' :style='{"boxShadow":"0 0 6px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"100%","borderWidth":"1px","width":"44px","borderStyle":"solid","height":"44px"}' style='display: block;' src='http://codegen.caihongy.cn/20201024/ed5e326ca66f403aa3197b5fbb4ec733.jpg' />
<div :style='{"padding":"0 10px","boxShadow":"0 0 0px 0","margin":"10px auto","borderColor":"rgba(6, 82, 121, 1)","backgroundColor":"rgba(6, 82, 121, 1)","color":"#fff","textAlign":"center","borderRadius":"0","borderWidth":"0","width":"100%","lineHeight":"32px","fontSize":"14px","borderStyle":"solid"}' class="company">京ICP备1041289号 </div>
<div :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"10px auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"#000","color":"#fff","textAlign":"center","borderRadius":"0","borderWidth":"0","width":"100%","lineHeight":"32px","fontSize":"14px","borderStyle":"solid"}' class="record"></div>
<div :style='{"padding":"0 10px","boxShadow":"0 0 0px ","margin":"10px auto 30px auto","borderColor":"rgba(6, 82, 121, 1)","backgroundColor":"rgba(6, 82, 121, 1)","color":"#fff","textAlign":"center","borderRadius":"0","borderWidth":"1px 0","width":"40%","lineHeight":"32px","fontSize":"14px","borderStyle":"solid"}' class="desc"></div>
</div>
<script src="./xznstatic/js/jquery-1.11.3.min.js"></script>
<script src="./layui/layui.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/config.js"></script>
<script>
var vue1 = new Vue({el: '#tabbar'})
var vue = new Vue({
el: '#header',
data: {
iconArr: ['layui-icon-gift','layui-icon-email','layui-icon-logout','layui-icon-transfer','layui-icon-slider','layui-icon-print','layui-icon-cols','layui-icon-snowflake','layui-icon-note','layui-icon-flag','layui-icon-theme','layui-icon-website','layui-icon-console','layui-icon-face-surprised','layui-icon-template-1','layui-icon-app','layui-icon-read','layui-icon-component','layui-icon-file-b','layui-icon-unlink','layui-icon-tabs','layui-icon-form','layui-icon-chat'],
indexNav: indexNav,
cartFlag: cartFlag,
adminurl: adminurl,
chatFlag: chatFlag,
projectName: projectName,
},
mounted: function() {
this.bindClickOnLi();
},
created() {
this.iconArr.sort(()=>{
return (0.5-Math.random())
})
},
methods: {
jump(url) {
jump(url)
},
bindClickOnLi() {
let list = document.getElementsByTagName("li");
for(var i = 0;i<list.length;i++){
list[i].onclick = function(){
$(this).addClass("current").siblings().removeClass("current");
}
}
}
}
});
layui.use(['element','layer'], function() {
var element = layui.element;
var layer = layui.layer;
});
function chatTap(){
var userTable = localStorage.getItem('userTable');
if (userTable) {
layui.layer.open({
type: 2,
title: '客服',
area: ['600px', '600px'],
content: './pages/chat/chat.html'
});
} else {
window.location.href = './pages/login/login.html'
}
}
// 导航栏跳转
function navPage(url) {
localStorage.setItem('iframeUrl', url);
document.getElementById('iframe').src = url;
}
// 跳转到个人中心也
function centerPage() {
var userTable = localStorage.getItem('userTable');
if (userTable) {
localStorage.setItem('iframeUrl', './pages/' + userTable + '/center.html');
document.getElementById('iframe').src = './pages/' + userTable + '/center.html';
} else {
window.location.href = './pages/login/login.html'
}
}
var iframeUrl = localStorage.getItem('iframeUrl');
document.getElementById('iframe').src = iframeUrl || './pages/home/home.html';
// var i = 0;
setInterval(function(){
// i++;
// if(i<50) changeFrameHeight();
changeFrameHeight();
},200)
function changeFrameHeight() {
var iframe = document.getElementById('iframe');
// iframe.height = 'auto';
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.body.scrollHeight;
}
}
};
// 窗口变化时候iframe自适应
// function changeFrameHeight() {
// var header = document.getElementById('header').scrollHeight;
// let isshow = true
// var tabbar = 0
// if(isshow) {
// tabbar = document.getElementById('tabbar').scrollHeight
// }
// var ifm = document.getElementById("iframe");
// ifm.height = document.documentElement.clientHeight - header - tabbar;
// ifm.width = document.documentElement.clientWidth;
// }
// reasize 事件 窗口大小变化后执行的方法
window.onresize = function() {
changeFrameHeight();
}
</script>
</body>
</html>
2539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
