前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >urule项目启动与前端开发方法

urule项目启动与前端开发方法

作者头像
治电小白菜
发布2023-04-27 20:39:53
5350
发布2023-04-27 20:39:53
举报
文章被收录于专栏:技术综合技术综合

一、启动步骤

1. 拉取代码

代码语言:javascript
复制
git clone https://github.com/youseries/urule.git

拉取后目录

image.png

  • 打包后的前端页面是在urule-console/src/main/resources目录中
  • 前端页面源码在urule-console-js目录中
  • urule-springboot/src/main/resources/context.xml中配置数据库参数

2. idea中引入项目

1) 使用idea打开整个项目文件夹

2) 配置Project structure

配置JDK为1.8

image.png

将四个模块引入(urule-console, urule-core, urule-parent, urule-springboot)

image.png

3. 配置数据库

urule-springboot/src/main/resources/context.xml中配置数据库参数, 如果报时区错误可以配置下时区参数serverTimezone=UTC, 运行时如果数据库为空, 会自动创建表

image.png

4. 直接运行即可

运行后, 访问 http://localhost:8080/urule即可进入页面

image.png

二、前端二次开发方法

1. 配置webpack

比原来的配置添加了TerserWebpackPlugin插件和CleanWebpackPlugin插件, 用来解决代码压缩和打包时清除原文件

代码语言:javascript
复制
const path=require('path');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const { ProgressPlugin } = require('webpack');
module.exports={
    mode:'production',
    entry: {
        frame:'./src/frame/index.jsx',
        variableEditor:'./src/variable/index.jsx',
        constantEditor:'./src/constant/index.jsx',
        parameterEditor:'./src/parameter/index.jsx',
        actionEditor:'./src/action/index.jsx',
        packageEditor:'./src/package/index.jsx',
        flowDesigner:'./src/flow/index.jsx',
        ruleSetEditor:'./src/editor/urule/index.jsx',
        decisionTableEditor:'./src/editor/decisiontable/index.jsx',
        scriptDecisionTableEditor:'./src/editor/scriptdecisiontable/index.jsx',
        decisionTreeEditor:'./src/editor/decisiontree/index.jsx',
        clientConfigEditor:'./src/client/index.jsx',
        ulEditor:'./src/editor/ul/index.jsx',
        scoreCardTable:'./src/scorecard/index.jsx',
        permissionConfigEditor:'./src/permission/index.jsx'
    },
    output:{
        path:path.resolve('../urule-console/src/main/resources/urule-asserts/js'),
        filename: '[name].bundle.js'
    },
    optimization: {
        minimize: true,
        minimizer: [
            new CleanWebpackPlugin(),
            new TerserWebpackPlugin ({
                extractComments: false
            })
        ]
    },
    plugins: [
        new ProgressPlugin({
            activeModules: true,         // 默认false,显示活动模块计数和一个活动模块正在进行消息。
            entries: true,                 // 默认true,显示正在进行的条目计数消息。
            modules: false,              // 默认true,显示正在进行的模块计数消息。
            modulesCount: 5000,          // 默认5000,开始时的最小模块数。PS:modules启用属性时生效。
            profile: false,                // 默认false,告诉ProgressPlugin为进度步骤收集配置文件数据。
            dependencies: false,         // 默认true,显示正在进行的依赖项计数消息。
            dependenciesCount: 10000,    // 默认10000,开始时的最小依赖项计数。PS:dependencies启用属性时生效。
        })
    ],
    module:{
        rules:[
            {
                test: /\.(jsx|js)?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options:{
                    "presets": [
                        "react","env"
                    ]
                }
            },
            {
                test:/\.css$/,
                use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
            },
            {
                test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000000
                        }
                    }
                ]
            }
        ]
    }
};

2. 配置package.json

可对页面进行打包, 热更新的开发模式还没搞好

代码语言:javascript
复制
"scripts": {
    "build": "webpack --config webpack.config.min.js"
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-04-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、启动步骤
    • 1. 拉取代码
      • 2. idea中引入项目
        • 1) 使用idea打开整个项目文件夹
        • 2) 配置Project structure
      • 3. 配置数据库
        • 4. 直接运行即可
        • 二、前端二次开发方法
          • 1. 配置webpack
            • 2. 配置package.json
            相关产品与服务
            数据库
            云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档