代码模板

HG大约 2 分钟

代码模板

代码模板功能由 系统配置+模板+可视化页面配置来实现,代码的生成,方便前端或调用者通过所选接口/控制器快速生成代码

1、系统配置

配置文件apidoc.php中,

// /config/apidoc.php
return [
    //...
    // (选配)代码模板
    'code_template'=>[
        [
            // (必须)标题
            'title'=>'vue前端Api文件',
            // (必须)选择模式,controller、api
            'select_mode'=>'controller',
            // (必须)是否多选
            'multiple'=>false,
            // (选配)限制接口/控制器勾选的数量
            'limit'=>1,
            // (必须)模板文件地址
            'template'=>'template\codes\fe_api_file.tpl',
            // (必须)代码语言
            'language'=>'javascript',
            // (选配)配置表单
            'form' => [
                // 表单元素布局方式 ,inline=联排;grid=网格
                'layout' => 'inline',
                // (必须)表单项
                'items' => [
                    [
                        // (必须)表单项标题
                        'title' => '请求封装import',
                        // (必须)表单项字段
                        'field' => 'http_import',
                        // (必须)输入类型,支持:input、select、checkbox
                        'type' => 'input'
                    ],
                    [
                        'title' => '显示注释',
                        'field' => 'show_desc',
                        'type' => 'checkbox'
                    ],
                ],
                // (选配)表单默认值
                'data'=>[
                    'http_import'=>'import sendRequest from "@/utils/request";',
                    'show_desc'=>true
                ]
            ],
        ],
        //...
    ]
]


通过如上配置,我们就可以看到页面右上角就出现 代码模板 的菜单了,点击弹出窗口

2、模板编写

根据以上配置中template模板目录,在指定位置创建模板文件,示例模板内容如下

{$form.http_import}

export const URLS = {
{foreach $data.children as $k=>$item}
    "{$item.name}": "{$item.url}",
{/foreach}
};

export default class {$lcfirst(data.controller)}Api {
{foreach $data.children as $k=>$item}
    {if '{$form.show_desc}'=='true'}// {$item.title}{/if}
    static {$item.name}(data) {
        return sendRequest(URLS.{$item.name}, data, "{$item.method}");
    }
{/foreach}
}

模板变量

以下数据为在模板中可使用的全部参数

{
    // 页面中表单的参数
    "form": {
        // 根据自定义表单字段名取
        "key": "xxx"
    },
    // 所选接口/控制器所解析的数据,根据定义个选择类型与是否多选 该字段值有所不同
    // 1、当选择类型为单选控制器时
    "data": {
        "controller": "Base",
        "group": "base",
        "menuKey":"",
        "path":"",
        "title":"",
        "children":[
            {
                "author":"",
                "menuKey":"",
                "method":"",
                "name":"",
                "tag":"",
                "title":"",
                "url":""
            }
        ]
    },
    // 2、当选择类型为多选控制器时
    "data": [
        {
            // 此处数据与上面单选对象中参数一直
        }
    ],
    // 3、当选择类型为单选接口时
    "data": {
        "title":"接口名称",
        "url":"url",
        "author":"作者",
        "menuKey":"",
        "method":"GET",
        "name":"getPage",
        "header":[],
        "routeParam":[],
        "query":[
            {
                "name":"字段名",
                "desc":"字段描述",
                "require":"是否必填",
                "type":"字段类型",
                "children":[
                    {
                        // 多层数据,同上
                    }
                ]
            }
        ],
        "param":[
            // 同上 query
        ],
        "returned":[
            // 同上 query
        ],
        "responseError":[
            // 同上 query
        ],
        "responseSuccess":[
            // 同上 query
        ],
    },
     // 4、当选择类型为多选接口时
    "data": [
        {
            // 此处数据与上面单选对象中参数一直
        }
    ],
}

模板语法

模板内语法与 接口生成器模板 语法相同