1 总体概述

本设计主要通过HTML、CSS、JavaScript网页开发技术，会话及其会话技术，过滤器技术，Java语言以及连接mysql数据库来实现一个具有登录注册功能，且登录页面使用验证码技术来实现用户验证、未登录用户仅能访问主页的餐厅点餐系统。

主要的思路是与mysql数据库建表连接来管理用户名密码信息，判断登录时用户名密码是否正确，注册时向数据库中的表新增信息；通过会话及其会话技术来管理用户登录的状态、验证码用户验证、顾客的点餐订单加入购物车；通过过滤器技术来管理未登录的用户的访问权限。

相关理论介绍

会话及其会话技术：在Web开发中，服务器跟踪用户信息的技术称为会话技术。包含cookie和session对象。在本系统设计中，主要运用的是session对象。Session对象是一种将会话数据保存到服务器端的技术。Cookie技术可以将用户的信息保存在各自的浏览器中，并且可以在多次请求下实现数据的共享。但是如果传递的信息比较多，使用Cookie技术显然会增大服务器端程序处理的难道，这时可以使用Session技术。

过滤器技术(Filter)：过滤器实际上就是对web资源进行拦截，做一些处理后再交给下一个过滤器或servlet处理。在doFilter()中判断用户是否登录系统，只有合法登录后才能访问系统。首先分析session中是否有用户的信息，有则放行，没有，判断是否是登录请求或者是登录提交请求，是则放行，不是则跳转回主页。

2 系统需求分析

由设计要求及对餐厅点餐系统的需求分析可知，网站首先拥有一个首页，该首页所有用户均可访问，首页拥有登录、注册、点餐、购物车等多个子页，但游客用户仅能访问登录、注册及主页，无法访问点餐页面。想要点餐时需要先登录，没有用户名密码的用户可以进行注册。进入点餐页面后，下单之后点击我的订单可查看购物车内的已点的菜单。

大概设计如下：

餐厅点餐系统功能主要包括浏览餐厅介绍信息功能、登录和注册功能、顾客点餐功能和加入购物车功能。

下面是各页面层次结构和功能的大致介绍：

主页的层次结构

登录页面的层次结构

注册页面的层次结构

点餐页面的层次结构

购物车页面的层次结构

3 系统设计

3.1 主页详细设计

顶部是菜单栏，超链接到本页面下的指定部分。用JS实现下拉列表框。点击“去订购”跳转到点餐页面，点击登录注册跳转至相应页面。

然后是用JS实现的轮播图。轮播图上的文字“这里有美味的烤肉”具有动画效果。

接着是对本餐厅的详细描述。

然后是菜式展示。这里运用了JS里的代理点击事件，用delegate代理点击事件。

接着是餐品图片展示。图片使用绝对定位。

底部页面。

3.2 登录页面详细设计

该页面功能需要用到session技术，将用户输入的信息与mysql数据库里的表进行比对，如果正确，存入到”user”属性user类型的session中。同时验证码也是存入session对象中，验证码通过用随机函数生成。

3.3 注册页面详细设计

该页面同样需要用到上述方法，与数据库建立连接后，若用户输入信息无误，则将该信息insert into user表中，点击注册且会回到登录界面。该注册页面只有验证码运用到了session技术。同时登录页面和注册页面的背景动态效果都是通过CSS样式实现的，未用到JS。

3.4 点餐页面详细设计

3.5 购物车页面详细设计

3.6 Java类中主要功能的实现

3.6.1 与mysql数据库进行连接

3.6.2 实体类

3.6.3 获取用户输入的信息

3.6.4 将用户登录信息存入session

3.6.5 验证码随机生成

3.6.6 过滤器实现屏蔽子页

4 系统实现

系统主要功能演示：

未登录的游客用户访问子页，被屏蔽，重定向至登录界面。

系统验证码功能：输入正确的验证码登录，错误的验证码网页提示输入错误：

系统登录功能：登录后可以访问子页面(点餐页面)：

系统注册功能：输入用户名密码确认密码和验证码，用户进行注册，查看数据库中的表，发现新增一项。

详细步骤演示：启动mysql数据库

运行IDEA

首先进入主页，会有一个看似动态效果，其实是一张 gif图片。

等gif图片加载完后

点击轮播图或者右边的箭头可以切换至下一张

点击上面的导航栏，能够跳转至指定内容，如点击“菜单”，跳转至如下演示的画面

点击“午餐”或者“晚餐”等等，内容会切换

下面是图片展示和底部

点击去订购，发现是游客用户，还没有登录，不能直接跳转至点餐页面，而是跳转到了登录界面

点击刷新，发现验证码会变，输入用户名和密码，进入点餐页面

如果点击注册，进入注册页面

输入信息后，点击注册，此时查看mysql数据库中的user表，发现表中多了一行刚刚注册的信息，然后跳转到登录页面

进入点餐页面后，选好商品点击下单

然后点击购物车，发现购物车出现刚刚点击的商品

继续下单

发现购物车里的商品增加了。

5 总结

该餐厅点餐系统结合了HTML、CSS、JavaScript网页开发技术，会话及其会话技术，过滤器技术，Java语言以及连接mysql数据库成功实现了一个具有登录注册功能，且登录页面使用验证码技术来实现用户验证、未登录用户仅能访问主页的餐厅点餐系统。

通过这次系统设计，我进一步学会了如何更加合理地去进行页面布局设计，页面各部分样式设计。更深层次地理解了会话及其会话技术，学会了过滤器技术，知道了连接mysql数据库的方法。

在设计过程中在登录注册页面出现了困难，无法成功登录，但是可以跳转至shopping.jsp页面。检查发现是form表单没有标出详细地址。

在实现过滤器屏蔽子页时也出现了理解错误，后来浏览资料后才了解Filter中的doFilter的方法中的ServletRequest传的就是HttpServletRequest对象，通过HttpServletRequest req = (HttpServletRequest) request;语句强转，之后就可以使用req.getSession().getAttribute(“”)方法来获取session对象里的值。