分享今天看到的两句文案：我们必须全力以赴，同时又不抱持任何希望。不管做什么事，都要当它是全世界最重要的一件事，但同时又知道这件事无关紧要。我要赚很多钱，要读很多书，要走很多路，我要照亮你整个世界。
终于要从伤心的日子中走出来了，心情就像今天重庆的天气一样好！又有新的感悟，漫漫学习路，任重而道远，共勉！——来自一个文艺的程序媛，下面开始正题。
今天的任务是将注册登录和产品列表功能实现！
导入后端项目
后端代码及数据库网址：https://github.com/hanhanwanghahaha/SweetyBack-end
关于怎么导入IDEA的问题：直接导入会产生报错。这里有一个笨方法，可以使其不报错，可以使用的方法：
创建一个新的项目
Tomcat选择默认就好，下面那个Web application记得勾选，然后点击Next
设置名称
然后在WEB-INF文件夹下面新建一个文件夹lib
这个文件夹里面放jar包（这是一些java包），把我的项目里面的jar包（下面这些）复制粘贴到刚刚新建的lib文件夹中去
粘贴进来之后，全部选中，右键，点击Add as Library
点击OK
接下来，我们在src处右键，创建一个包，包名为com.rz
在去我的项目下将这个文件夹下面的文件（如下图）全部选中，复制粘贴到刚刚的com.rz下面去
接下来，我们来添加页面
去我的web项目中拿到除红框之外的，复制粘贴到我们新建的web文件夹下面。
现在我们在IDEA中打开Login，点击这个小虫
接下来在网址中加入admin/login.jsp就回车
用户名admin，密码123456，就可以登录
这边有个小问题，就是_war_exploded怎么去掉如何去掉的问题
如何干掉_war_exploded？
点击run，再点击Edit Configuration
点击Deployment，再看到下面那个Application context，就可以修改啦！
点击登录之后就可以看到我们的首页啦！
还需要注意的地方是根据你的mysql数据库的名称密码来修改这三处，要不然连接不到数据库奥。
接下来就是数据库，数据库直接拖到你的数据库项目中就行了！
新建一个连接，再新建一个数据库
注意一下字符集和排序规则奥 ！
然后直接将我github里面sql文件拖到这个里面来就行
如
这样我们的后端就搭建好了
开发前端，连接后端
请确定手机是否正确连接到了电脑，还有是否启动了开发者模式，USB调试，如果有问题，请点击第一篇文章
这边会用到前面的知识，请点击：
连接真机开发安卓(Android)移动app MUI框架——混合式开发（一） （敲详细）
连接真机开发安卓(Android)移动app MUI框架——混合式开发（二） 带你项目开发（最新版）
我们今天要学的是注册、登录、产品列表页面
这边需要提前了解几个概念
可以看一下这几个表
一个收货人不能对应多个商品，因此要分开来
抬头表 tborderhead (收货人信息。)
明细表 tborderitems
用户注册信息tbmenber
用户反馈tbguestbook(feedback)
移动端不能直接提交数据到数据库，因为需要借助java后端，数据库加载数据提交到移动端也许要用到java后端。——Ajax
下面详细讲一下Ajax
Ajax
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
Ajax = 异步 JavaScript 和XML。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必需重载整个网页面。
局部刷新：AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
异步加载：ajax请求开始后，后续程序可以先执行，等ajax返回结果之后再修改DOM。
老师给我们讲了一个形象生动的例子：
额。。。这个具体啥例子我也忘了，我按照我的理解来编一个吧。
就是你去充电，规定只能一个人充，后面来的要排队，必须等到前面的人充完了你才可以充，因此非常的麻烦，后面的人都要发怒了，于是把Ajax请过来了，就可以在其他人充电的时候我也充，不用排队等到前面那个人充完我再充，这就是异步！
注册
新建reg.html,注意要勾选含mui的html
暂时将这个页面作为页面入口
接下来写代码，完善前端
在body中直接快捷键
Mh 回车
Mb（选择mbody） 回车
在mb里面Mf
Mbu 回车 (按钮)
再者，给每个表form设置Id
上代码
reg.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">
.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">甜甜的人注册</h1>
</header>
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>用户名</label>
<input type="text" class="mui-input-clear" id="tbusername" placeholder="用户名">
</div>
</form>
<form class="mui-input-group">
<div class="mui-input-row">
<label>密码</label>
<input type="text" class="mui-input-clear" id="tbpassword" placeholder="密码">
</div>
</form>
<form class="mui-input-group">
<div class="mui-input-row">
<label>收件人名称</label>
<input type="text" class="mui-input-clear" id="tbtruename" placeholder="收件人名称">
</div>
</form>
<form class="mui-input-group">
<div class="mui-input-row">
<label>收件人电话</label>
<input type="text" class="mui-input-clear" id="tbtel" placeholder="收件人电话">
</div>
</form>
<form class="mui-input-group">
<div class="mui-input-row">
<label>收件人地址</label>
<input type="text" class="mui-input-clear" id="tbaddress" placeholder="收件人地址">
</div>
</form>
<form class="mui-input-group">
<button type="button" class="dm-btn" >注册</button>
<div style="height: 10px;"></div>
</form>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
</body>
</html>
如何给按钮绑定点击事件？
给注册顶id
在Mui下面写快捷键dg回车，addE回车，再写函数
(编写点击他要做的事件 可以写个123)
这时候，我们在手机上运行，点击注册，这时候再控制台就会相应，因此说明我们的绑定事件成功！
这是Ajax的代码
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',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{'Content-Type':'application/x-www-form-urlencoded'},
success:function(data){
mui.toast("注册成功!");
//console.log(JSON.stringify(data));
// setTimeout(function(){
// mui.back();
// },2000);
}
});
});
可以来介绍一下上面那串代码
这是点击注册按钮，就去拿我们前端的数据，保存在var后面的参数里面
这串代码是本地的ip地址（在后端中运行的），cmd，输入ipconfig就可以知道自己的地址，也可以买云服务器，直接就有一个URL路径，我这个是本地的IP地址（这里需要注意的一点是没有云服务器，在手机上实操的话就最好用手机开热点（因为这样手机和电脑的IP地址就是一样的），要不然就访问不到）
下面就是
rum1在后端就是代表着注册事件
username后面的用不带v的名称发送到后端
为了直观，我们直接跳去后端
打开javaAPI，代码一目了然！
接下来我们的完整的reg.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">
.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">甜甜的人注册</h1>
</header>
<div class="mui-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>用户名</label>
<input type="text" class="mui-input-clear" id="tbusername" placeholder="用户名">
</div>
</form>
<form class="mui-input-group">
<div class="mui-input-row">
<label>密码</label>
<input type="text" class="mui-input-clear" id="tbpassword" placeholder="密码">
</div>
</form>
<form class="mui-input-group">
<div class="mui-input-row">
<label>收件人名称</label>
<input type="text" class="mui-input-clear" id="tbtruename" placeholder="收件人名称">
</div>
</form>
<form class="mui-input-group">
<div class="mui-input-row">
<label>收件人电话</label>
<input type="text" class="mui-input-clear" id="tbtel" placeholder="收件人电话">
</div>
</form>
<form class="mui-input-group">
<div class="mui-input-row">
<label>收件人地址</label>
<input type="text" class="mui-input-clear" id="tbaddress" placeholder="收件人地址">
</div>
</form>
<form class="mui-input-group">
<button type="button" class="dm-btn" id="register">注册</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',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{
'Content-Type':'application/x-www-form-urlencoded'},
success:function(data){
mui.toast("注册成功!");
//console.log(JSON.stringify(data));
// setTimeout(function(){
// mui.back();
// },2000);
}
});
});
</script>
</body>
</html>
可以在手机上面运行了
这时候我在手机上输入信息，再点击注册，就会出现下图
这时候我们去后端看是否拿到数据，点击会员中心——》查看会员
注册到这里就是没问题了！
登录
和刚刚的reg.html一样，新建一个含mui的html文件login.html
会了reg.html，login就简单多了
直接上代码
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" />
</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>
</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',//服务器返回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>
注意这个地方要跟你的Ip地址是一样的（最好手机给电脑开热点，让手机和电脑的ip一致），除非有云服务器
设置login.html为页面入口，记得保存
点击登录，马上调整页面
产品列表
在prolist页面直接上代码了，因为这东西应该看懂是没问题的
在项目下新建文件夹imgs，放上图片
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>
这时候登录进去再点击商品列表就会出现下图
终于写完了呜呜呜
https://blog.csdn.net/hanhanwanghaha欢迎关注这个超级无敌可爱的人鸭，有什么问题留言私信皆可，看见必回！
如有转载，请注明出处