济南网站推广优化外包,上海发布官网首页,上海传媒公司李健,校园网上超市网站建设战略规划这篇发得有点晚了#xff0c;实属罪过#xff01; 以前高中月考的时候有幸进了一个学霸班坐了一个学霸的座位#xff08;应该是一位女学霸#xff0c;桌子上面写着#xff1a;如果不是因为生气而将事情变得更加严重#xff0c;那么事情也不是那么的大了#xff09; 希望…这篇发得有点晚了实属罪过 以前高中月考的时候有幸进了一个学霸班坐了一个学霸的座位应该是一位女学霸桌子上面写着如果不是因为生气而将事情变得更加严重那么事情也不是那么的大了 希望自己可以心情变得好起来。 这几天的牢骚发完了接下来说点有用的
第一部分混合式开发一
第二部分混合式开发二
第三部分混合式开发三
目录一、完善登录页面的功能二、商品列表2.1之前的前端代码2.2通过js从后端拿到的数据三、商品明细四、加入购物车一、完善登录页面的功能
添加注册账号和忘记密码 login.html
!doctype html
htmlheadmeta charsetUTF-8title/titlemeta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /link hrefcss/mui.min.css relstylesheet /style typetext/css/style/headbodyheader classmui-bar mui-bar-nava classmui-action-back mui-icon mui-icon-left-nav mui-pull-left/ah1 classmui-title登录/h1/headerdiv classmui-contentform classmui-input-groupdiv classmui-input-rowlabel用户名/labelinput typetext idtbnusername classmui-input-clear value杰子 placeholder用户名/divdiv classmui-input-rowlabel密码/labelinput typetext idtbnpassword classmui-input-clear value123 placeholder密码/divdiv classmui-input-rowinput value登录 typebutton classmui-btn-block idbtnlogin //divdiv styleheight: 50px; text-align: center; line-height: 50px;span idbtnreg注册账号/span|span id忘记密码/span/div/form/divscript srcjs/mui.min.js/scriptscript typetext/javascriptmui.init();document.getElementById(btnreg).addEventListener(tap,function(){console.log(11);mui.openWindow({url:reg.html,id:reg.html});});document.getElementById(btnlogin).addEventListener(tap,function(){var vusernamedocument.getElementById(tbnusername).value;var vpassworddocument.getElementById(tbnpassword).value; var requrlhttp://192.168.43.242:8080/SweetyManage/JavaApi;localStorage.setItem(requrl,requrl);mui.ajax(requrl,{data:{rnum:2,username:vusername,password:vpassword},dataType:json,//服务器返回json格式数据type:post,//HTTP请求类型timeout:10000,//超时时间设置为10秒headers:{Content-Type:application/x-www-form-urlencoded},success:function(data){console.log(JSON.stringify(data));if(datanull||data){mui.toast(用户名或者密码错误!);}else{console.log(data[0].id);mui.toast(登录成功!);localStorage.setItem(id,data[0].id);mui.openWindow({url:main.html,id:main});} }});});/script/body/html这里有个点需要注意一下的是 将http://192.168.43.242:8080/SweetyManage/JavaApi存储到requrl中
后面的reg.html和proview.html等都可直接调用localStorage中的requrl
var requrlhttp://192.168.43.242:8080/SweetyManage/JavaApi;
localStorage.setItem(requrl,requrl);ememememem… 忘记密码这块我后面再做哈哈哈
二、商品列表
2.1之前的前端代码
prolist.html
!doctype html
htmlheadmeta charsetUTF-8title/titlemeta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /link hrefcss/mui.min.css relstylesheet /style typetext/css.item{width: calc(50% - 12px);height: 280px;border: 1px solid #CCCCCC;float: left;margin-top: 10px;margin-left:10px;border-radius: 5px;}.item img{width: 100%;height: 200px;}.item p{line-height: 10px;text-align: center;}/style/headbodydiv classmui-contentdiv classmui-scroll-wrapperdiv classmui-scrolldiv classphotoboxdiv classitempimg srcimgs/swetty1.jpg//pp奶油蛋糕/pp5/pp产地上海/p/divdiv classitempimg srcimgs/swetty1.jpg//pp奶油蛋糕/pp5/pp产地上海/p/divdiv classitempimg srcimgs/swetty1.jpg//pp奶油蛋糕/pp5/pp产地上海/p/divdiv classitempimg srcimgs/swetty1.jpg//pp奶油蛋糕/pp5/pp产地上海/p/divdiv classitempimg srcimgs/swetty1.jpg//pp奶油蛋糕/pp5/pp产地上海/p/divdiv classitempimg srcimgs/swetty1.jpg//pp奶油蛋糕/pp5/pp产地上海/p/div/div/div/div/divscript srcjs/mui.min.js/scriptscript typetext/javascriptmui.init()/script/body/html这是我手动加进去的静态的前端哈哈哈 下面这个是我通过 js 从后端拿过来的 https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭 欢迎您的关注 欢迎关注微信公众号宝藏女孩的成长日记 如有转载请注明出处如不注明盗者必究 2.2通过js从后端拿到的数据
prolist.html
!doctype html
htmlheadmeta charsetUTF-8title/titlemeta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /link hrefcss/mui.min.css relstylesheet /style typetext/css.item{width:calc(50% - 12px);height: 260px;border: solid 1px #ccc;float:left;margin-top: 10px;margin-left:10px;border-radius: 5px;}.item img{width: 100%;height: 200px;}.item p{line-height:10px;text-align: center;}/style/headbodydiv classmui-contentdiv classmui-scroll-wrapperdiv classmui-scrolldiv classprobox iditembox/div/div/div/divscript srcjs/mui.min.js/scriptscript typetext/javascriptmui.init();mui(.mui-scroll-wrapper).scroll({indicators: false, //是否显示滚动条deceleration:0.00006, //阻尼系数,系数越小滑动越灵敏bounce: true //是否启用回弹});mui.ready(function(){//页面加载完毕之后执行此处的代码var requrllocalStorage.getItem(requrl); //从localStorage中获取接口地址console.log(requrl);mui.ajax(requrl,{data:{rnum:3},dataType:json,//服务器返回json格式数据type:post,//HTTP请求类型timeout:10000,//超时时间设置为10秒headers:{Content-Type:application/x-www-form-urlencoded},success:function(data){var itembox document.getElementById(itembox);console.log(JSON.stringify(data));var itemlisthtml;for(var i0;idata.length;i){itemlisthtmldiv classitem iddata[i].id;itemlisthtmlpimg srchttp://192.168.43.242:8080/SweetyManage/upload/data[i].imgurl//p;itemlisthtmlpdata[i].proname/p;itemlisthtmlp:data[i].price/p//itemlisthtmlpdata[i].brief/p;简介itemlisthtml/div;}itembox.innerHTMLitemlisthtml;/*div classitempimg srcimg/g-1.png//pp华为p40/pp:5999.00/pp5G手机/p/div* */}});mui(#itembox).on(tap,div.item,function(){var currentidthis.id;console.log(currentid);mui.openWindow({url:proview.html,id:proview.html,extras:{proid:currentid}});});}); /script/body/html记得在第75行改路径奥~
得到的效果就是这样子的 这涉及到后端的东西之后我会把后端的代码更新上传最后项目完成的时候再全部更新上传 这是前几天添加的一些商品看起来好好吃哈哈不过网页版看起来有点模糊在移动端还是可好看啦
三、商品明细
在商品列表中随便点击一个商品就可以看见关于它的详细信息。 新建一个proview.html代表商品明细 proview.html
!doctype html
htmlheadmeta charsetUTF-8title/titlemeta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /link hrefcss/mui.min.css relstylesheet /style typetext/css.mui-content p{padding: 0 10px;}/style/headbodyheader classmui-bar mui-bar-nava classmui-action-back mui-icon mui-icon-left-nav mui-pull-left/ah1 classmui-title商品明细/h1/headerdiv classmui-contentpimg src idproimg stylewidth: 50%;margin: 0 auto;display: block;margin-top: 20px;/ /pp idp1/pp idp2/pp idp3/pp idp4/pp idp5/pbutton typebutton classmui-btn idbtnaddtocar stylemargin: 0 auto;display: block; 加入购物车/button/divscript srcjs/mui.min.js/scriptscript typetext/javascriptmui.init();mui.plusReady(function(){var self plus.webview.currentWebview();//获取到当前的webview.也就是获取到当前页面对象.var proid self.proid;console.log(proid);var requrllocalStorage.getItem(requrl);mui.ajax(requrl,{data:{rnum:4,id:proid},dataType:json,//服务器返回json格式数据type:post,//HTTP请求类型timeout:10000,//超时时间设置为10秒headers:{Content-Type:application/x-www-form-urlencoded},success:function(data){console.log(JSON.stringify(data));var picimgurlhttp://192.168.43.242:8080/SweetyManage/upload/data.imgurl;document.getElementById(proimg).srcpicimgurl;document.getElementById(p1).innerTextdata.proname;document.getElementById(p2).innerHTMLdata.address;document.getElementById(p3).innerHTMLdata.price;document.getElementById(p4).innerHTMLdata.brief;document.getElementById(p5).innerHTMLdata.descriptions; }});document.getElementById(btnaddtocar).addEventListener(tap,function(){var useridlocalStorage.getItem(id);mui.ajax(requrl,{data:{rnum:5,userid:userid,proid:proid},dataType:json,//服务器返回json格式数据type:post,//HTTP请求类型timeout:10000,//超时时间设置为10秒headers:{Content-Type:application/x-www-form-urlencoded},success:function(data){mui.back();}});});});/script/body/html记得在第54行改路径奥~
比如说我现在点击甜甜圈立马就会跳转 这边有点牛逼的是我百度复制的超链接也有作用哈哈哈哈哈就连我自己都有点惊讶呢点击商品的进入商品明细点击蓝色的字体的时候就可以进入百度页面。
四、加入购物车
好了重点压轴出场了 car.html
!doctype html
htmlheadmeta charsetUTF-8title/titlemeta nameviewport contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno /link hrefcss/mui.min.css relstylesheet /style typetext/css#listbox{background-color: #fff;}#listbox ul{list-style: none;}#listbox ul li{height: 80px;border-bottom: solid 1px #eee;position: relative;}#listbox ul li img.propic{width:70px;height:70px;float: left;}#listbox ul li span{display: block;border: solid 1px #eee;width:28px;height:28px;text-align: center;line-height:28px;float: left;}.btnbox{width: 90px;height: 30px;position: absolute;right: 5px;top:20px;}.hidden{display: none;}.show{display: block;}/style/headbodydiv classmui-contentdiv idlistboxul iditembox!--liimg srcimg/gou.png classpropic/p stylepadding-top: 15px;华为5G手机/pp5888.00/pdiv classbtnboxspan-/spanspan1/spanspan/span/div/li--/ulp stylepadding-left: 50px;padding-bottom: 20px;总价span idpricebox/span/p/divbutton typebutton classmui-btn mui-btn-blue mui-btn-block idgotoprolist继续购物/buttonbutton typebutton classmui-btn mui-btn-blue mui-btn-block idgotopay去结算/buttondiv iduserinfobox classhiddenform classmui-input-groupdiv classmui-input-rowlabel收货人/labelinput typetext classmui-input-clear placeholder收货人/divdiv classmui-input-rowlabel电话/labelinput typetext classmui-input-clear placeholder电话/divdiv classmui-input-rowlabel地址/labelinput typetext classmui-input-clear placeholder地址/div/formbutton typebutton classmui-btn mui-btn-blue mui-btn-block确认下单/button/div/divscript srcjs/mui.min.js/scriptscript typetext/javascriptmui.init();mui.ready(function(){cardatainit();});//初始化购物车里面的数据function cardatainit(){//查询当前登录app的用户在购物车中加入的商品。 把查询出来的数据绑定到ul中。//需要的参数useridvar requrllocalStorage.getItem(requrl);var useridlocalStorage.getItem(id);/*liimg srcimg/gou.png classpropic/p stylepadding-top: 15px;华为5G手机/pp5888.00/pdiv classbtnboxspan-/spanspan1/spanspan/span/div/li*/mui.ajax(requrl,{data:{rnum:6,userid:userid },dataType:json,//服务器返回json格式数据type:post,//HTTP请求类型timeout:10000,//超时时间设置为10秒headers:{Content-Type:application/x-www-form-urlencoded},success:function(data){console.log(JSON.stringify(data));var htmlstr;var sumprice0;for (var i0;idata.length;i) {htmlstrli;htmlstrimg srchttp://192.168.43.242:8080/SweetyManage/upload/data[i].imgurl classpropic/;htmlstrp stylepadding-top: 15px;data[i].proname/p;htmlstrpdata[i].price.00/p;htmlstrdiv classbtnbox iddata[i].proidspan classbtnjian-/spanspan classnumberboxdata[i].procount/spanspan classbtnjia/span/div;htmlstr/li;sumprice parseInt(data[i].price)*parseInt(data[i].procount);// 单价*数量小计 然后通过累加 把所有商品的价格累加起来 保存在sumprice中。 这里要注意计算价格之前要把单价和数量都转为数字。}document.getElementById(pricebox).innerTextsumprice;document.getElementById(itembox).innerHTMLhtmlstr;}}); }//通过委托的方式给增加按钮绑定点击事件mui(#itembox).on(tap,span.btnjia,function(){var proidthis.parentNode.getAttribute(id);var useridlocalStorage.getItem(id);var vthis.parentNode.querySelector(.numberbox).innerText;//获取该商品原来在购物车中的数量vparseInt(v);vv1;var requrllocalStorage.getItem(requrl);mui.ajax(requrl,{data:{rnum:8,userid:userid,id:proid,countvalue:v},dataType:json,//服务器返回json格式数据type:post,//HTTP请求类型timeout:10000,//超时时间设置为10秒headers:{Content-Type:application/x-www-form-urlencoded},success:function(data){cardatainit();}}); });mui(#itembox).on(tap,span.btnjian,function(){var proidthis.parentNode.getAttribute(id);var useridlocalStorage.getItem(id);var vthis.parentNode.querySelector(.numberbox).innerText;//获取该商品原来在购物车中的数量vparseInt(v);vv-1;var requrllocalStorage.getItem(requrl);if(v1){//如果购物车里面商品的数量小于1,就需要删除该商品mui.ajax(requrl,{data:{rnum:7,userid:userid,id:proid},dataType:json,//服务器返回json格式数据type:post,//HTTP请求类型timeout:10000,//超时时间设置为10秒headers:{Content-Type:application/x-www-form-urlencoded},success:function(data){if(data.msgok){mui.toast(删除成功!);}cardatainit();}}); }else{//如果商品的数量不小于1只需要将该商品的数量减少1就可以了。mui.ajax(requrl,{data:{rnum:8,userid:userid,id:proid,countvalue:v},dataType:json,//服务器返回json格式数据type:post,//HTTP请求类型timeout:10000,//超时时间设置为10秒headers:{Content-Type:application/x-www-form-urlencoded},success:function(data){cardatainit();}}); }});//点击去结算按钮document.getElementById(gotopay).addEventListener(tap,function(){document.getElementById(userinfobox).classNameshow;});//点击继续购物按钮document.getElementById(gotoprolist).addEventListener(tap,function(){var mainplus.webview.getWebviewById(main.html);mui.fire(main,goprolist); });/script/body/html看代码是可以理解的这边需要注意的一下是132行的代码
这边点击就会添加数量反之价格会减少如果以及到0了就直接删除这个商品 还有一个计算订单的总价格 见图 页面暂时有点小丑待会过段时间优化一下 哈哈哈
https://blog.csdn.net/hanhanwanghaha欢迎关注这个超级无敌可爱的人鸭有什么问题留言私信皆可看见必回 创作不易如有转载请注明出处
希望你我可以一直走在梦想的路上即使身在低谷也不忘前行
