1.layer.js引用与dialog.js封装

前端界面中需要经常用到弹出对话框的效果,这里基于layer.js进行二次封装,适用于本项目更方便

首先需要将相关的js和css等公共文件放到/Public文件夹中

新建的dialog.js内容:

var dialog = {
    // 错误弹出层
    error: function(message){
        layer.open({
            content:message,
            icon:2,
            title:'错误提示'
        });
    },

    // 成功弹出层
    success: function(message,url){
        layer.open({
            content:message,
            icon:1,
            yes:function(){
                location.href=url;
            }
        });
    },

    // 确认弹出层
    confirm: function(message,url){
        layer.open({
            content:message,
            icon:3,
            btn:['是','否'],
            yes:function(){
                location.href=url;
            }
        });
    },

    //无需跳转到指定页面的确认弹出层
    toconfirm:function(message){
        layer.open({
            content:message,
            icon:3,
            btn:['确定'],
        })
    }
}

2.创建function.php公共函数库

项目中会经常用到公共函数都放在/Application/Common/Common/function.php里面

<?php

//处理调用js弹出层的数据转换为json格式
function show($status,$message,$data=array()){
    $result = array(
        'status' => $status,
        'message' => $message,
        'data' => $data,
    );
    exit(json_encode($result));
}

//MD5加密,用来对登陆用户的密码进行加密处理
function getMD5Password($password){
    return md5($password . C('MD5_PRE'));   //将传入的原始密码+配置文件中定义的后缀字符串一并进行MD5加密计算,提高安全性
}

这里用到了ThinkPHP的内置函数C(),该函数的作用是可以直接调用之前在Application/Common/Conf/config.php中写的配置信息,再附一遍config.php的内容(上一篇里面已经写好的):

<?php
return array(
	//'配置项'=>'配置值'	
	'LOAD_EXT_CONFIG' => 'db',
	'MD5_PRE' => 'lian',
);

3.创建Admin模块

可以直接将框架中自动生成的Home文件夹复制一份修改文件夹名为Admin

3.1创建AdminModel.class.php

教程中是新建文件Application/Common/Model/AdminModel.class.php,而没有放在Application/Admin/Model里面,这样做的意思好像是可以保证通用性更好?

<?php
namespace Common\Model;
use Think\Model;

class AdminModel extends Model {
    private $_db ='';

    public function __construct(){
        $this->_db = M('admin');    //调用Thinkphp里面的M方法将数据库中的admin表(全称是cms_admin,因为在Common\Conf\db.php中设置了PREFIX前缀,所以这里不需要写完整的表名)进行模型化处理
    }

    //通过用户名查询数据库中的表
    public function getAdminByUsername($username=''){
        $res = $this->_db->where('username="'.$username.'"')->find();
        return $res;
    }
}

这里用到了ThinkPHP的内置函数M(),可以直接将数据中的表转换成ORM对象,然后可以用where()->find()等方法来获取相应的数据结果.

3.2创建Login控制器

在Application/Admin/Controller/文件夹中新建LoginController.class.php

<?php
namespace Admin\Controller;        //注意命名空间
use Think\Controller;
class LoginController extends Controller {
    public function index(){
        if(session('adminUser')){        //判断是否存在session已登录状态
            $this->redirect('/admin.php?c=index');
        }
        $this->display();        
    }
    public function check(){        //登陆账号信息校验
        $username = $_POST['username'];
        $password = $_POST['password'];
        if(!trim($username)){
            return show(0,'用户名不能为空');        //调用之前在function.php中写的show()函数
        }
        if(!trim($password)){
            return show(0,'密码不能为空');
        }        

        $ret = D('Admin')->getAdminByUsername($username);    //调用Thinkphp中的D()方法来实例化Admin模块(Model),然后调用模块中的方法
        if(!$ret){
            return show(0,'该用户不存在');
        }        

        if($ret['password'] !=getMD5Password($password)){
            return show(0,'密码错误');
        }

        session('adminUser',$ret);
        return show(1,"登陆成功");
        
    }
}

这里用到了ThinkPHP框架的内置函数D(),用来直接实例化相应的模块,然后可以直接调用模块里面的方法

3.3创建静态模板

ThinkPHP中规定了模板的命名与存放路径的格式:/View/控制器名/index.html,刚才创建了LoginController.class.php,那么他对应的静态模板应该是Application/Admin/View/Login/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="Public/css/bootstrap.min.css">    
    <title>后台登陆</title>
</head>

<body>
    <style>
        .s_center {
            margin-left: auto;
            margin-right: auto;
        }
    </style>
    <div class="s_center container col-lg-6 ">

        <form class="form-signin" enctype="multipart/form-data" method="post">
            <h2 class="form-signin-heading">请登录</h2>
            <label class="sr-only">用户名</label>
            <input type="text" class="form-control" name="username" placeholder="请填写用户名" required autofocus>
            <br />
            <label class="sr-only">密码</label>
            <input type="password" name="password" id="inputPassword" class="form-control" placeholder="密码" required>
            <br />
            <button class="btn btn-lg btn-primary btn-block" type="button" onclick="login.check()">登录</button>
        </form>

    </div>

    <script src="Public/js/jquery.js"></script>
    <script src="Public/js/dialog/layer.js"></script>
    <script src="Public/js/dialog.js"></script>
    <script src="Public/js/admin/login.js"></script>
</body>

</html>

这里登陆按钮绑定了login.check()函数,对应的代码在Public/js/admin/login.js中,实现异步校验登陆账号密码是否正确的效果:

// 前端登陆js业务类
var login = {
    check:function(){
        // 获取登陆页面中的用户名和密码
        var username = $("input[name='username'").val();
        var password = $("input[name='password'").val();

        if(!username){
            dialog.error("用户名不能为空");
        }
        if(!password){
            dialog.error("密码不能为空");
        }

        //执行异步请求
        var url = "index.php?m=admin&c=login&a=check";
        var data={'username':username,'password':password};
        $.post(url,data,function(result){           
            if(result.status == 0){                
                return dialog.error(result.message);
            }
            if(result.status == 1){
                return dialog.success(result.message, 'index.php?m=admin&c=index');
            }
        },'JSON');      //擦~这里一定要记得写'JSON'声明ajax获取到的数据格式类型,否则没法调用result.status属性
    }
}

PHP从前端到后台整站开发实战笔记-2