搜索
南南昌航空大学科技学院2016届学士学位论文11引言自从B2C购物出现在人们的视野中，电子商务就在全世界范围内受到了格外的关注，并且得到了快速的发展。从现实角度来看，目前购物网站的普遍用户是购买者难以自己想要购买的商品甚至用户在耗费很大的精力和时间后即使找到了自己想要的产品，最后却由于其他原因而放弃购买。很多报道指出，推销商们普遍对目前的网络行销感到失望，尽管如此，电子商务无疑是目前最好的在线商品展示的媒体和工具。然而，网上产品展示的目的不仅仅是展示产品，而更重要的是通过让客户更多地了解产品而提高产品的购买率。因此，购物网站目前所面临的最大挑战之一就是网站的设计，如何使得网页能够有效地展示自己的产品，同时方便用户的使用，使用户以愉悦的心情选购称心如意的商品。本系统的目的和意义就是应上述挑战而尝试为用户提供一个操作简单方便的网上交易系统。利用本系统，用户可以自由地浏览商品，注册成为网站会员，选择商品加入自己的购物车，而后生成订单，实现网上购物。南南昌航空大学科技学院2016届学士学位论文22系统应用的关键技术2.1EXTJSMVC的介绍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,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,内容如下:南南昌航空大学科技学院2016届学士学位论文3Ext.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}]});},controllers:[core.app.controller.MainController]});});我们用一个Viewport搭建系统主界面，其中items中放入的mainviewlayout就是系统主视图的别名,通过这种方式可以直接加载mianviewlayout类到页面,Cotrollers配置的则是我们的控制器层，控制器层的声明也相当的简单,创建一个继承与Ext.app.controller的类,写一个初始化方法中的this.controller方法中则是我们控制界面按钮效果的主要地方。我在搭建这套界面是写了一个公用的加载其他控制器和页面视图的方法:this.addFunItem=function(funInfo){if(funInfo){南南昌航空大学科技学院2016届学士学位论文4varmainView=funInfo.mainView;varfunPanel=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},multiSelect:true,使用的是复选形式的选择模式,数据表格必不可少有colums，也就是列模式，规范我们接收store数据形成表格的展现形式如:columns:[{text:商品名称,dataIndex:name,width:100},],text表示的每列展示的名字,dataIndex则是需要展示的字段，一般我们在生成一个数据表格的时候我们都会在表格头上加几个按钮，用来管理数据表格的增删改,这个功能实现只要用tbr里面放几个按钮,分别给上他们响应的rel属性，方便我们在控制器中查找，实现控制功能，常见的数据表格还会有分页展示，以及搜索框，南南昌航空大学科技学院2016届学士学位论文5bbar:{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);_store.filter(name,this.getValue());}},这样简单的搜索功能我们就可以实现了。2.3树的形成定义一个类继承于Ext.tree.Panel.本系统的主界面的树形使用的是本地树,不同过后台生成，直接前台固定数据，生成的固定的树结构，树同样需要数据就有store的配置以及树的items配置主要配置的就是树的各个节点，本系统每一个小菜单就是南南昌航空大学科技学院2016届学士学位论文6一颗树，通过前面定义的加入新的视图和控制器的方法来加载不同的页面都需要传入树的节点信息。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编译器下运行即可，操做系统Windows7，在火狐浏览器下进行测试.2.6springmvc工作流程1.用户向服务器发送请求，请求被Spring前端控制ServeltDispatcherServlet捕获；2.DispatcherServlet对请求URL进行解析，得到请求资源标识符（URI）。然后根据该URI，调用HandlerMapping获得该Handler配置的所有相关的对象（包括Handler对象以及Handler对象对应的拦截器），最后以HandlerExecutionChain对象的形式返回；3.DispatcherServlet根据获得的Handler，选择一个合适的HandlerAdapter。（附注：如果成功获得HandlerAdapter后，此时将开始执行拦截器的preHandler(...)方法）4.提取Request中的模型数据，填充Handler入参，开始执行Handler（Controller)。在填充Handler的入参过程中，根据你的配置，Spring将帮你做一些额外的工作：HttpMessageConveter：将请求消息（如Json、xml等数据）转换成一个对象，将对象转换为指定的响应信息数据转换：对请求消息进行数据转换。如String转换成Integer、Double等南南昌航空大学科技学院2016届学士学位论文7数据根式化：对请求消息进行数据格式化。如将字符串转换成格式化数字或格式化日期等数据验证：验证数据的有效性（长度、格式等），验证结果存储到BindingResult或Error中5.Handler执行完成后，向DispatcherServlet返回一个ModelAndView对象；6.根据返回的ModelAndView，选择一个适合的ViewResolver（必须是已经注册到Spring容器中的ViewResolver)返回给DispatcherServlet；7.ViewResolver结合Model和View，来渲染视图8.将渲染结果返回给客户端。2.7spring依赖注入，控制反转IoC,即控制反转。他使程序组件或类之间尽量形成一种松耦合结构，开发者在使用类的实例之前，需要先创建对象的实例。但是IoC将创建实例的任务交给IoC容器，这样开发应用代码时只需要直接使用类的实例，这就是IoC。通常用一个好莱坞原则（请不要打电话给我，我会打电话给你。）来比喻这种控制反转的关系。依赖注入有3种类型注入，spring支持2种，setter注入和构造器注入，在项目中我使用的是注解方式的注入，在配置文件中配置了com.lzl包下的类自动注入到容器中，在我们需要用到这些类的时候，我们只需声明该类，然后使用一个@autowired注入想要使用的类，其中控制器我们使用的Controller注解标识为控制器，业务逻辑层我们使用的service注解。这样spring容器就能管理好我们的类。2.8s