开发移动购物APP

1、ganquanzhong.top/shopForFutureGroupMUI开发移动APP购物APP目录TOC o 1-5 h z一、实训内容3 HYPERLINK l bookmark4 概述3浅谈HTML5发展3HTML5开发手机APP过去的劣势与当前的优势3认识Hbuilder开发工具及MUI框架4 HYPERLINK l bookmark6 系统功能介绍5基于Web的网络商城项目开发移动APP5系统功能说明5 HYPERLINK l bookmark10 系统架构和文件作用介绍6项目架构及说明6页面布局设计8系统功能的实现9移动APP后端实现9移动APP页面实现10调试发行打包14 H

2、YPERLINK l bookmark33 二、程序运行结果及结果分析152.0打包安装到Android系统上15系统首页15系统注册和登录页面16系统商品详情页17 HYPERLINK l bookmark39 商品分类18购物车18订单及收货信息19分享19 HYPERLINK l bookmark45 个人信息及其他20一、实训内容1.1概述浅谈HTML5发展未来App的市场呈现一片光明景象，而对于移动开发商来说，不同平台的应用则需要开发不同的App来支持，无论在更新及维护上都需要一定的成本。于是HTML5的WebApp,iOS、Android以及WindowsPhone的浏览器都对于h

3、tml5大部分特性的支持也更加突显HTML5在未来移动设备端的地位。Html5的特性在于对于开发者，可以更多地跨设备、跨平台使用。强大的跨平台性也为企业大大降低了开发成本、的技术门槛。丰富的标签体系，也大大降低了应用开发HTML5开发手机APP过去的HTML5，HTML5技术无法对硬件底层的功能进行调用。众多问题逼迫开发者只能用原生技术解决。原来的HTML52与流畅Android_1_具省类高级圮事本Xcode,Eclips巳ADT等专业IDEa具有7w个语法和API40W+AP1优势：.离线缓存；.音频视频自由嵌入，多媒体形式更为灵活；ganquanzhong.top/shopganquan

4、zhong.top/shop了与原生App了与原生App、Canvas绘图，提升移动平台的绘图能力；4、专为移动平台定制的表单元素。1.1.3认识Hbuilder开发工具及MUI框架性能：提升HTML5性能的手机端引擎，让侧滑菜单、下拉刷新等动态交互卡顿的问题得以解决;工具：HTML5开发IDE产品HBuilder,超快的编程利器;封装成跨平台的HTML5plus,。包括二维码、摇一摇、API,可以方便简单的编写，并且可跨平台。c)能力：把40万原生API封装成JavaScript,HTML5能力不足问题的Native.js技术;Native.js技术即在js中编写原生代码技术，突破浏览器的限

5、制。d)最接近原生体验的高性能框架：MUI,K,HTML5plusRuntime,简称5+Runtime，web引擎，除了支持标准HTML5外，还支持更多扩展的jsapi，使得js的能力不输于原生。5+Runtime内置于HBuilder,在真机运行、打包时自动挂载。如果说node.js把js的战火烧到了服务器端,那么Native.js把js战火烧到了原生应用战场。但我jsAPI,语法是js语法，APIHTML5App的性能低下,有webview自身的性能问题,也有前端框架的性能问题。HTML5!=传统浏览器，虽然编程语言还是HTML、Javascript、CSS,但发行方式绝不是传统网站那么

6、简单。HTML5应用的入口,反而很少是启动浏览器输入URL,AppC微信朋友圈)、以及搜索引擎、应用市场、广告联盟,到处都是它的入口。它的入口,比原生App更多。通过HBuilder、5+RuntimeMUI,能很好的解决了HTML5,ganquanzhong.top/shopganquanzhong.top/shop1.2系统功能介绍基于WebAPP移动电子商务目前还处于强劲增长趋势，传统互联网企业大部分已经向移动端转移。根据需求，该APP主要是实现的功能是将客户网站之前做过的网络商城网站的相应功能进行技术上的转移，将传统网页上的功能转移到相应的移动客户端。所有的相关需求通过需求文档的方式进

7、行确定。一个APP要具备的功能不仅仅是实现了它的功能，如果没有一个良好的用户接口，将对该APP的使用率大打折扣。用户体验主要体现在两个方面，一是用户感受到的软件的性能，比如操作的反应速度，另一方面是软件的界面，良好的界面能够感知良好的。由于之前开发过基于JavaEE开发的网络商城的项目，当时开发的使用SSM,HBuilder提供的MUI框架和js等框架，后端就是用基于JavaEE的SSM框架开发。因此可以使用同一后台，使用HBuilder的MUI框架+Vueshop移动APP。系统功能说明在线浏览商品。用户注册,用户可进,用户登陆,续操作。,完成用户商品搜索,点击搜索，系统商品详情查看,进入详

8、,商品加入购物车,订单支付,可以选择,1.3系统架构和文件作用介绍项目架构及说明前后端职责依旧纠缠不清。Velocity模板还是蛮强大的，变量、逻辑、宏等特性，依旧可以通过拿到的上下文变量来实现各种业务逻辑。这样，只要前端弱势一点，往往就会被后端要求在模板层写出不少业务代码。还有一个很大的灰色地带是Controller,页面路由等功能本应该是前端最关注的，但却是由后端来实现。Controller本身与Model往往也会纠缠不清，看了让人咬牙的代码经常会出现在Controller层。历史滚滚往前，2004年Gmail像风一样的女子来到人间，很快2005年Ajax正式提出，加上CDN开始大量用于静

9、态资源存储，于是出现了JavaScript王者归来的SPA（SinglePageApplication单页面应用）时代。ClientSidsBrowserSer/erSide工非常清看看的话HTMLCSSSeMceAppServer晰，前田田山关键AjaxJSP服务端的JSPJavaScript,类似接口。SpringMVC,这个时代开始出现浏览器端口移动端口的分层架构：使用HBuilder开发工具，和部分原生的JS构建页面，新建APP项目shop；MUI框架如图1.3.1-1所示。后台使用基于JavaEE的SSM框架开发后台，商城的管理后台没有做移动端还是PC端，如图1.3.1-2所示。sh

10、lkdldllkdldlJIEEEEEEE3NKKrNrKPNKNKkpKrc&fontsiconfontimagesimgunpackageuploadsaddres-hinfiilassess.htmlasscnrt.htirn!lbalance.htmilbuy.htmJdaiturohtiml扃CD-dcness.hlrr扃CD-sssesis.htniilolCDfcLy.htffnldCD-DfderhlmloluiyuHml扃incMnlmlinc?:efc=knlirlintegrsHml|olisthlmIcgin.hlrr也rr=nfesfcjson扃rrccerthtni

11、l0neniKiancshtnil0noie.hlnrlolcrc?r.htnl二口司L3.1-1shop项目移动端构建图-K，:郭主要傲驷小蚂1田com.gqw.shopEcmtirDlleT:团AdninussrControIIeir.ja/ajjCategonpCcrtrolerjava:团FironlCcrtrolerjavs:团InMertoryContulleT,j自：-JjPageConltrcIler.java:团ProdjrlCcrtrolerjavs:团UserCsntinol|=r?jafva：-JjVerFCodeServletjave田com.gqz.sho-p.Ti

12、Epper田com.gqz.shop.pojo田com.gqz.sho-p.iervice田com.gqz.shop.service.impl田com.gqz.&hop.jtil二appliceticnCcntextxniI目perties目pertes图131-2shop：项皿国SqlMapConfig.xTlJRESysienLibrarycom.sun.javacIk.wn；：1.3.2页面布局设计:国J2EE14Libraries：或ReferencedLibrsressign.html注册页面，用户首次使用时注册一个属于自己的账号；login.html可以使用PC端注册过的账号登录，

13、也可以使用在APP上注册的账号登录；index.html首页，主要包括轮播图，最新商品、热门商品；assort.html商品分类页面，通过商品的分类显示不同的上平；shopcar.html购物车页面，显示用户选购的商品及结算的功能；detail.html商品详情页面，轮播显示商品的图片、商品的详情细节及评论等内容；self.html用户个人中心，包括用户的订单、个人信息等；buy.html商品付款页面，将选中的页面结算付款，及填写用户收货地址等内容；1.4系统功能的实现web1.4.1移动APP后端实现 HYPERLINK http:/ganquanzhong.top/shop/getCate

14、gories http:/ganquanzhong.top/shop/getCategories HYPERLINK http:/ganquanzhong.top/shop/getProductPic http:/ganquanzhong.top/shop/getProductPic HYPERLINK http:/ganquanzhong.top/shop/getNewProduct http:/ganquanzhong.top/shop/getNewProduct HYPERLINK http:/ganquanzhong.top/shop/getHotProduct http:/ganqu

15、anzhong.top/shop/getHotProduct下面是部分的服务器的API接口，更多的API接口可以查看之前做的项目中的后端。首页主要显示商品的分类导航、搜索栏、轮播大图、热门商品、最新商品等。获蝙品分类藐鬼商髭院作为髓栏SuppressHarningrs(riuocheckedri)WxRequsstMapping|getCategoriesN)Re&ponseEody()publicListgetCategoriesHttpSessionsession)/将商品分类保存在的ssionListKCategiorycategporyList=(list)session,gietAt

16、tribute(，rcategoryList，r);Ja-,上,_L二,&Requestliappir.g(ir弊tFroductPic1)、&耍寅赢法.希5&ResponseBody()publicFagieInfogetEroductPicO!returnproductBervicegetFroductFic()&Requestltapping(irgietNewPrcduct)噩理聋好酉圆(iRespcnseBodyOpublicFagieInfogetNewProductO!returnproductBervicegetNewFroduct()0RequestMappinrCgetFr

17、cductsByNaineIrResponseEodyOpublicPageInfogetCateProductStringname,intpageTintpagesize)Stringcontent=W；,content=URLDecoder,decodeInanefr，utf01):翡科的瞄)catch(UnsuppcrtedELCoditigEiceptione)e.printstackltaceU:)returnprcductSemce.getFroductByajue(contenpage,pagesize);F蛹岭呼号皿PT疝冽搬靛修拄褪麻esponseEodyOputlicFag

18、ieInfogetCate?:oduct(iDtcidfintpage,intpageSize):ductService.getPrcductByCid(cidfpage,pagesize);e(IuestNappir.g(getProductsByNana-)才睡垓塞展轮衣室薮蓑宴直慧!妻esponseEody0putlicFagieInfogetCate?:oduct(Strinqname,intpage,intpagesize)：Stringcontent=r，;其他页面的APIcontent=URLDecoderJtde(naneFutf-8);/翩腼趣1.4.2:移动A即怵实现蛀口而

19、匕抨磔匕，”；:e.printStckTraceO:对html5的各个标签元素熟悉，孕tF1泌或期如开发所使用的框架基本结构，那匕鸿)：对于html5+的API,javascript前台与后台的通信。HTML5,html5+的相关API,Hbuilderapp,效的完成一款APP。由于整个项目的页面很多，报告内容篇幅的限制等；下面只给出页面的核心代码，详细的代码及说明请见项目文件夹。Index.html页面，移动购物APP的首页；主要包括轮播图（自动轮播从服务器获取的四张商品图片）、最新商品、热门商品；点击商品图片可以跳转到商品的详情页面。(divid=imleontaiiierdivid=m

20、ainclass-rui-clearfix)加1旭归喧橘(inputclass：sch-inpitmui-input-deartype=textname：id=placacla&s=,nui-btnnui-btn-primarysch-sibuithref=searchirapfl5点搬leic-start-(她itkllidgrcl居色向iwlider0id=productPic3href=f(proilu(ahref=fstart(divchs$=hoie-iteMg(ndsui-box1)(ingclass-hofie-irtitsrc-irg/hometitljpgalt=/Cdivd

21、ass-list-typelpli&t-puzzle小蒯一个墟T(divdass=sui-flex-vtflex-justify-sbaclass-boxhref=tap=gstDetail(NedProdict1pid)nX$rc=NewProdict1iragealt=|aclass-boxhref=Jtap=getDetail(NedProdict2pid)Xii$rc=NejProdut2iragealt=aclass：boxhref=Jtap=getDetail(NedProdict3.pid)Xii:src=NProduct3.iiiagealt=(i唱lass=hoiie-ift

22、itsrcing/hcmEtitiJpgalt=小新解镰tt楠翻门a麴一tifigclass：hofie-iiititsrc=ii/hofietit3Jpgalt=/tahref：Xingdassdbmargin-b-i5rc=iploads/UJpgnwidth：Malt=/M协divclass：fastion-plist(civchss=ii-CGl-xs-4v-for-lhotlteindexinHotProdudv-if=indene龈i族也2。(iiig一外(rtltetIm职alt=class：figurewidth：3?heigtit=126px阿邛tfet血侧工tetpid毗l

23、Epn洞)/轲)di心(civchss=ii-CGl-xs-4v-for-lhotlteindexinHotProdudv-if=inde)(=3龈i波也5。(iiig一外(rtltetIm职alt=class：figurewidth：3?heigtit=126px阿邛tfet血侧工tetpid(hotltemnpnane；挪di心(civchss=ii-CGl-xs-4v-for-lhotlteindexinHotProdudv-if=indene龈in皿(iiig一外(rtltetIm职alt=class：figurewidth：3?heigtit=126px阿邛tfet血侧工tetpid

24、(spancld$5=titstyle-cdorn辅1喇可时比仙网前迎卜场心(scripttype=text/j却招MiwiaritpreloadPaesididetaiLhtnl；urkdetail.Iitml,stylest叩:耶jbottoi：Apx1createdunction()nd,ilusHeady(tation()iigetKDN(http;/Mm聊qu加加口top他叩魅tProdittPid1function(data)|ue4productPkidnajindetf晤pradudPiE由ist;for(/ar1=1(index耻,po加tPit小噤h;M+)indexVdu

25、ctPici*inage=http:/Am嵋如quanzhontopri+inde:/consoleJ硼闻NMringify也也她E,HotPrMuct0)jupdated:fundion0varsliMiiObj=mii(ifslider);sliderMuiObjnslider(interval:W)；littp:/iMf犀nq啪址嘴.top/sliop/getHatProducfj7Tm典funetion(data)(irdexVue*HotProduct：datalistjfor(vari=(iiMe毗喧IfcrtProduct1愀|：i+)indeWue.Hotfrodneti.揄/

26、http:岫iiganquanzhong.top1tindexVue.瞅Producti.inagejLi.vardetailPage=null;variM则脾aVbe(el:4indeMContdinerj岫:jproduttPk:口N醐od毗:口HotPralurt:self.html个人信息，简单的显示一些个人信息；/ HYPERLINK http:/ganquanzhorg http:/ganquanzhorg.top/shop/userinfo获取个人信息ilusReady(function()mui.getJSON(1 HYPERLINK http:/ganquanzhong.top/shop/userlnfa1t http:/ganquanzhong.top/shop/userlnfa1tfunctLon(data)userVueuserInfa=data;/console.log(JSONistringify(userVUe.userinfo)j）其他的页面和绍几个）；H5plusindex.html,HTML5Plus移动App,简称5+App,是一种基于HTML、JS