Giter VIP home page Giter VIP logo

yii2-ace-admin's Introduction

Yii2 Ace Admin 后台模板

Progress Latest Stable Version Total Downloads Latest Unstable Version GitHub forks GitHub stars GitHub license

一 简介

系统基于yii2高级版本开发,后台模板使用的 Ace Admin。对于一般的后台开发,比较方便; 对于数据表的CURD操作都有封装,且所有操作都有权限控制。现在这个项目只是一个示例项目, 主要功能被我移到: jinxing/yii2-admin, 这样引入自己项目更方便一些

二 特点

  • 使用RBAC权限管理,所有操作基于权限控制
  • 视图使用JS控制,数据显示使用的jquery.DataTables
  • 基于数据表的CURD都有封装,添加新的数据表操作方便

三 安装要求

  • PHP >= 5.4
  • MySQL

四 项目demo

五 安装

  • 不使用 composer 安装可以从下面地址下载打包文件,并从第3步开始安装

  • 提示:请先确定安装了Composer Asset插件:

    php composer.phar global require "fxp/composer-asset-plugin:^1.2.0"
    

5.1 执行 composer 安装项目

php composer create-project liujx/yii2-app-advanced

5.2 执行该目录下的 init 初始化配置(生成本地配置文件)

php init

5.3 配置好数据库配置后,导入数据表结构

需要顺序执行

  • 导入rbac migration 权限控制数据表

    php yii migrate --migrationPath=@yii/rbac/migrations
    
  • 导入后台默认数据(菜单、默认权限)

    php yii migrate --migrationPath=@jinxing/admin/migrations
    
  • 导入用户表数据

     php yii migrate 
    
  • 后台默认超级管理员账号:super 密码:admin123

  • 管理员账号:admin 密码:admin888

六 使用说明

2.0.0 的配置说明可以查看jinxing/yii2-admin

6.1 基本操作的权限(以管理员操作为例):

  • admin/index (显示管理员页面 + 左侧导航显示)
  • admin/search (管理员数据显示表格数据显示)
  • admin/create (添加管理员信息)
  • admin/update (修改管理员信息)
  • admin/delete (删除管理员信息)
  • admin/delete-all (批量删除管理员数据)
  • admin/upload (上传管理员头像)
  • admin/export (管理员数据信息导出)

每一个请求对应一个权限,请求路径就是权限名称,权限验证在Controller beforeAction 方法中验证

6.2 使用后台代码生成功能

使用后台代码生成功能

点击下一步下一步就好了

该功能所做事情:

  1. 生成controller文件
  2. 生成model文件
  3. 生成view文件
  4. 添加权限信息(并将权限分配给超级管理员)
  5. 添加菜单信息

6.2.1 生成控制器说明

namespace backend\controllers;

/**
 * Class ChinaController
 * @package backend\controllers
 */
class ChinaController extends Controller 
{
    /**
     * @var string 定义使用的model
     */
    protected $modelClass = '\common\models\China';
}

6.2.2 视图文件JS配置

    var arrParent = {"0": "**", "1": "湖南"};
    /**
     * 简单配置说明
     * title 配置表格名称
     * table DataTables 的配置 
     * --- columns 中的 value, search, edit, defaultOrder, hide, view 是 meTables 的配置
     * ------ value 为编辑表单radio、select, checkbox, 搜索的表单的select 提供数据源,格式为一个对象 {"值": "显示信息"}
     * ------ search 搜索表单配置(不配置不会生成查询表单), type 类型支持 text, select 其他可以自行扩展
     * ------ edit 编辑表单配置(不配置不会生成编辑表单), 
     * --------- type 类型支持hidden, text, password, file, radio, select, checkbox, textarea 等等 
     * --------- MeTables.inputCreate 等后缀函数为其生成表单元素,可以自行扩展
     * --------- 除了表单元素自带属性,比如 required: true, number: true 等为 jquery.validate.js 的验证配置
     * --------- 最终生成表单元素 <input name="name" required="true" number="true" />
     * ------ defaultOrder 设置默认排序的方式(有"ace", "desc")
     * ------ hide or bHide or isHide 该列是否需要隐藏 true 隐藏
     * ------ view or bViews or isViews 该列是否在详情里面显示 false 不显示
     * ------ export or bExport or isExport 是否导出这一列的数据,设置为false 表示不导出
     * 其他配置查看 meTables 配置
     */
    
    // 自定义表单处理方式
    $.extend(MeTables, {
        /**
         * 定义编辑表单(函数后缀名Create)
         * 使用配置 edit: {"type": "email", "id": "user-email"}
         * edit 里面配置的信息都通过 params 传递给函数
         */
        "emailCreate": function(params) {
            return '<input type="email" name="' + params.name + '"/>';
        },
        
        /**
         * 定义搜索表达(函数后缀名SearchMiddleCreate 和 SearchCreate 函数 负责渲染搜索 html )
         * 使用配置 search: {"type": "email", "id": "search-email"}
         * search 里面配置的信息都通过 params 传递给函数
         */
        "emailSearchMiddleCreate": function(params) {
            return '<input type="text" name="' + params.name +'">';
        }
    });
    
    var m = meTables({
        title: "地址信息",
        table: {
            columns:[
                {
                   title: "id", 
                   data: "id", 
                   defaultOrder: "desc",
                   edit: {
                       type: "text", // 这一列可以不用写,默认type 为 text 
                       required: true,
                       number: true,
                       name: "id"   // 这一列可以不用写,默认为外层的 data 属性
                   }
                },
                {
                    title: "地址名称",
                    data: "name", 
                    edit: {
                       required: true, 
                       rangeLength: "[2, 40]"
                    },
                    search: {"type": "text"},
                    sortable: false
                },
                {
                    title: "父类ID", 
                    data: "pid", 
                    value: arrParent,
                    edit: {
                       required: true, 
                       number: true
                    },
                    // 不管是search 或者 edit 定义了type 为 select、radio、checkbox 需要通过 value 来提供表单生成下拉的、选择的数据
                    search: {type: "select"}
                }
            ]
        }
    });


    $(function(){
        m.init();
    })

七 其他说明

8.1. 使用的扩展包 jinxing/yii2-admin

八 预览

  1. 登录页面 登录页
  2. 数据显示 数据显示
  3. 数据编辑 数据显示
  4. 权限分配 权限分配
  5. 代码生成 代码生成

yii2-ace-admin's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

yii2-ace-admin's Issues

table 列表显示图片的问题

我想在列表某个字段,字段的值是url,我想以图片的形式显示出来,下面是我的写法,data里的回调能执行成功,图片也能显示,但详情按钮不能使用报错。请问有正确的写法吗

 {
                        "title": "缩略图",
                        "data": function (data) {
                            console.log(data);
                            return "<img src='"+data.thumb+"'>";
                        },
                        "sName": "thumb",
                        "bSortable": false,
                        "edit": {
                            "type": "file",
                            options: {
                                "id": "file",
                                "name": "UploadForm[thumb]",
                                "input-name": "thumb",
                                "input-type": "ace_file",
                                "file-name": "thumb",
                            }
                        }
                    },

列表页如果有两个文件上传,怎么处理呢?

向下面这种情况,input的id如果都设置为file,就只会有一个生效,如果用class的话就不行,
以为是

   $(function(){
            m.init();
            $file = $("#file");
        });

在控制,结果不是

          {
                        "title": "缩略图",
                        "data": "thumb",
                        "sName": "thumb",
                        "isHide": true,
                        "edit": {
                            "type": "file",
                            options: {
                                "id": "file",
                                "name": "UploadForm[thumb]",
                                "input-name": "thumb",
                                "input-type": "ace_file",
                                "file-name": "thumb",
                            }
                        }
                    },
                    {
                        "title": "二维码",
                        "data": "qrcode",
                        "sName": "qrcode",
                        "isHide": true,
                        "edit": {
                            "type": "file",
                            options: {
                                "id": "file",
                                "name": "UploadForm[qrcode]",
                                "input-name": "qrcode",
                                "input-type": "ace_file",
                                "file-name": "qrcode",
                            }
                        }
                    },

发现一个权限管理的前端BUG

当导航栏目大于两级的时候,在分配权限页面,左侧导航栏点击根菜单会报错。
edit?name=admin:1788 Uncaught TypeError: Cannot read property 'split' of null at HTMLDivElement.<anonymous> (edit?name=admin:1788) at HTMLDivElement.dispatch (jquery.min.js:3) at HTMLDivElement.r.handle (jquery.min.js:3) at Object.trigger (jquery.min.js:3) at n.fn.init.triggerHandler (jquery.min.js:3) at a.jstree.plugins.checkbox.trigger (jstree.min.js:2) at a.jstree.plugins.checkbox.select_node (jstree.min.js:3) at a.jstree.plugins.checkbox.activate_node (jstree.min.js:3) at a.jstree.plugins.checkbox.activate_node (jstree.min.js:4) at a.jstree.plugins.checkbox.<anonymous> (jstree.min.js:2)

原因分析:当大于两级的时候,父菜单没有地址(URL),所以选择的时候会在NULL上调用了split方法。
修改:
` $(function(){
$("#tree-one").jstree({
"plugins" : ["checkbox" ],
core: {
"animation" : 0,
"check_callback" : true,
data:
}
}).on('changed.jstree', function(e, data){
if (data.action === "select_node" || data.action === "deselect_node") {
var isChecked = data.action === "select_node",
// 选中的是目录
length = data.node.children.length,
attributes = [];
if (length > 0) {
for (var i = 0; i < length; i ++) {
//增加了为空的判断,问题解决
if(data.instance.get_node(data.node.children[i]).data != null){
attributes.push(data.instance.get_node(data.node.children[i]).data.split("/")[0]);
}
}
} else {
attributes.push(data.node.data.split("/")[0]);
}

            attributes.forEach(function(attribute) {
                $("input[value^='" + attribute + "/']").prop('checked', isChecked);
            });
        }
    });`

Api 后台配置+ doc文档

我想以你的这个框架为基础 ,再添加一个Api管理的组件。
Api管理主要是添加api,然后根据相关参数 生成doc文档供。能否提供一下思路。

用你的命令安装不了,自己下载了vendor放进去,一直报错

php composer.phar create-project liujx/yii2-app-advanced
这个命令一直报错,说库找不到
c:\composer>php composer.phar create-project liujx/yii2-app-advanced
Installing liujx/yii2-app-advanced (1.2.2)

  • Installing liujx/yii2-app-advanced (1.2.2): Loading from cache
    Created project in C:\composer\yii2-app-advanced
    Loading composer repositories with package information
    Updating dependencies (including require-dev)
    Your requirements could not be resolved to an installable set of packages.

Problem 1
- yiisoft/yii2 2.0.9 requires bower-asset/jquery 2.2.@stable | 2.1.@stable | 1.11.@stable | 1.12.@stable -> no matching package found.
- yiisoft/yii2 2.0.8 requires bower-asset/jquery 2.2.@stable | 2.1.@stable | 1.11.@stable -> no matching package found.
- yiisoft/yii2 2.0.7 requires bower-asset/jquery 2.2.
@stable | 2.1.@stable | 1.11.@stable -> no matching package found.
- yiisoft/yii2 2.0.6 requires bower-asset/jquery 2.1.@stable | 1.11.@stable -> no matching package found.
- yiisoft/yii2 2.0.13.1 requires bower-asset/jquery 3.2.*@stable | 3.

我有用vpn连接还是这个结果。

我就下载你的源代码,然后yii2的vendor目录放进去,打开后台页面好像有库找不到,也是报错

上传图片csfr无法获得

我复制了你的dropzone的上传upload,但是死活提交数据获得不了csfr,ajax提交过去的时候看的到提交数据里面有csrf,但是Yii::$app->getRequest()里面的bodyparam里面没有提交的参数。。不知道什么原因。

关于异步上传的建议

现在上传为异步上传方式,假如上传了文件,不点击确定就会出现文件已经上传了,但是却没有入库。可以改成提交后上传更符合逻辑一点。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.