您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > PHP框架 > CodeIgniter

Codeigniter+ExtJS实现用户权限管理

作者:UncleToo  来源:原创  日期:2014-03-26 7:44:56
收藏  评论:( 1 )  阅读:1619

最近在开发一套管理系统,选用的是Codeigniter框架。在做用户权限管理的时候忽然想到ExtJS这个类库,于是就想用Codeigniter+ExtJS实现这个功能。这里只是我随性单独写的,并没有也能用到系统中,因此有不足之处请大家多补充,代码也只有主要部分,供大家参考。

这个例子就是简单的用户和角色管理,包括用户的增删改,角色的增删改以及不能更改或删除管理员用户等。

当然,开发之前要下载Extjs到本地,这里就不在叙述了。

首先我们需要设计数据表,存放用户和角色信息,两张表之间通过group_id关联:

-- groups 角色表
CREATE TABLE IF NOT EXISTS `groups` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `user_add` int(1) NOT NULL,
  `user_edit` int(1) NOT NULL,
  `user_delete` int(1) NOT NULL,
  `group_add` int(1) NOT NULL,
  `group_edit` int(1) NOT NULL,
  `group_delete` int(1) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;
-- users 用户表
CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `group_id` int(11) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(100) NOT NULL,
  `real_name` varchar(150) NOT NULL,
  `email` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;


下面我们要创建两个控制器,分别为用户控制器(application/controllers/user.php)和角色控制器(application/controllers/group.php)。

在用户控制器中我们创建了用户登陆函数及用户session控制函数:

public function ext_login()
{
    $cond = array(
        'username' => $_POST['textusername'],
        'password' => $_POST['textpassword']
    );
    $query = $this->db->get_where('users', $cond);
    if ($query->num_rows() != 0)
    {
        $row = $query->row();
        // get group detail
        $g_cond = array(
            'id' => $row->group_id
        );
        $g_query = $this->db->get_where('groups', $g_cond);
        $g_row = $g_query->row();
        // pass the the info to session
        $this->session->set_userdata('u_id', $row->id);
        $this->session->set_userdata('u_name', $_POST['textusername']);
        $this->session->set_userdata('g_id', $g_row->id);
        $this->session->set_userdata('g_u_add', $g_row->user_add);
        $this->session->set_userdata('g_u_edit', $g_row->user_edit);
        $this->session->set_userdata('g_u_delete', $g_row->user_delete);
        $this->session->set_userdata('g_g_add', $g_row->group_add);
        $this->session->set_userdata('g_g_edit', $g_row->group_edit);
        $this->session->set_userdata('g_g_delete', $g_row->group_delete);
        echo "{success:true}";
    }
    else
    {
        echo "{success:false, error:'User not found!'}";
    }
}
public function ext_get_session()
{
    $output = "{success:true, sessions: {";
    $output .= "u_id: '".$this->session->userdata('u_id')."',";
    $output .= "u_name: '".$this->session->userdata('u_name')."',";
    $output .= "g_id: '".$this->session->userdata('g_id')."',";
    $output .= "g_u_add: '".$this->session->userdata('g_u_add')."',";
    $output .= "g_u_edit: '".$this->session->userdata('g_u_edit')."',";
    $output .= "g_u_delete: '".$this->session->userdata('g_u_delete')."',";
    $output .= "g_g_add: '".$this->session->userdata('g_g_add')."',";
    $output .= "g_g_edit: '".$this->session->userdata('g_g_edit')."',";
    $output .= "g_g_delete: '".$this->session->userdata('g_g_delete')."'";
    $output .= "}}";
    echo $output;
}

当用户登陆后,将通过ext_get_session函数设置用户信息的SESSION,同时我们也可以创建一个退出登录的函数,只要清空这些session值即可,这里就不展示了。

用户session获取后页面将通过permissions.js文件的setPermissions()函数,以AJAX的方式获取角色信息,并设置相关按钮是否可用:

permissions.js

function setPermissions() {
    Ext.Ajax.request({
        url: BASE_URL + 'user/ext_get_session',
        method: 'POST',
        success: function(o) {
            var obj = Ext.util.JSON.decode(o.responseText);
            // set enable/disable grid panel
            if (obj.sessions.u_id != '') {
                Ext.getCmp('fLogin').setDisabled(true);
                Ext.getCmp('gUsers').setDisabled(false);
                Ext.getCmp('gGroups').setDisabled(false);
                Ext.getCmp('userLabel').setText('Welcome "'+obj.sessions.u_name+'"');
            } else {
                Ext.getCmp('fLogin').setDisabled(false);
                Ext.getCmp('gUsers').setDisabled(true);
                Ext.getCmp('gGroups').setDisabled(true);
                Ext.getCmp('userLabel').setText('Please Login');
            }
            // set users toolbar button
            if (obj.sessions.g_u_add == '1') {
                Ext.getCmp('tbUserAdd').setDisabled(false);
            } else {
                Ext.getCmp('tbUserAdd').setDisabled(true);
            }
            if (obj.sessions.g_u_edit == '1') {
                Ext.getCmp('tbUserEdit').setDisabled(false);
            } else {
                Ext.getCmp('tbUserEdit').setDisabled(true);
            }
            if (obj.sessions.g_u_delete == '1') {
                Ext.getCmp('tbUserDelete').setDisabled(false);
            } else {
                Ext.getCmp('tbUserDelete').setDisabled(true);
            }
            // set groups toolbar button
            if (obj.sessions.g_g_add == '1') {
                Ext.getCmp('tbGroupAdd').setDisabled(false);
            } else {
                Ext.getCmp('tbGroupAdd').setDisabled(true);
            }
            if (obj.sessions.g_g_edit == '1') {
                Ext.getCmp('tbGroupEdit').setDisabled(false);
            } else {
                Ext.getCmp('tbGroupEdit').setDisabled(true);
            }
            if (obj.sessions.g_g_delete == '1') {
                Ext.getCmp('tbGroupDelete').setDisabled(false);
            } else {
                Ext.getCmp('tbGroupDelete').setDisabled(true);
            }
        }
    });
}


在上面的js中我们都是用过使用元素ID来控制是否可用,因此下面我们就要使用ExtJS来创建管理界面:

用户登陆脚本(assets/js/login.js)

var loginForm = new Ext.FormPanel({
    id: 'fLogin'
});
function fnLogin() {
    loginForm.getForm().submit({
        success: function() {
            setPermissions();
            strUsers.load();
        },
        failure: function(form, o) {
            if (typeof(o.response) != 'undefined') {
                var json = o.response.responseText;
                var r = Ext.util.JSON.decode(json);
                Ext.Msg.alert('Login failed', r.error);
            }
        }
    });
}


用户管理脚本(assets/js/user.js)

var tbUsers = new Ext.Toolbar({
    items: [{
        text: 'Add',
        id: 'tbUserAdd'
    }, '-', {
        text: 'Edit',
        id: 'tbUserEdit'
    }, '-', {
        text: 'Delete',
        id: 'tbUserDelete'
    }, '->', {
        text: '',
        xtype: 'label',
        style: 'color:#0066cc;font-weight:bold;',
        id: 'userLabel'
    }, '-', {
        text: 'Logout'
    }]
});
var gridUsers = new Ext.grid.GridPanel({
    id: 'gUsers'
});


角色管理脚本(assets/js/group.js)

var tbGroups = new Ext.Toolbar({
    items: [{
        text: 'Add',
        id: 'tbGroupAdd'
    }, '-', {
        text: 'Edit',
        id: 'tbGroupEdit'
    }, '-', {
        text: 'Delete',
        id: 'tbGroupDelete'
    }]
});
var gridGroups = new Ext.grid.GridPanel({
    id: 'gGroups'
});


这里做的比较简单,对于用户和角色的添加修改,这里使用的是弹窗形式,删除的时候也有确认提示。如下图:

Codeigniter+ExtJS实现用户权限管理




除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/ci/879.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论