Blog.csdn.net/hanhanwangh… Treasure Girl welcomes your attention! Welcome to wechat public account: Treasure girl’s growing diary if reproduced, please indicate the source (if not indicated, the thief will investigate)

We have to do our best, but at the same time we have no hope. Whatever you do, act like it’s the most important thing in the world, but know that it doesn’t matter. I will earn a lot of money, I will read a lot of books, I will walk a lot of roads, I will light up your whole world.

Finally to come out from the sad day, the mood is as good as the weather in Chongqing today! There is a new feeling, long learning road, heavy and long way to go, mutual encouragement! From a literary programmer, let’s get to the point.

Today’s task is to implement the registration login and product list functions! \

Import the back-end project

Back-end code and database website: github.com/hanhanwangh…

About how to import IDEA: Importing IDEA directly generates an error. Here is a stupid method that can be used to make it error free:

Create a new project

Tomcat is the default, so make sure you check the Web Application below and click Next

Set the name

Then create a new folder lib under the WEB-INF folder

This folder contains jar packages (these are Java packages). Copy and paste the jar packages from my project (the ones below) into the newly created Lib folder

So once you paste it in, select all of them, right click, Add as Library

Click OK

Next, we right-click at SRC and create a package named com.rz

Under go to my project, select all the files under this folder (as shown below) and copy and paste them into the com.rz folder

Next, let’s add the page

Go to my Web project and get it outside of the red box, copy and paste it into our new Web folder.

Now we open Login in IDEA and click on the bug

Add admin/login.jsp to the url and press Enter

You can log in with the user name admin and password 123456

There’s a little problem here with the problem of how to get rid of _war_exploded

How do I kill _war_exploded?

Click Run, then Click Edit Configuration

Click on Deployment and see the Application context below to change it!

Click login and you can see our home page!

Note that you need to change the name and password of your mysql database, otherwise you will not be able to connect to the database.

Next is the database, the database directly into your database project on the line! Create a new connection, create a new database note character set and collation.

Then directly drag my GIthub SQL file to this inside the line

Such as

So we have our back end set up

Develop the front end and connect the back end

Please make sure that the phone is properly connected to the computer, developer mode is enabled, and USB debugging is enabled. If you have any problems, please click on the first article

Here will use the previous knowledge, please click: Connect real machine development Android (Android) mobile app MUI framework — hybrid development (A) (click details)

Android Mobile App MUI Framework — Hybrid Development (II) Take your Project development (latest version)

Today we are going to learn about registration, login and product listing pages

There are a couple of concepts you need to know

You can take a look at these tables

One consignee cannot correspond to more than one item, so separate tborderhead. Tbmenber User feedback TBGuestBook (Feedback)

The mobile side cannot submit data directly to the database because it requires a Java back end, which may be used by the database to load data and submit it to the mobile side. Let’s talk about Ajax in more detail

Ajax

AJAX = Asynchronous JavaScript and XML. AJAX is not a new programming language, but a new way to use existing standards.

Ajax = asynchronous JavaScript and XML. Ajax allows web pages to be updated asynchronously by exchanging small amounts of data with the server in the background. This means that part of a web page can be updated without reloading the entire page. Traditional web pages (without Ajax) have to reload the entire page if they need to update their content.

Partial refresh: AJAX is a technique for updating parts of a web page without having to reload the entire page. Asynchronous loading: After the Ajax request starts, subsequent programs can execute first and then modify the DOM after the Ajax results are returned.

The teacher told us a vivid example:

Er… I forget the specific example, so I’ll make it up as I understand it. Provisions is to charge, you can only be a person, filling to line up behind, must wait until the people fill out in front of you can charge, therefore very trouble, the people behind will be angry, hence the Ajax please come here, can I also charge, when others charge don’t line up to wait until all the man in front me to charge, this is asynchronous!

registered

Create reg. HTML and check the HTML containing MUI

Use this page as a page entry for the time being

Next, write the code to perfect the front end with a direct shortcut in the body

Mh press ENTER Mb (select mbody) Press enter Mf Mbu in Mb again, set the Id for each formCopy the code

Code on reg. HTML

<! doctypehtml>
<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">
			.dm-btn{
				display: block;
				width: calc(100% - 20px);
				height: 40px;
				margin-left: 10px;
				margin-bottom: 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">Sweet people register</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
			    <div class="mui-input-row">
			        <label>The user name</label>
			        <input type="text" class="mui-input-clear" id="tbusername" placeholder="Username">
			    </div>
			</form>
			
			<form class="mui-input-group">
			    <div class="mui-input-row">
			        <label>password</label>
			        <input type="text" class="mui-input-clear" id="tbpassword" placeholder="Password">
			    </div>
			</form>   
			
			<form class="mui-input-group">
			    <div class="mui-input-row">
			        <label>Recipient name</label>
			        <input type="text" class="mui-input-clear" id="tbtruename" placeholder="Name of Recipient">
			    </div>
			</form>   
			
			<form class="mui-input-group">
			    <div class="mui-input-row">
			        <label>Recipient phone number</label>
			        <input type="text" class="mui-input-clear" id="tbtel" placeholder="Recipient phone number">
			    </div>
			</form>   
			
			<form class="mui-input-group">
			    <div class="mui-input-row">
			        <label>Addressee address</label>
			        <input type="text" class="mui-input-clear" id="tbaddress"  placeholder="To address">
			    </div>
			</form> 
			
			<form class="mui-input-group">
			    <button type="button" class="dm-btn" >registered</button>
				<div style="height: 10px;"></div>
			</form>  
		</div>

		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>
Copy the code

How to bind button click events?

Give the registration top ID

Under Mui, dg enter, addE enter, and then the function

(Write a 123 for clicking the event he wants to do)

At this point, we run on the phone, click register, and then the console will respond, so it means our binding event is successful!

This is Ajax code

document.getElementById("register").addEventListener("tap",function(){ var vusername=document.getElementById("tbusername").value; var vpassword=document.getElementById("tbpassword").value; var vtruename=document.getElementById("tbtruename").value; var vtel=document.getElementById("tbtel").value; var vaddress=document.getElementById("tbaddress").value; Var requrl = "http://192.168.1.14:8080/SweetyManage/JavaApi" mui. Ajax (requrl, {data: {rnum: "1", the username: vusername, password:vpassword, truename:vtruename, tel:vtel, address:vaddress }, DataType :'json',// The server returns data in JSON format type:' POST ',//HTTP request type timeout:10000,// The timeout period is set to 10 seconds; Headers :{' content-type ':'application/x-www-form-urlencoded'}, success:function(data){mui. ); //console.log(JSON.stringify(data)); // setTimeout(function(){ // mui.back(); / /}, 2000); }}); });Copy the code

Let me introduce you to the code above

Click the register button to get our front-end data, which is saved in the parameters behind var

CMD, enter ipconfig to know your address, or buy a cloud server. There is a URL path directly. This is the local IP address. In the mobile phone, it is better to use the mobile phone to open the hot spot (because so the IP address of the mobile phone and computer is the same), or it will not be accessed)

The following are

Rum1 on the back end represents registration events

The name after username is sent to the back end without v

For intuition, let’s skip to the back end

Open javaAPI, code at a glance!

Here is our complete reg.html code

<! doctypehtml>
<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">
			.dm-btn{
				display: block;
				width: calc(100% - 20px);
				height: 40px;
				margin-left: 10px;
				margin-bottom: 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">Sweet people register</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-group">
			    <div class="mui-input-row">
			        <label>The user name</label>
			        <input type="text" class="mui-input-clear" id="tbusername" placeholder="Username">
			    </div>
			</form>
			
			<form class="mui-input-group">
			    <div class="mui-input-row">
			        <label>password</label>
			        <input type="text" class="mui-input-clear" id="tbpassword" placeholder="Password">
			    </div>
			</form>   
			
			<form class="mui-input-group">
			    <div class="mui-input-row">
			        <label>Recipient name</label>
			        <input type="text" class="mui-input-clear" id="tbtruename" placeholder="Name of Recipient">
			    </div>
			</form>   
			
			<form class="mui-input-group">
			    <div class="mui-input-row">
			        <label>Recipient phone number</label>
			        <input type="text" class="mui-input-clear" id="tbtel" placeholder="Recipient phone number">
			    </div>
			</form>   
			
			<form class="mui-input-group">
			    <div class="mui-input-row">
			        <label>Addressee address</label>
			        <input type="text" class="mui-input-clear" id="tbaddress"  placeholder="To address">
			    </div>
			</form>  
			
			<form class="mui-input-group">
			    <button type="button" class="dm-btn" id="register">registered</button>
				<div style="height: 10px;"></div>
			</form>  
		</div>

		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			
			document.getElementById("register").addEventListener("tap".function(){
				var vusername=document.getElementById("tbusername").value;
				var vpassword=document.getElementById("tbpassword").value;
				var vtruename=document.getElementById("tbtruename").value;
				var vtel=document.getElementById("tbtel").value;
				var vaddress=document.getElementById("tbaddress").value;
				
				var requrl="http://192.168.1.14:8080/SweetyManage/JavaApi"
				mui.ajax(requrl,{
						data: {rnum:"1".username:vusername,
	                  		password:vpassword,
	                  		truename:vtruename,
	                  		tel:vtel,
	                  		address:vaddress
						},
						dataType:'json'.// The server returns data in JSON format
						type:'post'.//HTTP request type
						timeout:10000.// Timeout is set to 10 seconds;
						headers: {'Content-Type':'application/x-www-form-urlencoded'},
						success:function(data){
							mui.toast("Registration successful!");
							//console.log(JSON.stringify(data));
// setTimeout(function(){
// mui.back();
/ /}, 2000);}}); });</script>
	</body>

</html>
Copy the code

It’s ready to run on your phone

At this time, I input information on the mobile phone, and then click Register, the picture below will appear

At this point, we go to the back end to see if we have the data, and click on the Member Center to view the members

The login

Just like reg. HTML, create a new HTML file with the muI login. HTML. Reg. HTML is used, and login is much simpler

<! doctypehtml>
<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" />
	</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">The login</h1>
		</header>
		
		<div class="mui-content">
		    <form class="mui-input-group">
		        <div class="mui-input-row">
		            <label>The user name</label>
		            <input type="text"  id="tbnusername" class="mui-input-clear" value="Jay son" placeholder="Username">
		        </div>
		        
		        <div class="mui-input-row">
		            <label>password</label>
		            <input type="text" id="tbnpassword" class="mui-input-clear" value="123" placeholder="Password">
		        </div>
		        
		         <div class="mui-input-row">
		           
		            <input value="Login" type="button"  class="mui-btn-block"  id="btnlogin"  />
		        </div>
		    </form>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			document.getElementById("btnlogin").addEventListener("tap".function(){
				var vusername=document.getElementById("tbnusername").value;
				var vpassword=document.getElementById("tbnpassword").value;				
				
				var requrl="http://192.168.1.14:8080/SweetyManage/JavaApi";
				mui.ajax(requrl,{
						data: {rnum:"2".username:vusername,
							password:vpassword
						},
						
						dataType:'json'.// The server returns data in JSON format
						type:'post'.//HTTP request type
						timeout:10000.// Timeout is set to 10 seconds;
						headers: {'Content-Type':'application/x-www-form-urlencoded'},
						success:function(data){
							console.log(JSON.stringify(data));
							if(data==null||data=="")
							{
								mui.toast("Wrong username or password!");
							}
							else
							{
								console.log(data[0].id);
								mui.toast("Login successful!");
								localStorage.setItem("id",data[0].id);
								mui.openWindow({
									url:"main.html".id:"main"}); }}}); });</script>
	</body>

</html>
Copy the code

Make sure that this location is the same as your Ip address (preferably on your phone to make your PC’s Ip address the same), unless there is a cloud server

Set login. HTML as the page entry and save it

Click login and adjust the page immediately

Product list

In the prolist page directly into the code, because this thing should understand is no problem

Create a new folder imGS under the project and place the image

prolist.html

<! doctypehtml>
<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>Cream cake</p>
		         			<p>RMB 5</p>
		         			<p>Origin: Shanghai</p>
		         		</div>
		         		<div class="item">
		         			<p><img src="imgs/swetty1.jpg"/></p>
		         			<p>Cream cake</p>
		         			<p>RMB 5</p>
		         			<p>Origin: Shanghai</p>
		         		</div>
		         		<div class="item">
		         			<p><img src="imgs/swetty1.jpg"/></p>
		         			<p>Cream cake</p>
		         			<p>RMB 5</p>
		         			<p>Origin: Shanghai</p>
		         		</div>
		         		<div class="item">
		         			<p><img src="imgs/swetty1.jpg"/></p>
		         			<p>Cream cake</p>
		         			<p>RMB 5</p>
		         			<p>Origin: Shanghai</p>
		         		</div>
		         		<div class="item">
		         			<p><img src="imgs/swetty1.jpg"/></p>
		         			<p>Cream cake</p>
		         			<p>RMB 5</p>
		         			<p>Origin: Shanghai</p>
		         		</div>
		         		<div class="item">
		         			<p><img src="imgs/swetty1.jpg"/></p>
		         			<p>Cream cake</p>
		         			<p>RMB 5</p>
		         			<p>Origin: Shanghai</p>
		         		</div>
		         		
		         	</div>
		        </div>
		    </div>
		    
		</div>
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>
Copy the code

Blog.csdn.net/hanhanwangh… Treasure Girl welcomes your attention! Welcome to wechat public account: Treasure girl’s growing diary if reproduced, please indicate the source (if not indicated, the thief will investigate)

If reproduced, please indicate the source

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Android Mobile App MUI Framework — Hybrid Development (III) (Connecting the back end)

directory

Import the back-end project

Develop the front end and connect the back end

Ajax

registered

The login

Product list

Android Mobile App MUI Framework — Hybrid Development (III) (Connecting the back end)

directory

Import the back-end project

Develop the front end and connect the back end

Ajax

registered

The login

Product list

Related Posts

[Britain] Finding a Productive Life: How do I structure my approach

JavaScript: jQuery

The 1024 Programmers Festival is coming! Programmers, are you ready?