https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
如有转载，请注明出处（如不注明，盗者必究）
分享今天看到的两句文案：我们必须全力以赴，同时又不抱持任何希望。不管做什么事，都要当它是全世界最重要的一件事，但同时又知道这件事无关紧要。我要赚很多钱，要读很多书，要走很多路，我要照亮你整个世界。
终于要从伤心的日子中走出来了，心情就像今天重庆的天气一样好！又有新的感悟，漫漫学习路，任重而道远，共勉！——来自一个文艺的程序媛，下面开始正题。
今天的任务是将注册登录和产品列表功能实现！
目录
- 导入后端项目
- 开发前端，连接后端
- Ajax
- 注册
- 登录
- 产品列表
导入后端项目
后端代码及数据库网址：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宝藏女孩 欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
如有转载，请注明出处（如不注明，盗者必究）
如有转载，请注明出处
