基于jQuery的购酒商城的设计与实现
基于jQuery的购酒商城的设计与实现[20191207151822]
摘 要
随着酒的历史文化的发展，以及人们日益增长的物质文化需要，现如今的实体店并不能满足人们的需求，对于网上购酒商城的需要越来越迫切，在信息技术日新月异的今天，为了适应这种需求，开发出网上购酒商城。
现代社会对于网上购物的要求，不仅仅局限于网页浏览。本购酒商城，特意针对手机做出了相应的前台，让手机用户能够更舒适的购物。主要采用了jQuery Moblie +HTML5来实现手机的前台，jQuery +HTML5+JSP实现网页前台，SSH技术实现后台的相关数据的处理。
本次的购酒网站操作简洁，功能很齐全，流程很方便，又有一个很友好的界面，能让更多的用户更舒心的购买到自己喜欢的酒，支持多种搜索，能让用户更快捷的找到合自己需要的商品，也能让后台的管理员用户方便商品的管理，有很好的使用体验。
关键字:购酒商城jQueryMoblieHTML5JSPSSH
目 录
1.绪论 1
1.1课题来源 1
1.2课题研究的目的及意义 1
1.3课题的发展趋势 1
1.4课题研究的主要内容 1
2.技术介绍 3
2.1购酒商城的jQuery的技术概述 3
2.2购酒商城的HTML5移动开发技术概述 3
2.3购酒商城的MVC架构的技术概述 4
2.4购酒商城的SSH架构的技术概述 5
3.购酒商城的系统分析 6
3.1购酒商城的可行性分析 6
3.1.1技术可行性分析 6
3.1.2经济可行性分析 6
3.1.3操作可行性分析 6
3.2购酒商城的需求分析 6
3.2.1 购酒者的系统用例图 7
3.2.2 供应商的管理用例图 8
3.3购酒商城的主要的业务流程分析 9
3.4购酒商城的功能分析 11
3.5购酒商城的项目管理规划 11
4.数据库设计 12
4.1 E-R图 12
4.2逻辑设计 15
5.概要设计 20
5.1设计理念 20
5.1.1购酒商城的Logo设计 20
5.1.1购酒商城的网页色彩设计 20
5.2功能设计 21
5.2.1古韵酒都的网站前台功能设计 21
5.2.2古韵酒都的网站后台功能设计 22
6.系统详细设计 23
6.1系统的概念模型类图设计 23
6.2系统的架构设计 24
7.系统实现与使用说明 26
7.1手机前台的主要功能实现和使用手册 26
7.1.1手机前台登录模块 26
7.1.2手机前台注册模块 27
7.1.3手机前台的首页 28
7.1.4手机前台的商品列表展示 28
7.1.5手机前台的商品详细信息的展示 29
7.1.6手机前台的购物车的展示 30
7.1.7手机前台的订单页的展示 31
7.1.8手机前台的购物车及模拟付款实现代码 31
7.2网站前台的实现和使用说明 35
7.2.1网站的前后台登录界面 35
7.2.2网站的前台注册界面 35
7.2.3网站的前台首页界面展示 37
7.2.4网站的前台头部功能界面展示 38
7.2.5网站的前台酒列表界面展示 38
7.2.6网站的前台酒详情界面展示 39
7.2.7网站的前台购物车界面展示 40
7.2.8网站的前台模拟付款界面展示 40
7.2.9网站的前台模拟付款成功界面展示 41
7.2.10网站的前台我的资料界面展示 42
7.2.11网站的前台订单管理界面展示 42
7.2.12网站的前台评价界面展示 43
7.2.13网站的前台收藏界面展示 43
7.2.14网站的前台修改密码界面展示 44
7.2.15网站的前台商品展示代码实现 44
7.3后台管理的实现和使用说明 46
7.3.1后台酒中心界面展示 46
7.3.2后台会员设置界面展示 47
7.3.3后台订单管理界面展示 47
7.3.4后台统计报表界面展示 48
7.3.5后台个人中心界面展示 48
7.3.6酒的管理的代码实现 49
7.4实施中jQuery的主要功能介绍 51
总结与反思 52
参考文献 53
致谢 54
1.绪论
1.1课题来源
在中国酒的发展历史源远流长，是酒文化的发源地之一，也可以算的上是酒的故乡，当然也能说是世界上最早酿酒的国家之一。直至如今酒的文化及发展也从没有过停歇。我国的文化发展基本与酒文化发展是同步的。而且酒几乎是我国每个家庭的必备品，然而齐全的购酒实体店在现实生活中少之又少，所以购酒商城显得尤为重要。作为历史悠久的酒业，作为销量不断增加的卖酒业，我们必须跟上时代的步伐，如今我们呈现的正是现代的购酒商城。
1.2课题研究的目的及意义
本系统的主要目的是为了能让更多的人了解酒文化，并且能够花较少的精力金钱获得自己需要的酒。实现购酒流程的便捷的操作。系统提供了关于酒的分类，统计，搜索等功能，把酒的图片以及相关介绍有条理的组织起来，便于客户查找，尽可能快的完成订单，支持在线购买以及关于酒的评价为以后的客户提供一些建议，既方便了客户的购买也方便了供应商的生产和管理。
1.3课题的发展趋势
据相关报道说，更有业内人士称，日前酒类电商销量才仅仅占整个酒类市场的3-4个百分点，更有望在未来的几年内升至7-8个百分点。据统计分析，2012年我国网购酒类交易市场规模已达到38亿元，2013年增至60亿元，预计2014年有望达到130亿元。与此同时，众所周知电商直接面向个体消费群体，所以其价格远会远低于市面价格。想要维护消费者的权力，只要电商进货渠道正规，就有可能改变现有酒商的生存格局。
1.4课题研究的主要内容
本购酒商城是一个基于jQuery，采用MVC模式，并根据现有的网上购酒的现状而设计开发的网上购酒商城。本购酒商城主要实现的是网上购酒商城的基本功能，实现了整个关于购酒的基本操作，完成了客户购酒的基本流程，更为客户提供了网上购酒和手机购酒两种界面支持，以及相关的会员功能，也包括了供应商的后台管理功能的实现，是比较完整的实现了整个的购酒商城。
设计内容：
设计并实现基于jQuery的购酒商城，采用jQuery技术（包括jQuery Mobile技术、J2EE相关技术、SSH技术等）。
功能要求：主要包括三个功能界面：手机前台、网站前台和后台，其中手机前台的功能实现基本和网站前台一样，后台主要实现的是相关数据的一些增删改，是用于管理员对酒的管理的。
技术要求：
1）掌握Java开发语言，熟悉HTML5，以及jQuery Mobile技术，对移动开发有一定的认识；
2）掌握jsp、HTML、CSS，了解SSH框架，熟悉jQuery开发；
3）熟练的使用mysql数据库；
4）界面友好。
2.技术介绍
2.1购酒商城的jQuery的技术概述
jQuery简单来说就是一个javaScript文件，和任何外部的javaScript文件一样都是可以通过直接连接到jQuery文件所在的网站，直接引用的。jQuery的理念就是写的少做的多，能够简化很多javaScript代码。
jQuery的优点：
① 轻量级。jQuery非常的小，一般的jQuery架包引入到程序中只需要几十KB，但却有很多的功能，能实现很多界面的美化。
② 选择器很强大。jQuery能用于大多数选择器。
③ 对于DOM操作jQuery使用了出色的封装。jQuery封装了很多的DOM操作，让我们编写DOM操作相关程序的时候能够很方便，简洁的完成了各种复杂的操作，使得刚刚学习JavaScript的新手也能画出很美的界面。
④ 可靠的事件处理机制和完善的Ajax。jQuery的事件处理机制很强大，可以很可靠的处理事件，能够使用与光标移入移除等事件，对于jQuery里面的Ajax的操作也很方便，直接调用$.ajax函数通过连接地址和返回值实现界面的动态刷新。
⑤ jQuery还有一个很重要的优势就是开源，你可以根据自己的需要来改善jQuery，也可以让更多需要的人自由的使用它。
2.2购酒商城的HTML5移动开发技术概述
HTML5优势很强大。HTML5可以进行跨平台的使用。它有效的提高了用户的友好体验，它新加入的几个标签有利于开发人员的调用，新加入了一些有助于判别的属性，很方便我们的界面输入的判断，简化了很多的js代码，其实HTML5最大的优势是加入了很对的多媒体元素，虽然在我的程序中没有用到这些，但是我们还是不能不看到HTML5这方面的优势的，而且我相信在不久的将来HTML5将会被用于大量的移动应用程序和游戏。
当然HTML5 还存在着不足，在此次开发的过程中，一开始的时候用的是IE9，它对于HTML5的控件的支持并不是很好，所以有好多的HTML5的控件都不能很好的现实我们所用到的并不是他的最终版，所以对于HTML5编程语言还有一个致命的漏洞，它允许网站利用GB垃圾数据对用户展开攻击，使得短时间内的硬盘堵塞，这是它的缺陷，但是它的优点却能更多的为我们所用。
2.3购酒商城的MVC架构的技术概述
图2-1 古韵酒都的运行结构图
上图是本次购酒商城的运行结构图，本次购酒商城的主要采用了三层架构的形式，Hibernate架构主要通过Hibernate Mapping 的配置与实体类及模型层相关联，用来实现与数据库的关联，DAO层即接口层，用来定义操作，服务层用来调用DAO层的操作，Action用来处理界面请求，主要通过Struts来实现跳转，最后是视图层，也就是jsp或HTML5界面，用来接收用户的请求并把响应反馈给用户。这就是本次购酒商城的整个的运行的结构。及MVC架构与三大框架的结合。用于明确的区分输入、处理和输出，使得项目的进度能够更细分。
2.4购酒商城的SSH架构的技术概述
图2-2古韵酒都的系统架构图
上图是本次古韵酒都的网站实现的系统架构图，主要是客户端的请求到服务器的处理，最后到数据库的请求与更行，中间的处理流程主要是通过SSH架构来实现的通过Spring和Struts的配置来进行页面的处理，再到Hibernate来进行数据库的交互，从而进行数据库的更新与查找，实现本次的整个网站的数据交互。
Struts主要用户Action和界面的跳转，它有着自己的控制器，能够很有效的结合MVC模型和一些技术去实现模型层和视图层。它有效的处理了数据访问技术，让本次的数据访问变得很简单。
Spring是一个开源的框架，也是一个轻量级的开发框架，在购酒商城的实现中它主要就是用来管理应用对象的配置，我们可以把它看成一个容器，可以通过prototype即可配置原型来配置我们所需要传递的参数，用来保留每个实例之间的关联关系，我们更可以通过Spring的强大的注释功能来实现我们的事务注入，有利于我们对事务的管理，更有助于数据操作的安全性。
Hibernate是一个映射对象关系的框架 ，是开放源代码的。通过Hibernate架构技术，我们能够很方便的对数据库进行操作，方便了我们对数据库的增删改查。它有效的封装了jdbc使得我们的代码变得更简洁。让开发更对象化，有效的健壮了我们的代码使得我们代码的可移植性有了很大的提高。
摘 要
随着酒的历史文化的发展，以及人们日益增长的物质文化需要，现如今的实体店并不能满足人们的需求，对于网上购酒商城的需要越来越迫切，在信息技术日新月异的今天，为了适应这种需求，开发出网上购酒商城。
现代社会对于网上购物的要求，不仅仅局限于网页浏览。本购酒商城，特意针对手机做出了相应的前台，让手机用户能够更舒适的购物。主要采用了jQuery Moblie +HTML5来实现手机的前台，jQuery +HTML5+JSP实现网页前台，SSH技术实现后台的相关数据的处理。
本次的购酒网站操作简洁，功能很齐全，流程很方便，又有一个很友好的界面，能让更多的用户更舒心的购买到自己喜欢的酒，支持多种搜索，能让用户更快捷的找到合自己需要的商品，也能让后台的管理员用户方便商品的管理，有很好的使用体验。
关键字:购酒商城jQueryMoblieHTML5JSPSSH
目 录
1.绪论 1
1.1课题来源 1
1.2课题研究的目的及意义 1
1.3课题的发展趋势 1
1.4课题研究的主要内容 1
2.技术介绍 3
2.1购酒商城的jQuery的技术概述 3
2.2购酒商城的HTML5移动开发技术概述 3
2.3购酒商城的MVC架构的技术概述 4
2.4购酒商城的SSH架构的技术概述 5
3.购酒商城的系统分析 6
3.1购酒商城的可行性分析 6
3.1.1技术可行性分析 6
3.1.2经济可行性分析 6
3.1.3操作可行性分析 6
3.2购酒商城的需求分析 6
3.2.1 购酒者的系统用例图 7
3.2.2 供应商的管理用例图 8
3.3购酒商城的主要的业务流程分析 9
3.4购酒商城的功能分析 11
3.5购酒商城的项目管理规划 11
4.数据库设计 12
4.1 E-R图 12
4.2逻辑设计 15
5.概要设计 20
5.1设计理念 20
5.1.1购酒商城的Logo设计 20
5.1.1购酒商城的网页色彩设计 20
5.2功能设计 21
5.2.1古韵酒都的网站前台功能设计 21
5.2.2古韵酒都的网站后台功能设计 22
6.系统详细设计 23
6.1系统的概念模型类图设计 23
6.2系统的架构设计 24
7.系统实现与使用说明 26
7.1手机前台的主要功能实现和使用手册 26
7.1.1手机前台登录模块 26
7.1.2手机前台注册模块 27
7.1.3手机前台的首页 28
7.1.4手机前台的商品列表展示 28
7.1.5手机前台的商品详细信息的展示 29
7.1.6手机前台的购物车的展示 30
7.1.7手机前台的订单页的展示 31
7.1.8手机前台的购物车及模拟付款实现代码 31
7.2网站前台的实现和使用说明 35
7.2.1网站的前后台登录界面 35
7.2.2网站的前台注册界面 35
7.2.3网站的前台首页界面展示 37
7.2.4网站的前台头部功能界面展示 38
7.2.5网站的前台酒列表界面展示 38
7.2.6网站的前台酒详情界面展示 39
7.2.7网站的前台购物车界面展示 40
7.2.8网站的前台模拟付款界面展示 40
7.2.9网站的前台模拟付款成功界面展示 41
7.2.10网站的前台我的资料界面展示 42
7.2.11网站的前台订单管理界面展示 42
7.2.12网站的前台评价界面展示 43
7.2.13网站的前台收藏界面展示 43
7.2.14网站的前台修改密码界面展示 44
7.2.15网站的前台商品展示代码实现 44
7.3后台管理的实现和使用说明 46
7.3.1后台酒中心界面展示 46
7.3.2后台会员设置界面展示 47
7.3.3后台订单管理界面展示 47
7.3.4后台统计报表界面展示 48
7.3.5后台个人中心界面展示 48
7.3.6酒的管理的代码实现 49
7.4实施中jQuery的主要功能介绍 51
总结与反思 52
参考文献 53
致谢 54
1.绪论
1.1课题来源
在中国酒的发展历史源远流长，是酒文化的发源地之一，也可以算的上是酒的故乡，当然也能说是世界上最早酿酒的国家之一。直至如今酒的文化及发展也从没有过停歇。我国的文化发展基本与酒文化发展是同步的。而且酒几乎是我国每个家庭的必备品，然而齐全的购酒实体店在现实生活中少之又少，所以购酒商城显得尤为重要。作为历史悠久的酒业，作为销量不断增加的卖酒业，我们必须跟上时代的步伐，如今我们呈现的正是现代的购酒商城。
1.2课题研究的目的及意义
本系统的主要目的是为了能让更多的人了解酒文化，并且能够花较少的精力金钱获得自己需要的酒。实现购酒流程的便捷的操作。系统提供了关于酒的分类，统计，搜索等功能，把酒的图片以及相关介绍有条理的组织起来，便于客户查找，尽可能快的完成订单，支持在线购买以及关于酒的评价为以后的客户提供一些建议，既方便了客户的购买也方便了供应商的生产和管理。
1.3课题的发展趋势
据相关报道说，更有业内人士称，日前酒类电商销量才仅仅占整个酒类市场的3-4个百分点，更有望在未来的几年内升至7-8个百分点。据统计分析，2012年我国网购酒类交易市场规模已达到38亿元，2013年增至60亿元，预计2014年有望达到130亿元。与此同时，众所周知电商直接面向个体消费群体，所以其价格远会远低于市面价格。想要维护消费者的权力，只要电商进货渠道正规，就有可能改变现有酒商的生存格局。
1.4课题研究的主要内容
本购酒商城是一个基于jQuery，采用MVC模式，并根据现有的网上购酒的现状而设计开发的网上购酒商城。本购酒商城主要实现的是网上购酒商城的基本功能，实现了整个关于购酒的基本操作，完成了客户购酒的基本流程，更为客户提供了网上购酒和手机购酒两种界面支持，以及相关的会员功能，也包括了供应商的后台管理功能的实现，是比较完整的实现了整个的购酒商城。
设计内容：
设计并实现基于jQuery的购酒商城，采用jQuery技术（包括jQuery Mobile技术、J2EE相关技术、SSH技术等）。
功能要求：主要包括三个功能界面：手机前台、网站前台和后台，其中手机前台的功能实现基本和网站前台一样，后台主要实现的是相关数据的一些增删改，是用于管理员对酒的管理的。
技术要求：
1）掌握Java开发语言，熟悉HTML5，以及jQuery Mobile技术，对移动开发有一定的认识；
2）掌握jsp、HTML、CSS，了解SSH框架，熟悉jQuery开发；
3）熟练的使用mysql数据库；
4）界面友好。
2.技术介绍
2.1购酒商城的jQuery的技术概述
jQuery简单来说就是一个javaScript文件，和任何外部的javaScript文件一样都是可以通过直接连接到jQuery文件所在的网站，直接引用的。jQuery的理念就是写的少做的多，能够简化很多javaScript代码。
jQuery的优点：
① 轻量级。jQuery非常的小，一般的jQuery架包引入到程序中只需要几十KB，但却有很多的功能，能实现很多界面的美化。
② 选择器很强大。jQuery能用于大多数选择器。
③ 对于DOM操作jQuery使用了出色的封装。jQuery封装了很多的DOM操作，让我们编写DOM操作相关程序的时候能够很方便，简洁的完成了各种复杂的操作，使得刚刚学习JavaScript的新手也能画出很美的界面。
④ 可靠的事件处理机制和完善的Ajax。jQuery的事件处理机制很强大，可以很可靠的处理事件，能够使用与光标移入移除等事件，对于jQuery里面的Ajax的操作也很方便，直接调用$.ajax函数通过连接地址和返回值实现界面的动态刷新。
⑤ jQuery还有一个很重要的优势就是开源，你可以根据自己的需要来改善jQuery，也可以让更多需要的人自由的使用它。
2.2购酒商城的HTML5移动开发技术概述
HTML5优势很强大。HTML5可以进行跨平台的使用。它有效的提高了用户的友好体验，它新加入的几个标签有利于开发人员的调用，新加入了一些有助于判别的属性，很方便我们的界面输入的判断，简化了很多的js代码，其实HTML5最大的优势是加入了很对的多媒体元素，虽然在我的程序中没有用到这些，但是我们还是不能不看到HTML5这方面的优势的，而且我相信在不久的将来HTML5将会被用于大量的移动应用程序和游戏。
当然HTML5 还存在着不足，在此次开发的过程中，一开始的时候用的是IE9，它对于HTML5的控件的支持并不是很好，所以有好多的HTML5的控件都不能很好的现实我们所用到的并不是他的最终版，所以对于HTML5编程语言还有一个致命的漏洞，它允许网站利用GB垃圾数据对用户展开攻击，使得短时间内的硬盘堵塞，这是它的缺陷，但是它的优点却能更多的为我们所用。
2.3购酒商城的MVC架构的技术概述
图2-1 古韵酒都的运行结构图
上图是本次购酒商城的运行结构图，本次购酒商城的主要采用了三层架构的形式，Hibernate架构主要通过Hibernate Mapping 的配置与实体类及模型层相关联，用来实现与数据库的关联，DAO层即接口层，用来定义操作，服务层用来调用DAO层的操作，Action用来处理界面请求，主要通过Struts来实现跳转，最后是视图层，也就是jsp或HTML5界面，用来接收用户的请求并把响应反馈给用户。这就是本次购酒商城的整个的运行的结构。及MVC架构与三大框架的结合。用于明确的区分输入、处理和输出，使得项目的进度能够更细分。
2.4购酒商城的SSH架构的技术概述
图2-2古韵酒都的系统架构图
上图是本次古韵酒都的网站实现的系统架构图，主要是客户端的请求到服务器的处理，最后到数据库的请求与更行，中间的处理流程主要是通过SSH架构来实现的通过Spring和Struts的配置来进行页面的处理，再到Hibernate来进行数据库的交互，从而进行数据库的更新与查找，实现本次的整个网站的数据交互。
Struts主要用户Action和界面的跳转，它有着自己的控制器，能够很有效的结合MVC模型和一些技术去实现模型层和视图层。它有效的处理了数据访问技术，让本次的数据访问变得很简单。
Spring是一个开源的框架，也是一个轻量级的开发框架，在购酒商城的实现中它主要就是用来管理应用对象的配置，我们可以把它看成一个容器，可以通过prototype即可配置原型
Hibernate是一个映射对象
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/qrs/177.html
