版权声明:本文为连鹏伟原创文章,未经博主允许不得转载。 https://blog.csdn.net/lpwmm/article/details/80433782
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属性
}
}