1、本科毕业论文（20 届）美食商务网站设计所在学院 专业班级 计算机科学与技术 学生姓名 学号 指导教师 职称 完成日期 年 月 ABSTRACTII摘要随着互联网技术和通讯技术的不断发展，网络已经渗入到生活的方方面面，极大的丰富了人们的衣食住行，使人们时时都能感受到网络的神奇。Internet的飞速发展也导致了创建的网站越来越多，当我们浏览这些网站的时候，看到的是丰富的影像、图片、文字，这些内容都是通过HTML语言表现出来的。但是对于一些开发的前端程序人员来说，跨平台是一个难以实现的问题。随着科技的不断发展，网络技术也不断得到进步和完善，HTML5的诞生就很好的解决了这个难题。本论文将采用HT
2、ML5技术，依据Hbuild为开发平台，结合CSS技术、PhotoShop和JavaScript技术设计一个小型美食商务网站。本系统实现了用户注册、登录功能、查询美食信息、添加购物车、对购物车里的美食进行修改、支付功能以及后台管理员可以发布美食菜品及其做法，实现信息共享从而达到人人都能和美食零距离接触的目的。关键词：HTML5，JavaScript，CSS，Cate Website目录IIIABSTRACTWith the continuous development of Internet technology and communication technology, the Intern
3、et 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 we are browsing the web site, see the rich images, text, radius, the
4、se 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 improvement of the birth of the HTML 5 is well solved the problem.HTML 5
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 release cuisine dishes and its practice, realize information sharing so a
6、s 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 JavaScript 技术 .32.3.1 JavaScript 的特点 .32.3.2 JavaScript 的主要作用 .32.4
7、 数据库技术 .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 数据安全性 .116 系统的详细设计 .116.1 程序流程图 .116.2 系统界面设计 .156.2.1 用户注册登
8、录模块实现 .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 不是一种编程语言，而是一种描述性的超文本标记语言，用于描述超文本中的内容和结构。2.1.2 HTML
11、5 的优势(1)实用解决了跨浏览器的问题浏览器是网页的运行环境，因此浏览器的类型也是在网页设计时遇到的一个问题。为了保证设计出来的网页在不同的浏览器上效果一致，HTML5 会让问题简单化，具备友好的跨浏览器性能。(2)实用性和用户优先原则HTML5 标准的制定以用户优先为原则，一旦遇到无法解决的冲突时，规范就会把用户放到第一位，其次是网页的作者，再次是浏览器，接着是规范制定者,最后才考虑理论的纯粹性。因此，HTML5 内只封装了切实有用的功能，而没有封装复杂并没有实际意义的功能。(3)化繁为简的优势在设计 HTML5 时，严格遵循了“简单至上”的原则，主要体现在以下几个方面： 新的简化的字符集
12、声明； 新的简化的 DOCTYPE； 简单而强大的 HTML5 API； 以浏览器原生能力替代复杂的 JavaScript 代码2.2 CSS3 技术常见的网站、博客是使用文字图片展示内容的，其中文字是传递信息的主要手段。而美观大方的网站或者博客，需要使用 CSS 样式来修饰。在 CSS3 中定义了许多属性，用来美化和设计图片、设置文本的样式和粗细、设置网页背景本科毕业论文（设计）3和 HTML 元素边框样式、美化表格和表单，另外通过 CSS3 还可以设计出美观大方、具有不同外观和样式的超链接，从而增强网页样式特效。2.3 JavaScript 技术2.3.1 JavaScript 的特点Ja
13、vaScript 的特点主要有以下几个方法（1）语法简单，易学易用JavaScript 语法简单、结构松散，可以使用任何一种文本编辑器进行编写。JavaScript 程序运行时不需要编译成二进制代码，只需要支持 JavaScript 的浏览器进行解释。（2）解释性语言非脚本语言编写的程序通常需要经过“编写-编译-连接-运行”这四个步骤，而脚本语言 JavaScript 只需要经过“编写-运行”这两个步骤（3）跨平台由于 JavaScript 程序的运行依赖于浏览器，只要操作系统中安装有支持JavaScript 的浏览器即可，因此 JavaScript 与平台无关。（4）基于对象和事件驱动Jav
14、aScript 把 HTML 页面中的每个元素都当作一个对象来处理，并且这些对象都具有层次关系，像一棵倒立的树，这种关系被称为“文档对象模型（DOM） ”。在编写 JavaScript 代码时，会接触到大量的对象及对象的方法和属性。因为基于事件驱动，所以 JavaScript 可以捕捉到用户在浏览器中的操作，可以将原来静态的 HTML 页面变成可以与用户交互的动态页面。（5）用于客户端尽管 JavaScript 分为服务器端和客户端，但目前应用最多的还是客户端。2.3.2 JavaScript 的主要作用JavaScript 是目前 web 应用程序开发者使用最为广泛的客户端脚本编程语言，它不
15、仅用来开发交互式的 web 页面，还可将 HTML、XML 和 Java Applet、Flash 等 Web 对象有机的结合起来，使开发人员能够快速生成Internet 上使用的分布式应用程序。JavaScript 可以弥补 HTML 语言的缺陷，本科毕业论文（设计）4实现 web 页面客户端的动态效果，其主要作用如下： (1)动态改变页面内容HTML 语言是静态的，一旦编写，内容就无法改变。JavaScript 可以弥补这种不足，可以将内容动态的显示在页面中。（2）动态改变网页的外观JavaScript 通过修改网页元素的 CSS 样式，可以动态的改变网页的外观。例如，修改文本的颜色，大小
16、等属性，让图片的位置动态的改变等等。（3）验证表单数据为了提高网页的效率，用户在填写表单时，可以在客户端对数据进行合法性验证，验证成功才能提交到服务器上，进而减少了服务器的负担和网络带宽的压力。（4）响应事件JavaScript 是基于事件的语言，因此可以影响用户或浏览器产生的事件。只有事件产生时才会执行某段 JavaScript 代码，例如，当用户点击计算按钮时，程序才显示运行结果。2.4 数据库技术该系统网站的数据库采用 SQL Server 2005，它建立在 Microsoft Windows NT 平台，并提供强大的企业数据库管理功能。SQL Server 2005 是一个全面的数据
17、库平台，是一个满足客户/服务器(Client/Server)需求并且可扩充高性能的数据库管理系统。SQL Server 2005 数据库引擎为关系型数据和结构化数据提供了更安全可靠的存储功能，可以构建和管理用于业务的高可用和高性能的数据应用程序。此外 SQL Server 2005 还结合了分析、报表、集成和通知功能。3 美食网站需求分析及可行性研究3.1 需求分析本系统网站以饮食为基础，以菜谱为中心，并以零距离美食命名的。它与本科毕业论文（设计）5我们的生活息息相关，当今社会越来越多的人喜欢吃快餐，但快餐对身体并不好。在零距离美食网中可以学到日常生活中我们所忽视的东西，也可以学到一些家常菜的
18、做法，还可以上传自己的独门妙招与他人分享，让大家都体会到做菜的乐趣。本系统网站采用HTML5技术，依据Hbuild为开发平台，结合Photoshop和JavaScript技术设计一个小型美食网站。本系统实现了用户注册、登录功能、查询美食信息、添加购物车、对购物车里的美食进行修改、支付功能以及后台管理员可以发布美食菜品及其做法，实现信息共享从而达到人人都能和美食零距离接触的目的。(1)系统网站的主要需求有： 系统页面美观友好、系统架构清晰 系统可以实现动态式发布信息 系统可以提供多种菜品的信息及做法 系统可以提供用户留言板块，增强网站的互动性(2)对 web 用户的管理主要需求项目有： Web
19、用户可以完成注册信息 Web 用户在登录页面可以输入用户名和密码进入主页 Web 用户可以修改个人资料和登录密码 Web 用户可以在网上查找美食、分享美食以及订购美食 Web 用户可以留言板块留言，发表一些对美食的看法 Web 用户在完成操作后，可以退出登录系统3.2 可行性分析(1) 技术可行性HBuilder 是一种用于创建内容丰富的动态网站、移动 APP 开发的编码工具，HBuilder 支持 HTML5+规范，它使得 JavaScript 可以调用二维码、语音输入、摄像头、位置、陀螺仪.几十万原生 API！设计该网站系统时主要采用了HTML 5 + CSS 3 + JavaScript 技术。HTML 5 以 HTML 4 为基础，并且对 HTML 4 做了大量的修改。在 HTML 5 对 HTML 4 所做的各种修改中，其中最重大的一个修改就是为了使文档结构更加清晰，容易阅读，增加了许多新的结构元素。
