hyperf UI 插件,用php代码写element组件神器,无需修改vue文件即可快速实现各种复杂的element页面搭建


Keywords
admin, ui, element, vue, hyperf
License
MIT

Documentation

喜欢的请点个star!

HPlus,基于hyperf、element UI 插件式快速开发框架

UI插件文档

HPlus UI 以插件形式接入,基于此插件可实现各种页面功能开发 ,也可以自定义组件、

  • UI插件 composer require hyperf-plus/ui:~1.0
  • 后台插件 composer require hyperf-plus/admin:~2.0
  • 更多开发中...

安装方法:

    composer require hyperf-plus/ui:~1.0

    php bin/hyperf.php ui:init  初始化静态文件。

    有特殊定制用户可以修改 根目录下的resources/vue项目文件,如有只需要基本页面可以忽略vue文件

在该命令会将resources/ui/vue文件拷贝到您的项目根目录(方便特殊定制),static资源拷贝到web 目录:

使用

1、快速创建demo示例

下面是一个简单使用的代码示例

(1)、创建资源控制器入口(一个项目只需创建一次即可)
可以用命令gen:ui-demo
    php bin/hyperf.php gen:ui-demo  创建UI控制器演示文件。
(2)、启动hyperf 访问 http://127.0.0.1:9501/ui/index

2、或者手动创建请求入口(一个项目只需创建一次即可)

  /**
   可以用注解路由、配置路由注册此方法
   **/
  public function index()
    {
        #创建测试菜单  可以从你自己的数据库拉出菜单结构,但必须是以下结构
        $menuList = [
            [
                "id" => 2,
                "parent_id" => 0,
                "order" => 0,
                "title" => "系统",
                "icon" => "el-icon-setting",
                "uri" => "system",
                "route" => "/index",
                "children" => [
                    [
                        "id" => 2,
                        "parent_id" => 0,
                        "order" => 0,
                        "title" => "测试1",
                        "icon" => "el-icon-setting",
                        "uri" => "system",
                        "route" => "/index/system"
                    ], [
                        "id" => 3,
                        "parent_id" => 0,
                        "order" => 0,
                        "title" => "测试2",
                        "icon" => "el-icon-setting",
                        "uri" => "system",
                        "route" => "/index/test"
                    ],
                ]
            ]
        ];

        # 可以用以上方法添加,也可以用对象方式添加
        $user = new UserEntity();
        $menuItem = new MenuItemEntity();
        $menuItem->setIcon('el-icon');
        $menuItem->setRoute('/index/button');
        $menuItem->setTitle('各种按钮');
        $menu->addMenu($menuItem);
        # ....添加更多
        //创建测试用户信息
        $user = new UserEntity();
        $user->setId(1);
        $user->setUsername('admin');
        $user->setName('毛自豪');
        $user->setAvatar('https://wx.qlogo.cn/mmopen/vi_32/ajNVdqHZLLBpqXMk6kUC4PeB5VrIVtHyUqrcPg65sjKdPxlkBINiaQ1NG6nZC9iaWOh9qdO6VaApJzgWA1wu5h8Q/132');

        #创建UI配置文件
        $setting = new UISettingEntity();
        #设置用户信息
        $setting->setUser($user);
        #设置菜单信息
        $setting->setMenu($menu);

        #设置底部链接
        $setting->setUrl([
            'logout' => route('admin/logout'),
            'setting' => route('admin/setting')
        ]);
        return UI::view($setting);
    }

可以用 demo.php 创建个控制器 /app/Controller/IndexController.php 体验一下

访问 http://127.0.0.1:9501/index/inde

demo控制器例子

查看例子源码

通过以上代码实现如下界面

Image 注解 Image 注解 Image 注解 Image 注解 Image 注解

官网: http://www.hyperf.plus

欢迎加入hyperf.plus交流群,群聊号码:512465490

点击链接加入群聊【hyperf-plus交流群】:群聊号码:512465490

Stable Version Build Status Total Downloads Monthly Downloads Php Version Swoole Version HyperfAdmin License

以插件形式开箱即用

喜欢的帮忙点个star

鸣谢: