1、页面准备：

（1）前端资源的导入：将准备好的页面添加到项目中，放到Public目录下（公共的页面样式、js、图片等资源）

（2）添加登录的视图模板

　　将登录页面的视图放到Amin>View>Login>index.html中

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <meta name="description" content="">

    <meta name="author" content="">

    <link rel="icon" href="">

    <title>新闻cms内容管理平台</title>

    <!-- Bootstrap core CSS -->

    <link href="/Public/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->

    <link href="signin.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!--[if lt IE 9]>

    <![endif]-->

</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> <!-- /container -->

<script src="/Public/js/jquery.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->

</body>

</html>

（3）添加登录的控制器和方法

　　完成代码实现：（文件位置：Admin>Controller>LoginController.class.php）

<?php

namespace Admin\Controller;

use Think\Controller;

class LoginController extends Controller {

    public function index(){

       $this->display();  //默认加载View>Login>index.html

    }

}

（3）浏览器访问

　　http://172.17.0.2/index.php?m=admin&c=login&a=index

（4）页面显示

2、数据库准备

（1）数据库恢复：  >mysql :  source /var/www/html/cms.sql

（2）数据库配置：（位置：Common>Conf>config.php和db.php）

1)config.php配置

//允许加载其他配置文件，其文件名为（多个文件的文件名用逗号隔开）

'LOAD_EXT_CONFIG' => 'db'

2）db.php数据库配置

<?php

return array(

    'DB_TYPE' => 'mysql',

    'DB_HOST' => '127.0.0.1',  //数据库服务器主机ip地址

    'DB_USER' => 'root',  //数据库用户名

    'DB_PWD' => '',   //数据库用户密码

    'DB_PORT' => 3306,   //数据库端口号

    'DB_NAME' => 'cms',   //数据库名

    'DB_CHARSET' => 'utf8', //数据库编码

    'DB_PREFIX' => 'cms_'   //数据库前缀名

);

2、layer插件

(1）layer插件准备：

官方下载地址:  http://layer.layui.com

官方教程： www.layui.com/doc/modules/layer.html

layer插件包括extend目录、skin目录和layer.js文件

完整文件放到项目下的dialog目录(位置: Public>js>dialog)

（2）插件二次封装：

为便于在此项目中使用，再对项目需要的弹出层进行二次封装，命名为dialog.js(位置：Public>js>dailog.js)

（3）常用弹出层：

1）错误弹出层

// 错误弹出层

error: function(message) {

    layer.open({

        content:message,

        icon:2,

        title : '错误提示',

    });

},

2）成功弹出层

// 成功弹出层

success : function(message,url) {

    layer.open({

        content : message,

        icon : 1,

        yes : function(){

            location.href=url;

        },

    });

},

3）确认弹出层

// 确认弹出层

confirm : function(message, url) {

    layer.open({

        content : message,

        icon:3,

        btn : ['是','否'],

        yes : function(){

            location.href=url;

        },

    });

}

4）无须跳转弹出层

//无需跳转到指定页面的确认弹出层

toconfirm : function(message) {

    layer.open({

        content : message,

        icon:3,

        btn : ['确定'],

    });

}

（4）弹出层的调用：

1）引入本系统的类库dialog.js文件 （在Amin>View>Login>index.html中引入）

<script src="/Public/js/dialog.js"></script>

2）引入第三方插件layer.js文件（在Amin>View>Login>index.html中引入）

<script src="/Public/js/dialog/layer.js"></script>

3）调用（js文件）

dialog.error("这是弹出的消息内容")；

3、数据校验

(1)数据提交的两种方式：

　　1）同步提交数据：页面跳转（体验不好）

　　2）异步提交数据：通过js的ajax请求，页面不跳转，异步请求地址

(2)异步请求的实现：

　　1）jquery框架的ajax实现手册 http://jquery.cuishifeng.cn/

　　2）$.ajax()、  $.get()、  $.post()三种方式的理解

(3)前端登录的业务处理:

1）js校验：(位置: Public>js>admin>login.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

        $.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');

    }

}

2）html表单触发（Amin>View>Login>index.html文件）

<button class="btn btn-lg btn-primary btn-block" type="button" onclick="login.check()">登录</button>

3)login.js文件引入（在Amin>View>Login>index.html中引入）

<script src="/Public/js/admin/login.js"></script>

3）浏览器运行效果

(4)后端php业务处理:

1)check方法的数据校验：

$username = $_POST['username'];

$password = $_POST['password'];

if(!trim($username)) {

    return show(0,'用户名不能为空');

}

if(!trim($password)) {

    return show(0,'密码不能为空');

}

前端的数据校验是js实现的，其在浏览器中是可视的，用户是可看到的，为避免用户对修改js文件规避数据校验,所以必须在服务器端再次校验

show()公共方法的封装：（多处地方要用到，所以作为公共函数封装到Common/Common/function.php文件）

/**展示数据

 * @param $status  状态码

 * @param $message  展示的消息内容

 * @param array $data

 */

function  show($status, $message,$data=array()) {

    $result = array(

        'status' => $status,

        'message' => $message,

        'data' => $data,

    );

    exit(json_encode($result));

}

2）数据校验通过的数据处理一-------用户不存在（登录失败）（check方法）

$ret = D('Admin')->getAdminByUsername($username); //查询admin表中是否存在该用户

if(!$ret || $ret['status'] !=1) {

    return show(0,'该用户不存在');

}

if($ret['password'] != getMd5Password($password)) {

    return show(0,'密码错误');

}

判断用户是否存在----操作数据库查询数据（Application/Common/Model/adminModel.class.php）

<?php

namespace Common\Model;

use Think\Model;

class AdminModel extends Model {

    private $_db = '';

    public function __construct() {

        $this->_db = M('admin'); //实例化admin表

    }

    public function getAdminUsername($username) {

        $ret = $this->_db->where('username="'.$username.'"')->find();

        return $ret;

    }

}

对用户输入的密码进行md5加密（Application/Common/Common/function.php）

function getMd5Password($password) {

    return md5($password . C('MD5_PRE'));   // C('MD5_PRE')访问配置文件中'MD5_PRE'配置项的设置值

}
注：直接md5加密也不是太安全，所以配置一个自定义的前缀，然后再进行md5加密，相对更安全

MD5_PRE配置（Application/Common/Conf/config.php）

'MD5_PRE' => 'my_cms',

3）数据校验通过的数据处理二-------用户存在（登录成功）（check方法）

//将用户信息保存到session中

session('adminUser', $ret);

return show(1,'登录成功');

(5)浏览器运行效果

4、退出登录（利用session失效）

(1)设置访问后台页面时的session判断

public function index() {

    if(session('adminUser')) {

        $this->redirect('/iindex.php?m=admin&c=index');

    }

   $this->display();  //默认加载View>Login>index.html

}

(2)后台首页面退出登录的请求

<li>

  <a href="/index.php?m=admin&c=login&a=logout"><i class="fa fa-fw fa-power-off"></i> 退出</a>

</li>

(3)添加logout控制器方法处理退出登录

public function logout() {

    session('adminUser', null);

    $this->redirect('/index.php?m=admin&c=login&a=index');

}

退出成功后自动跳转到后台登录页面。

后台登录功能完成！

新闻cms管理系统(二) ---- 后台登录功能的更多相关文章

  1. 九十三：CMS系统之cms后台登录功能

    config form from wtforms import Form, StringField, IntegerFieldfrom wtforms.validators import Email, ...

  2. Python：名片管理系统（增加登录功能后出现问题，求教）

    我将一个简单的名片管理系统定义成了函数.. 2层. 一个登录界面: 一个名片管理系统使用界面: 逻辑是:登录成功=>跳入名片系统使用界面,同时,跳出登录界面,给出欢迎使用,程序结束. 此时问题来 ...

  3. 新闻cms管理系统(三) ------菜单管理

    1.前期准备工作 (1)模板介绍 添加菜单的模板页面 菜单管理首页: 添加菜单页面: (2)公共类引入介绍 公共函数文件的引入(位置: Application/Admin/Controller/Com ...

  4. 新闻cms管理系统 (补)-----路由优化一

    修改后台的入口文件,将访问后台页面的入口文件设为admin.php,并且访问该文件的模块默认为admin模块. 添加后台入口文件具体操作步骤: (1)项目目录下新建admin.php (2)实现入口文 ...

  5. 新闻cms管理系统(一) ---- thinkphp框架准备

    1.thinkphp介绍 一个快速.简单的基于MVC和面向对象的轻量级PHP开发框架 MVC:M数据层. V视图层 . C控制层 优点: (1)入手非常快 (2)thinkpjp提供核心内库.文件.函 ...

  6. 绿色的银行类cms管理系统模板——后台

    链接:http://pan.baidu.com/s/1pK7Vu9X 密码:4cc5

  7. 【代码审计】VAuditDemo 后台登录功能验证码绕过

    在 admin/logCheck.php中 $_POST['user']和$_POST['pass'] 未经过任何过滤或者编码处理就传入到$query中,可能存在万能密码绕过机制 但是$pass经过了 ...

  8. 27、Flask实战第27天：cms后台登录

    cms后台登录界面 后台登录页面,我们不用自己写,只需要去Bootstrap中文网去找一个模板改一下就行 这里使用的模板是:https://v3.bootcss.com/examples/signin ...

  9. 新闻cms管理系统功能介绍

    一. 后台登录功能 1.后台登录 2.数据校验 3. dialog插件 4.layer插件 5. 退出登录(利用session失效) 二. 菜单管理 1.后台入口文件优化 2.公共文件引入 3.菜单的 ...

随机推荐

  1. [LeetCode]Maximum Length of Repeated Subarray

    Maximum Length of Repeated Subarray: Given two integer arrays A and B, return the maximum length of ...

  2. 《JavaWeb从入门到改行》多重外键关系在java中的处理方案

    目录:(点击红色方框展开子目录) 问题描述 无 项目案例说明 业务描述 数据库说明 项目源码及下载 无 问题描述 如上两图,数据库中各个表之间有很多的外键关系,其中业务关系是一个用户下有该用户的订单, ...

  3. Node.js如何找npm模板

    首先需要去官网下载npm文件 https://www.npmjs.com/ 下载完成,使用CD查看是否安装完成 然后就是贴代码看npm模板的功能 var _ = require('underscore ...

  4. safari

    http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/ http://rawgit.com/zha ...

  5. COCI2017-2018-2 San

    题意 有\(n \leq 40\)个节点,每个节点有权值\(H \leq 1e9\)和贡献\(v \leq 1e9\),从任意一个点可以向右跳到一个权值不小于它的节点,并获得该点贡献 可以从任意一个点 ...

  6. ThreeJS文字作为纹理贴图

    文字作为纹理贴图 From:http://www.linhongxu.com/post/view?id=222 这里可以使用canvas作为纹理贴图,Three为我们提供里CanvasTexture ...

  7. 在ES6中如何优雅的使用Arguments和Parameters

      原文地址:how-to-use-arguments-and-parameters-in-ecmascript-6 ES6是最新版本的ECMAScript标准,而且显著的改善了JS里的参数处理.我们 ...

  8. jquery实现除指定区域外点击任何地方隐藏DIV

    <!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> &l ...

  9. Google APAC----Africa 2010, Qualification Round(Problem B. Reverse Words)----Perl 解法

    原题地址链接:https://code.google.com/codejam/contest/351101/dashboard#s=p1 问题描述: Problem Given a list of s ...

  10. Wireframe Process