一、目标

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实现用户登录设计的更多相关文章

  1. 使用BootStrap制作用户登录UI

    先看看劳动成果 布局 左右各一半(col-md-6) 左侧登录框占左侧一半的10/12 右侧是登录系统的注意事项 使用到的BootStrap元素 well 输入框组(input-group) 按钮(b ...

  2. ThinkPHP实现用户登录

    ThinkPHP实现用户登录 ? //默认url入口 ? class IndexAction extends Action{ function index() { //检查用户是否登录 if(isse ...

  3. DBCP(MySql)+Servlet+BootStrap+Ajax实现用户登录与简单用户管理系统

    目  录   简介 本次项目通过Maven编写 本文最后会附上代码 界面截图 登录界面 注册界面 登录成功进入主页 增加用户操作 删除用户操作 修改用户操作 主要代码 Dao层代码 DBCP代码 Se ...

  4. Asp.Net Core 项目实战之权限管理系统（5） 用户登录

    0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有 1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端 2 Asp.Net Core 项目实战之 ...

  5. Yii2.0 用户登录详解（上）

    一.准备 在开始编写代码之前,我们需要思考一下:用户登陆模块,实现的是什么功能?很明显,是登陆功能,那么,登陆需要用户名和密码,我们在数据库的一张表中就应该准备好用户名和密码的字段,再思考一下,如果要 ...

  6. django用户登录和注销

    django版本:1.4.21. 一.准备工作 1.新建项目和app [root@yl-web-test srv]# django-admin.py startproject lxysite [roo ...

  7. Java Web 开发利用Struts2+Spring+mybatis写一个用户登录界面以及简单的数据交互

    框架的东西太复杂也难以讲通,直接上代码: 一.首先得配置环境 和导入必要的jar包 有一些重要的如下: Filter文件夹下的SafetyFilter.java   model文件夹下的 Global ...

  8. 用PHP和Ajax进行前后台数据交互——以用户登录为例

    很多网站中都有用户登录系统,要完成用户的注册和登陆,就一定要用到前后台的数据交互.在这里以简单的用户注册和登陆为例介绍一下前后台交互的大致流程. 首先,我们来做一个简单的登陆界面. 这里为了方便我使用 ...

  9. Django用户登录与注册系统

    一.创建项目 1.1.创建项目和app python manage.py startproject mysite_login python manage.py startapp login 1.2.设 ...

随机推荐

  1. 编译QT时出现lib/libQtGui.so: undefined reference to `ts_read_raw'的解决办法

    lib/libQtGui.so: undefined reference to `ts_read_raw' /lib/libQtGui.so: undefined reference to `ts_o ...

  2. SQLite数据库的基本API函数

    1 .打开数据库: 说明:打开一个数据库,文件名不一定要存在,如果此文件不存在, sqlite 会自动创建.第一个参数指文件名,第二个参数则是定义的 sqlite3 ** 结构体指针(关键数据结构), ...

  3. python 通过urllib模块在svn中下载文件

    #_*_coding:utf-8_*_ import urllib def Schedule(a,b,c): ''' a:已经下载的数据块 b:数据块的大小 c:远程文件的大小 ''' per = 1 ...

  4. 关于ASCII、GB231、GBK、UTF-8/UTF8、ANSI、unicode的学习笔记

    继续上次的学习内容,写一些自己学习的笔记吧!总是觉得没有笔记的学习总是不那么踏实,我承认自己是个记忆力很差的人,特别羡慕那些可以把自己学过的东西记得很牢靠的人.哎!可惜我不是,那只能做出来点东西,就算 ...

  5. 工作点滴积累（1）---MD5和编码

    今天同事忽然问了一个问题,他发现同一个字符,比如"电影",用项目中的md5工具类生成的hash值和网上提供的在线MD5生成的hash值有时不一样,在只包含了字母字符串中,生成的ha ...

  6. 第七周技术博客发表 web网页开发

    a<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  7. 【BZOJ】【1030】【JSOI2007】文本生成器

    AC自动机/DP Orz ZYF 玛雅快要省选了,赶紧复(xue)习(xi)一下AC自动机…… 其实在AC自动机上DP并没有当初想的那么复杂……就是把DP的转移关系换成了AC自动机上的边而已(不过这题 ...

  8. html5碰撞小球模拟

    这里根据动量守恒和能量守恒定理来计算小球的位置,从而模拟完全弹性碰撞下的小球运行轨迹. html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  9. HDU1005Number Sequence(找规律)

    Number Sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  10. 关于WSDL

    Message Operation 最核心的在于Operation 只要关心Operation就可以了,Operation只有Input, Output没有其他内容,是相对固定的.只要关心一下Inpu ...