@lixianwei/elpis 1.0.0

package/README.md

@@ -0,0 +1,201 @@
+# elpis
+## 一个企业级应用框架，通过全栈实现
+
+### model 配置
+```javascript
+{
+    model:'dashboard',//模板类型 不同模板类型对应不一样的模板数据结构
+    name:'',//名称
+    desc:'',//描述
+    icon:'',//iocn
+    homePage:'',//首页（项目配置）
+    // 头部菜单
+    menu:[{
+        key:'',//菜单唯一标识
+        name:'',//菜单名称
+        menuType:'',//枚举值：group/module
+        // 当menuType === group时，可填
+        subMenu:[{
+
+        },...],
+        // 当前menuType === module 时 可填
+        moduleType:'',//枚举值：sider/iframe/custom/schema
+        // 当moduleType===sider
+        siderConfig:{
+            menu:[{
+                // 可递归menuItem（除moduleType === sider）
+            },...]
+        },
+        // 当moduleType===iframe
+        iframeConfig:{
+            path:'' //iframe路径
+        },
+        // 当moduleType===custom
+        customConfig:{
+            path:''//自定义路由路径
+        },
+        // 当moduleType===schema
+        schemaConfig:{
+            api:'',//数据源API （遵循RESTFUL规范）
+            schema:{ //板块数据结构
+                type:'object',
+                properties: {
+                    key:{
+                        ...schema,//标准schema 配置
+                        type:'',//字段类型
+                        label:'',//字段的中文名
+                        // 字段在table中的配置
+                        tableOption:{
+                            ...elTableColumnConfig,//标准的el-table-column 配置
+                            toFixed:2,
+                            visible:true //默认为true （false  表示不在表单中显示）
+                        },
+                        // 字段在search-bar 中的相关配置
+                        searchOption:{
+                            ...eleComponentConfig, //标准 el-component-column 配置
+                            comType:"",//配置组件类型 input /select/...
+                            default:'',//默认值
+                            // comType===select
+                            enumList:[],
+                            // comType == dynamicSelect
+                            api:''
+                        },
+                        // 字段在不同动态 component 中的相关配置 前缀对应componentConfig 中的键值
+                        // 如 componentConfig.createForm 这里对应createFormOption
+                        // 字段在createForm 中相关配置
+                        createFormOption:{
+                            ...eleComponentConfig,//标准 el-component 配置
+                            comType:'',//控件类型 input/select/input-number
+                            visible:true,//是否展示 （true/false）默认为true
+                            disabled:false,//是否禁用 （true/false）默认false
+                            default:'',//默认值
+                            // comType === select
+                            enumList:[]
+                        },
+                        // 字段在editForm中的表单配置
+                        editFormOption:{
+                            ...eleComponentConfig,//标准 el-component 配置
+                            comType:'',//控件类型 input/select/input-number
+                            visible:true,//是否展示 （true/false）默认为true
+                            disabled:false,//是否禁用 （true/false）默认false
+                            default:'',//默认值
+                            // comType === select
+                            enumList:[]
+                        },
+                        // 字段在detailPanel 中的表单配置
+                        detailPanelOption:{
+                            ...eleComponentConfig,//标准 el-component 配置
+                        }
+                    },
+                    ...
+                },
+                require:[],//标记哪些字段必填项
+            },
+            tableConfig:{
+                headerButtons:[
+                    {
+                        label:'',//按钮中文名
+                        eventKey:'',//按钮事件名
+                        //按钮事件具体配置
+                        eventOption:{
+                            // 当 eventKey === showComponent
+                            comName:'',//组件名称
+                        },
+                        ...elButtonConfig //标准el-button配置
+                    },
+                    ...
+                ],
+                rowButtons:[
+                    {
+                        label:'',//按钮中文名
+                        eventKey:'',//按钮事件名
+                        eventOption:{
+                            // 当 eventKey === showComponent
+                            comName:'',//组件名称
+                            // 当eventKey === ‘remove’
+                            params:{
+                                // paramKey == 参数的键值
+                                // rowValueKey == 参数值（当格式为 schema:: tableKey 的时候 到table中找到响应的字段）
+                                paramKey:rowValueKey
+                            }
+                        },//按钮事件具体配置
+                        ...elButtonConfig //标准el-button配置
+                    },
+                    ...
+                ]
+            },//table 相关配置
+            searchConfig:{},//search-bar 相关配置
+            componentConfig:{
+                //create-form 表单相关配置
+                createForm:{
+                    title:'',//表单标题
+                    saveBtnText:'' //保存按钮文案
+                },
+                // edit-form配置
+                editForm:{
+                    mainKey:'',//表单主键，用于唯一标识要修改的数据对象
+                    title:'', //表单标题
+                    saveBtnText:'' // 保存按钮文案
+                },
+                // detail-form 配置
+                detailPanel:{
+                    mainKey:'',//表单主键，用于唯一标识要修改的数据对象
+                    title:'', //表单标题
+                    saveBtnText:'' // 保存按钮文案
+                }
+                // 支持用户动态扩展
+
+            } //模块组件
+        },
+    },...]
+}
+```
+
+### 服务端启动
+``` javascript
+const {serverStart} = require('@lixianwei/elpis')
+
+// 启动elpis服务
+ const app = serverStart({})
+ ```
+### 自定义服务端
+- router-schema
+- router
+- controller
+- service
+- extend
+- config
+
+### 前端构建
+``` javascript
+const {fontendBuild} = require('@lixianwei/elpis')
+编译构建前端工程
+fontenBuild(process.env._ENV)
+```
+
+### 自定义页面扩展
+* 在`app/pages` 目录下写入口 entry.xxx.js
+
+### dashboard / custom-view 自定义页面扩展
+* 在`app/pages/dashboard/xxx` 下写页面
+
+### dashboard /schema-view /components 动态组件库
+1 在`app/pages/dashboard/complex-view/schema-view/components` 下写组件
+2 配置到 `app/pages/dashboard/complex-view/schema-view/components/conponent-config.js`
+
+### schema-form 控件扩展
+1 在 `app/widgets/schema-form/complex-view` 下写组件
+2 配置到 `app/widgets/schema-form/form-item-config.js`
+
+### schema-search-bar 控件扩展
+1 在`app/widgets/schema-search-bar/complex-view` 下写组件
+2 配置到 `app/widgets/schema-search-bar/search-item-config.js`
+
+## 提交规范类型记录
+feat: 新功能
+fix: 修补bug
+docs: 文档
+style: 样式
+refactor: 重构
+test: 增加测试
+chore: 构建过程或者辅助工具的变动

package/app/controller/base.js

@@ -0,0 +1,77 @@
+const Ajv = require('ajv')
+const ajv = new Ajv()
+module.exports=(app)=> class BaseController {
+    /*
+    * controller 基类
+    * 统一收拢 controller 相关的公共方法
+    * */
+    constructor() {
+        this.app = app;
+        this.config = app.config;
+    }
+    /*
+    * 统一处理Api params参数的校验
+    * @params {object} ctx 上下文
+    * */
+    roterSchemaParamsValidate(ctx){
+        // 也可用更直接的：ctx.matched === '/api/project/list/:proj_key'
+        const {matched,method,params} = ctx
+        // ctx.matched 是 Layer 数组，不是路径字符串；要取 layer.path（路由模板）
+        const route = matched.find(layer => layer.path !== '*')?.path
+        const schema = app.routerSchema[route]?.[method.toLowerCase()]
+
+        if(!schema || !params){
+            return true
+        }
+
+        let valid = true;
+        // ajv 校验器
+        let validate;
+        // query / params：有数据的才校验；两边都空则用有 schema 的那侧做必填校验
+        const hasData = (obj) => obj && Object.keys(obj).length > 0
+        // 校验params
+        if(valid && hasData(params) && schema.params){
+            validate = ajv.compile(schema.params);
+            valid= validate(params)
+        }
+        if(!valid){
+            ctx.status=200;
+            ctx.body={
+                success:false,
+                message:`request validate fail: ${ajv.errorsText(validate.errors)}`,
+                code:442
+            }
+        }
+
+        return valid
+
+    }
+    /*
+    * API 处理成功时统一返回结构
+    * @params {object} ctx 上下文
+    * @params {object} data 核心数据
+    * @params {object} metadata 附加数据
+    * */
+    success(ctx,data={},metadata={}){
+        ctx.status = 200;
+        ctx.body={
+            success: true,
+            data,
+            metadata,
+        }
+    }
+
+    /*
+ * API 处理失败时统一返回结构
+ * @params {object} ctx 上下文
+ * @params {object} message 错误信息
+ * @params {object} code 错误码
+ * */
+    fail(ctx,message,code){
+        ctx.body={
+            success: false,
+            message,
+            code,
+        }
+    }
+}

package/app/controller/project.js

@@ -0,0 +1,69 @@
+module.exports = (app)=>{
+    const BaseController = require('./base')(app)
+
+    return class ProjectController extends BaseController {
+        /*
+        * 根据proj_key获取项目配置
+        * */
+        async get(ctx){
+            const {proj_key:projKey} = ctx.request.query;
+            const {project:ProjectService} = app.service;
+            const projConfig = await ProjectService.get(projKey)
+            if(!projConfig){
+               return this.fail(ctx,'获取项目异常',50000)
+
+            }
+            this.success(ctx,projConfig)
+
+
+        }
+        /*
+        * 获取当前 projectKey 对应模型下的项目列表  （如果无projectKey，全量获取）
+        * */
+        async getList(ctx){
+            const{proj_key:projKey} = ctx.request.query;
+
+            const {project:ProjectService} = app.service;
+
+            const projectList = await ProjectService.getList({projKey});
+
+            const dtoProjectList = projectList.map(item=>{
+                const {modelKey,key, name,desc,homePage} = item;
+                return {modelKey,key,name,desc,homePage}
+            })
+
+            this.success(ctx,dtoProjectList);
+        }
+        /**
+         * 获取所有与项目的结构化数据
+         * @param {object} ctx 上下文
+         * */
+        async getModelList(ctx){
+            const {project:ProjectService} = app.service;
+            const modelList = await ProjectService.getModelList(ProjectService)
+            // g构造返回结果 只返回关键数据
+            const dtoModelList = modelList.reduce((preList,item)=>{
+                const {model,project} = item;
+                // 构造model关键数据
+                const {key,name,desc} = model;
+                const dtoModel = {key,name,desc};
+                // 构造project 关键数据
+                const dtoProject = Object.keys(project).reduce((preObj,projKey)=>{
+                    const {key,name,desc,homePage} = project[projKey];
+                    preObj[projKey] = {key,name,desc,homePage}
+                    return preObj;
+                },{})
+
+                // 整合返回结构
+                preList.push({
+                    model:dtoModel,
+                    project:dtoProject,
+                })
+
+                return preList;
+            },[])
+
+            this.success(ctx, dtoModelList)
+        }
+    }
+ }

package/app/controller/view.js

@@ -0,0 +1,20 @@
+module.exports = (app)=> {
+    return class ViewController {
+        /*
+        * 渲染页面
+        * @param {object} ctx 上下文
+        * */
+        async renderPage(ctx){
+            const {query,params} = ctx
+
+            app.logger.info(`[ViewController] query: ${JSON.stringify(query)}]`);
+            app.logger.info(`[ViewController] params: ${JSON.stringify(params)}]`);
+            await ctx.render(`dist/entry.${ctx.params.page}`,{
+                projKey:ctx.query?.proj_key,
+                name:app.options?.name,
+                env:app.env.get(),
+                options:JSON.stringify(app.options),
+            });
+        }
+    }
+}

package/app/extend/logger.js

@@ -0,0 +1,35 @@
+const log4js = require('log4js');
+/*
+* 日志工具
+* 外部调用 app.logger.info app.logger.error
+* */
+module.exports= (app)=>{
+    let logger;
+    if(app.env.isLocal()){
+        // 打印在控制台即可
+        logger = console
+    }else {
+        // 把日志输出并落实到磁盘
+        log4js.configure({
+            appenders: {
+                console:{
+                    type: 'console',
+                },
+                // 日志文件切分
+                dateFile:{
+                    type: 'dateFile',
+                    filename:'./logs/application.log',
+                    pattern:'.yyyy-MM-dd',
+                }
+            },
+            categories: {
+                default:{
+                    appenders: ['console','dateFile'],
+                    level:'trace'
+                }
+            }
+        })
+        logger = log4js.getLogger()
+    }
+    return logger
+}

package/app/middleware/api-params-verify.js

@@ -0,0 +1,74 @@
+const Ajv = require('ajv')
+const ajv = new Ajv()
+/*
+* API 参数校验
+* */
+module.exports = (app)=>{
+    const $schema = "http://json-schema.org/draft-07/schema#"
+    return async (ctx,next) => {
+        // 只对API做参数校验
+        if(ctx.path.indexOf('/api/')<0){
+            return await next();
+        }
+        // 获取请求参数
+        const {body,query,headers} = ctx.request;
+        const {params,path,method} = ctx;
+
+        app.logger.info(`[${method} ${path}] body:${JSON.stringify(body)}`);
+        app.logger.info(`[${method} ${path}] query:${JSON.stringify(query)}`);
+        app.logger.info(`[${method} ${path}] headers:${JSON.stringify(headers)}`);
+        app.logger.info(`[${method} ${params}] params:${JSON.stringify(params)}`);
+
+        const schema = app.routerSchema[path]?.[method.toLowerCase()];
+
+        if(!schema) {
+            return await next();
+        }
+        let valid = true;
+        // ajv 校验器
+        let validate;
+
+        // 校验headers
+        if(valid && headers &&schema.headers){
+            schema.headers.$schema = $schema;
+            validate = ajv.compile(schema.headers);
+            valid= validate(headers)
+
+        }
+
+        // 校验body
+        if(valid && body &&schema.body){
+            schema.body.$schema = $schema;
+            validate = ajv.compile(schema.body);
+            valid= validate(body)
+
+        }
+
+        const hasData = (obj) => obj && Object.keys(obj).length > 0
+
+        // 校验query：有 query 数据才校验
+        if(valid && query && schema.query){
+            schema.query.$schema = $schema;
+            validate = ajv.compile(schema.query);
+            valid= validate(query)
+        }
+
+        // 校验params：有 path params 数据才校验（空 {} 跳过）
+        if(valid && hasData(params) && schema.params){
+            schema.params.$schema = $schema;
+            validate = ajv.compile(schema.params);
+            valid= validate(params)
+        }
+        if(!valid){
+            ctx.status=200;
+            ctx.body={
+                success:false,
+                message:`request validate fail: ${ajv.errorsText(validate.errors)}`,
+                code:442
+            }
+            return;
+        }
+
+        await next();
+    }
+}

package/app/middleware/api-sign-verify.js

@@ -0,0 +1,33 @@
+const md5 =require('md5');
+/*
+* API 签名合法性校验
+* */
+module.exports =(app)=>{
+    return  async(ctx, next)=>{
+        // 只对api请求进行校验
+        if(ctx.path.indexOf('/api') < 0){
+            return await next();
+        }
+        const {path,method} = ctx;
+        const {headers} = ctx.request;
+        const {s_sign:sSign,s_t:st} = headers;
+        const signKey = 'klx05hb3n1c9ujp8uhxbs2ikkiowp212';
+
+        const signature = md5(`${signKey}_${st}`)
+
+        app.logger.info(`[${method} ${path}] signature:${signature}`)
+        app.logger.error(`[${method} ${path}] signature:${signature}`)
+
+        if(!sSign || !st || signature!==sSign.toLowerCase() || Date.now() - st > 600000){
+            ctx.status = 200;
+            ctx.body = {
+                success:false,
+                message:'signature not correct!!',
+                code:445
+            }
+            return
+        }
+
+        await next();
+    }
+}

package/app/middleware/error-hander.js

@@ -0,0 +1,32 @@
+/*
+* 运行时异常错误处理，兜底所有异常
+* @param {object} app koa 实例
+* */
+module.exports =(app)=>{
+    return async (ctx,next) => {
+        try{
+            await next();
+        }catch(err){
+            // 异常处理
+            const {status,message,detail} = err;
+            app.logger.info(JSON.stringify(err));
+            app.logger.error('[--exception--]:',err);
+            app.logger.error('[--exception--]:',status,message,detail);
+            // 页面重定向
+            if(message && message.indexOf('template not found') > -1){
+
+                ctx.status = 302;//临时重定向     301有缓存就会一直重定向
+                ctx.redirect(`${app.options?.homePath}`);
+                return
+            }
+            // 错误提示处理
+            const resBody={
+                success:false,
+                code:50000,
+                message:'网络异常 请稍后重试'
+            }
+            ctx.status = 200
+            ctx.body = resBody;
+        }
+    }
+}

package/app/middleware/project-handler.js

@@ -0,0 +1,25 @@
+/*
+* projectHandler 相关项目处理内容
+* */
+
+module.exports = (app)=>{
+    return async (ctx, next)=>{
+        // 只对业务api进行proj_key处理
+        if(ctx.path.indexOf('/api/proj/')<0){
+                return await next();
+        }
+        // 获取projKey
+        const {proj_key:projKey} = ctx.request.headers;
+        if(!projKey){
+            ctx.status=200
+            ctx.body={
+                success:false,
+                message:'proj_key not found',
+                code:446
+            }
+            return
+        }
+        ctx.projKey = projKey
+        await next()
+    }
+}

package/app/middleware.js

@@ -0,0 +1,37 @@
+const path = require('path');
+module.exports =(app)=>{
+    // 配置静态根目录
+    const KoaStatic = require('koa-static');
+    app.use(KoaStatic(path.resolve(process.cwd(), './app/public')));
+
+    // 模板引擎渲染
+    const koaNunjucks = require('koa-nunjucks-2');
+    app.use(koaNunjucks({
+        ext: 'tpl',
+        path:path.resolve(process.cwd(),'./app/public') ,
+        nunjucksConfig: {
+            noCache:true,
+            trimBlocks: true
+        }
+    }));
+
+    // 引入ctx.body 解析中间件
+    const bodyParser = require('koa-bodyparser');
+    app.use(bodyParser({
+        formList:'1000mb',
+        enableTypes:['form','json','text'],
+    }));
+
+
+    // 引入异常捕获中间件
+    app.use(app.middlewares.errorHander)
+
+    // 签名合法性校验
+    app.use(app.middlewares.apiSignVerify)
+
+    // 引入api参数合法校验
+    app.use(app.middlewares.apiParamsVerify)
+
+    // 引入项目处理中间件
+    app.use(app.middlewares.projectHandler)
+}

package/app/pages/asserts/custom.css

@@ -0,0 +1,11 @@
+html, body{
+    height: 100%;
+}
+#root{
+    height: 100%;
+}
+
+input:-webkit-autofill {
+    /*覆盖自动填充背景颜色*/
+    -webkit-box-shadow: 0 0 0 1000px #121212 inset;
+}

package/app/pages/boot.js

@@ -0,0 +1,43 @@
+import {createApp} from "vue";
+
+// 引入elementUI
+import ElementUI from 'element-plus'
+import 'element-plus/theme-chalk/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+import './asserts/custom.css'
+
+import pinia from '$elpisStore'
+// 引入路由
+import setupRouter from '$elpisPages/router/index.js';
+
+/*
+* vue页面入口 用于启动VUE
+* @params pageComponent vue入口组件
+* @params routes 路由列表
+* @params libs 页面依赖第三方的包
+* */
+
+export default (pageComponent,{routes,libs}={})=>{
+    const app = createApp(pageComponent);
+    // 引入element
+    app.use(ElementUI)
+    // 引入pinia
+    app.use(pinia)
+
+    // 引入第三方的包
+    if(libs && libs.length > 0){
+      for( let i=0; i<libs.length; i++){
+          app.use(libs[i])
+      }
+    }
+
+    // 页面路由
+   const router =  setupRouter(routes)
+    if(router){
+        app.use(router)
+        router.isReady().then(()=> app.mount("#root"))
+    }else{
+        app.mount("#root")
+    }
+
+}