基于JAVA的购物网站(毕业论文)

基于JAVA的购物网站(毕业论文)

1 引言

自从B2C购物出现在人们的视野中,电子商务就在全世界范围内受到了格外的关注,并且得到了快速的发展。从现实角度来瞧,目前购物网站的普遍用户就是购买者难以自己想要购买的商品甚至用户在耗费很大的精力与时间后即使找到了自己想要的产品,最后却由于其她原因而放弃购买。很多报道指出,推销商们普遍对目前的网络行销感到失望,尽管如此,电子商务无疑就是目前最好的在线商品展示的媒体与工具。然而,网上产品展示的目的不仅仅就是展示产品,而更重要的就是通过让客户更多地了解产品而提高产品的购买率。因此,购物网站目前所面临的最大挑战之一就就是网站的设计,如何使得网页能够有效地展示自己的产品,同时方便用户的使用,使用户以愉悦的心情选购称心如意的商品。

本系统的目的与意义就就是应上述挑战而尝试为用户提供一个操作简单方便的网上交易系统。利用本系统,用户可以自由地浏览商品,注册成为网站会员,选择商品加入自己的购物车,而后生成订单,实现网上购物。

2 系统应用的关键技术

2、1 EXTJS MVC的介绍

ExtJs 前台我分为了 model,store,view,controller层4层架构,对于model层 ,用于接收后台传入的Pojo封装成前台数据Model中,创建一个model需要define的一个继承于Ext、data、Model的一个类,其中关键不可少的配置项就是fields,例如

fields:[{ name:"id",type:"int",srotable:true},

{ name:"text",type:"string",srotable:true}]

其中name代表字段名称,type为字段类型,类型只有string、float、int、boolean、date、 auto(默认值, 意味着无convert方法)6种对应后台pojo,形成一条数据,而stroe层则就是数据集合,也就就是model的集合。开发时我们经常就是用代理的方式从后台获取一条json数据,形成stroe,如

proxy:{

type:"ajax", 基于JAVA的购物网站(毕业论文)

url:"、/category/combo_category、do",

reader:{

type:"json",

root:"rows"

},

writer:{

type:"json"

}

}

就是用ajax的代理方式从后台获取一个数据集,stroe还得指定您使用的model就是那个,model配置项就可以指定您要指定的Model类,用字符串的形式写上类名即可配置好stroe、这时候搭建主面板视图,主面板就是一个border布局,上方就是login信息以及系统名称,左边属性图,中部就是数据表格以及一些表单。完成的mvc架构还需要controller层,这时候我们要先建立一个app、js,内容如下:

Ext、onReady(function(){

Ext、QuickTips、init();//开启提示功能

Ext、Loader、setConfig({//动态加载js文件

enabled : true

});

Ext、application({

name : "core",//名称

appFolder : "、/core",//所在的目录

launch:function(){

Ext、create("Ext、container、Viewport",{

layout : "fit",

border : 0,

items : [{

xtype : "mainviewlayout"

}]

});

}, 基于JAVA的购物网站(毕业论文)

controllers : ["core、app、controller、MainController"]

});

});

我们用一个Viewport搭建系统主界面,其中items中放入的mainviewlayout就就是系统主视图的别名,通过这种方式可以直接加载mianviewlayout类到页面,

Cotrollers配置的则就是我们的控制器层,控制器层的声明也相当的简单,创建一个继承与Ext、app、controller的类,写一个初始化方法中的this、controller方法中则就是我们控制界面按钮效果的主要地方。我在搭建这套界面就是写了一个公用的加载其她控制器与页面视图的方法:

this、addFunItem=function(funInfo){

if(funInfo){

var mainView=funInfo、mainView;

var funPanel=mainView、down(funInfo、funViewXtype);

if(!funPanel){

self、application、getController(funInfo、funController)、init();

funPanel=Ext、create(funInfo、funViewName);

mainView、add(funPanel);

mainView、setActiveTab(funPanel);

}else{

mainView、setActiveTab(funPanel);

} } },

传入funInfo就是一个js对象,用来加载不同views,models,stores,实现点击左侧树形图,加载不同的数据表格表单树形等不同的数据展示效果、

2、2 数据表格的形成

ExtJS中的数据表格中的每一条数据对应的都就是Model,所有记录则就是一个数据集合,所以数据表格中我们肯定要配置的有stroe对象,为了形成数据表格中可以形成复选框多选的效果我们需要加入的配置项有

selModel:{

selType:"checkboxmodel" 基于JAVA的购物网站(毕业论文)

},

multiSelect:true,

使用的就是复选形式的选择模式,数据表格必不可少有colums,也就就是列模式,规范我们接收store数据形成表格的展现形式如:

columns:[

{text:"商品名称",dataIndex:"name",width:100}, ],

text表示的每列展示的名字,dataIndex则就是需要展示的字段,一般我们在生成一个数据表格的时候我们都会在表格头上加几个按钮,用来管理数据表格的增删改,这个功能实现只要用tbr里面放几个按钮,分别给上她们响应的rel属性,方便我们在控制器中查找,实现控制功能,常见的数据表格还会有分页展示,以及搜索框,

bbar:{

xtype:'pagingtoolbar',

store:'core、product、store、ProductStore',

dock:'bottom',

displayInfo:true

}

bbar中放入的就就是一个分页的组件,她也需要一个数据集合stroe,dock表示地定位的位置,而搜索框我们一般用一个触发器组件来形成,做一个前台的过滤效果即可。如

"->",

'按名称查询:',

{

xtype: 'triggerfield',

triggerCls: Ext、baseCSSPrefix + 'form-search-trigger',

listeners:{

"change":function(_this,_new,_old,_opt){

var _store = _this、ownerCt、ownerCt、getStore();

_store、clearFilter(false);

_store、filter("name",_new); } },

onTriggerClick: function() {

var _store = this、ownerCt、ownerCt、getStore();

_store、clearFilter(false); 基于JAVA的购物网站(毕业论文)

_store、filter("name",this、getValue());

}

},

这样简单的搜索功能我们就可以实现了。

2、3 树的形成

定义一个类继承于Ext、tree、Panel、本系统的主界面的树形使用的就是本地树,不同过后台生成,直接前台固定数据,生成的固定的树结构,树同样需要数据就有store的配置以及树的items配置主要配置的就就是树的各个节点,本系统每一个小菜单就就是一颗树,通过前面定义的加入新的视图与控制器的方法来加载不同的页面都需要传入树的节点信息。

2、4 数据库的连接

本系统数据库的连接使用的MyBatis框架的数据连接,用配置文件配置数据库连接属性,本次我没有使用外部属性文件,而就是直接使用配置的固定参数,先配置一个数据源 dataSource,让她直接指向类org、springframework、jdbc、datasource、DriverManagerDataSource,配置参数driverClassName的value为com、mysql、jdbc、Driver,

url为jdbc:mysqlL、、localhost:3306/lzl？characterEcoding=utf-8&useUnicode=true

在配置数据库访问账号密码,这样我们就与数据库连接上了。

2、5 系统的运行环境

本系统前端使用mvc模式的ExtJS4、1后台使用springmvc,spring,mybatis整合,使用的服务器就是tomcat7、0,在eclipse编译器下运行即可,操做系统 Windows 7,

在火狐浏览器下进行测试、

2、6 springmvc工作流程

1、 用户向服务器发送请求,请求被Spring 前端控制Servelt DispatcherServlet捕获;