| urule项目启动与前端开发方法 | 您所在的位置：网站首页 › idea配置webcontent项目启动 › urule项目启动与前端开发方法 |
|
一、启动步骤1. 拉取代码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插件, 用来解决代码压缩和打包时清除原文件 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可对页面进行打包, 热更新的开发模式还没搞好 "scripts": { "build": "webpack --config webpack.config.min.js" } |
| CopyRight 2018-2019 实验室设备网 版权所有 |