# thinkadmin-addons

**Repository Path**: imzhi/think-admin-addons

## Basic Information

- **Project Name**: thinkadmin-addons
- **Description**: 一款ThinkAdmin框架的插件管理工具
- **Primary Language**: PHP
- **License**: MIT
- **Default Branch**: v5.1
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-02-17
- **Last Updated**: 2022-05-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

ThinkAdmin-Addons
===============
该项目是从 <a href='https://gitee.com/zoujingli/ThinkAdmin' targer="_blank">ThinkAdmin</a> 中抽离出来插件管理工具；受到FastAdmin的插件化化启发，个人将自己曾经做过的一些项目提炼成插件并做成插件管理免费提供大家安装。


### 安装
    1. clone ThinkAdmin（https://gitee.com/mi8888/ThinkAdmin.git）项目地址到本地
    2. 安装Composer 输入命令 composer require mi8888/thinkadmin-addons:dev-master
    
### 项目依赖
    * ThinkPHP5.1
    * layui
    * ThinikAdmin v5
    
### 最低环境要求
    * php5.6+
    * mysql 5.5+, utf8mb4编码(mysql5.1安装时选择utf8编码，不支持表情符)
    * 打开rewrite
    
### 插件设计
~~~
目录一
├─ module           模块目录(可以将整个模块封装成插件)
│  ├─controller
      ├─backend           后端管理
      ├─frontend          前端显示  
      ├─api               数据接口
      └─...[custom]       
    ├─ Bootstrap.php     启动文件[可选，如果有则必须实现install与uninstall方法]
    ├─ assets 静态资源目录[下载后，将复制一份到/public/addons/:module,然后通过链接/addons/module/...就可以访问对应的资源地址了]
        ├─bootstrap.js 启动js[admin/view/index/index.html会自动引入该文件]
        ├─bootstrap.css 前置css[admin/view/index/index.html会自动引入该文件]
├─ ...  

目录二
├─ addons           功能元件目录(小功能)
│  ├─:addon [如果是一个JS插件,只要有assets/bootstrap.js就可]
      ├─controller    控制器目录
      ├─view            
      ├─Bootstrap.php     启动文件[可选，如果有则必须实现install与uninstall方法]
      ├─assets 静态资源目录[下载后，将复制一份到/public/addons/:module]
            ├─bootstrap.js 启动js[admin/view/index/index.html会自动引入该文件]
            ├─bootstrap.css 前置css[admin/view/index/index.html会自动引入该文件]
      └─...[custom]       
    ├─ Bootstrap.php     启动文件[可选，如果有则必须实现install与uninstall方法]
    ├─ assets 静态资源目录[下载后，将复制一份到/public/addons/:module,然后通过链接/addons/module/...就可以访问对应的资源地址了]
        ├─bootstrap.js 启动js[admin/view/index/index.html会自动引入该文件]
        ├─bootstrap.css 前置css[admin/view/index/index.html会自动引入该文件]
├─ application
├─ confing
├─ public
~~~
### 额外功能
+ 给textarea添加editor类，会自动渲染成编辑器；
    ```
     <textarea name="content" class='editor'>{$vo.content|default=''|raw}</textarea>
     ```
     如果有警告报红，请将admin.js中正面代码
     ```this.show = function (html) {
            $(this.selecter).html(html);
            this.reInit($(this.selecter));
            setTimeout(function () {
                that.reInit($(that.selecter));
            }, 500);
        };
    ```
    改成，原因是因为reInit()方法渲染了两次富文本编辑器
     ```this.show = function (html) {
             $(this.selecter).html(html);
             this.reInit($(this.selecter));
         };
     ```
 + selectpag异步分页列表，使用时只要给对应input增加selectpage类
     ```
     <input type="text" class="layui-input selectpage" required value="{$vo.cate_id|default=''}"  data-source="{:url('backend.diygoodscate/selectpage')}" name="cate_id" data-field="name">
    ```
    data-field 要显示的字段；
    再修改data-source对应链接的controller文件；
    ```
    /**
     * 商品分类
     * Class Diygoodscate
     * @package app\store\controller\backend
     */
    class Diygoodscate extends Controller
    {
        use addons\traits\SelectPage; //增加这行代码
        ....
    }
    ```
    selectpage参数很多，详情见 https://terryz.gitee.io/selectpage；
    想知道插件封装过程可以去看 src/manager/assets/selectpage/build.js文件
+ 图片上传（这个最实用）
  只要增加 data-upload-image 属性即可
    ```
        <input name='thumb_image' data-upload-image type='hidden'>
    ```
    
    多图上传：
    ```
        <input name='images' data-upload-image="multi" type='hidden'>
    ```

### 设计思想
插件类型暂时分为两类：module和part，module用来承载项目级的插件，比例一个商城，一个官网都可以做为一个module插件；module插件的初步设想是将每个模块之间完全分隔出来，每个模块都是一个小项目。然后controller下分backend和fronted（前后端）,也可以写成admin模块那样只有个api目录；
  controller子目录可以很灵活，自定义也行；    
另一种插件part,个人把它定义为功能元件，它就像人体的细胞一样，是组成器官的最小单位，它的目的是为了封装一个小功能，比如图片裁切，开发测试等等