PHP-用ThinkPHP和Bootstrap实现用户登录设计
一、目标
1.用ThinkPHP和Bootstrap实现用户登录设
2.初步界面如下

二、用到的工具及框架
1.ThinkPHP
2.Bootstrap
3.Subline
三、开发环境搭建
1.下载ThinkPHP,解压并重命名为自己的项目名称,复制到C:\xampp\htdocs路径下

启动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 UserProject\Controller;
use Think\Controller;
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="Application\UserProject\View\Index\signin.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 UserProject\Model; use Think\Model; 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 UserProject\Controller;
use Think\Controller;
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
PHP-用ThinkPHP和Bootstrap实现用户登录设计的更多相关文章
- 使用BootStrap制作用户登录UI
先看看劳动成果 布局 左右各一半(col-md-6) 左侧登录框占左侧一半的10/12 右侧是登录系统的注意事项 使用到的BootStrap元素 well 输入框组(input-group) 按钮(b ...
- ThinkPHP实现用户登录
ThinkPHP实现用户登录 ? //默认url入口 ? class IndexAction extends Action{ function index() { //检查用户是否登录 if(isse ...
- DBCP(MySql)+Servlet+BootStrap+Ajax实现用户登录与简单用户管理系统
目 录 简介 本次项目通过Maven编写 本文最后会附上代码 界面截图 登录界面 注册界面 登录成功进入主页 增加用户操作 删除用户操作 修改用户操作 主要代码 Dao层代码 DBCP代码 Se ...
- Asp.Net Core 项目实战之权限管理系统(5) 用户登录
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...
- Yii2.0 用户登录详解(上)
一.准备 在开始编写代码之前,我们需要思考一下:用户登陆模块,实现的是什么功能?很明显,是登陆功能,那么,登陆需要用户名和密码,我们在数据库的一张表中就应该准备好用户名和密码的字段,再思考一下,如果要 ...
- django用户登录和注销
django版本:1.4.21. 一.准备工作 1.新建项目和app [root@yl-web-test srv]# django-admin.py startproject lxysite [roo ...
- Java Web 开发利用Struts2+Spring+mybatis写一个用户登录界面以及简单的数据交互
框架的东西太复杂也难以讲通,直接上代码: 一.首先得配置环境 和导入必要的jar包 有一些重要的如下: Filter文件夹下的SafetyFilter.java model文件夹下的 Global ...
- 用PHP和Ajax进行前后台数据交互——以用户登录为例
很多网站中都有用户登录系统,要完成用户的注册和登陆,就一定要用到前后台的数据交互.在这里以简单的用户注册和登陆为例介绍一下前后台交互的大致流程. 首先,我们来做一个简单的登陆界面. 这里为了方便我使用 ...
- Django用户登录与注册系统
一.创建项目 1.1.创建项目和app python manage.py startproject mysite_login python manage.py startapp login 1.2.设 ...
随机推荐
- DSP28335的SPI发送
#include "DSP2833x_Device.h"#include "DSP2833x_Examples.h"unsigned char table[]= ...
- 推荐一款系统软件:Unity tweak tool
功能很多慢慢体会 在软件中心搜索unity tweak tool安装
- B-tree/B+tree/B*tree [转]
(原文出处:http://blog.csdn.net/hbhhww/article/details/8206846) B~树 1.前言: 动态查找树主要有:二叉查找树(Binary Search Tr ...
- 搭建SpringMVC+MyBatis开发框架二
配置web.xml 用如下配置覆盖原有的web.xml内容 <?xml version="1.0" encoding="UTF-8"?> <w ...
- 【扩展】Canvas绘制列表的尝试
传送:http://www.alloyteam.com/2015/10/canvas-attempts-to-draw-list/ 来自:on 2015年10月30日 by TAT.Cson view ...
- mysql字符集基础知识梳理
接着上一篇继续来一篇关于mysql字符设置等问题学习笔记,这篇就不说什么废话了,直接进入正题,不过还是感谢十八哥的无私分享! 我们首先看看mysql整个数据存储和读取一个流程: 连接器(connect ...
- Netsharp快速入门(之19) 平台常用功能(插件操作)
作者:秋时 暗影 转载须说明出处 6.2 插件操作 6.2.1 停用/启用 1.在平台工具-插件管理,右击对应的插件可以使用启用和停用功能.插件停用后会把所有相关的页签.程序集.服务全部停 ...
- 浅谈IT
在没有学计算机应用技术之前我对IT的认知度几乎为零,曾经还天真的认为IT就是白领,只要做上IT行业,以后便可高枕无忧.后来阴差阳错学了这个专业.通过一年的学习,虽然学艺不精但多少对IT行业了解的一知半 ...
- UIResponder类
UIResponder类 UIResponder类是所有视图类的父类,包括UIView, UIApplication, UIWindow. UIResponder类定义了一些响应和处理事件的方法.事件 ...
- [工作积累] bitfield
ISO/IEC 14882:2003: 9.6 Bit-fields [class.bit] A member-declarator of the form identifieropt : const ...