1、泰 山 学 院本 科 毕 业 论 文 （ 设 计 ）美食商务网站设计所 在 学 院 信息科学技术学院 专 业 名 称 计算机科学与技术 申请学士学位所属学科 工学 年 级 学 生 姓 名 、 学 号 指 导 教 师 姓 名、职称 完 成 日 期 年 月 日 摘要I摘要随着互联网技术和通讯技术的不断发展，网络已经渗入到生活的方方面面，极大的丰富了人们的衣食住行，使人们时时都能感受到网络的神奇。Internet的飞速发展也导致了创建的网站越来越多，当我们浏览这些网站的时候，看到的是丰富的影像、图片、文字，这些内容都是通过HTML语言表现出来的。但是对于一些开发的前端程序人员来说，跨平台是一个难以实
2、现的问题。随着科技的不断发展，网络技术也不断得到进步和完善，HTML5的诞生就很好的解决了这个难题。本论文将采用HTML5技术，依据Hbuild为开发平台，结合CSS技术、PhotoShop和JavaScript技术设计一个小型美食商务网站。本系统实现了用户注册、登录功能、查询美食信息、添加购物车、对购物车里的美食进行修改、支付功能以及后台管理员可以发布美食菜品及其做法，实现信息共享从而达到人人都能和美食零距离接触的目的。关键词：HTML5，JavaScript，CSS，Cate Website目录IIABSTRACTIIIABSTRACTWith the continuous develop
3、ment of Internet technology and communication technology, the Internet has penetrated into every aspect of life, greatly enriched the daily life of people, make people always feeling the magic of the network.The Internet maintained by the rapid development of Internet has led to more and more, when
4、we are browsing the web site, see the rich images, text, radius, these content are through HTML.For some of the front-end application development, cross-platform is a difficult problem.With the continuous development of science and technology, network technology is also constantly progress and impro
5、vement of the birth of the HTML 5 is well solved the problem.HTML 5 technology is adopted in this paper, on the basis of Hbuild for development platform, combined with PhotoShop and JavaScript technology to design a small cate websites.This system realizes the user registration, login, and can relea
6、se cuisine dishes and its practice, realize information sharing so as to achieve everyone can and zero distance contact purpose.Keywords: HTML5，CSS ，JavaScript，Cate Website目录IV目录目录 III1 引言 11.1 研究的背景 11.2 研究的目的和意义 12 系统开发技术简介 22.1HTML5 技术 22.1.1 什么是 HTML5 .22.1.2 HTML 5 的优势 22.2 CSS3 技术 22.3 JavaScr
7、ipt 技术 32.3.1 JavaScript 的特点 32.3.2 JavaScript 的主要作用 32.4 数据库技术 .43 美食网站需求分析及可行性研究 43.1 需求分析 43.2 可行性分析 .54 系统概要设计 64.1 系统设计原则 .64.2 系统功能划分 .64.3 模块功能描述 .64.4 系统的数据库结构设计 .75 系统数据库设计 85.1 数据库设计 .85.1.1 数据库需求分析 85.1.2 创建公用的数据库链接文件 85.2 实体联系模型（E-R 图） .85.3 安全保密设计 .11目录V5.3.1 登录用户的安全性 .115.3.2 数据安全性 .11
8、6 系统的详细设计 .116.1 程序流程图 .116.2 系统界面设计 .156.2.1 用户注册登录模块实现 156.2.2 网站主页设计 .166.2.3 模块分割 .177 系统测试 .197.1 网站测试概述 .197.2 开发过程中的测试 .197.2.1 浏览器兼容性测试 197.2.2 网页功能测试 197.2.3 检查站点内各衔接的有效性 .197.2.4 测试站点 20总结 .20参考文献 .22致谢 .23泰山学院本科毕业论文（设计）11 引言1.1 研究的背景21 世纪是一个科技迅速发展的时代，信息全球化、资源共享已成为一种不可阻挡的潮流。在网络技术如此普及的今天，互联
9、网无疑是能够用最低成本广泛传播信息的最有效工具。在这样一个互联网如此普及的时代里，传统的餐饮业也悄悄的进行着一场互联网的革命，利用互联网技术提高自身的实力，已经成为在激烈的竞争中取得胜利的重要砝码。人类饮食发展史经历了有初级追求向高级追求进化的四个阶段，即果腹充饥型、美味享受型、营养保健型、食疗养生型。随着社会生活节奏的不断加快，生活水平的不断提高，人们对于饮食方面的要求也越来越高，不仅要求吃的美味，更要吃出健康。但是许多顾客由于工作繁忙无法抽出时间享受美食，自然就产生了网上订餐的要求，最好的方式就是把传统餐饮业和互联网结合起来，于是就形成了网上订餐系统。1.2 研究的目的和意义在经济全球化大
10、趋势下，传统的餐饮业正面临着巨大的挑战，线上经济对实体经济造成了巨大的冲击力。如今传统的餐饮业只有采用“传统+互联网”的发展模式，才能紧跟时代的发展潮流，使自己立于不败之地。因此开发在线美食商务网站具有很高的商业价值。随着网络对人们日常生活影响的不断加深，一些传统餐饮业的商家们也越来越重视互联网的开发与应用。因为在线美食网站既提高企业的知名度，有效地降低管理成本，为传统餐饮业注入了新的生机与活力。另外，线上订餐系统为就餐者带来极多的方便，使他们能够足不出户就能享受到快捷方便的美食。泰山学院本科毕业论文（设计）22 系统开发技术简介2.1HTML5 技术2.1.1 什么是 HTML5HTML5
11、不是一种编程语言，而是一种描述性的超文本标记语言，用于描述超文本中的内容和结构。2.1.2 HTML 5 的优势(1)实用解决了跨浏览器的问题浏览器是网页的运行环境，因此浏览器的类型也是在网页设计时遇到的一个问题。为了保证设计出来的网页在不同的浏览器上效果一致，HTML5 会让问题简单化，具备友好的跨浏览器性能。(2)实用性和用户优先原则HTML5 标准的制定以用户优先为原则，一旦遇到无法解决的冲突时，规范就会把用户放到第一位，其次是网页的作者，再次是浏览器，接着是规范制定者,最后才考虑理论的纯粹性。因此，HTML5 内只封装了切实有用的功能，而没有封装复杂并没有实际意义的功能。(3)化繁为简
12、的优势在设计 HTML5 时，严格遵循了“简单至上”的原则，主要体现在以下几个方面： 新的简化的字符集声明； 新的简化的 DOCTYPE； 简单而强大的 HTML5 API； 以浏览器原生能力替代复杂的 JavaScript 代码2.2 CSS3 技术常见的网站、博客是使用文字图片展示内容的，其中文字是传递信息的主要手段。而美观大方的网站或者博客，需要使用 CSS 样式来修饰。在 CSS3 中定义了许多属性，用来美化和设计图片、设置文本的样式和粗细、设置网页背景泰山学院本科毕业论文（设计）3和 HTML 元素边框样式、美化表格和表单，另外通过 CSS3 还可以设计出美观大方、具有不同外观和样式
13、的超链接，从而增强网页样式特效。2.3 JavaScript 技术2.3.1 JavaScript 的特点JavaScript 的特点主要有以下几个方法（1）语法简单，易学易用JavaScript 语法简单、结构松散，可以使用任何一种文本编辑器进行编写。JavaScript 程序运行时不需要编译成二进制代码，只需要支持 JavaScript 的浏览器进行解释。（2）解释性语言非脚本语言编写的程序通常需要经过“编写-编译-连接-运行”这四个步骤，而脚本语言 JavaScript 只需要经过“编写-运行”这两个步骤（3）跨平台由于 JavaScript 程序的运行依赖于浏览器，只要操作系统中安装有
14、支持JavaScript 的浏览器即可，因此 JavaScript 与平台无关。（4）基于对象和事件驱动JavaScript 把 HTML 页面中的每个元素都当作一个对象来处理，并且这些对象都具有层次关系，像一棵倒立的树，这种关系被称为“文档对象模型（DOM） ”。在编写 JavaScript 代码时，会接触到大量的对象及对象的方法和属性。因为基于事件驱动，所以 JavaScript 可以捕捉到用户在浏览器中的操作，可以将原来静态的 HTML 页面变成可以与用户交互的动态页面。（5）用于客户端尽管 JavaScript 分为服务器端和客户端，但目前应用最多的还是客户端。2.3.2 JavaSc
15、ript 的主要作用JavaScript 是目前 web 应用程序开发者使用最为广泛的客户端脚本编程语言，它不仅用来开发交互式的 web 页面，还可将 HTML、XML 和 Java Applet、Flash 等 Web 对象有机的结合起来，使开发人员能够快速生成Internet 上使用的分布式应用程序。JavaScript 可以弥补 HTML 语言的缺陷，泰山学院本科毕业论文（设计）4实现 web 页面客户端的动态效果，其主要作用如下： (1)动态改变页面内容HTML 语言是静态的，一旦编写，内容就无法改变。JavaScript 可以弥补这种不足，可以将内容动态的显示在页面中。（2）动态改变
16、网页的外观JavaScript 通过修改网页元素的 CSS 样式，可以动态的改变网页的外观。例如，修改文本的颜色，大小等属性，让图片的位置动态的改变等等。（3）验证表单数据为了提高网页的效率，用户在填写表单时，可以在客户端对数据进行合法性验证，验证成功才能提交到服务器上，进而减少了服务器的负担和网络带宽的压力。（4）响应事件JavaScript 是基于事件的语言，因此可以影响用户或浏览器产生的事件。只有事件产生时才会执行某段 JavaScript 代码，例如，当用户点击计算按钮时，程序才显示运行结果。2.4 数据库技术该系统网站的数据库采用 SQL Server 2005，它建立在 Micro
17、soft Windows NT 平台，并提供强大的企业数据库管理功能。SQL Server 2005 是一个全面的数据库平台，是一个满足客户/服务器(Client/Server)需求并且可扩充高性能的数据库管理系统。SQL Server 2005 数据库引擎为关系型数据和结构化数据提供了更安全可靠的存储功能，可以构建和管理用于业务的高可用和高性能的数据应用程序。此外 SQL Server 2005 还结合了分析、报表、集成和通知功能。3 美食网站需求分析及可行性研究3.1 需求分析本系统网站以饮食为基础，以菜谱为中心，并以零距离美食命名的。它与泰山学院本科毕业论文（设计）5我们的生活息息相关，
18、当今社会越来越多的人喜欢吃快餐，但快餐对身体并不好。在零距离美食网中可以学到日常生活中我们所忽视的东西，也可以学到一些家常菜的做法，还可以上传自己的独门妙招与他人分享，让大家都体会到做菜的乐趣。本系统网站采用HTML5技术，依据Hbuild为开发平台，结合Photoshop和JavaScript技术设计一个小型美食网站。本系统实现了用户注册、登录功能、查询美食信息、添加购物车、对购物车里的美食进行修改、支付功能以及后台管理员可以发布美食菜品及其做法，实现信息共享从而达到人人都能和美食零距离接触的目的。(1)系统网站的主要需求有： 系统页面美观友好、系统架构清晰 系统可以实现动态式发布信息 系统
19、可以提供多种菜品的信息及做法 系统可以提供用户留言板块，增强网站的互动性(2)对 web 用户的管理主要需求项目有： Web 用户可以完成注册信息 Web 用户在登录页面可以输入用户名和密码进入主页 Web 用户可以修改个人资料和登录密码 Web 用户可以在网上查找美食、分享美食以及订购美食 Web 用户可以留言板块留言，发表一些对美食的看法 Web 用户在完成操作后，可以退出登录系统3.2 可行性分析(1) 技术可行性HBuilder 是一种用于创建内容丰富的动态网站、移动 APP 开发的编码工具，HBuilder 支持 HTML5+规范，它使得 JavaScript 可以调用二维码、语音输
20、入、摄像头、位置、陀螺仪.几十万原生 API！设计该网站系统时主要采用了HTML 5 + CSS 3 + JavaScript 技术。HTML 5 以 HTML 4 为基础，并且对 HTML 4 做了大量的修改。在 HTML 5 对 HTML 4 所做的各种修改中，其中最重大的一个修改就是为了使文档结构更加清晰，容易阅读，增加了许多新的结构元素。泰山学院本科毕业论文（设计）6这些新标签很好的解决了跨平台的问题。另外 CSS 3 可以美化页面，JavaScript 可以实现动态交互，所以说，开发本系统网站在理论上是可行的。(2) 经济可行性网上订餐系统为顾客节省了时间，给人们的生活带来极大的方便
21、。网上订餐模式将成为一种全新的商务模式。通过网上订餐系统，商家既可以提高企业的知名度，还可以在网上获得大量的顾客，从而打破时间和地点的限制，扩大了自己的营销范围。顾客也能足不出户就可以享受到美食。通过上面的分析，开发本系统网站在经济上是完全可行的。(3) 法律可行性该系统网站由本人独立开发设计的，不存在侵权问题，不违反国家法律，不侵犯他人、集体、国家的利益，因此开发该网站系统在法律上是完全可行的。4 系统概要设计概要设计的基本目标是解决系统如何实现的问题，该阶段的主要任务是设计软件的结构及划分出系统的物理元素。然后根据系统分析产生的结果来确定这个系统有哪些系统和模块组成，如何实现各个模块的功能
22、以及如何把各个功能模块有机的结合在一起，总体设计的目标是使系统实现所有要求的功能，同时也要达到高可靠性、高效率、可修改性以及容易掌握和使用的要求。4.1 系统设计原则结构化系统设计强调把一个系统设计成具有层次的模块化结构。所以，系统设计的原则就是要遵循模块化设计。因为系统设计主要有两项工作，一是把系统分割成若干个模块，二是把模块有机的组织起来。因此设计系统时还应该遵循高内聚低耦合的原则。4.2 系统功能划分根据在线美食的特点，再经过对系统的需求分析，可以把整个网站系统分为七大模块，即用户管理模块、美食浏览模块、购物车模块、生成订单模块、泰山学院本科毕业论文（设计）7商品评价模块、反馈留言模块以
23、及新闻管理模块。4.3 模块功能描述(1) 用户管理模块设计用户管理模块是网站的重要内容，给予用户特定的权限以吸引用户经常访问网站。这个模块主要实现用户注册信息的管理和登录网站用户的管理。（2）美食浏览模块设计美食浏览模块向用户提供一些美食信息，包括首页、美食产品信息、饮食健康、发布菜品以及联系我们。其中首页主要分为今日热点和菜谱排行两个模块，以方便为顾客提供最受欢迎的美食信息。（3）购物车模块设计购物车模块主要实现顾客可以添加商品的功能。用户选择完商品后可进入购物车页面，查看自己已经添加的美食产品，并且可以修改某种美食商品数量、取消某种商品以及清空整个购物车的商品。（4）生成订单模块设计生成
24、订单模块主要实现了查看订单信息、取消和修改订单信息的功能，管理员会定时处理订单，然后更改产品的库存量。当顾客订购的美食数量多余库存数量时，系统便会弹出库存不足的警告，这时管理员就要暂停处理订单，当货源补充上时，可通过修改库存量重新处理订单。（5）商品评价模块设计商品评价模块主要用于及时获取用户的对商品的评价信息，其他的顾客就可以用这些评价信息作为参考信息，对商品做出初步的判断。另外，商家也可以利用这些信息了解到自己的不足之处以改进自己的服务质量，提高品质。（6）反馈留言模块设计反馈留言模块主 要用于获取用户的留言信息。完善的客服功能，客户可以通过网上调查表或反馈表提出对产品的看法和建议。（7）
25、新闻管理模块新闻管理模块主要是管理前台网站发布的各种站内外的新闻、产品信息等。泰山学院本科毕业论文（设计）84.4 系统的数据库结构设计在线美食网站的数据库共包含 7 个数据表，用户注册信息表、默认头像信息表、名店信息表、特色美食信息表、美食教程信息表、公告板信息表及留言板信息表。5 系统数据库设计5.1 数据库设计大多数网站系统都需要后台数据的支持，因此数据库在一个信息管理系统中占有很重要的地位，数据库设计结构的好坏直接影响到系统的运行效率以及实现的效果。一个合理的数据库结构设计可以提高数据存储的效率，保证数据库的完整性和一致性。本系统网站以 SQL Server 2005 为平台对数据库进
26、行设计。SQL Server 2005是一个全面的数据库平台，是一个满足客户/服务器 (Client/Server)需求并且可扩充高性能的数据库管理系统。5.1.1 数据库需求分析用户的需求具体体现在各种美食信息的提供、保存、更新和查询方面，这就要求数据库的结构能够满足各种信息的输入和输出。5.1.2 创建公用的数据库链接文件在开发动态网站时，其中一个最主要的步骤就是建立数据库的链接，即访问数据库。该系统网站采用的访问数据库的方法是 DSN。创建数据库主要分两步进行：一是创建数据库链接文件，此系统网站的链接文件保存在站点根目录下。二是要在需要与数据库链接的页面引入该链接文件。5.2 实体联系模
27、型（E-R 图）现在广泛使用的数据模型主要有两种类型，一种是直接面向数据库逻辑结构的结构数据模型，另外一种是独立于计算机系统的概念数据模型，如实体联系模型。E-R 模型是从现实世界到信息世界的第一层抽象，它直接从现实世界泰山学院本科毕业论文（设计）9中抽取出实体以及实体间的联系，之后再用 E-R 图把数据模型表示出来。E-R模型有两个明显的优点：接近人的思维习惯，容易让人理解；与计算机无关，容易使人接受。本系统网站将采用 E-R 图来描述数据库的结构和语义。通过上面的需求分析可以得出本系统的实体主要有用户、订单、美食产品、管理员以及相关的新闻资讯，再找出实体之间的联系就可以得出本系统的实体-
28、关系（E-R）模型：（1）会员与订单的 E-R 图如图 5-1 所示：图 5-1 会员与订单 E-R 图(2）会员和管理员的 E-R 图如图 5-2 所示：图 5-2 会员与管理员的 E-R 图 （3）会员与新闻咨讯的 E-R 图如图 5-3 所示：会员编号姓名邮箱密码发出 订单编号菜品名会员名1 n会员编号姓名邮箱密码管理 管理员编号号姓名密码n 1泰山学院本科毕业论文（设计）10图 5-3 会员与新闻咨讯的 E-R 图 （4）订单与产品的 E-R 图如图 5-4 所示：图 5-4 订单与产品的 E-R 图（5）管理员与订单的 E-R 图如图 5-5 所示：图 5-5 管理员与订单的 E-R
29、 图会员编号姓名邮箱密码时间标题浏览 新闻资讯编号内容n m产品编号名称cheng菜品订货 订单编号菜品名m会员名n管理员编号姓名cheng密码查看 订单编号菜品名1会员名n泰山学院本科毕业论文（设计）11（6）管理员与产品的 E-R 图如图 5-6 所示：图 5-6 管理员与产品的 E-R 图（7）管理员与新闻资讯的 E-R 图如图 5-7 所示：图 5-7 管理员与新闻资讯的 E-R 图5.3 安全保密设计 5.3.1 登录用户的安全性该系统网站设计的用户登录界面，使每个合法用户都拥有一个自己设定的密码，该密码由用户自行维护，因此用户在登录界面进行登录时可以实现对用户的身份验证。5.3.2
30、 数据安全性由于把数据库层和客户端层分离开，客户端无法接触到数据库的核心数据，编号密码n 1姓名cheng菜品产品处理管理员名称编号管理员编号密码姓名cheng标题 时间发布 新闻资讯内容编号1 n泰山学院本科毕业论文（设计）12也就无法进行非法的修改和破坏，有效的保护了数据库的安全性。6 系统的详细设计6.1 程序流程图（1）用户登录流程图如图 6-1 所示：用户进入登录界面后，填写用户名、密码等信息，点击登录按钮后，由于该网站采用了 JavaScript 技术，所以客户端浏览器会对用户的信息进行验证，大大减轻服务器的负担。验证正确之后，后进入网站首页界面，否则提示用户登录失败。用户可以通过
31、找回密码或用户名重新登录图 6-1 用户登录流程图（2）前台购物流程图如图 6-2 所示：登录填写用户名、密码验证是否正确成功登陆首页登录失败找回密码注册网上商城美食类别美食列表加入购物车进入购物车界面详细介绍 返回泰山学院本科毕业论文（设计）13图 6-2 前台购物流程图(3)产品搜索模块流程图如图 6-3 所示：图 6-3 产品搜索模块流程图(4)购物车模块程序流程图如图 6-4 所示：搜索美食选择美食类别输入搜索内容搜索成功显示搜索结果进入产品界面返回查看我的购物车订单列表页面是否购买 查询具体商品修改数量删除订单去收银台点击“继续购物” ，进入首页注册会员选择支付方式会员泰山学院本科毕
32、业论文（设计）14图 6-4 购物车模块程序流程图（5）管理员登录模块流程图如图 6-5 所示：图 6-5 管理员登录模块流程图（6）修改商品流程图如图 6-6 所示：打开后台界面填写用户名、密码、验证码验证正确成功登陆管理员登陆模块美食中心美食列表点击商品修改完成泰山学院本科毕业论文（设计）15图 6-6 修改商品流程图（7）添加商品流程图如图 6-7 所示：管理员对一些美食店铺刚发布的美食产品可以进行管理，管理员进入登陆模块后，再进入产品管理中心，然后选择添加类别，之后进入美食类别管理或者进入添加新产品模块，就可以完成添加美食产品的过程。图 6-7 添加商品流程图6.2 系统界面设计6.2
33、.1 用户注册登录模块实现用户登录页面的链接在网站主页的上侧，点击后进入登录页面，在登录页面中包含一个“注册新用户”的链接注册页面。在实际应用中，如果用户没有登录，则在页面中显示用户登录的选项，用户登录后，则用用户的基本信息代替用户登陆的选项。本页面的设计如图 6-8 所示：管理员登陆模块产品中心添加类别别添加新产品美食类别管理完成泰山学院本科毕业论文（设计）16图 6-8 用户登录界面用户注册页面包含填写基本注册信息、邮箱验证、以及注册成功三个页面，在填写信息页面中必须填写用户名、登录密码、电子邮箱、手机号、验证码，本页面的设计如图 6-9 所示：图 6-9 用户注册界面6.2.2 网站主页
34、设计（1）整体布局在线订餐类网页主要用来实现网上订餐、交易等功能。因此所要体现的组件相对较多，主要包括账户登录、产品搜索、广告推广、产品推荐、产品分类等内容。在 HTML 5 网站中，每个网页所展示的主体内容通常都存放在 section 结构元素中，而且通常都带有一个标题元素 header。在首页中，主要包括四部分，分别为 logo 与导航区、banner 资讯区、产品类别和页脚。最终的页面效果如泰山学院本科毕业论文（设计）17下图所示：图 6-10 首页界面设计（2）设计分析网上购物网站一个重要的特点，就是突出产品、突出购物流程、突出优惠活动以及促销活动等信息。首先，要用诱人的美食产品图片来
35、吸引用户，再结合吸引人的优惠活动和促销活动来增强用户的购买欲望。在线购物网站的主要特性体现在如下几个方面： 商品检索方便：要有商品搜索功能和详细的商品分类。 有产品推广功能：增加广告活动位，帮助特色产品推广。 热门产品推荐：消费者的搜索很多带有盲目性，所以可以设置热门产品推荐位。对于产品要有简单、准确的展示信息。页面整体布局要清晰、有条理，让浏览者知道在网页中如何快速找到自己需要的信息。（3）排版架构在线订餐系统网站整体上是上下结构，上部分是网页的头部，中间为网页的主要内容，包括 Banner、产品类别区域，下部分为页脚信息。网页的整体构架如图 6-11 所示：Logo、导航banner 资讯
36、产品类别 1.泰山学院本科毕业论文（设计）18图 6-11 页面排版架构6.2.3 模块分割当页面整体架构完成后，就可以动手制作不同的模块区域了。其制作流程，是采用自上而下，从左到右的顺序。（1）logo 与导航模块的设计Logo 信息与导航菜单都放在页面顶部，作为页头部分。其中 logo 信息 作为公司标志，通常放在页面的左上角。导航菜单放在页头部分和页面主体部分之间，用于链接其他页面。其中导航菜单分为首页、菜谱大全、饮食健康、发布菜单、联系我们五部分。（2）Banner 模块设计的Banner 区用于放置一些美食图片，以显示新产品的信息。设计 Banner区的重点在于调节宽度，使不同浏览器
37、之间能够效果一致，并且颜色上配合logo 与上面的导航菜单，使整个网站和谐、大气。（3）咨讯区模块设计咨讯区的内容不应太多，而要简洁、突出重点。是主页用于链接其他页面的导航链接。（4）页脚模块的设计页脚使用一个 DIV 标签进行设计，一般情况下用于放置一个版权信息图片，介绍页面作者等信息。页脚和其他网页部分一样，也要保持简单、清晰地风格。（5）购物模块设计在线购买过程是这样的：在顾客浏览美食网站时，当他看到自己感兴趣的美 食时，这时有两种选择：一是查看到美食的具体描述及评价之后，仍想要购买该店的美食产品，就加入购物车。二是当顾客想购买某店的美食时，无需查看详细信息就可以直接加入购物车。（6）商
38、品搜索模块的实现在首页面上有搜索框，当顾客输入查找内容之后，点击搜索就能查找出一些产品类别 n页脚泰山学院本科毕业论文（设计）19相关的美食产品。（7）购物车模块的设计 当顾客想要购买某一美食产品时，可以点击美食旁边的购物车，就可以把美食放入购物里了，之后顾客还可以往购物车里添加其他的美食产品，直到选购完毕。另外顾客还可以修改购买的美食产品的数量或者删除一些不想要的美食产品信息。然后就进入支付流程阶段，完成支付。（8）留言模块设计在留言模块中，使用 aside 元素实现添加留言的功能。该模块分为留言列 表、留言查询、留言回复以及留言查询四部分。7 系统测试7.1 网站测试概述美食网站建成之后并
39、不表示网站建设的结束，还需要对网站进行严格的测试，用来检测该网站的各个功能模块是否达到预期的目标以及用户的需求是否得到满足。在设计网站的各个开发阶段都包含测试。测试主要分为静态测试和动态测试。静态测试主要是对子文档和代码进行测试，静态测试的主要内容是 HTML 文档测试、内容测试及浏览器兼容性测试。动态测试主要是对各个模块的功能进行测试。动态测试主要包括性能测试、路径测试、边界条件测试、回绕测试、多用户测试、负载测试、安装测试以及安全测试。7.2 开发过程中的测试7.2.1 浏览器兼容性测试每位客户在浏览时时都有自己惯用的浏览器，而不同的浏览器之间对同一个页面的显示效果往往有很大的差距。即使是
40、同一种浏览器软件，不同的版本页面的显示效果也会不一样。所以一个网站要想获得最多的访问者，在设计完之后必须要测试浏览器兼容性问题。也就是说不同的用户在使用不同的浏览器访问时看到的页面效果都应该是一样的。这就要求在开发软件时要仔细考虑所泰山学院本科毕业论文（设计）20采用的开发方法的兼容性，特别是一些新的开发技术是否可以兼容各种浏览器。7.2.2 网页功能测试假设自己是某一用户，依次对注册模块、登录模块、浏览商品模块、查询模块、购物车模块、留言模块进行测试。7.2.3 检查站点内各衔接的有效性超链接是把网站中所有页面有机的整合在一体的内在结构，在一个网站中，网页数目较多，链接更多，在设计时可能会由
41、于一时大意出现空连接或孤立网页。这里主要用到下面两种方法测试站点内的链接：（1）人工逐一检查：这种方法无疑是比较耗时耗力。（2）利用工具检查：Dream weaver 中有“检查链接”的功能，既可以检查部分站点，也可以检查整个网站的的链接。7.2.4 测试站点测试站点可以用来改善、协调开发小组成员之间的开发流程。可以使用Dream weaver 里的“站点”菜单中的“报告”功能来完成这个测试任务。报告类型主要有：（1） “可移除的空标签”产生的报告内容为：所有可被删除的空标签。（2） “可合并嵌套字符标签”产生的报告内容为：所有没有可替换文本字 符的图形标签。（3） “没有替换文本”产生报告内
42、容为：所有没有可替换文本字符的图形标签。（4） “无标题文本”产生的报告内容为：所有没有标题的，重复标题的文档。（5） “多余嵌套标签”产生的报告内容：所有嵌套的图形标签。总结论文先从整体框架设计，再到各个功能模块的具体实现，实现了美食网站泰山学院本科毕业论文（设计）21的基本功能。四年的大学生涯如白驹过隙，如果说这四年是我对知识的一个积累过程，那么如今的毕业设计便是对我大学所学课程所有知识的综合运用并与实际结合，践行理论联系实际，实践是对所学理论的重新认识和深化的过程，使理论投入到实际应用中。在毕业设计的这几个月里，有我们努力的汗水，但更多的是我们收获知识的喜悦。我们的知识自然在实践中得到进
43、一步提高和巩固，我认为在毕业设计过程中的践行理论应用于实际将会令我在日后的学习和工作中终身受用。首先，我的学习和动手能力得到了很大提高。毕业设计的过程中，尽管我遇到了很多的困难，但通过自己查阅书籍或者网络搜集了很多相关的文章并向导师请教，最后终于得到解决。我在毕业设计的过程中不仅对书本中的理论知识得到了升华进一步加深了对知识的认识，同时也提高了我对新技术的认知和学习能力，培养了我的自学和分析能力。 其次，在这次毕业设计的过程中我的人际交流能力也得到了很好的锻炼。通过在毕业设计中遇到问题同同学交流、向老师请教、与这方面的专业人士请教使我的人际交际能力不断增强。每个人都有自己知识的短板，这就使我们
44、要不断的与他人沟通，学习他人的优点，借鉴他人的成功的经验和失败的教训，让自己在前行的道路上少走弯路。最后毕业设计终于圆满完成了，但即将面临更大的挑战，进入社会，真正的参与的企业中去。我坚信我会将我的激情和所学的知识充分应用到我的工作中去，不断学习，不断取得进步。泰山学院本科毕业论文（设计）22参考文献1 弗里曼.HTML5 权威指南M，北京：人民邮电出版社，2014.01.2 Peter Lubbers Brian Albers Frank Salim .HTML5 程序设计M， 2012.05:267-273.3 拉尔森.HTML5&CSS3 编程入门经典M，北京：北京交通大学出版社，201
45、4.06:78-83.4张惠芳.HTML5 与 CSS3 网页设计入门与提高M，北京：人民邮电出版社，2015.01：189-205.6李刚.HTML5/CSS3/JavaScript 讲义M,北京：清华大学出版社，2012.05：48-56.7李松峰.HTML5 秘籍M，北京：人民邮电出版社，2014.01：524-549.8David Flanagan.JavaScript 权威指南M，北京：工业机械出版社，2012.3:189-214.9张海藩.软件工程导论M，北京：人民邮电出版社，2006.05.10 彭银香,白贞武.电子商务安全问题及措施研究J.大众科技, 2005.11:25-34
46、.11 吴凌娇.网上购物安全问题探讨J.江苏：江苏技术师范学院学报, 2006.04:10-12.泰山学院本科毕业论文（设计）23致谢本论文是在李老师的悉心指导下完成的,在设计过程中得到了李老师的大力帮助，他为我提供了很多相关的资料。在此期间由于培训关系论文写作一直进度缓慢，多谢李老师多次联系并给予我指导，其次是我的同学们，论文处在瓶颈期时是你们给我了灵感和写作的动力，尤其是在最后的软件设计中，一些精于软工的同学给了我很多指导性的帮助，再次表达我诚挚的感谢。最后，由衷的感谢信息科学技术学院的老师们在这四年对我的教育和帮助，也感谢百忙之中抽出时间审阅我论文的各位老师，我会悉心接受各位的建议，并不断的学习提高，不辜负母校的栽培！
