第 5 章 系统详细设计
经过系统的需求分析阶段，概念设计阶段，下一阶段就是要对系统进行详细设计。
本章主要介绍的就是对系统的详细设计，系统的详细设计就是将前期所设计的功能模块加以实现，并对用户界面加以设计与实现。
5.1 首页设计
当用户打开一个系统最先看到的就是首页，那么首页设计的好与坏直接关系到用户对该系统的第一感觉，所以首页的设计是十分重要的。该系统的首页主要由四部分组成：
标题与导航、公告栏、菜品推荐以及饮食小常识。主界面的设计主要是利用当前最流行的前端设计技术：html5、css3、javascript 等技术来设计的。界面色彩搭配很柔和并不夸张刺眼。整个首页信息包含量大，可以最直观带给顾客大量所需要的信息。
1.标题与导航栏、公告栏
由于该系统所针对的客户有三个类别：游客、用户、管理员，所以针对不同的客户，导航栏中包含的功能是不一样的。而对于所有的顾客来说标题栏和公告栏是一样的，标题两侧分别是注册与登录还有角色的选择，而公告栏则是一个可以滚动播放不同公告的滚动公告栏。如图 5.1 即为游客首页的标题与导航栏还有公告栏部分：
2.菜品推荐部分
菜品推荐部分是左右的结构，右边大部分的篇幅介绍的是特色或特价菜品，而左边则包括：最受欢迎菜品排行、网站客服热线以及网站专门设立的意见栏，不同于留言板的是，对于意见栏来说任何人都可以在这里发表对系统的意见。如图 5.2 即为菜品推荐部分：
3.饮食小常识部分
既然是订餐系统，那么主题就是吃喝，而中国人吃喝是有讲究的，什么季节该吃什么，不该吃什么都是有一定讲究的。所以这就是在首页设计饮食小常识的主要目的。在该部分，它又分成两部分：健康饮食和饮食小计划，健康饮食主要是一些饮食小常识的介绍，而饮食小计划则是根据时间季节的不同，系统做出的饮食搭配与推荐。它可以在一定程度上丰富首页的内容，并且在一定程度上吸引一定的客户。
5.2 注册界面设计
当用户进行注册的时候需要输入用户名、密码、地址、邮箱以及联系方式等基本信息，注册模块对这些输入的信息进行校验，若信息校验合格，将数据存入数据库中，完成用户注册过程，然后界面跳转到用户登录界面，如图 5.4 即为整个注册过程的流程图：
注册页面为 account.html,由于 JavaScript 的运行速度比较快，并且程序采用的是本地加载模式，可以提高其运行的速度。则设计了一个函数 CheckInput,他的主要作用是对用户提交的信息进行校验。主要验证用户名、密码、联系方式、地址不能为空，验证联系方式、邮箱的格式是否正确。并且对于其校验程序 account.php 它的主要验证作用是验证用户名是否已存在。该程序首先查询数据库的 User 表中是否已经有该用户名，如果已经有则返回并显示用户名已存在；否则，将用户的提交的数据信息插入到 User表中，并在界面上显示“注册成功”.如图 5.5 即为用户注册界面：
5.3 用户登录界面设计
当用户注册成功后注册界面会直接跳转到相应的登录界面，用户只需要输入用户名和密码即可完成登录进入主界面进行操作。用户在输入用户和密码的时候，程序会对其进行验证，与数据库中用户的信息进行对比，如果格式不对或者填写错误，系统会自动对用户进行提示，并将填写错误的框自动清空，只有当用户的用户名和密码和数据库User 表中保存的数据完全一致的时候，界面显示“欢迎用户！”并且直接跳转到用户操作主界面。当用户由于某种原因忘记登录密码的时候，用户可以点击界面上的“忘记密码”,通过管理员的查询等过程，将密码发送到用户的手机或者邮箱中，完成对密码的找回。如图 5.6 即为用户登录过程的流程图：
用户登录页面为 login1.html,同样由于 JavaScript 的运行速度比较快，并且程序采用的是本地加载模式，则设计了一个函数 CheckInputLogin,来对用户登录时提交的信息进行校验。主要验证用户名、密码是否为空，格式是否正确。并且对于其校验程序accountLogin.php 它的主要验证作用是验证用户名是否已经注册成功，该用户名的登录密码是否正确。该程序首先查询数据库的 User 表中是否已经有该用户名，如果已经有则将其输入的密码与数据库 User 表中的密码进行对比，如果相同则登录成功，界面直接跳转到用户操作的主界面。否则显示错误的信息。其校验程序还有一个密码找回的功能，如果用户忘记了密码，则直接点击界面上的“密码找回”,与管理员建立联系，通过管理员的权限查看该用户的个人注册时填写的信息，并根据该用户注册时所留下的联系方式或者邮箱，将密码直接发到该用户的手机或邮箱中，完成用户密码的找回过程。
5.4 留言板界面设计
留言板界面主要包含两个部分，在设计上他们是左右的结构，左边的是供游客进行留言的部分，主要包含商家框、菜品框、留言框三个填写部分，右边主要是当前正在更新中的留言。用户可以实时的关注着有哪些留言在更新中。用户填写完留言点击“提交按钮”,界面会显示“留言提交成功！”并且右侧的留言更新栏会自动进行更新操作。
由于登录该系统的主要包括三类客户：游客、用户、管理员。这其中只有用户才有权限进行留言，而游客只有浏览的权限无法留言。所以，在留言板界面有一个查询检验的过程，如果你是未登录的游客，系统会直接查询出你的权限，当你准备留言时，系统会自动的提醒“对不起，您的权限不够，请登录后重试！” 如果你是以管理员的身份登录的，系统会直接查询出你的权限，当你准备留言时，系统会自动的提醒“对不起，请切换回用户身份进行留言！”如图 5.8 即为用户留言过程的流程图：
留言板的主界面为 contact.html,主要针对用户的留言。
5.5 订餐界面设计
订餐系统最主要的功能就是订餐功能，它是整个系统的核心与关键，而它这一部分核心又是购物车的管理部分，整个订餐过程为：当用户登录成功之后，会进入用户相应的主界面，用户可以查看系统发布的公告，以及菜品优惠活动等信息，然后也可以选择商家进行查看，选择商家之后，在商家中可以选择菜品查看菜品的详细信息，加入购物车。
当用户全部选择完毕后，可以到购物车中查看自己选中的菜品，若有不想要的菜品，则可以进行删除操作，同时，总价格的计数器会根据购物车里实际的菜品价格进行计算，菜品全部确定后，用户可以进行下订单操作，下订单时，用户可以选择增加自己的收货地址以及联系方式，全部确定后付款等待送餐。如图 5.10 即为整个订餐过程的流程图：
订餐界面为 specials.html,用户可以在此界面选择所需要的菜品点击“加入购物车”,即可完成购买过程。而对于购物车的控制是由 specials.php 进行控制的，其中涉及了一些控制的函数：addspecials 是向购物车添加菜品的；deletespecials 是删除购物车中的菜品的；getShopCart 是返回购物车中所有的商品；getAllGoodsPrice 是返回购物车中所有商品的总价；clearAll 是清空购物车中所有的商品。如图 5.11 即为订餐界面：
5.6 本章小结
本章主要是对系统的详细设计进行了详细的介绍，给出了系统一些主要模块的详细设计，这其中包括：主界面的各个部分介绍、用户注册模块、用户登录模块、留言板操作模块、订餐管理模块，并给出了各个模块的流程图以及主要界面的显示图。通过详细设计完成了对系统整体的实现。
