前端select下拉框配合input_稻谷团APP前端完善--用户注册登录

最新推荐文章于 2022-05-21 11:23:26 发布

weixin_39931101

最新推荐文章于 2022-05-21 11:23:26 发布

阅读量120

点赞数

文章标签：前端select下拉框配合input

用户注册登录是网站或APP开发的一个必经步骤，也是最基础的一个业务。网页端开发用户注册登录如果在客户端也使用服务器语言来开发，如PHP或者JAVAWEB，就按正常的流程处理就可以。但如果是APP端，由于APP端为纯粹的前端，无法嵌入服务器语言代码块，因此在APP端实现动态内容交互的时候采用AJAX方式更为友好一些。

用户注册登录AJAX实现https://www.zhihu.com/video/1168106332695113728

视频对采用网页表单方式提交和AJAX方式注册进行了对比，传统网页表单方式主要缺点在于服务器端处理后就状态进行友好提示和表达。AJAX方式就可以将服务器端状态形成代码字符串反馈给前端，前端根据状态代码来进行弹窗友好提示。

（1）表单方式form提交处理

<form class="mui-input-group" method="post" action="http://106.13.113.246/ricecode/admin/ajax/login.php">
	 <div class="mui-input-row">
		<label>用户名</label>
		<input type="text" id="username" class="mui-input-clear" >
	</div>
	<div class="mui-input-row">
		<label>密码</label>
		<input type="password" id="userpwd" class="mui-input-password" >
	</div>
           <input type="submit" id="confirm" class="mui-btn mui-btn-primary" value="确认">
	       <button type="reset" id="reset" class="mui-btn mui-btn-danger" >取消</button>
	 </div>
</form>

服务器端接收处理：

<?php 
header('Access-Control-Allow-Headers:x-requested-with,content-type'); 
header("Access-Control-Allow-Origin:http://127.0.0.1:8020");
// 1.接收前端发送过来的数据，保存到$_POST数组里
	$username=$_POST['username'];
	$userpwd=$_POST['userpwd'];
	
//2.数据库业务操作，查询用户信息，再来匹配比较
	include '../db_util.php';
	$sql="select * from user where username='".$username."'";
	$res=db_utils($sql,0);
	$data=$res->fetch_row();  //获取该用户信息记录数组
	//还有一个判断，就是用户名是否存在
	if(empty($data)) echo "user not exist!"
	// 使用数据库的密码与输入的密码进行匹配比较，如果一致，就表示注册通过
	$db_pwd=$data[3];
    if($userpwd==$db_pwd){
    	echo 'welcome';
    }else{
    	echo 'error';
    }
    
?>

如果登录成功，对于这种welcome之类的没办法呈现在客户端，所以不是特别友好。

（2）AJAX方式处理

前端主要使用JavaScript代码来实现，同时也不需要form表单。两个问题比较重要：一个是跨域问题，一个是组织数据对象问题。

<!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.css" rel="stylesheet" />
		<link href="css/login.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">助力AI实践团</h1>
		</header>
		<div class="mui-content">
			<div class="box1">
				<h1 class="mui-title">用户登录</h1>
			</div>
			<div class="box2">
				<div class="mui-input-group">
				    <div class="mui-input-row">
				        <label>用户名</label>
				    <input type="text" id="username" class="mui-input-clear" >
				    </div>
				    <div class="mui-input-row">
				        <label>密码</label>
				        <input type="password" id="userpwd" class="mui-input-password" >
				    </div>
				    <div class="mui-button-row">
				        <button type="button" id="confirm" class="mui-btn mui-btn-primary" >确认</button>
				        <button type="button" id="reset" class="mui-btn mui-btn-danger" >取消</button>
				    </div>
				</div>
			</div>
		</div>
	</body>
</html>
<script src="js/mui.js"></script>
<script type="text/javascript">
	mui.init();
	var btn_confirm=document.getElementById('confirm');
	var username=document.getElementById('username');
	var userpwd=document.getElementById('userpwd');
	url='http://106.13.111.246/ricecode/admin/ajax/login.php';	
	btn_confirm.addEventListener('tap',function(){
		user_name=username.value;
		user_pwd=userpwd.value;
		// ajax登录
		var param={};
		param.username=user_name;
		param.userpwd=user_pwd;
		console.log(param);
		mui.post(url,param,function(data){
			if(data==1){
				localStorage.setItem('username',user_name);
				mui.toast("welcome!");
				mui.openWindow({
				  		url:'index.html',
				  		id:'index'
				})
			}else if(data==-1){
				mui.toast('密码有误');
			}else{
				mui.toast("用户不存在！");
			}
		})

	})	
</script>

啥叫跨域？App客户端与服务器端不在同一个IP地址内，不在同一个域名里，在使用ajax

发送post请求时浏览器出于安全因素考虑本身就会阻止访问。 解决思路就是在服务器端代码中添加一个头文件说明，如下代码：

在服务器端文件头部增加：

header('Access-Control-Allow-Headers:x-requested-with,content-type');

header("Access-Control-Allow-Origin:http://127.0.0.1:8020");

第二个头部信息里源地址需要根据实际需求来替换，如果设定为*，就表示接受所有的ip来请求。

对于组织数据，通过ajax方式传输时需要使用字符串对象方式，因此使用JavaScript里的对象，先进行实例化一个对象，var param={},然后根据需要来构建param对象的key和对应的value值，如param.username='caojianhua'，这里就是构建了其username属性名称，同时赋值为'caojianhua'。

后端处理与前述基本一致，就是多一个返回状态码：

<?php 
header('Access-Control-Allow-Headers:x-requested-with,content-type'); 
header("Access-Control-Allow-Origin:http://127.0.0.1:8020");
// 1.接收前端发送过来的数据，保存到$_POST数组里
	$username=$_POST['username'];
	$userpwd=$_POST['userpwd'];
	
//2.数据库业务操作，查询用户信息，再来匹配比较
	include '../db_util.php';
	$sql="select * from user where username='".$username."'";
	$res=db_utils($sql,0);
	$data=$res->fetch_row();
	//还有一个判断，就是用户名是否存在
	if(empty($data)) $code=0;  //用户不存在，返回状态码为0
// 3.使用数据库的密码与输入的密码进行匹配比较，如果一致，就返回状态码为1，否则为-1
	$db_pwd=$data[3];
    if($userpwd==$db_pwd){
    	$code=1;
    }else{
    	$code=-1;
    }     
    echo json_encode($code);  //将状态码转换为json字符串 
?>

这样在登录有了状态码后，可以来根据状态码在前端组织弹窗提示，以及实现用户信息存储到浏览器。有关存储到浏览器的方法可以参考之前的文章：

peter.cao：稻谷团APP前端设计案例（4）zhuanlan.zhihu.com

用户注册的ajax组织方式与用户登录一样，其实比用户登录还简单，因为在服务器端只涉及到新增记录即可。不过在实现本APP案例开发时，用户注册和登录都需要对输入框区域进行是否为空的验证，以及用户名是否存在的验证，这里我都没涉及到，细心的同学可以自行加上。

到此为止，稻谷团APP就结构而言就完全成型了，可以打包发布后在手机端实现注册登录、内容浏览等，这里我们作为案例讲解，重点在于逻辑组织过程和一些常用的技术，如果想做精美，还得精雕细琢，增加内容，增加互动。同时我在内容列表和后端数据管理部分并没有讲解如何实现分页，还有内容的定时请求或者websocket通信，这里我后续有需要时再来讨论。