@misstalor17/elpis 1.0.0

package/app/router/view.js

@@ -0,0 +1,13 @@
+module.exports = (app, router) => {
+    // 从app的controller对象中，解构出名为view的控制器，并重命名为viewController
+    // （这里的app.controller是你项目中统一管理控制器的地方，之前的ViewController应该被注册到了这里）
+    const { view: viewController } = app.controller;
+
+    // 注释说明：用户访问http://ip:port/view/xxx，就能渲染对应页面
+    // 给router注册一个GET请求的路由：
+    // 路径是/view/:page（:page是动态参数，比如访问/view/index，page的值就是index）
+    // 对应的处理方法是viewController里的renderPage，同时用bind绑定控制器的this指向（避免方法内this丢失）
+    router.get('/view/:page', viewController.renderPage.bind(viewController))
+    //用户访问http://ip:port/view/xxx/xxx/*，就能渲染对应页面
+    router.get('/view/:page/*', viewController.renderPage.bind(viewController))
+}

package/app/router-schema/business.js

@@ -0,0 +1,82 @@
+module.exports = {
+    '/api/proj/product/list':{
+        get:{
+            query:{
+                type:'object',
+                properties:{
+                    page:{
+                        type:'string'
+                    },
+                    size:{
+                        type:'string'
+                    }
+                },
+                required:['page','size']
+            }
+        }
+    },
+    '/api/proj/product':{
+        put:{
+            body:{
+                type:'object',
+                properties:{
+                    product_id:{
+                        type:'string'
+                    },
+                    product_name:{
+                        type:'string'
+                    },
+                    price:{
+                        type:'number'
+                    },
+                    inventory:{
+                        type:'number'
+                    }
+                },
+                required:['product_name','product_id'] 
+            }
+        },
+        post:{
+            body:{
+                type:'object',
+                properties:{
+                    product_name:{
+                        type:'string'
+                    },
+                    price:{
+                        type:'number'
+                    },
+                    inventory:{
+                        type:'number'
+                    }
+                },
+                required:['product_name'] 
+            }
+        },
+        delete:{
+            body:{
+                type:'object',
+                properties:{
+                    product_id:{
+                        type:'string'
+                    }
+                },
+                required:['product_id']
+            }
+        },
+        get:{
+            query:{
+                type:'object',
+                properties:{
+                    product_id:{
+                        type:'string'
+                    }
+                },
+                required:['product_id']
+            }
+        }
+    },
+    '/api/proj/product_enum/list':{
+        get:{}
+    }
+}

package/app/router-schema/project.js

@@ -0,0 +1,31 @@
+
+module.exports = {
+    '/api/project':{
+        get:{
+            query:{
+                type:'object',
+                properties:{
+                    proj_key:{
+                        type:'string'
+                    }
+                },
+                required:['proj_key']
+            }
+        }
+    },
+    '/api/project/list':{
+        get:{
+            query:{
+                type:'object',
+                properties:{
+                    proj_key:{
+                        type:'string'
+                    }
+                }
+            }
+        }
+    },
+'/api/project/model_list':{
+    get:{},
+}
+}

package/app/service/base.js

@@ -0,0 +1,13 @@
+const superagent = require('superagent')
+module.exports = (app) => class BaseService {
+    /**
+     * serveice 基类
+     * 统一收拢 service 曾的公共方法
+     */
+
+    constructor() {
+        this.app = app;
+        this.config = app.config
+        this.curl = superagent
+    }
+}

package/app/service/project.js

@@ -0,0 +1,40 @@
+module.exports = (app) => {
+    const BaseService = require('./base')(app)
+    const modelList = require('../../model/index.js')(app)
+    return class ProjectService extends BaseService {
+        /**
+         * 根据 proj_key 获取项目配置 
+         */
+        get(projKey) {
+            let projConfig;
+             modelList.forEach(modelItem => {
+                if(modelItem.project[projKey]){
+                    projConfig = modelItem.project[projKey] 
+                }
+             })
+
+            return projConfig;
+        }
+        /**
+         * 获取统一模型下的项目列表（如果无projectKey，全量获取）
+         */
+        getList({ projKey }) {
+            return modelList.reduce((preList, modelItem) => {
+                const { project } = modelItem
+                if (projKey && !project[projKey]) { return preList; }
+                //如果有传 projKey，则去当前同模型下的项目，不传的情况则取全量
+                for (const pKey in project) {
+                    preList.push(project[pKey])
+                }
+                return preList;
+            }, [])
+        }
+        /**
+        * 获取所有模型与项目的结构化数据
+        * 
+        */
+        async getModelList() {
+            return modelList;
+        }
+    }
+}

package/app/view/entry.tpl

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="zh-CN" class="dark">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="/static/normalize.css">
+    <link rel="icon" href="/static/logo.png" type="image/x-icon">
+    <title>{{name}}</title>
+</head>
+<body style="margin: 0;">
+ <div id="root"></div>
+ <input type="text" id="projKey" value="{{projKey}}" style="display: none;">
+ <input type="text" id="env" value="{{env}}" style="display: none;">
+ <input type="text" id="options" value="{{options}}" style="display: none;">
+</body>
+<script type="text/javascript">
+ try {
+   window.projKey = document.getElementById('projKey').value
+    window.env = document.getElementById('env').value
+    const options = document.getElementById('options').value
+    window.options = JSON.parse(options)
+ } catch (error) {
+    console.log(error);
+ }
+</script>
+</html>

package/app/webpack/config/webpack.base.js

@@ -0,0 +1,204 @@
+const path = require('path')
+const glob = require('glob')
+const fs = require('fs')
+const { VueLoaderPlugin } = require('vue-loader')
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const merge = require('webpack-merge')
+
+//动态构造 elpisPageEntries elpisHtmlWebpackPluginList
+const elpisPageEntries = {}
+const elpisHtmlWebpackPluginList = []
+
+//获取 elpis/app/pages 目录下所有的入口文件 （entry.xx.js）
+const elpisEntryList = path.resolve(__dirname, '../../pages/**/entry.*.js')
+glob.sync(elpisEntryList).forEach(file => {
+    handleFile(file, elpisPageEntries, elpisHtmlWebpackPluginList)
+})
+
+//动态构造 businessPageEntries businessHtmlWebpackPluginList
+const businessPageEntries = {}
+const businessHtmlWebpackPluginList = []
+
+//获取 业务/app/pages 目录下所有的入口文件 （entry.xx.js）
+const businessEntryList = path.resolve(process.cwd(), './app/pages/**/entry.*.js')
+glob.sync(businessEntryList).forEach(file => {
+    handleFile(file, businessPageEntries, businessHtmlWebpackPluginList)
+})
+
+//构造相关 webpack 处理的数据机构
+function handleFile(file, entries = {}, htmlWebpackPluginList = []) {
+    const entryName = path.basename(file, '.js')
+    //构造entry
+    entries[entryName] = file
+    //构造最终渲染的页面文件
+    htmlWebpackPluginList.push(
+        // html-webpack-plugin 辅助注入打包后的 bundle 文件到tpl 文件中
+        new HtmlWebpackPlugin({
+            //产物（最终模版）输出路径
+            filename: path.resolve(process.cwd(), './app/public/dist/', `${entryName}.tpl`),
+            //指定要使用的的模版文件
+            template: path.resolve(__dirname, '../../view/entry.tpl'),
+            //要注入的代码块
+            chunks: [entryName]
+        })
+    )
+}
+//加载业务 webpack 配置
+let businessWebpackConfig = {}
+try {
+    businessWebpackConfig = require(`${process.cwd()}/app/webpack.config.js`)
+} catch (e) { }
+
+/**
+ * webpack 基础配置
+ */
+module.exports = merge.smart({
+    // 入口配置
+    entry: Object.assign({}, elpisPageEntries, businessPageEntries),
+    // 模块解析配置（决定了要加载那些模块，以及用什么方式去解析）
+    module: {
+        rules: [{
+            test: /\.vue$/,
+            use: {
+                loader: require.resolve('vue-loader')
+            }
+        },
+        {
+            test: /\.js$/,
+            include: [
+                // 处理 elpis 目录
+                path.resolve(__dirname, '../../pages'),
+                // 处理 业务 目录
+                path.resolve(process.cwd(), './app/pages')
+            ],
+            use: {
+                loader: require.resolve('babel-loader')
+            }
+        },
+        {
+            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+            use: {
+                loader: require.resolve('url-loader'),
+                options: {
+                    limit: 8 * 1024,
+                    esModule: false
+                }
+            }
+        },
+        {
+            test: /\.css$/,
+            use: [require.resolve('style-loader'), require.resolve('css-loader')]
+        },
+        {
+            test: /\.less$/,
+            use: [require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('less-loader')]
+        },
+        {
+            test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
+            use: require.resolve('file-loader')
+        }]
+    },
+    //产物输出路径,因为开发和生产环境输出不一致，所以在各自环境中自行配置
+    output: {},
+    // 配置模块解析的具体行为（定义webpack 在打包时如何找到并解析具体模块的路径）
+    resolve: {
+        extensions: ['.js', '.vue', '.less', '.css'],
+        alias: (() => {
+            const aliasMap = {}
+            const blankModulePath = path.resolve(__dirname, '../libs/blank.js')
+
+            //dashboadr 路由扩展配置
+            const businessDashboardRouterConfig = path.resolve(process.cwd(), './app/pages/dashboard/router.js')
+            aliasMap['$businessDashboardRouterConfig'] = fs.existsSync(businessDashboardRouterConfig) ? businessDashboardRouterConfig : blankModulePath
+
+            //schema-view component 路由扩展配置
+            const businessComponentConfig = path.resolve(process.cwd(), './app/pages/dashboard/complex-view/schema-view/components/component-config.js')
+            aliasMap['$businessComponentConfig'] = fs.existsSync(businessComponentConfig) ? businessComponentConfig : blankModulePath
+
+            //schema-form 路由扩展配置
+            const businessFormItemConfig = path.resolve(process.cwd(), './app/pages/widgets/schema-form/form-item-config.js')
+            aliasMap['$businessFormItemConfig'] = fs.existsSync(businessFormItemConfig) ? businessFormItemConfig : blankModulePath
+
+            //schema-search-bar 路由扩展配置
+            const businessSearchItemConfig = path.resolve(process.cwd(), './app/pages/widgets/schema-search-bar/search-item-config.js')
+            aliasMap['$businessSearchItemConfig'] = fs.existsSync(businessSearchItemConfig) ? businessSearchItemConfig : blankModulePath
+
+            return {
+                'vue': require.resolve('vue'),
+                '@babel/runtime/helpers/toConsumableArray': require.resolve('@babel/runtime/helpers/toConsumableArray'),
+                '@babel/runtime/helpers/asyncToGenerator': require.resolve('@babel/runtime/helpers/asyncToGenerator'),
+                '@babel/runtime/regenerator': require.resolve('@babel/runtime/regenerator'),
+                $elpisPages: path.resolve(__dirname, '../../pages'),
+                $elpisCommon: path.resolve(__dirname, '../../pages/common'),
+                $elpisCurl: path.resolve(__dirname, '../../pages/common/curl.js'),
+                $elpisUtils: path.resolve(__dirname, '../../pages/common/utils.js'),
+                $elpisWidgets: path.resolve(__dirname, '../../pages/widgets'),
+                $elpisHeaderContainer: path.resolve(__dirname, '../../pages/widgets/header-container/header-container.vue'),
+                $elpisSiderContainer: path.resolve(__dirname, '../../pages/widgets/sider-container/sider-container.vue'),
+                $elpisSchemaTable: path.resolve(__dirname, '../../pages/widgets/schema-table/schema-table.vue'),
+                // $elpisSchemaForm: path.resolve(__dirname, '../../pages/widgets/schema-form/schema-form.vue'),
+                $elpisSchemaSearchBar: path.resolve(__dirname, '../../pages/widgets/schema-search-bar/schema-search-bar.vue'),
+                $elpisStore: path.resolve(__dirname, '../../pages/store'),
+                $elpisBoot: path.resolve(__dirname, '../../pages/boot.js'),
+                ...aliasMap
+            }
+        })()
+    },
+    // 配置 webpack 配置
+    plugins: [
+        // 处理 .vue 文件， 这个插件是必须的
+        // 它的职能是讲你定义过的其他规则复制并应用到 .vue 文件里
+        // 例如，如果一条匹配规则 /\.js$/的规则，那么他会应用到<script> 模块中
+        new VueLoaderPlugin(),
+        //把第三方库暴露到 window context 下
+        new webpack.ProvidePlugin({
+            Vue: 'vue',
+            axios: 'axios',
+            _: 'lodash'
+        }),
+
+        new webpack.DefinePlugin({
+            __VUE_OPTIONS_API__: 'true',// 支持 vue 解析 optionsAPi
+            __VUE_PROD_DEVTOOLS__: 'false',// 禁用 Vue 调试工具
+            __VUE_PROD_HYDRATION_MISMATCH_DETAILS: 'false' //禁用生产环境显示 “水合” 信息
+        }),
+        //构造最终渲染的页面文件
+        ...elpisHtmlWebpackPluginList,
+        ...businessHtmlWebpackPluginList
+    ],
+    //配置打包输出优化（配置代码分割，模块合并，缓存，TreeShaing，压缩等优化策略）
+    optimization: {
+        /**
+         * 把 js 文件打包成三种类型
+         * 1.vendor：第三方 lib 库，基本不会改动，除非依赖版本升级
+         * 2.common：业务组件代码的公共部分抽取出来，改动较少
+         * 3.entry.{page}：不用页面 entry 里的业务组件代码的差异部分，会经常改动
+         * 目的：把改动和引用频率不一样的js区分出来，以到达更好利用浏览器缓存的效果
+         */
+        splitChunks: {
+            chunks: 'all',// 对同步和异步模块都进行分割
+            maxAsyncRequests: 10,//每次异步加载的最大并行请求数
+            maxInitialRequests: 10,//入口点的最大并行请求数
+            cacheGroups: {
+                vendor: { //第三方依赖库
+                    test: /[\\/]node_modules[\\/]/,//打包 node_modules 中的文件
+                    name: 'vendor',//模块名称
+                    priority: 20,//打包优先级，数字越大，优先级越高
+                    enforce: true,//强制执行
+                    reuseExistingChunk: true // 复用已有的公共chunk
+                },
+                common: {
+                    test: /[\\/]common|widgets[\\/]/,
+                    name: 'common',//模块名称
+                    minChunks: 2,//被几处引用即被归为公共模块（此处为2处）
+                    minSize: 1,//最小分割文件大小（1 byte）
+                    priority: 10,//打包优先级，数字越大，优先级越高
+                    reuseExistingChunk: true// 复用已有的公共chunk
+                }
+            }
+        },
+        //将 webpack 运行时生成的代码打包到 runtime.js
+        runtimeChunk: true
+    }
+}, businessWebpackConfig)

package/app/webpack/config/webpack.dev.js

@@ -0,0 +1,56 @@
+const path = require('path')
+const merge = require('webpack-merge')
+const webpack = require('webpack')
+//基类配置
+const baseConfig = require('./webpack.base')
+//devServe 配置
+const DEV_SERVER_CONFIG = {
+    HOST:'127.0.0.1',
+    PORT:9002,
+    HMR_PATH:'__webpack_hmr',//官方规定
+    TIMEOUT:20000
+}
+
+//开发阶段的entry配置需要加入 hmr
+Object.keys(baseConfig.entry).forEach(v => {
+    //第三方库不作为hmr入口
+    if(v !== 'vendor'){
+        baseConfig.entry[v] = [
+            //主入口文件
+            baseConfig.entry[v],
+            //hmr 更新入口，官方指定的 hmr 路径
+            `${require.resolve('webpack-hot-middleware/client')}?path=http://${DEV_SERVER_CONFIG.HOST}:${DEV_SERVER_CONFIG.PORT}/${DEV_SERVER_CONFIG.HMR_PATH}&timeout=${DEV_SERVER_CONFIG.TIMEOUT}&reload=true`
+        ] 
+    }
+})
+
+//开发环境 webpack 配置
+const webpackConfig = merge.smart(baseConfig,{
+    //指定开发环境
+    mode: 'development',
+    // source-map开发工具，呈现代码的映射瓜系，便于在开发过程中调试代码
+    devtool:'eval-cheap-module-source-map',
+    //开发环境 output 配置
+    output: {
+        filename: 'js/[name]_[chunkhash:8].bundle.js',
+        path: path.join(process.cwd(), './app/public/dist/dev'),//输出文件储存路径
+        publicPath: `http://${DEV_SERVER_CONFIG.HOST}:${DEV_SERVER_CONFIG.PORT}/public/dist/dev`,//外部资源公共路径
+        globalObject:'this'
+    },
+    //开发阶段插件
+    plugins:[
+        //HotModuleReplacementPlugin用于实现热模块替换（简称：HMR）
+        //模块热替换允许在应用程序运行时替换模块
+        //极大的提升开发效率，因为能让应用一直保持允许状态
+     new webpack.HotModuleReplacementPlugin({
+        multiStep:false
+     })
+    ]
+});
+
+module.exports = {
+    //webpack配置
+    webpackConfig,
+    //devserver配置 暴露给 dev.js使用
+    DEV_SERVER_CONFIG
+}

package/app/webpack/config/webpack.prod.js

@@ -0,0 +1,116 @@
+const merge = require('webpack-merge')
+const path = require('path')
+const os = require('os')
+const HappyPack = require('happypack')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CleanWebpackPlugin = require('clean-webpack-plugin')
+const HtmlWebpackInjectAttributesPlugin = require('html-webpack-inject-attributes-plugin')
+const TerserWebpackPlugin = require('terser-webpack-plugin')
+// 多线程 build 配置
+const happypackCommonConfig = {
+    debug: false,
+    threadPool: HappyPack.ThreadPool({ size: os.cpus().length })
+}
+
+//基类配置
+const baseConfig = require('./webpack.base')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+//生产环境 webpack 配置
+const webpackConfig = merge.smart(baseConfig, {
+    //指定生产环境
+    mode: 'production',
+    //生产环境 output 配置
+    output: {
+        filename: 'js/[name]_[chunkhash:8].bundle.js',
+        path: path.join(process.cwd(), './app/public/dist/prod/'),
+        publicPath: '/dist/prod/',
+        crossOriginLoading: 'anonymous'
+    },
+    module: {
+        rules: [{
+            test: /\.css$/,
+            use: [
+                MiniCssExtractPlugin.loader,
+                `${require.resolve('happypack/loader')}?id=css`
+            ]
+        }, {
+            test: /\.js$/,
+            include: [
+                // 处理 elpis 目录
+                path.resolve(__dirname, '../../pages'),
+                // 处理 业务 目录
+                path.resolve(process.cwd(), './app/pages')
+            ],
+            use: [`${require.resolve('happypack/loader')}?id=js`]
+        }
+        ]
+    },
+    //webpack 不会有大量 hints 信息,默认为 warning
+    performance: {
+        hints: false
+    },
+    plugins: [
+        //每次 build 前，清空 public/dist 目录
+        new CleanWebpackPlugin(['public/dist'], {
+            root: path.resolve(process.cwd(), './app/'),
+            exclude: [],
+            verbose: true,
+            dry: false
+        }),
+        //提取 css的公共部分，有效利用缓存，（非公共部分使用 inline）
+        new MiniCssExtractPlugin({
+            chunkFilename: 'css/[name]_[chunkhash:8].bundle.css'
+        }),
+        //优化并压缩CSS资源
+        new CssMinimizerPlugin(),
+        //多线程打包JS，加快打包速度
+        new HappyPack({
+            ...happypackCommonConfig,
+            id: 'js',
+            loaders: [`${require.resolve('babel-loader')}?${JSON.stringify({
+                presets: [require.resolve("@babel/preset-env")],
+                plugins: [require.resolve("@babel/plugin-transform-runtime")]
+            })}`]
+        }),
+        //多线程打包CSS，加快打包速度
+        new HappyPack({
+            ...happypackCommonConfig,
+            id: 'css',
+            loaders: [{
+                path: require.resolve('css-loader'),
+                options: {
+                    importLoaders: 1
+                }
+            }]
+        }),
+        //浏览器在请求资源时不发送用户的身份凭证
+        new HtmlWebpackInjectAttributesPlugin({
+            crossorigin: 'anonymous'
+        })
+    ],
+    optimization: {
+        //使用 TerserWebpackPlugin 的并发和缓存，提升压缩阶段的性能
+        //清楚 console.log
+        minimize: true,
+        minimizer: [
+            new TerserWebpackPlugin({
+                // 新版不再支持 cache，直接删除
+                // cache: true,
+                parallel: true, // 并行压缩，保留这个配置
+                terserOptions: {
+                    // 所有压缩选项都写在这里
+                    compress: {
+                        drop_console: true, // 生产环境移除 console
+                        drop_debugger: true
+                    },
+                    format: {
+                        comments: false // 移除注释
+                    }
+                },
+                extractComments: false // 不提取注释到单独文件
+            })
+        ]
+    }
+});
+
+module.exports = webpackConfig

package/app/webpack/dev.js

@@ -0,0 +1,52 @@
+//本地开发启动的 devServe
+const express = require('express')
+const path = require('path')
+const consoler = require('consoler')
+const webpack = require('webpack')
+const devMiddleware = require('webpack-dev-middleware')
+const hotMiddleware = require('webpack-hot-middleware')
+
+module.exports = () => {
+//从 webpack.dev.js 获取 webpackConfig 配置 和 devServe配置
+const {
+    webpackConfig,
+    DEV_SERVER_CONFIG
+} = require('./config/webpack.dev')
+
+
+const app = express()
+
+const compiler = webpack(webpackConfig)
+//指定静态文件目录
+app.use(express.static(path.join(__dirname,'../public/dist')))
+//引用devMiddleware 中间件（监控文件改动）
+app.use(devMiddleware(compiler,{
+    //落地文件
+    writeToDisk:(filePath) => filePath.endsWith('.tpl'),
+    //资源路径
+    publicPath:webpackConfig.output.publicPath,
+    //headers 配置
+    headers:{
+        'Access-Control-Allow-Origin':'*',
+        'Access-Control-Allow-Methods':'GET,POST,PUT,DELETE,PATCH,OPTIONS',
+        'Access-Control-Allow-Headers':'X-Requested-With,content-type,Authorization',
+    },
+    stats:{
+        colors:true
+    }
+}))
+
+//引用hotMiddleware 中间件（实现热更新通讯）
+app.use(hotMiddleware(compiler,{
+    path:`/${DEV_SERVER_CONFIG.HMR_PATH}`,
+    log:() => {}
+}))
+
+consoler.info('请等待webpack初次构建完成提示。。。。')
+
+//启动 devServe
+const port = DEV_SERVER_CONFIG.PORT
+app.listen(port,() => {
+    console.log(`app listening on port ${port}`);
+})
+}

package/app/webpack/libs/blank.js

@@ -0,0 +1 @@
+module.exports = {}

package/app/webpack/prod.js

@@ -0,0 +1,17 @@
+const webpack = require('webpack')
+const webpackProdConfig = require('./config/webpack.prod')
+
+module.exports = () => {
+    console.log('\nbuilding... \n');
+
+    webpack(webpackProdConfig, (err,stats) => {
+        if(err) { console.log(err); return;}
+        process.stdout.write(`${stats.toString({
+            colors:true, //在控制台输出彩色信息
+            modules:false,//不限时每个模块的打包信息
+            children:false,//不显示子编译任务的信息
+            chunks:false,//不显示每个代码块的信息
+            chunkModules:true//显示代码块中模块的信息
+        })}\n`)
+    })
+}

package/config/config.default.js

@@ -0,0 +1,3 @@
+module.exports = {
+    name:'elpis'
+}