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

[红目香薰]

资料先睹为快

脑图开头

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)

示例这就可以运行了啊。