目 录
1 总体概述 3
2 系统需求分析 3
3 系统设计 3
4 系统实现 3
5 总结 3
参考文献 3
附录 3
1 总体概述
本设计主要通过HTML、CSS、JavaScript网页开发技术，会话及其会话技术，过滤器技术，Java语言以及连接mysql数据库来实现一个具有登录注册功能，且登录页面使用验证码技术来实现用户验证、未登录用户仅能访问主页的餐厅点餐系统。
主要的思路是与mysql数据库建表连接来管理用户名密码信息，判断登录时用户名密码是否正确，注册时向数据库中的表新增信息；通过会话及其会话技术来管理用户登录的状态、验证码用户验证、顾客的点餐订单加入购物车；通过过滤器技术来管理未登录的用户的访问权限。
相关理论介绍：
会话及其会话技术：在Web开发中，服务器跟踪用户信息的技术称为会话技术。包含cookie和session对象。在本系统设计中，主要运用的是session对象。Session对象是一种将会话数据保存到服务器端的技术。Cookie技术可以将用户的信息保存在各自的浏览器中，并且可以在多次请求下实现数据的共享。但是如果传递的信息比较多，使用Cookie技术显然会增大服务器端程序处理的难道，这时可以使用Session技术。
过滤器技术(Filter)：过滤器实际上就是对web资源进行拦截，做一些处理后再交给下一个过滤器或servlet处理。在doFilter()中判断用户是否登录系统，只有合法登录后才能访问系统。首先分析session中是否有用户的信息，有则放行，没有，判断是否是登录请求或者是登录提交请求，是则放行，不是则跳转回主页。
2 系统需求分析
由设计要求及对餐厅点餐系统的需求分析可知，网站首先拥有一个首页，该首页所有用户均可访问，首页拥有登录、注册、点餐、购物车等多个子页，但游客用户仅能访问登录、注册及主页，无法访问点餐页面。想要点餐时需要先登录，没有用户名密码的用户可以进行注册。进入点餐页面后，下单之后点击我的订单可查看购物车内的已点的菜单。
<%--
Created by IntelliJ IDEA.
User: 233cm
Date: 2020/12/2
Time: 21:18
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Home</title>
<!---Font Icon-->
<link href="font/flaticon.css" rel="stylesheet">
<!-- / -->
<!-- Plugin CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/pogoslider.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<!--=============
Preloader Part HTML Start
===================-->
<div id="preloader">
<div id="loading-center">
<img src="images/loader.gif" alt="">
</div>
</div>
<!--=============
Preloader Part HTML End
===================-->
<!--===================
Navbar Part HTML Start
=====================-->
<header>
<nav id="nav-part" class="navbar header-nav custom_nav sticky-top navbar-expand-md">
<div class="container p-0">
<div class="heading">
<span><a class="navbar-brand" href="index.jsp" style="color: red;">cmの小餐馆</a></span>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#tg-homeslider">主页<span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#about">关于我们</a></li>
<li class="nav-item"><a class="nav-link" href="#menu">菜单</a></li>
<li class="nav-item"><a class="nav-link" href="shopping.jsp">去订购</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">更多信息</a></li>
<li class="dropdown nav-item"><a href="" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">登录&注册</a>
<ul class="dropdown-menu maindrop_menu">
<li><a href="user_login.jsp">登录</a></li>
<li><a href="user_register.jsp">注册</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!--===================
Navbar Part HTML End
=====================-->
<!-- =============================
Start: Header Slider
============================= -->
<div class="tg-sliderholder">
<div id="tg-homeslider" class="tg-homeslider tg-haslayout">
<div class="pogoSlider-slide" data-transition="expandReveal" data-duration="600" style="background:url(images/banner-image-2.jpg) no-repeat scroll center center;">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="tg-slidercontent t-center" data-transition="blocksReveal">
<h6 class="pogoSlider-slide-element" data-in="slideDown" data-out="flipX" data-duration="700">这 里 有</h6>
<h2 class="pogoSlider-slide-element" data-in="expand" data-out="flipX" data-duration="1500">美味的 <br>烤肉</h2>
</div>
</div>
</div>
</div>
</div>
<div class="pogoSlider-slide" data-transition="expandReveal" data-duration="1000" style="background:url(images/banner-image-1.jpg) no-repeat scroll center center;">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="tg-slidercontent t-right">
<h6 class="pogoSlider-slide-element" data-in="slideDown" data-out="flipX" data-duration="700">这 里 有</h6>
<h2 class="pogoSlider-slide-element" data-in="expand" data-out="flipX" data-duration="1500">可口的<br>食物</h2>
</div>
</div>
</div>
</div>
</div>
<div class="pogoSlider-slide" data-transition="expandReveal" data-duration="1000" style="background:url(images/banner-image-3.jpg) no-repeat scroll center center;">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="tg-slidercontent t-center">
<h6 class="pogoSlider-slide-element" data-in="slideDown" data-out="flipX" data-duration="700">还有</h6>
<h2 class="pogoSlider-slide-element" data-in="expand" data-out="flipX" data-duration="1500">舒适的<br>环境</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="tg-btnscrol tg-btnsectionscroll" href="javascript:void(0);"><i class="icon-chevron-down"></i></a>
</div>
<!-- =============================
End: Header Slider
============================= -->
<!--==================
About Part HTML Start
===================-->
<section id="about" class="about section">
<div class="container">
<div class="row">
<div class="col-lg-6 about-text">
<div class="heading">
<span>our story</span>
<p>关于我们</p>
</div>
<div class="about-inner">
<p>cmの小餐馆是一家由海怀A624赞助，陈铭先生冠名的五星级餐馆，于2030年11月11日正式开业，开业之初受到了外界的广泛关注，顾客回头率高达80%，编不下去了，凑凑字数叭。</p>
<p></p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="about-photo">
<img src="images/about-1.jpg" alt="About Person" class="img-fluid person">
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="row">
<div class="col-lg-12 about-side-1">
<img src="images/about-5.jpg" alt="About food" class="img-fluid person">
</div>
</div>
<div class="row">
<div class="col-lg-12">
<img src="images/about-4.jpg" alt="About food" class="img-fluid person">
</div>
</div>
</div>
</div>
</div>
</section>
<!--==================
About Part HTML End
===============-->
<!--=====================
Menu Part HTML Start
=======================-->
<section id="menu" class="menu section">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="heading-center-2">
<span>Our Menu</span>
<p>下面是好吃的~</p>
</div>
</div>
</div>
<div class="row justify-content-center text-center pro-row">
<div class="col-lg-9 m-auto col-12 text-center button-group">
<ul class="nav nav-pills" id="pills-tab1" role="tablist">
<li class="nav-item">
<a class="nav-menu active" id="pills-all-tab1" data-toggle="pill" href="#pills-all1" role="tab" aria-controls="pills-all1" aria-selected="true">早餐</a>
</li>
<li class="nav-item">
<a class="nav-menu" id="pills-illustrations-tab1" data-toggle="pill" href="#pills-busi-card1" role="tab" aria-selected="false">午餐</a>
</li>
<li class="nav-item">
<a class="nav-menu midl-btn" id="pills-logo-tab1" data-toggle="pill" href="#pills-logo1" role="tab" aria-selected="false">晚餐</a>
</li>
<li class="nav-item">
<a class="nav-menu" id="pills-web-tem-tab1" data-toggle="pill" href="#pills-web-tem1" role="tab" aria-selected="false">甜品</a>
</li>
<li class="nav-item">
<a class="nav-menu last-btn" id="pills-flyer-tab1" data-toggle="pill" href="#pills-flyer1" role="tab" aria-selected="false">饮料</a>
</li>
</ul>
</div>
</div>
<div class="row mx-0">
<div class="col-lg-12 px-0">
<div class="tab-content" id="pills-tabContent1">
<div class="tab-pane fade show active" id="pills-all1" role="tabpanel" aria-labelledby="pills-all-tab1">
<div class="row work-cont-1">
<div class="col-lg-6">
<div class="work-image">
<img src="images/menu1.jpg" class="img-fluid" alt="breakfast">
<h4>Breakfast</h4>
</div>
</div>
<div class="col-lg-6">
<div class="work-cont">
<ul>
<li>
<h3>法式吐司</h3><span> .................................................... </span><em>￥15</em>
<p>现做的&可配胡桃果仁，奶油酥皮~</p>
</li>
<li>
<h3>三明治</h3> <span> .................................................... </span><em>￥10</em>
<p>现做的&可配胡桃果仁，奶油酥皮~</p>
</li>
<li>
<h3>紫米面包</h3> <span> .................................................... </span><em>￥15</em>
<p>现做的~</p>
</li>
<li>
<h3>豆浆</h3> <span> .................................................... </span><em>￥5</em>
<p>现热的~</p>
</li>
<li>
<h3>巧克力海螺面包</h3> <span> .................................................... </span><em>￥18</em>
<p>现做的~</p>
</li>
</ul>
</div>
<div class="g-btn">
<div class="sim-button button26 btn-right pogoSlider-slide-element" data-in="slideUp" data-out="flipX" data-duration="700">
<a href="shopping.jsp"><span>去订购</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-logo1" role="tabpanel" aria-labelledby="pills-logo-tab1">
<div class="row work-cont-1">
<div class="col-lg-6">
<div class="work-image">
<img src="images/menu3.jpg" class="img-fluid" alt="breakfast">
<h4>Dinner</h4>
</div>
</div>
<div class="col-lg-6">
<div class="work-cont">
<ul>
<li>
<h3>韩式石锅拌饭</h3><span> .................................................... </span><em>￥10</em>
<p>好吃好吃</p>
</li>
<li>
<h3>苦瓜炒蛋</h3><span> .................................................... </span><em>￥10</em>
<p>好吃好吃</p>
</li>
<li>
<h3>小炒肉</h3><span> .................................................... </span><em>￥10</em>
<p>好吃好吃</p>
</li>
<li>
<h3>酸菜鱼</h3><span> .................................................... </span><em>￥10</em>
<p>好吃好吃</p>
</li>
<li>
<h3>鸡扒饭</h3><span> .................................................... </span><em>￥10</em>
<p>好吃好吃</p>
</li>
</ul>
</div>
<div class="g-btn">
<div class="sim-button button26 btn-right pogoSlider-slide-element" data-in="slideUp" data-out="flipX" data-duration="700">
<a href="shopping.jsp"><span>去订购</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-busi-card1" role="tabpanel" aria-labelledby="pills-illustrations-tab1">
<div class="row">
<div class="col-lg-6">
<div class="work-cont">
<ul>
<li>
<h3>韩式拌饭</h3><span> .................................................... </span><em>￥10</em>
<p>好吃好吃</p>
</li>
<li>
<h3>苦瓜炒蛋</h3><span> .................................................... </span><em>￥10</em>
<p>好吃好吃</p>
</li>
<li>
<h3>小炒肉</h3><span> .................................................... </span><em>￥10</em>
<p>好吃好吃</p>
</li>
<li>
<h3>酸菜鱼</h3><span> .................................................... </span><em>￥10</em>
<p>好吃好吃</p>
</li>
<li>
<h3>鸡扒饭</h3><span> .................................................... </span><em>￥10</em>
<p>好吃好吃</p>
</li>
</ul>
</div>
<div class="g-btn">
<div class="sim-button button26 btn-right pogoSlider-slide-element" data-in="slideUp" data-out="flipX" data-duration="700">
<a href="shopping.jsp"><span>去订购</span></a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="work-image">
<img src="images/menu2.png" class="img-fluid" alt="breakfast">
<h4>Lunch</h4>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-web-tem1" role="tabpanel" aria-labelledby="pills-web-tem-tab1">
<div class="row">
<div class="col-lg-6">
<div class="work-cont">
<ul>
<li>
<h3>焦糖布丁</h3><span> .................................................... </span><em>￥15</em>
<p>现做的&可配胡桃果仁，奶油酥皮~</p>
</li>
<li>
<h3>冰激凌华夫饼</h3><span> .................................................... </span><em>￥15</em>
<p>现做的&可配胡桃果仁，奶油酥皮~</p>
</li>
<li>
<h3>布丁</h3><span> .................................................... </span><em>￥15</em>
<p>现做的&可配胡桃果仁，奶油酥皮~</p>
</li>
<li>
<h3>马德拉蛋糕</h3><span> .................................................... </span><em>￥15</em>
<p>现做的&可配胡桃果仁，奶油酥皮~</p>
</li>
<li>
<h3>瑞士卷</h3><span> .................................................... </span><em>￥15</em>
<p>现做的&可配胡桃果仁，奶油酥皮~</p>
</li>
</ul>
</div>
<div class="g-btn">
<div class="sim-button button26 btn-right pogoSlider-slide-element" data-in="slideUp" data-out="flipX" data-duration="700">
<a href="shopping.jsp"><span>去订购</span></a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="work-image">
<img src="images/ice-cream.jpg" class="img-fluid" alt="breakfast">
<h4>Desert</h4>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-flyer1" role="tabpanel" aria-labelledby="pills-flyer-tab1">
<div class="row work-cont-1">
<div class="col-lg-6">
<div class="work-image">
<img src="images/juice.png" class="img-fluid" alt="juice">
<h4>Drink</h4>
</div>
</div>
<div class="col-lg-6">
<div class="work-cont">
<ul>
<li>
<h3>宇治抹茶</h3><span> .................................................... </span><em>￥10</em>
<p>现做的~</p>
</li>
<li>
<h3>烧仙草</h3><span> .................................................... </span><em>￥10</em>
<p>现做的~</p>
</li>
<li>
<h3>日照红茶</h3><span> .................................................... </span><em>￥10</em>
<p>现做的~</p>
</li>
<li>
<h3>红豆奶茶</h3><span> .................................................... </span><em>￥10</em>
<p>现做的~</p>
</li>
<li>
<h3>热可可</h3><span> .................................................... </span><em>￥10</em>
<p>现做的~</p>
</li>
</ul>
</div>
<div class="g-btn">
<div class="sim-button button26 btn-right pogoSlider-slide-element" data-in="slideUp" data-out="flipX" data-duration="700">
<a href="#"><span>去订购</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==================
Menu Part HTML End
====================-->
<!--========================
Chef Part HTML Start
==========================-->
<!--========================
Chef Part HTML End
=========================-->
<!--========================
gallery Part HTML Start
==========================-->
<section id="gallery" class="gallery section">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<div class="heading-center-4">
<span>Our gallery</span>
<p>这里看菜式呀</p>
</div>
</div>
</div>
<div class="row gallery-details">
<div class="col-lg-3 col-md-6">
<div class="gallery-photo">
<img src="images/bread.jpg" class="img-fluid person" alt="About Person">
<a href="images/bread.jpg" data-fancybox>
<div class="overlay">
<div class="overlay_shape"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="row">
<div class="col-lg-12 about-side-2">
<div class="gallery-photo">
<img src="images/noodles.jpg" class="img-fluid person" alt="About Person">
<a href="images/noodles.jpg" data-fancybox>
<div class="overlay">
<div class="overlay_shape"></div>
</div>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="gallery-photo">
<img src="images/sharma.jpg" class="img-fluid person" alt="About Person">
<a href="images/sharma.jpg" data-fancybox>
<div class="overlay">
<div class="overlay_shape"></div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="gallery-photo">
<img src="images/burger.jpg" class="img-fluid person" alt="About Person">
<a href="images/burger.jpg" data-fancybox>
<div class="overlay">
<div class="overlay_shape"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="row">
<div class="col-lg-12 about-side-2">
<div class="gallery-photo">
<img src="images/cream.jpg" class="img-fluid person" alt="About Person">
<a href="images/cream.jpg" data-fancybox>
<div class="overlay">
<div class="overlay_shape"></div>
</div>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="gallery-photo">
<img src="images/sub-sandwitch.jpg" class="img-fluid person" alt="About Person">
<a href="images/sub-sandwitch.jpg" data-fancybox>
<div class="overlay">
<div class="overlay_shape"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--========================
gallery Part HTML End
=========================-->
<!--====================
Contact Part HTML Start
======================-->
<section id="contact" class="contact section">
<div class="container">
<div class="row">
<div class="col-lg-12 contact-logo">
cm
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="contact-address">
<h5>Address</h5>
<p>
A624宿舍
<br>
电话: 18898564523
</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="contact-address">
<h5>Opening Hours</h5>
<p>
周一到周六<br>
10.00am -11.00pm<br>
12.00pm-11.00pm(周六)
</p>
</div>
</div>
<div class="col-lg-2 col-md-6">
<div class="contact-links">
<h5>Important Links</h5>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="shopping.jsp">去订购</a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!--===========================
Contact Part HTML End
============================-->
<!-- jQuery -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-migrate-3.0.0.min.js"></script>
<!-- Plugins -->
<script src="js/bootstrap.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/pogoslider.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/counter.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
