Spring-boot+element-ui+activiti流程审批，权限管理框架-代码详解⼀
前⾔
本框架是基于⼗多年项⽬开发经验积累，⽤最佳实践和流⾏技术开发现代前后端分离的通⽤项⽬模板。适合web应⽤，、⼿机应⽤管理端及服务端。
后端多模块
后端映射请求⾃动⽣成前端JS⽅法调⽤
减少后端和前端的调⽤阻抗
后端处理映射
@RestController
@RequestMapping("/authapi/base_log")
@Display("操作⽇志")
public class Base_LogController {
@PostMapping("/get")
@Log(disabled = true)
@PreAuthorize("hasAuthority('menu_base_log')")
public Base_Log get(String id) {
Base_Log result =  (id);
return result;
}
}
⾃动注册为前端JS函数，前端调⽤⽅式如下：
tapp.services.(id).then(function(result) {
});
数据字典组件
后端数据字典⾃动⽣成为前端JS对象，前端提供数据字典组件，仅需要指定数据字典类别就能完成选择功能。效果：
前端代码：
<el-col :span="8">
<!-- 性别选择组件-->
<el-form-item label="性别" prop="sexId" verify  >
<t-dic-select dicType="public_sex" v-model="headerEntity.sexId"></t-dic-select>
</el-form-item>
</el-col>
统⼀的异常处理
前端⼏乎不需要⾃⼰写异常处理代码
后端服务⽅法抛出UserFriendlyException（⽤户异常友好化）异常：
@Service
public class Base_UserServiceImpl extends BaseServiceImpl implements Base_UserService {
@Override
@Transactional
public void delete(String id) {
Base_User entity = userRepository.selectById(id);
if (entity == null) {
return;
}
if (!entity.canDelete()) {
throw new UserFriendlyException(MessageFormat.format("⽤户{0}禁⽌删除,⽆法删除！", Name()));
}
...
}
}
前端代码：
<!--⽆须异常处理-->
tapp.services.base_User.batchDelete(ids).then(function(result) {
self.$notify.success({
title: '系统删除成功',
message: '⽤户信息已删除成功！'
});
self.$fresh();
})
前端会直接的显⽰给⽤户
其它系统错，系统会在后端记录，前端提⽰⽤户重试或联系系统管理员
后端⽇志记录
后端定义菜单⾃动注册到Vue-router
后端定义的菜单⾃动会显⽰在系统导航，⽆须在vue-router中注册，⽆须前端重复处理
功能强⼤的grid组件
前端提供功能强⼤的grid组件，仅需要调⽤ 后端映射请求⾃动⽣成的JS⽅法，即能完成获取数据，分页，排序，导出等功能左边树，右边列表
效果
代码
<template>
<div>
<el-row :gutter="20">
<el-col :span="8">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>表名</span>
</div>
<div class="text item">
<!-- 定义树组件 -->
<t-tree ref="categoryTree" :options="categoryTreeOptons" @node-click="handleNodeClick">          </t-tree>
</div>
</el-card>
</el-col>
<el-col :span="16">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>{{selectedCategoryItemName}}-列</span>
<div >
<el-button icon="el-icon-download"  @click="doExportExcel()">导出</el-button>
</div>
</div>
<div class="text item">
<!-- 定义列表组件 -->
vue element admin<t-grid ref="searchReulstList" :options="gridOptions">
</t-grid>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
selectedCategoryItem: null,
data: [],
categoryTreeOptons: { //定义树组件选项

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。