由于有之前的经验所以这次很快就能完成登录页面的功能实现,实际上十分钟就可以写完代码了,但我划了大半天的水才搞完。下面我直接粘贴login方法的代码出来,就不截图了。
~~~
/**
* 登录方法
*/
public function login(){
// 定义连接数据库变量
$usernameinfo = Db::name('name');
// 定义获取表单提交数据方法的变量
$requesta = Request::instance();
$username = input('post.lusername');
$password = input('post.checkpassword');
// 判断是否post提交
if ($requesta -> isPost()){
// 接受表单数据
$data = input('post.');
// 使用isset来检测变量是否设置和empty检测是否为空
if (!isset($data['lusername']) || empty($data['lusername'])){
return $this->error('用户名不能为空');
}
// 检测密码是否已经输入
if (!isset($data['checkpassword']) || empty($data['checkpassword'])){
return $this->error('密码不能为空');
}
// 查询数据
$iusername = $usernameinfo->where('username',$data['lusername'])->find();
$ipassword = $usernameinfo->where('password',$password)->find();
// 检测是否准确
if (empty($iusername)){
return $this->error('用户名或密码错误');
}
if (empty($ipassword)){
return $this->error('用户名或密码错误');
}else{
// 用session记录登录信息,susername表示存储的session命名,$username表示表单输入的内容
session::set('susername',$username);
session::set('password',$password);
//跳转首页
return $this->redirect(url('index/index/index'));
}
}
}
~~~
前端页面主要代码如下:
~~~
<!DOCTYPE html>
<html>
<head>
<title>登陆页面</title>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<link href="__INDEX__/css/login.css" type="text/css" rel="stylesheet">
<link href="__INDEX__/css/global.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="__INDEX__/js/login.js"></script>
</head>
<body>
<div class="login">
<div class="login-title"><p>登录</p>
<i></i>
</div>
<form method="post" action="{:url('index/login/login')}">
<div class="login-bar">
<ul>
<li><img src="__INDEX__/images/login_user.png">
<input type="text" class="text" name="lusername" id="lusername" value="{$Request.session.susername}" placeholder="请输入用户名" onblur="checklogin(this.value)" /></li>
<li><img src="__INDEX__/images/login_pwd.png">
<input type="password" class="psd" name="checkpassword" id="checkpassword" value="{$Request.session.password}" placeholder="请输入确认密码" onblur="checkpasswordl()" /></li>
<div id="yhm"><p id="check4" style="color: red; font-size: 15px; text-align: center;"></p></div>
</ul>
</div>
<div class="login-btn">
<button class="submit" type="submit">登陆</button>
<a href="{:url('index/login/register')}"><div class="login-reg"><p>莫有账号,先注册</p></div></a>
</div>
</form>
</div>
</body>
<script>
</script>
</html>
~~~
下面可以看到保存的用户名和密码自动填写
![](https://box.kancloud.cn/99fcc627a97222fd29d625ad0fdc6d7f_423x478.png)
![](https://box.kancloud.cn/30f7b71ca2859ac77f73458c553c345b_440x728.png)
到这里登录功能已经实现了,下一步到业务功能的实现了。