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! \
directory
- Import the back-end project
- Develop the front end and connect the back end
-
- Ajax
- registered
- The login
- Product list
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
Sign up here and you’re done!
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
Log in and click on the product list to see the image below
Finally finished whoo-hoo
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