elpis

介绍

elpis是一个全栈框架，旨在解决在开发中后台系统的过程中80%的重复业务，开放给用户20%的定制化需求

主要技术栈

• Vue
• Koa
• Express
• mocha
• Webpack
• Element Plus

开发文档（模板配置）

export default {
    // 模板类型,不同模板类型对应不一样的模板数据结构
    mode: 'dashboard',
    name: '', // 名称
    desc: '', // 描述
    icon: '', // 图标
    homePage: '', //首页(项目配置)
    // 头部菜单
    menu: [
        {
            key: '', // 菜单唯一描述
            name: '', // 菜单名称
            menuType: '', // 枚举值, group / module
            // 当menuType = group 时, 可填
            subMenu: [
                {
                    // 可以递归menuItem
                }
            ],
            // 当menuType = module 时, 可填
            moduleType: '', // 枚举值 schema/custom/iframe/sider
            // 当moduleType = schema 时, 可填
            schemaConfig: {
                api: '', // 数据源api 遵循RESTful规范
                // 板块数据结构
                schema: {
                    type: 'object',
                    properties: {
                        key: {
                            ...schema, // 标准schema 配置
                            type: '', // 字段类型
                            label: '', // 字段中文名
                            // 字段在table中的相关配置
                            tableOption: {
                                ...elTableColumnConfig, //标准el-table-column 配置
                                visible: true, // 默认为true(false 表示不在表单显示)
                                toFixed: 2 // 保留小数点后几位
                            },
                            // 字段在search-bar中的相关配置
                            searchOption: {
                                ...elComponentConfig, //标准el-component(form 表单组件) 配置
                                comType: '', // 配置控件类型(input/select)
                                default: '', // 默认值
                                // 当comType = select 时, 可填
                                enumList: [],
                                // 当comType = dynamicSelect 时, 可填
                                api: '' // 枚举列表数据源api 遵循RESTful规范
                            },
                            // 字段在不同 component 中的相关配置, 前缀对应componentConfig的键
                            // 例如: componentConfig.createForm = createFormOption
                            // 字段在createForm中的相关配置
                            createFormOption: {
                                ...eleFormConfig, // 标准element-ui form配置
                                comType: '', // 配置控件类型(input/select)
                                visible: true, // 是否展示(true/false),默认为true
                                disabled: false, // 是否禁用(true/false),默认为false
                                default: '', // 默认值
                                // 当comType = select 时, 可填
                                enumList: [] // 枚举列表
                            },
                            // 字段在editForm中的相关配置
                            editFormOption: {
                                ...eleFormConfig, // 标准element-ui form配置
                                comType: '', // 配置控件类型(input/select)
                                visible: true, // 是否展示(true/false),默认为true
                                disabled: false, // 是否禁用(true/false),默认为false
                                default: '', // 默认值
                                // 当comType = select 时, 可填
                                enumList: [] // 枚举列表
                            },
                            detailPanelOption: {
                                ...eleFormConfig, // 标准element-ui form配置
                                disabled: true // 是否禁用(true/false),默认为true
                            }
                        }
                    },
                    required: [] // 标记哪些字段是必填的
                },
                // table相关配置
                tableConfig: {
                    headerButtons: [
                        {
                            label: '', // 按钮中文名
                            eventKey: '', // 按钮事件名
                            // 按钮具体配置
                            eventOption: {
                                // 当eventKey === 'showComponent' 时
                                comName: '' // 组件名称
                            },
                            ...elButtonConfig // 标准el-button配置
                        }
                    ],
                    rowButtons: [
                        {
                            label: '', // 按钮中文名
                            eventKey: '', // 按钮事件名
                            eventOption: {
                                // 当eventKey = remove 时, 可填
                                params: {
                                    // paramKey = 参数的键值
                                    // rowValueKey = 参数值 ,格式为 schema::xxx时，到table中找响应的字段
                                    paramKey: rowValueKey
                                },
                                // 当eventKey === 'showComponent' 时
                                comName: '' // 组件名称
                            }, // 按钮事件具体配置
                            ...elButtonConfig // 标准el-button配置
                        }
                    ]
                },
                searchConfig: {}, // search-bar相关配置
                // 动态组件 相关配置
                componentConfig: {
                    // create-form 相关配置
                    createForm: {
                        title: '', // 表单标题
                        saveBtnText: '' // 保存按钮文本
                    },
                    // edit-form 相关配置
                    editForm: {
                        mainKey: '', // 主键,用于唯一标识要修改的数据对象
                        title: '', // 表单标题
                        saveBtnText: '' // 保存按钮文本
                    },
                    // detail-panel 相关配置
                    detailPanel: {
                        mainKey: '', // 主键,用于唯一标识要修改的数据对象
                        title: ''
                    }
                    // 支持用户动态扩展
                }
            },
            // 当moduleType = custom 时, 可填
            customConfig: {
                path: '' // 自定义路径
            },
            // 当moduleType = iframe 时, 可填
            iframeConfig: {
                path: '' // iframe路径
            },
            // 当moduleType = sider 时, 可填
            siderConfig: {
                menu: [
                    {
                        // 可递归 menuItem(除moduleType = sider)
                    }
                ]
            }
        }
    ]
}

sdk的使用

安装

npm i @aklry/elpis

服务端启动

const { serverStart } = require('@aklry/elpis')

const app = serverStart({
    // 项目名称
    name: 'demo'
})

自定义服务端

• router-schema

  • 表示接口的jsonschema规范

  • module.exports = {
        '/api/proj/list': {
            get: {
                query: {
                    type: 'object',
                    properties: {
                        page: {
                            type: 'string'
                        },
                        size: {
                            type: 'string'
                        }
                    },
                    required: ['page', 'size']
                }
            }
        }
    }

• router

• controller

• service

遵循MVC规范，接口遵循restful规范

前端构建

项目启动

const { frontedBuild } = require('@aklry/elpis')
frontendBuild(process.env.NODE_ENV)

注：process.env.NODE_ENV表示环境变量，可取dev或prod，在执行node脚本时附带上

自定义webpack配置

• 在app/webpack.config.js文件编写额外的配置

自定义页面扩展

• 在app/pages/**目录下写入口entry.xxx.js

• 在app/pages/dashboard/**目录下自定义页面

• 在app/pages/dashboard/complex-view/components目录下写扩展组件

  • 配置到app/pages/dashboard/complex-view/components/component-config.js

• 在app/pages/widgets/schema-form/complex-view目录下写schema-form的扩展组件

  • 配置到app/pages/widgets/schema-form/form-item-config.js

  在app/pages/widgets/schema-search-bar/complex-view目录下写schema-search-bar的扩展组件

  • 配置到app/pages/widgets/schema-search-bar/schema-item-config.js