这篇发得有点晚了，实属罪过！
以前高中月考的时候有幸进了一个学霸班坐了一个学霸的座位（应该是一位女学霸，桌子上面写着：如果不是因为生气而将事情变得更加严重，那么事情也不是那么的大了）
希望自己可以心情变得好起来。
这几天的牢骚发完了，接下来说点有用的

第一部分：混合式开发（一）

第二部分：混合式开发（二）

第三部分：混合式开发（三）

一、完善登录页面的功能

添加注册账号和忘记密码
login.html

<!doctype html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /><style type="text/css"></style></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">登录</h1></header><div class="mui-content"><form class="mui-input-group"><div class="mui-input-row"><label>用户名</label><input type="text"  id="tbnusername" class="mui-input-clear" value="杰子" placeholder="用户名"></div><div class="mui-input-row"><label>密码</label><input type="text" id="tbnpassword" class="mui-input-clear" value="123" placeholder="密码"></div><div class="mui-input-row"><input value="登录" type="button"  class="mui-btn-block"  id="btnlogin"  /></div><div style="height: 50px; text-align: center; line-height: 50px;"><span id="btnreg">注册账号</span>|<span id="">忘记密码</span></div></form></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.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 vusername=document.getElementById("tbnusername").value;var vpassword=document.getElementById("tbnpassword").value;				var requrl="http://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(data==null||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 requrl="http://192.168.43.242:8080/SweetyManage/JavaApi";
localStorage.setItem("requrl",requrl);

ememememem…
忘记密码这块我后面再做哈哈哈

二、商品列表

2.1之前的前端代码

prolist.html

<!doctype html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /><style type="text/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></head><body><div class="mui-content"><div class="mui-scroll-wrapper"><div class="mui-scroll"><div class="photobox"><div class="item"><p><img src="imgs/swetty1.jpg"/></p><p>奶油蛋糕</p><p>￥5</p><p>产地：上海</p></div><div class="item"><p><img src="imgs/swetty1.jpg"/></p><p>奶油蛋糕</p><p>￥5</p><p>产地：上海</p></div><div class="item"><p><img src="imgs/swetty1.jpg"/></p><p>奶油蛋糕</p><p>￥5</p><p>产地：上海</p></div><div class="item"><p><img src="imgs/swetty1.jpg"/></p><p>奶油蛋糕</p><p>￥5</p><p>产地：上海</p></div><div class="item"><p><img src="imgs/swetty1.jpg"/></p><p>奶油蛋糕</p><p>￥5</p><p>产地：上海</p></div><div class="item"><p><img src="imgs/swetty1.jpg"/></p><p>奶油蛋糕</p><p>￥5</p><p>产地：上海</p></div></div></div></div></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.init()</script></body></html>

这是我手动加进去的静态的前端哈哈哈
在这里插入图片描述
下面这个是我通过 js 从后端拿过来的

https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
如有转载，请注明出处（如不注明，盗者必究）

2.2通过js从后端拿到的数据

prolist.html

<!doctype html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /><style type="text/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></head><body><div class="mui-content"><div class="mui-scroll-wrapper"><div class="mui-scroll"><div class="probox" id="itembox"></div></div></div></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.init();mui('.mui-scroll-wrapper').scroll({indicators: false, //是否显示滚动条deceleration:0.00006, //阻尼系数,系数越小滑动越灵敏bounce: true //是否启用回弹});mui.ready(function(){//页面加载完毕之后执行此处的代码var requrl=localStorage.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 i=0;i<data.length;i++){itemlisthtml+='<div class="item"  id="'+data[i].id+'">';itemlisthtml+='<p><img src="http://192.168.43.242:8080/SweetyManage/upload/'+data[i].imgurl+'"/></p>';itemlisthtml+='<p>'+data[i].proname+'</p>';itemlisthtml+='<p>￥:'+data[i].price+'</p>'//itemlisthtml+='<p>'+data[i].brief+'</p>';简介itemlisthtml+='</div>';}itembox.innerHTML=itemlisthtml;/*<div class="item"><p><img src="img/g-1.png"/></p><p>华为p40</p><p>￥:5999.00</p><p>5G手机</p></div>* */}});mui("#itembox").on("tap","div.item",function(){var currentid=this.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>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /><style type="text/css">.mui-content p{padding: 0 10px;}</style></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">商品明细</h1></header><div class="mui-content"><p><img src=""  id="proimg" style="width: 50%;margin: 0 auto;display: block;margin-top: 20px;"/> </p><p id="p1"></p><p id="p2"></p><p id="p3"></p><p id="p4"></p><p id="p5"></p><button type="button" class="mui-btn" id="btnaddtocar" style="margin: 0 auto;display: block; ">加入购物车</button></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.init();mui.plusReady(function(){var self = plus.webview.currentWebview();//获取到当前的webview.也就是获取到当前页面对象.var proid = self.proid;console.log(proid);var requrl=localStorage.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 picimgurl="http://192.168.43.242:8080/SweetyManage/upload/"+data.imgurl;document.getElementById("proimg").src=picimgurl;document.getElementById("p1").innerText=data.proname;document.getElementById("p2").innerHTML=data.address;document.getElementById("p3").innerHTML=data.price;document.getElementById("p4").innerHTML=data.brief;document.getElementById("p5").innerHTML=data.descriptions;	}});document.getElementById("btnaddtocar").addEventListener("tap",function(){var userid=localStorage.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>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /><style type="text/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></head><body><div class="mui-content"><div id="listbox"><ul id="itembox"><!--<li><img src="img/gou.png" class="propic"/><p style="padding-top: 15px;">华为5G手机</p><p>￥5888.00</p><div class="btnbox"><span>-</span><span>1</span><span>+</span></div></li>--></ul><p style="padding-left: 50px;padding-bottom: 20px;">总价：<span id="pricebox"></span></p></div><button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="gotoprolist">继续购物</button><button type="button" class="mui-btn mui-btn-blue mui-btn-block" id="gotopay">去结算</button><div id="userinfobox" class="hidden"><form class="mui-input-group"><div class="mui-input-row"><label>收货人</label><input type="text" class="mui-input-clear" placeholder="收货人"></div><div class="mui-input-row"><label>电话</label><input type="text" class="mui-input-clear" placeholder="电话"></div><div class="mui-input-row"><label>地址</label><input type="text" class="mui-input-clear" placeholder="地址"></div></form><button type="button" class="mui-btn mui-btn-blue mui-btn-block">确认下单</button></div></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.init();mui.ready(function(){cardatainit();});//初始化购物车里面的数据function cardatainit(){//查询当前登录app的用户在购物车中加入的商品。 把查询出来的数据绑定到ul中。//需要的参数：useridvar requrl=localStorage.getItem("requrl");var userid=localStorage.getItem("id");/*<li><img src="img/gou.png" class="propic"/><p style="padding-top: 15px;">华为5G手机</p><p>￥5888.00</p><div class="btnbox"><span>-</span><span>1</span><span>+</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 sumprice=0;for (var i=0;i<data.length;i++) {htmlstr+='<li>';htmlstr+='<img src="http://192.168.43.242:8080/SweetyManage/upload/'+data[i].imgurl+'" class="propic"/>';htmlstr+='<p style="padding-top: 15px;">'+data[i].proname+'</p>';htmlstr+='<p>￥'+data[i].price+'.00</p>';htmlstr+='<div class="btnbox" id="'+data[i].proid+'"><span class="btnjian">-</span><span class="numberbox">'+data[i].procount+'</span><span class="btnjia">+</span></div>';htmlstr+="</li>";sumprice +=parseInt(data[i].price)*parseInt(data[i].procount);//   单价*数量=小计  然后通过累加 把所有商品的价格累加起来 保存在sumprice中。 这里要注意，计算价格之前，要把单价和数量都转为数字。}document.getElementById("pricebox").innerText=sumprice;document.getElementById("itembox").innerHTML=htmlstr;}});				}//通过委托的方式给增加按钮绑定点击事件mui("#itembox").on("tap","span.btnjia",function(){var proid=this.parentNode.getAttribute("id");var userid=localStorage.getItem("id");var v=this.parentNode.querySelector(".numberbox").innerText;//获取该商品原来在购物车中的数量v=parseInt(v);v=v+1;var requrl=localStorage.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 proid=this.parentNode.getAttribute("id");var userid=localStorage.getItem("id");var v=this.parentNode.querySelector(".numberbox").innerText;//获取该商品原来在购物车中的数量v=parseInt(v);v=v-1;var requrl=localStorage.getItem("requrl");if(v<1){//如果购物车里面商品的数量小于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.msg=="ok"){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").className="show";});//点击继续购物按钮document.getElementById("gotoprolist").addEventListener("tap",function(){var main=plus.webview.getWebviewById("main.html");mui.fire(main,'goprolist');	});</script></body></html>