mui开发app之登陆功能
2017-07-21 本文已影响0人
小题莫
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" />
<script src="js/mui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav bg-color">
<h1 class="mui-title">登录</h1>
</header>
<div class="mui-content">
<div class="login-a">
</div>
<div class="login-b">
<div class="login-b-b">
<div class="login-b-b-l">账号</div>
<div class="login-b-b-r">
<input type="text" placeholder="请输入你的手机号">
</div>
</div>
<div class="login-b-b">
<div class="login-b-b-l">密码</div>
<div class="login-b-b-r">
<input type="password" placeholder="请输入你的密码">
</div>
</div>
</div>
<div class="btn">
<button id="btn">登录</button>
<p><a href="#" class="click_a">注册</a><a href="#" class="click_a mui-pull-right">找回密码</a></p>
</div>
<div class="sdk-a"style="padding: 10px 0px;">
<a href="#" class="iconfont icon-qq"></a>
<a href="#" class="iconfont icon-weixin"></a>
</div>
</div>
<script type="text/javascript">
mui.init();
var click_a = document.getElementsByClassName('click_a');
click_a[0].addEventListener('tap',function(){
mui.openWindow({
url:'register.html',
id:'register'
});
});
click_a[1].addEventListener('tap',function(){
mui.openWindow({
url:'password.html',
id:'password'
})
});
var btn = document.getElementById('btn');
var input = document.getElementsByTagName('input');
btn.addEventListener('tap',function(){
var phone = input[0].value;
var password = input[1].value;
if(phone == ''){
mui.toast('手机号码不能为空');
return;
}
if(phone.length != 11){
mui.toast('手机号码位数不正确');
return;
}
if(password == ''){
mui.toast('密码不能为空');
return;
}
//请求接口
var request_url = localStorage.getItem('request_url');
mui.get(request_url+'User/login',{
phone_data:phone,
password_data:password
},function(data){
if(data == -1){
mui.toast('用户不存在');
}else if(data == 0){
mui.toast('密码错误');
}else if(data == 1){
//登录成功
//保存一下登录信息
localStorage.setItem('login_phone',phone);
//显示出来来的界面,注意不是跳转
mui.plusReady(function(){
//先通知 getTargetInterface 要具体到某个界面
//重点 mui的底部导航界面的id 就是url d.html
var target = plus.webview.getWebviewById('d.html');
mui.fire(target,'update_user_info',{});
// getLaunchWebview 首页， index.html 他是包含abdc这4个界面的主界面
var indexView = plus.webview.getLaunchWebview();//获得我们起始界面的对象
indexView.show(); //把这个对象显示出来
});
}
},'json');
});
</script>
</body>
</html>
PHP代码：
//登录
public function login(){
$phone = $_GET['phone_data'];
$password = $_GET['password_data'];
//判断用户是否存在
$user = M('user')->where("`phone`='$phone'")->find();
if($user == ''){
echo -1;
}else{
//对比密码
if(md5($password) == $user['password']){
echo 1;
}else{
echo 0;
}
}
}
mysql数据表结构:
CREATE TABLE IF NOT EXISTS `user` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`phone` varchar(11) NOT NULL,
`password` varchar(32) NOT NULL,
`nickname` varchar(30) NOT NULL,
`about` text NOT NULL,
`city` text NOT NULL,
`sex` varchar(30) NOT NULL,
`head_img` varchar(100) NOT NULL,
`time` varchar(30) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=18 ;
