演示视频：
https://www.bilibili.com/video/BV14e411C7Td/
第4章订餐前台设计与实现
网站的整个前台部分是供消费者浏览、选购的部分，一个好的网站的前台部分一定非常精美，非常有条理，因此，前台的设计主要把握3点：简明扼要、条理清晰、层次分明。下面将一一介绍我的订餐系统的前台部分的实现。
3.1 通用文件设计
这里所说的通用文件是指在开发系统页面中，经常会使用到的文件。本系统包括了下面两个通用文件，分别是系统头文件和数据库连接文件。
1．系统头文件
系统的头文件被放置在整个网页的顶部，它的主要功能是导航。通过头文件的链接，可以很方便、快捷地进入其他页面。此外，由于它的位置突出，也放置一些重要的提示信息，如目前用户的状态，是否有未处理的订单等。头文件的设计尽量以简单、实用为主。
头文件由网站的logo、用户功能区、快速导航条、用户当前状态组成。
需要说明的是：当用户还没有登录时，在状态区中将显示请“登录”状态；如果用户已经注册登录了，在状态区中将显示该用户的会员名，并显示该会员的未处理订单的数目。
在用户状态区中，主要是通过response对象的cookies集合将用户登录时的数据信息，存储到内存变量中，根据这一变量信息来识别用户是否登录。
2．数据库连接文件
为了使每个网页都能方便的访问到数据库，要先建立一个数据库连接文件。此文件由DataConnect类实现。这是一个功能性文件，主要作用是连接服务器中的数据库，凡要调用数据库的地方，现在就可以直接引用它了。
3.2 首页设计
首页模块包括3个主要的部分，采用内嵌框架技术。首页中的系统头文件，现在只要用包含文件的方式调用就可以了。网站首页如图3.1所示。
图3.1 网站首页
3.3 网站会员设计
会员是构成网站主体的一个重要组成部分，网站设置会员块的目的之一在于方便网站信息的管理，尤其是商务网站，获取了注册会员的资料信息，才能根据这些信息进行按单发货、资料统计、地区整理的工作。因此，将会员作为模块来划分是很有必要的。
所谓的会员模块，是指包含会员注册和各项操作在内的活动集合体。下面分析这流程中需要实现的个模块和实现的功能。
4.3.1会员注册与登录
首先，是会员注册和资料的登记，这两个界面比较简单。在成为会员之前要进行注册。注册时，有注册条款的阅读，确定后进入简单的信息登记。在注册信息登记中，先判断用户名是否重复。并且对输入的E-mail的格式进行检查，输入不正确时，要重新输入。同时，系统会验证前后输入的密码是否一样。此外，对必须登记的项目，要填写，否则不能注册成功。显示的注册条约是在后台已经设置好的，打开数据库就可以读取了。接受用户提交的信息后，先根据用户名打开数据库中的会员信息表，查询该用户名是否已经存在。然后通过使用JavaScript脚本语言编写的check函数对输入的其他信息进行判断，根据不同的情况出现不同的提示，直至正确。最后，将提交的信息写入数据库。值得注意的是：通过一个变量，保存用户的注册时间段，可以限制用户在短时间内多次重复注册。这些功能的实现主要由注册文件reg.java完成。如图3.3所示。
图3.3 会员注册界面
其次，是登录界面，注册成功后的用户在下次进入时，需要进行登录，其主要功能就是识别是否是注册会员。会员登录主要由两个文件组成：一个是界面设计文件，一个是检测用户名文件。前者是设计页面，后者是纯数据查询功能文件。本系统中，他们分别为类logins.java和checkuser.java文件。
单击“登录”按钮后，先通过用JavaScript编写的函数checkuu()来检测是否输入了用户名和密码，如果没有输入，便锁定相应的文本框进行输入。确定输入完成以后，将输入表单中接受的信息，提交给文件控制层，由它查询该用户是否存在于数据库中的会员资料表中，如果存在便进入相应的界面，否则出现相应的提示。登录界面是由文件user.jsp实现的。
在将表单信息提交给文件checkusers.java处理时，先由函数checkuu()检测提交的信息是否完整。同时，控制字体“正在登录……”字样的显示，也是在该文件中通过visibility属性的设置来实现的。函数checkuu()的是用JavaScript脚本语言来编写的。通过函数checkuu()检测无误后，将表单提交的信息转给文件checkusers.java来处理，该文件根据获取的信息，在数据库会员信息表中查询获得的用户名，并作相应的处理。当用户登录成功后系统会记录本次登录的信息，包括登录时间，登录次数等等，如图3.4所示。
图3.4 登录界面
3.4 会员订餐设计
在会员模块中，除可以查看和修改个人的资料信息，还可以订餐。由于商业网站的主要业务是销售餐品，因此将介绍的会员购物模块也是订餐系统的关键部分，经过设计，会员在订餐时包括以下几个模块。
购物车模块：用于保存会员选购的餐品。
生成并显示订单模块：在会员确定购买后，生成订单，并将订单信息显示在页面中，如图3.5所示。
图3.5 会员购物
4.4.1购物车设计
会员登录后，在页面的任何一个地方，单击“购买”链接，就可以将对应的餐品放入购物车，购物车的作用是暂时存放选中的餐品，并显示相应的产品信息。
将选购餐品放入购物车中，是由文件add_bk.java和文件show_cart.java共同完成的。前者是一个纯功能性文件，在会员单击“购买”链接时，获得该餐品的ID号，并根据ID号查询餐品的其他信息，一起保存到数组变量Session中。 当文件add_bk.java执行完将购物信息写入Session数组变量后，便转向由文件show_cart.java完成购买餐品信息显示页面。在该文件中，调出保存餐品信息的数组变量Session，并通过循环句While...Wend将保存信息中购买餐品数不为零的信息，显示出来，同时设置修改数量、取消、收藏餐品的链接等，如图3.6所示。
图3.6 购物车
4.4.2个人信息设计
当会员在购物车中确定好选购的餐品品种和数量后，单击“去下订单”按钮时，便进入确定购物信息和个人信息的页面，如果会员在注册时，没有登记个人详细的收货信息，便进入个人信息的录入页面；如果录入完成或注册时就已经填写了详细的收货信息，则显示全部个人信息，并提供修改信息的链接。
在会员购物车中单击“购买”按钮后，将出现会员餐品信息和个人信息确定页面，该页面用于显示会员购买餐品的全部信息，包括餐品信息、个人资料信息、送货方式、支付方式，这时还没有生成订单，用户还可以取消订单，也就是说，只要不单击“生成订单”按钮，就不会生成订单。
显示购买餐品全部信息的界面是由文件orderedit.java实现的。为了更加合理地处理页面中各项数据的修改和更新，我们将各项功能模块分别写成不同的过程，保存在文件cartfunction.java中，并将该文件包含在orderedit.java文件中，当需要实现哪项功能时，只要调用该项功能的过程就可以了。
在调用各过程，实现各功能前，还要在文件orderedit.java中，编写JavaScript函数，用于响应列表框中选项改变和单击选项事件。
3.5 生成订单
当用户单击“生成订单”按钮后，将自动生成订单并显示出来。在生成的订单中，除了显示会员收货信息和购物餐品信息外，还有会员购餐品汇款时的网络帐号。
单击“生成订单”按钮后，则将表单的信息和Session数组变量保存的信息全部写入数据库，生成订单；并通过生成订单表和多表联合查询。共同显示整个生成的订单的全部信息。
4.5.1查看生成订单
本系统中不仅在生成订单时，显示订单信息，而且还可以在“我的帐户”中查看历史订单，删除订单和修改订单的进程状态。会员在前台修改订单状态后，后台网站管理人员就可以查看到，同时，后台人员也可以修改订单的状态，并将状态信息反馈给会员，从而使整个订单的进程很透明，便于信息的交流。
当在“我的帐户”中的订单信息管理栏中单击某订单的“查看”链接后，便获取该订单的订单号，并将订单号提交给文件dingdang.java，由该文件获取订单号后查询相关信息，并将结果显示在页面中。
第5章商城后台设计与实现
此章将介绍购物网站后台管理的设计，前台功能的实现都离不开后台各项数据的录入和设置。可以说整个系统的执行是从后台开始的如：要显示餐品，需要从后台录入餐品资料等等。整个后台系统流程如图3.1所示。
图3.1 管理员程序流程图
3.1 后台登录界面和主页面界面设计
为了确保后台数据的安全性，进入后台系统时，必须先登录，才能进入。此外，按用户名登录后台系统还可以识别管理人员的权限，从而依据权限进行相应的操作。
登录成功后，管理人员便进入后台系统的主要界面，该主页界面包括两部分：一是系统操作导航菜单，二是本系统的名字。下面分别介绍他们的实现方法。
5.1.1登录界面的设计
此登录界面的设计方法很简单，和普通的登录界面一样，用于对操作人员登录时的身份验证。主要由两个文件组成。一是设计界面的文件，主要功能是接收用户输入的信息，如：姓名、密码。另外一个是实现登录功能的文件，主要作用是在数据库的相关表中查找用户名和密码信息，找到则进入后台主页，找不到则出现错误提示信息。
该界面是由JAVA文件实现的。在文件中，建立一个表单，供用户登录时输入用户名和密码，并将接受的信息转给JAVA文件来处理。
在提交信息之前，先通过函数lg_check()对输入表单的信息是否完整进行检测。函数lg_check()是用JavaScript脚本语言编写的。
在确认提交的信息完整后，表单将信息提交给文件chkadmin.JAVA，该文件接受表单信息后，根据用户名查询数据库中的记录，找到记录后，核对用户名是否与密码相符，如果无误则进入后台系统主页，否则出现错误信息提示。
5.1.2后台主页的设计
在设计后台主页时，由于整个后台系统以管理信息为主，因此，在界面设计上尽量简洁，以方便操作为主。此系统的后台管理主页是由一个框架结构构成的，当用户单击导航菜单链接时，右边的框架中将显示相应的界面。
后台主页是由JAVA文件实现的。在文件中用框架结构的方式调用文件完成。在后台主页面的左边框架中，是文件menu.java实现的菜单导航页面，该文件中使用JavaScript脚本语言编写了2个函数，第一个是直接用于图象和文字的显示；第二个用于单击后，展开导航菜单，然后，再向函数中输入实参，实现主页左边部分的界面设计。
3.2 订单信息查看
会员在前台下订单购买餐品，后台的管理人员通过查看订单信息才能给会员配货发餐品。因此，查看餐品订单信息是后台管理系统的一重要内容，它可以在第一时间查看到新增的购餐品订单，并根据订单的内容，进行配餐品；同时，还可以通过查看或修改会员订单进程状态，来反馈订单的进程。
后台订单处理流程图，如图3.2所示。
图3.2 后台购物流程图
在订单信息查看页面，除可以分页浏览订单大致内容外，还可以单击订单号查看订单的详细内容，同时，还可以通过用户名来查询该用户的所有订单信息。
查看订单信息的功能是由文件editdingdan.java完成的。在该文件中，使用多表连接显示订单信息，用Select case语句查询不同进程状态的订单信息。通过在数据库的相关表中搜索用户名字段，实现按用户名查询订单信息的功能。
3.3 管理员模块
管理员是本系统的重要组成部分，普通会员登录后可以选择购买餐品、查看购物车情况、查看购物明细，还可以修改购买餐品的数量以及支付费用情况等操作而管理员登录系统后可以进行推荐餐品、删除餐品、设置餐品级别、是不是特价餐品等一系列操作。
3.4 类别资料管理
将餐品分类，是录入餐品前首先要做的一项工作。只有进行了很细致的分类，才能便于餐品的录入与以后的餐品管理。此系统将餐品分为两类：大类和小类，其中大类中包括所有的小类，小类是大类的子类。
5.4.1餐品大类
餐品大类将列出餐品的整体类别范畴，然后，再由餐品的大类，衍生出大类中的小类，从而完成餐品的类别划分。在餐品大类管理页面中，可以浏览所有的餐品类别，并能增加新的大类，还可以对原有的类别进行修改和删除。同时，可以控制某一类别是否出现在前台的类别区。
餐品大类管理界面是由文件anclass.java完成的，在文件中，先将大类界面分为两个部分，左边部分用于修改和删除已经有的大类名称和排序号。右边部分用于增加新的大类名称。两个部分设置两个表单，用于操作人员输入信息。
在餐品大类管理界面中，单击页面左边部分的“修改”按钮，则向文件saveanclass.java提交表单信息，该文件接受信息后，根据接收的action值和信息的ID号，更新信息的内容。
在餐品大类管理界面中，单击页面左边部分的“删除”按钮，则向文件saveanclass.java提交表单信息，该文件接受信息后，删除相应ID号的信息。
单击页面右边部分的“增加”按钮，则向文件saveanclass.java提交表单信息，该文件接受信息后，将信息写入数据库，完成增加大类的功能。
5.4.2餐品小类
在设置完餐品大类后，接下来就是根据餐品的大类来划分相应的小类。在设置餐品小类页面中，可以根据餐品大类增加小类，并对已经有的小类进行修改或者删除。同时，还可以实现某一小类在大类间的移动以及控制各小类间的排列顺序。
餐品小类的管理的界面是由文件nclass.java实现的。在浏览或增加小类时，必须先选择小类所属于的大类，选择并进入某一大类后，页面的左边显示该大类的所有小类，并可以对它们修改或删除，在页面的右边可以增加该大类的小类。
在进入某大类餐品的小类页面后，单击页面左边的小类“修改”按钮，在将表单信息提交处理前，先通过函数checkxl()，检测提交信息的完整性，该函数是使用JavaScript脚本语言编写的。在确定增加或修改的大类中的小类信息无误后，便将该表单的信息提交给文件savenclass.java，该文件接受提交的信息，打开数据库记录，增加或更新该小类信息。
单击页面左边的小类“删除”按钮，便将该表单的信息提交给文件savenclass.java，该文件接受提交的信息，根据提交的信息ID号，删除相关记录。
3.5 餐品资料管理
输入餐品资料，是后台管理系统的一项日常的工作。所有在前台销售的餐品资料，都是通过后台输入的，可见这一功能的重要性。考虑到它的重要性和录入时需要很多详细的信息，我们把餐品资料管理分为三个部分：第一部分浏览餐品资料，第二部分增加餐品资料，第三部分修改原有的餐品资料。
3.3.1 浏览餐品资料
该页面以分页浏览的方式查看全部的餐品资料信息，并可以查询某一种餐品的详细资料信息。同时还可以对不需要的餐品资料，选中后删除。餐品管理流程图如图3.6所示。
图3.6 餐品管理流程图
浏览餐品的功能是由文件managebook.java实现的。在文件中，先调出数据库中的shop_books表，分页显示；当查询某一餐品时，通过向表单提交关键字信息和查询方式，然后，根据这两个条件在数据库表中找到相匹配的记录，调用显示内容过程showcontent显示出来；删除记录时，通过获取打勾选项的ID号来实现删除功能。
3.3.2 增加餐品资料
增加餐品资料，对于购物网站系统来说，是后台中用的最多的一项，因为每天都会有大量的餐品资料录入数据库中，来丰富网站的产品。
在增加新的餐品资料记录时，在列表框中选择已经分类的类别信息，用户只要选择大类，属于这一大类的小类就出现在小类栏中，这样既方便了录入数据库时的操作，又保证了数据的完整性、统一性。
实现餐品大类和小类相互关联的主要思路是：先将全部的餐品类别保留在一个数组中，然后，通过餐品大类列表框选项的改变事件，获取大类ID号，根据ID号将数组中对应的小类ID号和名称赋值给小类列表框，从而实现大类改变，小类也相应变化的功能。
当录入新餐品时，只要对出版单位进行选择，无须填写，可以提高工作效率，设置文本框，单击它时，出现下拉的列表框，显示全部的出版单位名称，选中选项后，下拉列表框自动隐藏。
文本框下面的列表框初始时是隐藏的，当单击文本框时，列表框才出现；选中选项后，将列表框的值赋值给文本框，同时列表框自动隐藏，控制是否隐藏是通过列表框的属性style的display的值来实现的。
3.3.3 修改餐品资料
当餐品录入完成，写入数据库后，还可以对它进行修改。对原有餐品资料的修改，也是餐品资料管理的一部分。通过对餐品信息的修改，可以很方便地改变折扣、封面，避免了重新录入的麻烦，在浏览餐品信息时，单击“餐品名”便可以进入该餐品的修改状态。其界面和增加餐品的界面差不多。
3.7 网站人员的管理
为确保后台数据系统的安全，进入后台系统必须先登录才能进行操作。因此，首先要在数据库中增加人员记录并设置权限，操作人员依据用户名和密码进入后台系统，在自己的权限内进行操作。
需要说明的是：只有具备了管理权限的人员，才能添加、修改、删除网站内容，其他后台人员和不具备这项权限的操作人员，只能修改自己的密码。
网站人员管理是一个集增加、修改、删除为一体的综合管理模块。通过这一模块，管理人员完成对所有网站人员的管理。当然只有具备管理权限的人员才能进行这些操作。
填写用户名和密码设置权限后，单击“添加” 按钮，便将信息提交给文件savemin.java，它是来完成增加新人员的功能；单击“修改”链接，便获得该人员的ID号，在数据库中找到相应记录，显示在界面右边。修改完成后，单击“保存”按钮，还是将信息提交给文件saveadmin.java由它来完成修改操作。删除功能和修改实现方