一、目标
1.用ThinkPHP和Bootstrap实现用户登录设
2.初步界面如下
二、用到的工具及框架
1.ThinkPHP
2.Bootstrap
3.Subline
三、开发环境搭建
1.下载ThinkPHP,解压并重命名为自己的项目名称,复制到C:xampphtdocs路径下
启动xampp,在浏览器中输入http://localhost/MyProject/能看到以下界面则为成功安i装ThinkPHP
2.下载bootstrap文件,解压,复制相关文件(css,js,字体文件)以下路径的文件到ThinkPHP的相关路径中,如图
3.以项目模块为"UserProject",修改根目录下的入口文件index.php,增加"define('BIND_MODULE', 'UserProject');"绑定模块,刷新浏览器后会在目录中自动增加文件夹"UserProject"
<?php // +---------------------------------------------------------------------- // | ThinkPHP [ WE CAN DO IT JUST THINK ] // +---------------------------------------------------------------------- // | Copyright (c) 2006-2014 http://thinkphp.cn All rights reserved. // +---------------------------------------------------------------------- // | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) // +---------------------------------------------------------------------- // | Author: liu21st <liu21st@gmail.com> // +---------------------------------------------------------------------- // 应用入口文件 // 检测PHP环境 if(version_compare(PHP_VERSION,'5.3.0','<')) die('require PHP > 5.3.0 !'); // 开启调试模式 建议开发阶段开启 部署阶段注释或者设为false define('APP_DEBUG',True); //绑定入口模块 define('BIND_MODULE', 'UserProject'); // 定义应用目录 define('APP_PATH','./Application/'); // 引入ThinkPHP入口文件 require './ThinkPHP/ThinkPHP.php'; // 亲^_^ 后面不需要任何代码了 就是如此简单
4.把bootstrap的登录模板文件考到View下的Index目录
复制到如下路径
在此模块下的控制器IndexController.class.php增加"$this->display();"以显示View下的文件
<?php namespace UserProjectController; use ThinkController; class IndexController extends Controller { public function index(){ $this->display(); } }
显示效果如下:
效果显示不全是因为bootstrap的引用路径没修改为正确的路径,修改为正确的路径,显示如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>Signin Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="Public/Css/bootstrap.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="ApplicationUserProjectViewIndexsignin.css" rel="stylesheet"> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <!--<script src="../../assets/js/ie-emulation-modes-warning.js"></script>--> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <form form action="__SELF__" method="POST" class="form-signin form-horizontal" role="form"> <h2 class="form-signin-heading">登录</h2> <label for="inputEmail" class="sr-only">Email address</label> <input type="text" id="username" class="form-control" placeholder="用户名、手机或邮箱" required autofocus> <label for="inputPassword" class="sr-only">Password</label> <input type="password" id="inputPassword" class="form-control" placeholder="密码" required> <div class="checkbox"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button> </form> </div> <!-- /container --> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <!--<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>--> </body> </html>
5.在数据库中新建tab_user表,以验证数据
插入数据
6.在ThinkPHP中建立对应的UserModel
UserModel.class.php代码如下:
<?php /** * Class and Function List: * Function list: * Classes list: * - UserModel extends Model */ namespace UserProjectModel; use ThinkModel; class UserModel extends Model { protected $patchValidate = true; //静态定义,定义好验证规则后,就可以在使用create方法创建数据对象的时候自动调用: protected $_validate = array( array( 'username', 'require', '用户名必须填写', self::EXISTS_VALIDATE, 'regex', self::MODEL_INSERT ) , array( 'username', 'filter_username', '含有敏感字眼', self::EXISTS_VALIDATE, 'function' ) , array( 'username', '', '用户名被别人占用了', self::EXISTS_VALIDATE, 'unique', self::MODEL_INSERT ) , array( 'password', 'require', '密码必须填写' ) ); }
7.在IndexController.class.php中完成判定用户登录逻辑
<?php namespace UserProjectController; use ThinkController; class IndexController extends Controller { public function index(){ $userModel = D('User'); if (IS_POST) { if ($this->checkUser(I('post.username'),I('post.password'))) { dump(I('post.')); //$this->success($userModel->username . '登录成功'); echo($userModel->username . '登录成功'); } else { //如果某一条验证规则没有通过,则会报错,getError方法返回的错误信息(字符串) //就是对应字段的验证规则里面的错误提示信息。 // dump($userModel->getError()); // dump(I('post.')); $this->assign('errors', $userModel->getError()); $this->assign('old', I('post.')); $this->display(); } } else { $this->display(); } } //读取某个用户 private function checkUser($usernaem,$password) { //数组 $conditionArray=array( 'username'=>$usernaem, 'password'=>$password, ); return D('User')->where($conditionArray)->find(); } }
登录如下:
PS:不知道为什么UserModel中的$_validate不起作用????是因为/静态定义,只在使用create方法创建数据对象的时候自动调用:
项目源码:http://files.cnblogs.com/files/shamgod/MyProject.zip