magic-api-plugin-freemarker

介绍

用于magic-api 的freemarker插件
支持在线编辑freemarker文件
可让接口返回渲染后的Html文件

部署步骤

maven编译

 mvn clean install

pom引入

<!-- 配置文件 -->
<dependency>
    <groupId>cn.luow</groupId>
    <artifactId>magic-api-plugin-freemarker</artifactId>
    <version>2.0.2</version>
</dependency>

使用说明

例一：

创建一个模板，引入其他模板使用<#include "@/xxx/xx">

css和js文件还是要写在标签里

代码中使用response.ftl(params,url)返回前端页面

例二：

引入外部js css

将数据组装到模板里，生成前端页面

注意

如果加了插件之后页面没有模板模块，可能是springboot限制了静态文件大小，请尝试增加限制

spring:
  servlet:
    multipart:
      enabled: true
      max-file-size: 10485760 #10mb
      max-request-size: 10485760 #10mb

##Demo Code

模板: /common/sdk_amis
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>amis</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="/prod-api/v2/jdpt/magic/web/sdk/antd.css" />
    <link rel="stylesheet" href="/prod-api/v2/jdpt/magic/web/sdk/helper.css" />
    <link rel="stylesheet" href="/prod-api/v2/jdpt/magic/web/sdk/iconfont.css" />

    <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
    <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
    <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
    <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
    <style>
        html,
        body,
        .app-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>
<div id="root" class="app-wrapper"></div>
</body>
<script src="/prod-api/v2/jdpt/magic/web/sdk/sdk.js"></script>
<script type="text/javascript">
    (function () {
        function getQuery(key) {
            var query = window.location.search.substring(1);
            var key_values = query.split("&");
            var params = {};
            key_values.map(function (key_val){
                var key_val_arr = key_val.split("=");
                params[key_val_arr[0]] = key_val_arr[1];
            });
            if(typeof params[key]!="undefined"){
                return params[key];
            }
            return "";
        }

        // console.log(getQuery('api'));

        // window.echarts = amisRequire('echarts');
        let amis = amisRequire('amis/embed');
        let amisLib = amisRequire('amis');
        let React = amisRequire('react');

        // 自定义组件，props 中可以拿到配置中的所有参数，比如 props.label 是 'Name'
        function CustomComponent(props) {
            let dom = React.useRef(null);
            React.useEffect(function () {
                // 从这里开始写自定义代码，dom.current 就是新创建的 dom 节点
                // 可以基于这个 dom 节点对接任意 JavaScript 框架，比如 jQuery/Vue 等
                dom.current.innerHTML = 'custom';
                // 而 props 中能拿到这个
            });
            return React.createElement('div', {
                ref: dom
            });
        }

        //注册自定义组件，请参考后续对工作原理的介绍
        amisLib.Renderer({
            test: /(^|\/)my-custom/
        })(CustomComponent);

        // console.log('7999999999999999');

        let myjson = ${data};

        // console.log(myjson);

        let amisScoped = amis.embed('#root', myjson,
                {
                    // 这里是初始 props，一般不用传。
                    // locale: 'en-US' // props 中可以设置语言，默认是中文
                    // data: {
                    //     myData: 'amis'
                    // }
                },
                {
                    theme: 'antd',
                    // 下面是一些可选的外部控制函数
                    // 在 sdk 中可以不传，用来实现 ajax 请求，但在 npm 中这是必须提供的
                    // fetcher: (url, method, data, config) => {},
                    // 全局 api 请求适配器
                    // 另外在 amis 配置项中的 api 也可以配置适配器，针对某个特定接口单独处理。
                    //
                    requestAdaptor: api => {
                        // console.log("===102222222222全局请求适配器:", api);
                        return api;
                    },
                    //
                    // 全局 api 适配器。
                    // 另外在 amis 配置项中的 api 也可以配置适配器，针对某个特定接口单独处理。
                    responseAdaptor: (api, response, query, request) => {
                        // console.log("===1099999999999全局响应适配器:", api, response, query, request);
                        return response;
                    }
                    //
                    // 用来接管页面跳转，比如用 location.href 或 window.open，或者自己实现 amis 配置更新
                    // jumpTo: to => { location.href = to; },
                    //
                    // 用来实现地址栏更新
                    // updateLocation: (to, replace) => {},
                    //
                    // 用来判断是否目标地址当前地址。
                    // isCurrentUrl: url => {},
                    //
                    // 用来实现复制到剪切板
                    // copy: content => {},
                    //
                    // 用来实现通知
                    // notify: (type, msg) => {},
                    //
                    // 用来实现提示
                    // alert: content => {},
                    //
                    // 用来实现确认框。
                    // confirm: content => {},
                    //
                    // 主题，默认是 default，还可以设置成 cxd 或 dark，但记得引用它们的 css，比如 sdk 目录下的 cxd.css
                    // theme: 'cxd'
                    //
                    // 用来实现用户行为跟踪，详细请查看左侧高级中的说明
                    // tracker: (eventTracker) => {},
                });
    })();
</script>
</html>


函数: /common/sub_page
import response;
// Usage: 公共模块:多页面
// import '@/v1daily/sub_page' as sub_page;
// return sub_page('config',{},{},{},{})

import '@/common/sub_config' as sub_config;  //匹配配置 sub_config

var nav0 = {
"type": "nav",
"stacked": false,
// "stacked": true,
// "className": "w-md",
"itemBadge": {
"mode": "ribbon",
"size": 10,
"text": "${customText}",
"position": "top-left",
"visibleOn": "this.customText",
"level": "${customLevel}"
},
"links": [
{
"label": "导数任务1",
"to": "/prod-api/v2/jdpt/config/apiget?act=g00_auto",
"icon": "fa fa-database",
"customText": "AUTO",
"customLevel": "success"
},
{
"label": "文档中心2",
"to": "/prod-api/v2/jdpt/config/apiget?act=g01_page",
"icon": "fa fa-database",
"customText": "DOC",
"customLevel": "warning"
},

{
"label": "上传解压ZIP",
"to": "/prod-api/v2/jdpt/config/apiget?act=g02_zip",
"icon": "fa fa-database",
"customText": "STEP1",
"customLevel": "info"
},
{
"label": "导入明细EXCEL",
"to": "/prod-api/v2/jdpt/config/apiget?act=g03_excel",
"icon": "fa fa-database",
"customText": "STEP2",
"customLevel": "debug"
},
{
"label": "队列任务",
"to": "/prod-api/v2/jdpt/config/apiget?act=g04_import",
"icon": "fa fa-database",
"customText": "STEP3",
"customLevel": "success"
},
{
"label": "执行任务",
"to": "/prod-api/v2/jdpt/config/apiget?act=g05_task",
"icon": "fa fa-database",
"customText": "STEP4",
"customLevel": "warning"
},
{
"label": "生成指标",
"to": "/prod-api/v2/jdpt/config/apiget?act=g06_zbk",
"icon": "fa fa-database",
"customText": "STEP5",
"customLevel": "warning"
},
{
"label": "同步数据",
"to": "/prod-api/v2/jdpt/config/apiget?act=g07_sync",
"icon": "fa fa-database",
"customText": "STEP6",
"customLevel": "success"
},
{
"label": "月报生成",
"to": "/prod-api/v2/jdpt/config/apiget?act=g08_amis",
"icon": "fa fa-database",
"customText": "REPORT",
"customLevel": "info"
},
{
"label": "上线测试",
"to": "/prod-api/v2/jdpt/config/apiget?act=g09_test",
"icon": "fa fa-database",
"customText": "TEST",
"customLevel": "danger"
},

{
"label": "科室指标",
"to": "/prod-api/v2/jdpt/v1daily/amis_crud_office?act=crud01_page",
"icon": "fa fa-database",
"customText": "科室",
"customLevel": "success"
}

]
}

var navBlank = {
"type": "tpl",
"tpl": "<br />"
}

// return response.json({
//     status : 0,
//     msg : 'ok',
//     data: {
//         ret: ret.cnt
//         msg: "select * from zb_sys_data where zbk_type = '" + sheetName +"' and zbk_yydate = '" + yydate + "'",
//     }
// });

var nav99 =
{
"type": "form",
"name": "otherForm",
"data":{
"show": "0"
},
"title": "处理结果",
"actions": [],
"body": [
{
"type": "static",
"name": "show",
"label": "返回状态",
//   "hiddenOn": "this.show == 0",
"visibleOn": "this.show == 1",
},
{
"type": "static",
"name": "ret",
"label": "数据统计"
},
{
"type": "static",
"name": "msg",
"label": "提示信息"
}
]
}

// var navAmisDemo = config['amis-demo']::json

alljson = {
"type": "page",
"data": {
"breadcrumb": [
{
"label": "首页",
"href": "/prod-api/v2/jdpt/config/apiget?act=g00_auto"
},
{
"label": "上级页面",
"href": "/prod-api/v2/jdpt/config/apiget?act=g01_page"
},
{
"label": "当前页面"
}
]
},
"body": [
nav0,
navBlank,
nav1,
navBlank,
nav2,
navBlank,
nav3,
navBlank,
nav4
]
}

let data = {data: alljson::stringify};

//直接通过 freemarker plugin ftl返回模板
return response.ftl(data, "/common/sdk_amis")//接口和模板路径,省路路经

接口: /新建接口放这里v2/日志分页列表LOGAMIS(/v2/logamis)

import response;

alljson = {
"type": "page",
"body": {
"type": "crud",
"api": "post:/prod-api/v2/jdpt/v2/logpage",
"syncLocation": false,
"pageField": "page",
"perPageField": "limit",
"autoFillHeight": true,
"defaultParams": {
"limit": 10
},
"columns": [
{
"name": "id",
"label": "ID",
"sortable": true
},
{
"name": "logType",
"label": "日志类型",
"searchable": true
},
// {
//     "name": "createUserCode",
//     "label": "用户代码",
//     "searchable": true
// },
// {
//     "name": "createUserName",
//     "label": "用户名称",
//     "searchable": true
// },
{
"name": "createDate",
"label": "操作日期",
"searchable": true
},

{
"name": "requestUri",
"label": "请求路径",
"searchable": true
},
{
"name": "requestMethod",
"label": "请求方法",
"searchable": true
},
{
"name": "requestParams",
"label": "请求参数",
"searchable": true
},
{
"name": "requestIp",
"label": "请示地址",
"searchable": true
},
{
"name": "serverAddress",
"label": "服务器",
"searchable": true
},
{
"name": "isException",
"label": "是否异常",
"searchable": true
},
{
"name": "exceptionInfo",
"label": "返回或异常",
"searchable": true
},
{
"name": "startTime",
"label": "开始时间",
"searchable": true
},
{
"name": "endTime",
"label": "结束时间",
"searchable": true
},
{
"name": "executeTime",
"label": "执行时间",
"sortable": true
},
{
"name": "userAgent",
"label": "代理标识",
"searchable": true
},
{
"name": "deviceName",
"label": "设备",
"searchable": true
},
{
"name": "browserName",
"label": "浏览器",
"searchable": true
}
]
}
}

let data = {data: alljson::stringify};

//直接通过 freemarker plugin ftl返回模板
return response.ftl(data, "/common/sdk_amis")//接口和模板路径,省路路经


接口: /新建接口放这里v2/日志分页接口LOGPAGE(/v2/logpage)
import response;

import '@/test/uncamel' as uncamel;
// return uncamel('userId');

// 检查无显式赋值时, 使用默认值
var myLimit = body?.limit? body?.limit : 10
var myPage = body?.page? body?.page : 1
var myOrderBy = body?.orderBy? uncamel(body?.orderBy) : "id"
var myOrderDir = body?.orderDir? body?.orderDir : "asc"
var myUser = body?.user? body?.user : 0

// {
//     "limit": 10,      -- 每页显示条数:  myLimit,
//     "page": 1,        -- 计算该页起始:  (myPage-1)*myLimit
//     "orderBy": "id",  -- 需要反驼峰命名还原字段名, uncamel(body?.orderBy) 再用 ${myOrderBy} 占位符用于SQL order by
//     "orderDir": "asc" -- 用 ${myOrderDir} 占位符用于SQL order by
//     "user": 0      -- 若传入1为平台操作日志, 对应SQL为 create_user_code` not like ''
// }

var sql = """
SELECT id,
log_type,
create_user_code,
create_user_name,
create_date,
request_uri,
request_method,
request_params,
request_ip,
server_address,
is_exception,
exception_info,
start_time,
end_time,
execute_time,
user_agent,
device_name,
browser_name
FROM audit_sys_log
where 1=1
?{body?.id != null, and id = #{body.id}}
?{body?.logType != null, and `log_type` like concat('%',#{body?.logType},'%')}
?{body?.createUserCode != null, and `create_user_code` like concat('%',#{body?.createUserCode},'%')}
?{body?.createUserName != null, and `create_user_name` like concat('%',#{body?.createUserName},'%')}
?{body?.createDate != null, and `create_date` like concat('%',#{body?.createDate},'%')}
?{body?.requestUri != null, and `request_uri` like concat('%',#{body?.requestUri},'%')}
?{body?.requestMethod != null, and `request_method` like concat('%',#{body?.requestMethod},'%')}
?{body?.requestParams != null, and `request_params` like concat('%',#{body?.requestParams},'%')}
?{body?.requestIp != null, and `request_ip` like concat('%',#{body?.requestIp},'%')}
?{body?.serverAddress != null, and `server_address` like concat('%',#{body?.serverAddress},'%')}
?{body?.isException != null, and `is_exception` like concat('%',#{body?.isException},'%')}
?{body?.startTime != null, and `start_time` like concat('%',#{body?.startTime},'%')}
?{body?.endTime != null, and `end_time` like concat('%',#{body?.endTime},'%')}
?{body?.executeTime != null, and `execute_time` like concat('%',#{body?.executeTime},'%')}
?{body?.userAgent != null, and `user_agent` like concat('%',#{body?.userAgent},'%')}
?{body?.deviceName != null, and `device_name` like concat('%',#{body?.deviceName},'%')}
?{body?.browserName != null, and `browser_name` like concat('%',#{body?.browserName},'%')}
?{myUser == 0, and `create_user_code` like ''}
?{myUser == 1, and `create_user_code` not like ''}
order by ${myOrderBy} ${myOrderDir}
"""

var rows = db.jdpt.page(sql, myLimit, (myPage-1)*myLimit )

return response.json({
status : 0,
msg : 'ok',
data: rows
})


// var me = {
//     "date": date_format(now(),'yyyy-MM-dd'),
//     "now": now().format("yyyy-MM-dd HH:mm:ss")
// }

// me['rows']['columns'] = me['cols']

// return response.json({
//     status : 0,
//     msg : 'ok',
//     data: me.rows
// })

linlw / magic-api-plugin-freemarker

magic-api-plugin-freemarker

介绍

部署步骤

maven编译

pom引入

使用说明

例一：

创建一个模板，引入其他模板使用<#include "@/xxx/xx">

css和js文件还是要写在标签里

代码中使用response.ftl(params,url)返回前端页面

例二：

引入外部js css

将数据组装到模板里，生成前端页面

注意

如果加了插件之后页面没有模板模块，可能是springboot限制了静态文件大小，请尝试增加限制

简介

发行版

贡献者

近期动态

linlw / magic-api-plugin-freemarker .gitee-modal { width: 500px !important; }

magic-api-plugin-freemarker

介绍

部署步骤

maven编译

pom引入

使用说明

例一：

创建一个模板，引入其他模板使用<#include "@/xxx/xx">

css和js文件还是要写在标签里

代码中使用response.ftl(params,url)返回前端页面

例二：

引入外部js css

将数据组装到模板里，生成前端页面

注意

如果加了插件之后页面没有模板模块，可能是springboot限制了静态文件大小，请尝试增加限制

简介

发行版

贡献者

近期动态

搜索帮助

linlw / magic-api-plugin-freemarker