Agilebpm完整入门系列内容——附加各种Agilebpm学习豪华资料

红目香薰 CSDN会员 红目香薰 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区

资料先睹为快

脑图开头

AgileBPM 项目模块总览脑图

平台搭建与介绍

【组件】AgileBPM 工作台配置

【组件】AgileBPM 系统日程、节假日接口

【组件】AgileBPM 数据授权功能

【组件】AgileBPM 定时计划

【组件】AgileBPM EelasticSearch 组件

【组件】AgileBPM 系统属性,系统配置说明文档

【组件】AgileBPM LDAP 用户认证组件

【组件】AgileBPM 事务消息组件

【组件】AgileBPM 缓存组件

基础知识

对AgileBpm低代码平台的整体逻辑梳理

工作流activiti与flowable、AgileBPM 比较

agilebpm脑图_设计开发平台前端框架介绍

对Agilebpm开源版低代码平台个人window 10 电脑搭建步骤的详细指导

weui开发文档_AgileBPM 敏捷工作流开发平台

通过各种文档提示,你会发现学习【Agilebpm】可以非常迅速,而且环境基本上就是咱们平时开发的环境,很节约时间,能非常快速的上手,并搭建一些可以实现效果的demo。可以按照文档的提示挨个试试。挺有成就感的。祝你能快速成长。

目录

环境

SpringBoot 开源版开发部署

OA 版本开发部署

agile-bpm-basic 传统版本开发部署

移动端开发环境部署

安装使用(webpack)

Agilebpm基础环境配置——移动端入门

快速入门

vux2 模板

使用淘宝 npm 镜像

cnpm

yarn

手动配置使用

调用示例

.vue文件中调用组件

main.js中调用plugin


环境

部署项目之前请确定您的电脑开发环境
  • maven
  • Git-如果网络访问有问题,可以弄个加速器。
  • jdk8
  • eclipse 等IDE
  • mysql 5.6+ 或 oracle(非个人版)
  • redis
  • 工作空间字符集 UTF-8
  • maven 私服使用 各个工程中 root pom 中的私服地址

SpringBoot 开源版开发部署

  1. 引入 Maven Spring Boot 项目,含 agilebpm-app-simples,demo,demo-project-ui 三个案例工程
  2. 对项目根目录执行 mvn 命令 clean install 安装相关依赖(请务必使用root pom中私服地址)
  3. 建表、执行初始化语句,按照 初始化SQL 1~7 顺序依次执行,参考 readme,非升级情况请勿执行upgrade语句。(也可复制只读demo库 47.106.139.29:3306/angular mysql 数据库请忽略大小写)
  4. Clone Spring Boot 版本项目https://gitee.com/agile-bpm/agilebpm-base-spring-boot.git
  5. 启动项目,修改数据库配置( application.yml ) 然后在 SamplesApplication.java 中执行 main 方法
  6. 浏览器访问 http://localhost:8080 即可体验 AgileBPM !

如果需要查看源码可以引入 agilebpm 主工程 https://gitee.com/agile-bpm/agile-bpm-basic

OA 版本开发部署

安装前必读

建议使用公司自己的私服,将以下需要 install 的模块 deploy 到私服,这样可以避免所有人都去下载、安装不相关的模块源码

  1. install agilebpm 相关模块(基础功能相关模块源码)
  1. install wf 相关模块(流程模块源码,若没有该模块源码则需要从 agilebpm 私服下载相关 jar,上传自己公司私服。具体 agilebpm 私服地址请参考 agilebpm root pom 中的配置)
  1. install agilebpm-base-spring-boot 相关模块(spring boot 版本 starts)
  1. install agilebpm-oa 相关模块 (内容管理模块源码,以及app项目模块)
  1. 创建数据库,初始化 agilebpm模块下doc目录的 数据库初始化脚本 ,如 MySQL的 1~7 (不要执行upgrade脚本)
  1. 执行 oa模块下 doc 目录的初始化脚本,如 MySQL 的1~3
  1. 修改数据库、Redis配置文件后,main 方法启动后端服务
    agilebpm-oa-app/src/main/java/com/dstz/agilebpm/oa/OAApplication.java
  1. 开发环境使用 node 运行 agilebpm-oa-ui 前端项目,请参考前端工程下 readme 配置并启动 前端工程

agile-bpm-basic 传统版本开发部署

Web 传统版本部署文档不再提供,请尽量使用Springboot版本,他们是 没有区别的。

如果需要查看源码可以引入 agilebpm 主工程

  • eclipse引入源码: agilebpm与springBoot版本在同一工程下即可
  • idea引入源码: 在maven视图下,引入 agilebpm 的 root pom 即可

由于很多新手用个 Tomcat 都举步维艰,所以为了避免他们浪费时间,web版本部署文档撤掉了,有需要可以旧版本文档查看


移动端开发环境部署

 

开发前请确认机器安装有 node js

  1. 引入移动端项目 bpm-app
  2. 在项目目录下安装依赖 ,控制台执行node命令 npm install
  3. 在/bpm-app/src/setting.js中配置 CTX 地址指向后台项目的服务器地址(旧版在 baseService.js文件 中配置
  4. 启动热部署项目 npm run dev
  5. 如果需要部署线上则执行 npm run build 然后部署打包后的 dist 目录文件

Node.js需要安装好才能进行操作哦。

需要依赖于vue

VUX 并不是一个能解决所有场景的完美解决方案(实际上也没有一个方案能解决所有问题),也会出现某些bug或者某些特性不支持,所以如果遇到问题麻烦及时不带情绪正确反馈,我们乐于及时解决描述详细方便重现的问题。

即使你不直接使用 VUX 组件代码, 你依然可以参考 VUX 代码来实现自己的组件库。如果一定程度上帮助到了你,那么维护这个项目也就有所意义。

VUX 是库而非框架,虽然有专用的 vux-loader,但并不影响你自由地使用其他组件库或者工具库。
 

VUX 使用的 CSS 预处理工具是 less(同 WeUI),但(利益于 .vue 单文件组件的灵活性)这并不影响你使用 SASS 等其他预处理器。
 

用以表示该组件库时请使用大写名字 VUX,用在说明版本号时使用小写 vux@2.x。


安装使用(webpack)

直接安装或者更新:

npm install vux --save

或者使用 yarn

yarn add vux // 安装
yarn upgrade vux // 更新

如果你想直接从 Github 安装,请指定 v2 分支

npm install git://github.com/airyland/vux.git#v2

如果你是从0.x更新,请参考: 更新到2.x

vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置:

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

vux@0.x 已经停止维护,请尽快迁移到 vue@2.x & vuex@2.x & vux@2.x,虽然要花点时间,但是完全值得。


Agilebpm基础环境配置——移动端入门

快速入门

vux@2.x 推荐webpack+vue-loader方式的开发,如果要使用umd文件,请参照文档。不建议使用引入script的方式进行开发,因为它会带来一系列的开发、维护、效率、部署问题。

Life is short, use webpack.

vux2 模板

vux2 模板 fork 自webpack模板,基本和官方同步。

默认为 webpack2 模板

npm install vue-cli -g # 如果还没安装
vue init airyland/vux2 projectPath

cd projectPath
npm install --registry=https://registry.npm.taobao.org # 或者 cnpm install 或者  yarn
npm run dev #  或者  yarn dev

使用淘宝 npm 镜像

cnpm

你可以直接使用 cnpm 来加速模块下载。

yarn

或者如果你已经用上了 yarn,建议配置淘宝源:

yarn config set registry https://registry.npm.taobao.org
yarn

精简了一些,但是操作起来步骤很全面的。 


  

手动配置使用

注意的是下面事项并非表示 VUX 使用繁琐,部分只是出于确保有正确的依赖和配置,而部分是出于优化。

请将 babel-loader 的配置写到 .babelrc 里而不是使用 options,否则可能会出错。

折腾能力强的同学参考一下,下面即airyland/vux2模板主要处理的事项:

  • 引入 reset.less,默认样式不包含reset,并且部分用户自己有一套reset样式,因此需要在App.vue进行手动引入

    <style lang="less">
    @import '~vux/src/styles/reset.less';
    </style>
    
  • 配置 vue-loader(通过配置vux-loader实现)

    // vux-loader
    plugins: [{
      name: 'vux-ui'
    }]
    
  • 配置babel-loader以正确编译 VUX 的js源码(通过配置vux-loader实现)

    plugins: [{
      name: 'vux-ui'
    }]
    
  • 安装less-loader以正确编译less源码

    npm install less less-loader --save-dev
    
  • 安装 yaml-loader 以正确进行语言文件读取

    npm install yaml-loader --save-dev
    
  • 添加 viewport meta

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    
  • 添加 Fastclick 移除移动端点击延迟

    const FastClick = require('fastclick')
    FastClick.attach(document.body)
    
  • 添加 vue-router(如果不需要前端路由,可忽略)

    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    
  • 添加 webpack plugin, 在构建后去除重复css代码(通过配置vux-loader实现)

    plugins: [{
      name: 'duplicate-style'
    }]
    
  • 如果你使用 webpack-simple 模板或者 webpack 配置里缺少 .vue extension 配置,请记得配置:

    resolve: {
      extensions: ['.js', '.vue', '.json']

 

调用示例

.vue文件中调用组件

<template>
  <div>
    <group>
      <cell title="title" value="value"></cell>
    </group>
  </div>
</template>

<script>
import { Group, Cell } from 'vux'

export default {
  components: {
    Group,
    Cell
  }
}
</script>

main.js中调用plugin

import { AlertPlugin, ToastPlugin } from 'vux'

Vue.use(AlertPlugin)
Vue.use(ToastPlugin)

示例这就可以运行了啊。

...全文

相关推荐

评论
收藏 已收藏
分享
返回顶部
红目香薰 CSDN会员
红目香薰 新星创作者: 人工智能技术领域 新星创作者: 人工智能技术领域优质创作者: 大数据技术领域 优质创作者: 大数据技术领域领域专家: 后端开发技术领域 领域专家: 后端开发技术领域
AgileBPM技术交流社区 299 成员 94 内容