体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

老师,登录的功能怎么实现?

来源：2-11 脚本

慕言_7946275

2019-09-20 12:47:13

实在是没思路,,不知道怎么写,

写回答

4回答

好帮手慕言

2019-09-20

同学你好，老师这里给同学一个思路参考：

一般情况下，需要前台通过ajax把登录信息发送给后台，后台在数据库中进行匹配，然后将匹配的结果再返回给前台，通过返回的结果判断登录成功还是失败。

这里我们没有办法做，但是可以模拟一下：因为user.json里面有注册的信息。我们可以请求user.json。

http://img.mukewang.com/climg/5d8482aa0959ccab11790728.jpg

工作中后端开发人员会提供一个登录接口 ，前端人员会在点击登录事件中，使用ajax请求接口。并把当前的用户名传递给后台，后台会处理这个用户所有的信息（包含密码），然后根据返回的数据，判断输入框输入的密码与返回的密码是否一致。了解一下即可，因为这是后端的小伙伴要处理的问题哦。

如果帮助到了你，欢迎采纳~祝学习愉快~

0

慕言_7946275

提问者

2019-09-20

var $={
	ajax:function(options){
		var xhr=null,//XMLHttpRequest对象
			url=options.url,//url地址
			method=options.method||'get',//传输方式,默认为get
			async=typeof(options.async)==="undefined"?true:options.async,//同步异步
			data=options.data||null,
			//将data的对象字面量的形式转换为字符串形式
			params='',
			callback=options.success,//ajax请求成功的回调函数
			error=options.error;
			if(data){
				for(var i in data){
					params+=i+'='+data[i]+'&';
				}
				params=params.replace(/&$/,"");
			}

			//根据method的值改变url
			if(method==="get"){
				url+='?'+params;
			}
		if(typeof XMLHttpRequest!='undefined'){
				xhr= new XMLHttpRequest();
			}else if(typeof ActiveXObject!='undefined'){
				//将所有可能出现的ActiveXObject版本放在一个数组中
				var xhrArr=['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
				//遍历创建XMLHttpRequest对象
				var len=xhrArr.length;
				for(var i=0;i<len;i++){
					try{
						//创建XMLHttpRequest对象
						xhr=new ActiveXObject(xhrArr[i]);
						break;
					}
					catch(ex){

					}
				}
				
			}else{
				throw new Error('No XHR object availabel.');
			}
			xhr.onreadystatechange=function(){
				if(xhr.readyState===4){
					if((xhr.status>=200&&xhr.status<300)||xhr.status===304){
						callback && callback(JSON.parse(xhr.responseText));
					}else{
						error && error();
					}
				}
			}
			xhr.open(method,url,async);
			xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xhr.send(params);
	}
}
// $.ajax({
// 	url:"http://127.0.0.1/regitser.php",
// 	method:"get",
// 	async:false,
// 	data:{username:'13623447894',pwd:'3213123'},
// 	success:function(){

// 	},
// 	error:function(){

// 	}
// })


0

慕言_7946275

提问者

2019-09-20

*{
	margin:0;
	padding:0;
}
body{
	background:#333;
}
.register{
	width: 300px;
	height: 270px;
	margin:80px auto;
	padding:15px 30px;
	background: #eee;
	border-radius:5px;
}
.title{
	height: 35px;
}
.title span{
	font-size: 16px;
	font-weight: bold;
	color:#666;
	margin-right:30px;
	cursor: pointer;
}
.title span.current{
	color:#f00;
}
.form div{
	width: 290px;
	height:30px;
	border-radius: 8px;
	background: #fff;
	margin-bottom: 25px;
	padding:8px 10px;
	position: relative;
}
.form div span{
	display: inline-block;
	padding:5px;
	color: #666;
}
.form div input{
	border:none;
	outline:none;
	font-size: 16px;
	color:#666;
	background: none;
}
.form div i{
	position: absolute;
	width: 16px;
	height: 16px;
	/*background: #f00;*/
	right: 12px;
	top: 14px;
}
.form div i.ok{
	background: url(../img/icon.png) no-repeat 0 -67px;
}
.form div i.no{
	background: url(../img/icon.png) no-repeat -17px -67px;
}
.form .info{
	/*margin-top: 18px;*/
	color: #f00;
	padding-left:2px;
}
#pwd_info{
	margin-top: 18px;
}
#user_info{
	margin-top: 11px;
}
.button{
	padding-top: 7px;
}
.button a{
	display: none;
	width: 100%;
	height: 45px;
	line-height: 45px;
	text-align: center;
	text-decoration: none;
	background: #f20d0d;
	color:#fff;
	border-radius: 30px;
	font-size: 16px;
}
.button a.show{
	display: block;
}


0

慕言_7946275

提问者

2019-09-20

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册平台</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="register">
<p class="title" id="title">
<span>登 录</span>
<span class="current">注 册</span>
</p>
<div class="form">
<div>
<span>+86</span>
<input type="text" name="user" id="user" placeholder="请输入注册手机号" autocomplete="off" data-check="sigup"/>
<i id="user_icon"></i>
<p class="info" id="user_info"></p>
</div>
<div>
<input type="password" name="pwd" id="pwd" placeholder="请设置密码"/>
<i id="pwd_icon"></i>
<p class="info" id="pwd_info"></p>
</div>
<p class="button">
<a href="javascript:void(0)" id="sigup-btn" class="btn show">注 册</a>
<a href="javascript:void(0)" id="login-btn" class="btn">登 录</a>
</p>
</div>
</div>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
var user=document.getElementById("user"),
     pwd=document.getElementById("pwd"),
     sigup=document.getElementById("sigup-btn"),
     login=document.getElementById("login-btn"),
     titles=document.getElementById("title").getElementsByTagName("span");
     userInfo=document.getElementById("user_info"),
     userIcon=document.getElementById("user_icon"),
     pwdInfo=document.getElementById("pwd_info"),
     pwdIcon=document.getElementById("pwd_icon"),
     userReg=/^1[3578]\d{9}$/,
     pwdReg=/^\w{5,12}$/,
     isRepeat=false;//记录用户名是否被占用,默认false不被占用

     //检测用户
     function checkUser(){
      var userVal=user.value;
     
      // console.log(userVal);
      //验证手机号是否有效
      if(!userReg.test(userVal)){
      userInfo.innerHTML='手机号码无效!';
      userIcon.className='no';

      }else{
      userInfo.innerHTML='';
      userIcon.className='';
     
      //发起请求
      $.ajax({
      url:'http://localhost/register/server/isUserRepeat.php',
      method:"post",
      async:true,//异步
      data:{username:userVal},
      success:function(data){
      userIcon.className='ok';
      // console.log(data);
      if(data.code==1){
      userIcon.className='ok';
      isRepeat=false;
      }else if(data.code==0){
      userIcon.className='no';
      isRepeat=true;
      userInfo.innerHTML=data.msg;
      }else{
      userInfo.innerHTML='检测失败,请重试...';
      }

       }
        })
       }
    }
     //检测密码
     function checkPwd(){
      var pwdVal=pwd.value;
     
      if(!pwdReg.test(pwdVal)){
      pwdInfo.innerHTML='请输入5到12位的字母、数字及下划线';
      pwdIcon.className='no';
      }else{
      pwdInfo.innerHTML='';
      pwdIcon.className='ok';
      }
     }


     //注册
     function register(){
      var user_Val=user.value,
      pwd_Val=pwd.value;
      //如果手机号有效且没有被占用,同时密码合法才可以注册
      if(userReg.test(user_Val)&&pwdReg.test(pwd_Val)&&isRepeat==false){
      // console.log('ok');
      //发起请求,实现注册
      $.ajax({
      url:"http://localhost/register/server/register.php",
      method:"post",
      data:{username:user_Val,userpwd:pwd_Val},
      success:function(data){
      alert("注册成功,请登录")
      // //载入登录界面,登录高亮显示
      // titles[0].className="current";
      // titles[1].className="";
      // login.className="show";
      // sigup.className="";
      //调用显示登录界面
      showLogin();
      user.value="";
      pwd.value="";
      },
      error:function(){
      pwdInfo.innerHTML='注册失败,请重试';
      }
      })
      }
     }

     //登录
     function login(){
     
     }

     //显示登录
     function showLogin(){
           //载入登录界面,登录高亮显示
  titles[0].className="current";
  titles[1].className="";
  login.className="show";
  sigup.className="";
     }

     //显示注册
     function showSigup(){
           //载入注册界面,登录高亮显示
  titles[1].className="current";
  titles[0].className="";
  login.className="";
  sigup.className="show";
     }
    
     //绑定事件,检测用户的有效性及是否注册过
     user.addEventListener("blur",checkUser,false);
     //绑定事件,检测密码的有效性
     pwd.addEventListener("blur",checkPwd,false);
     //注册
     sigup.addEventListener("click",register,false);

     //注册、登录切换
     titles[0].addEventListener("click",showLogin,false);
     titles[1].addEventListener("click",showSigup,false);

</script>
</body>
</html>


0

0 学习 · 14456 问题

查看课程

相似问题

老师，这个登录怎么样才能实现啊

回答 1

老师看看什么问题,实现不了登录的

回答 1

怎么实现登录，怎么判断登录的内容跟注册的内容一样，看一下注释是在这里判断吗

回答 1

登录方法对么？

回答 1

请问老师当是登录框时，如何实现不用验证

回答 4

打开慕课网App查看更多内容