這篇發得有點晚了，實屬罪過！
以前高中月考的時候有幸進了一個學霸班坐了一個學霸的座位（應該是一位女學霸，桌子上面寫著：如果不是因為生氣而將事情變得更加嚴重，那么事情也不是那么的大了）
希望自己可以心情變得好起來，
這幾天的牢騷發完了，接下來說點有用的

一、完善登錄頁面的功能

添加注冊賬號和忘記密碼
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 從后端拿過來的

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行改路徑奧~

比如說我現在點擊甜甜圈，立馬就會跳轉

在這里插入圖片描述
這邊有點牛逼的是，我百度復制的超鏈接也有作用（哈哈哈哈哈，就連我自己都有點驚訝呢！），點擊商品的進入商品明細，點擊藍色的字體的時候，就可以進入百度頁面，

四、加入購物車

好了，重點壓軸出場了

<!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中，
				//需要的引數：userid
				
				var 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>

看代碼是可以理解的，這邊需要注意的一下是132行的代碼

這邊點擊+就會添加數量，反之價格會減少，如果以及－到0了，就直接洗掉這個商品
還有一個計算訂單的總價格
見圖
在這里插入圖片描述
頁面暫時有點小丑，待會過段時間優化一下！
哈哈哈

https://blog.csdn.net/hanhanwanghaha歡迎關注這個超級無敵可愛的人鴨，有什么問題留言私信皆可，看見必回！
創作不易，如有轉載，請注明出處

希望你我可以一直走在夢想的路上，即使身在低谷，也不忘前行

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/227556.html

標籤：其他

上一篇：ES6(這是我見過寫的最好的)!推薦

下一篇：打包后訪問頁面會請求兩次打包后的檔案，請問這是什么原因，有大佬能告知一下嗎

連接真機開發安卓(Android)移動app MUI框架添加購物車等——混合式開發（四）

目錄

一、完善登錄頁面的功能

二、商品串列

2.1之前的前端代碼

2.2通過js從后端拿到的資料

三、商品明細

四、加入購物車

連接真機開發安卓(Android)移動app MUI框架 添加購物車等——混合式開發（四）

目錄

一、完善登錄頁面的功能

二、商品串列

2.1之前的前端代碼

2.2通過js從后端拿到的資料

三、商品明細

四、加入購物車

連接真機開發安卓(Android)移動app MUI框架添加購物車等——混合式開發（四）