wenmo8 发布的文章

循序渐进VUE+Element 前端应用开发(17）--- 菜单资源管理

作者: wenmo8
时间: 2023-02-28
分类: 其它
评论

在权限管理系统中，菜单也属于权限控制的一个资源，应该直接应用于角色，和权限功能点一样，属于角色控制的一环。不同角色用户，登录系统后，出现的系统菜单是不同的。在VUE+Element 前端中，我们菜单结合路由集合，实现可访问路由的过滤，也就实现了对应角色菜单的展示和可访问路由的控制，详细可以参考随笔《
循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理
》，本篇随笔主要介绍菜单管理模块的界面和相关的实现逻辑。

1、菜单资源及管理界面介绍

前面介绍过，权限管理一般都会涉及到用户、组织机构、角色，以及权限功能等方面的内容，ABP框架的基础内容也是涉及到这几方面的内容，其中它们之间的关系基本上是多对多的关系，它们的关系如下所示。

加入菜单资源，以及整理它们之间的关系和表的信息，整理图示如下。

结合ABP后端提供的接口，Vue前端我们要实现基础的用户、组织机构、角色、功能权限等内容的管理，以及维护它们之间的关系。Vue前端对于权限管理模块的菜单列表如下所示。

菜单列表管理界面如下图所示，主要包括树状列表展示菜单结构，以及具体的菜单列表查询处理。

菜单查看明细界面如下所示，主要就是简单展示菜单相关的属性数据。

而菜单的编辑或新增界面，需要考虑从已有菜单中选择列表，以及选择图标信息。

其中的Awesome图标，我们封装了选择图标的组件，只从Font Awesome图标中选择，毕竟自带的Element图标太少，不太满足要求。

关于Awesome图标组件的使用，可以参考下之前我写过的随笔《
循序渐进VUE+Element 前端应用开发(11）--- 图标的维护和使用
》。

其中的Web图标选择控件，是根据e-icon-picker控件进行修改，以采用Font Awesome图标集合的处理

//Vue-Awesome图标自动加入
const req = require.context('vue-awesome/icons', true, /\.js$/)

const requireAll= requireContext =>requireContext.keys()

const re= /\.\/(.*)\.js/const fontAwesome= requireAll(req).filter((key) =>{return key.indexOf('index.js') < 0}).map(i=>{return i.match(re)[1]

})

菜单的展示我们也根据配置，从Awesome中选择构建菜单的图标项目即可。

菜单项的组件，是在Layout/Components/Sidebar/Item.vue进行修改，以适应Awesome图标的处理

render(createElement, context) {

    const { icon, title }=context.props

    const vnodes=[]if(icon) {//vnodes.push(<svg-icon icon-class={icon} />) // 使用自定义svg图标
      //vnodes.push(<i class={icon}/>) // 使用内置element图标
      vnodes.push(<v-icon name={icon} scale='1.1' style='padding-right:3px'/>)//使用awesome图标

    }if(title) {

      vnodes.push(<span slot='title'>{(title)}</span>)
}returnvnodes

  }

通过各个地方进行修改，我们就可以使用Awesome的图标集合了。

2、菜单和路由的结合管理

在前面随笔《
循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理
》我介绍了用户动态配置的菜单资源，结合本系统的所有路由，实现菜单的显示外，还过滤了系统路由，实现可访问路由的管理，两者结合实现了系统有效的菜单和路由的控制。

前端通过接口动态获取菜单列表，通过菜单的名称和路由名称的对应关系，我们以菜单集合为对照，然后过滤本地所有静态路由的列表，然后获得用户可以访问的路由列表，设置动态路由给前端，从而实现了界面根据用户角色/权限的不同，而变化用户的菜单界面和可访问路由集合。

菜单路由处理的大概的操作过程如下所示

前端界面的动态菜单、本地路由、菜单导航和可访问路由的几个概念如下所示。

在前端界面处理中，我们通过Element界面组件的方式展示动态菜单信息，并结合菜单和路由的关系，实现菜单跳转到对应视图的处理过程。

因此，系统管理里面的菜单信息配置界面中，菜单的Web地址，对应的是系统静态路由的名称，如下界面所示。

之前定义系统的路由信息格式如下所示

//定义本系统的所有路由，具体路由呈现经过菜单数据过滤
export const asyncRoutes ={'dashboard': {

    path:'/dashboard',

    component: Layout,

    children: [{

      path:'dashboard',

      name:'dashboard',

      component: ()=> import('@/views/dashboard/index')

    }]

  },'product': {

    path:'/product',

    component: Layout,

    children: [{

      path:'/product',

      name:'product',

      component: ()=> import('@/views/Product/index')

    }]

  },



  ..............................//省略部分

  'icon': {

    path:'/icon',

    component: Layout,

    children: [{

      path:'/icon',

      name:'icon',

      component: ()=> import('@/views/icons/index')

    }]

  },'external-link': {

    path:'http://www.iqidi.com',

    name:'external-link'}

}

有了这些准备，我们在用户登录系统后，就从后台获取对应的菜单列表。

在系统登录处理过程中，考虑到初始化的时候，如果用户是管理员admin，并且获取用户菜单为空，可以考虑使用预设的静态菜单资源，可以让用户先配置好权限菜单。

    //系统静态菜单
    var staticmenus =await GetStaticMenus()//console.log(menus)

    //如果用户是admin 并且角色集合中没有菜单，则使用静态菜单
    var username = store.getters.name //用户名
    if (username === 'admin') {if (!menus || typeof (menus) === 'undefined' || menus.length === 0) {

        menus= staticmenus //系统管理员，初始化的时候使用静态菜单
}

    }

由于之前开发了一个基于Winform的ABP前端应用，因此我们菜单为了整合两个应用，在菜单表示增加一个一个Tag标签，用来区分是Winform界面的菜单还是Web的菜单，毕竟两者菜单的处理方式是不同的。

      addForm: { //添加表单
        id: this.guid(),

        pid:'',

        name:'',

        url:'',

        seq:'001',

        isTop:false,

        expand:1,

        visible:1,

        webIcon:'',

        tag:'web'//Web专用
      },

WInform客户端的菜单也是从服务器端请求数据，并动态构建的，Winform端的菜单展示效果如下所示。

为了方便读者理解，我列出一下前面几篇随笔的连接，供参考：

循序渐进VUE+Element 前端应用开发(1）--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理

循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用

循序渐进VUE+Element 前端应用开发(7）--- 介绍一些常规的JS处理函数

循序渐进VUE+Element 前端应用开发(8）--- 树列表组件的使用

循序渐进VUE+Element 前端应用开发(9）--- 界面语言国际化的处理

循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(11）--- 图标的维护和使用

循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理

循序渐进VUE+Element 前端应用开发(13）--- 前端API接口的封装处理

循序渐进VUE+Element 前端应用开发(14）--- 根据ABP后端接口实现前端界面展示

循序渐进VUE+Element 前端应用开发(15）--- 用户管理模块的处理

循序渐进VUE+Element 前端应用开发(16）--- 组织机构和角色管理模块的处理

循序渐进VUE+Element 前端应用开发(17）--- 菜单管理

循序渐进VUE+Element 前端应用开发(18）--- 功能点管理及权限控制

VUE+Element 前端应用开发框架功能介绍

循序渐进VUE+Element 前端应用开发(19）--- 后端查询接口和Vue前端的整合

使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

循序渐进VUE+Element 前端应用开发(20）--- 使用组件封装简化界面代码

循序渐进VUE+Element 前端应用开发(21）--- 省市区县联动处理的组件使用

循序渐进VUE+Element 前端应用开发(22）--- 简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理

循序渐进VUE+Element 前端应用开发(24）--- 修改密码的前端界面和ABP后端设置处理

循序渐进VUE+Element 前端应用开发(25）--- 各种界面组件的使用（1）

循序渐进VUE+Element 前端应用开发(26）--- 各种界面组件的使用（2）

电商商品数据库的设计和功能界面的处理

循序渐进VUE+Element 前端应用开发(27）--- 数据表的动态表单设计和数据存储

循序渐进VUE+Element 前端应用开发(28）--- 附件内容的管理

循序渐进VUE+Element 前端应用开发(29）--- 高级查询条件的界面设计

部署基于.netcore5.0的ABP框架后台Api服务端，以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31）--- 系统的日志管理，包括登录日志、接口访问日志、实体变化历史日志

循序渐进VUE+Element 前端应用开发(32）--- 手机短信动态码登陆处理

循序渐进VUE+Element 前端应用开发(33）--- 邮件参数配置和模板邮件发送处理

使用代码生成工具快速开发ABP框架项目

使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理

使用Vue-TreeSelect组件的时候，用watch变量方式解决弹出编辑对话框界面无法触发更新的问题

循序渐进VUE+Element 前端应用开发(18）--- 功能点管理及权限控制

作者: wenmo8
时间: 2023-02-28
分类: 其它
评论

在一个业务管理系统中，如果我们需要实现权限控制功能，我们需要定义好对应的权限功能点，然后在界面中对界面元素的功能点进行绑定，这样就可以在后台动态分配权限进行动态控制了，一般来说，权限功能点是针对角色进行控制的，也就是简称RBAC（Role Based Access Control）。在前面随笔中，我们介绍了菜单资源，在权限管理系统中，菜单也是属于权限控制的一个资源，其也是作用于角色层面上的。本篇随笔介绍功能点管理及权限控制，功能点是作为一个业务对象数据进行管理，在角色范畴上进行分配，而在界面元素控制上，VUE+Element 前端引入Vue自定义指令Directives进行控制。

1、权限功能点管理

我们在前面分析过一个权限系统的表和关系的说明，如下所示。

权限功能点的管理就是对TB_Function的表的管理操作，这个表是我们定义用于系统控制的功能点。

权限功能点的管理为了展示它的树状结果，包括树列表的管理和明细列表的管理，如下图所示。

功能点的查看界面如下所示，除了展示对应功能点的详细信息外，还列出这个功能点被那些角色拥有使用。

功能点的新增界面如下所示，主要就是选择父节点和录入功能点的信息即可。

而为了更加方便批量录入权限功能点，我们可以以业务表为基础进行批量录入，如下所示。

这样添加客户信息的功能点名称，会自动变为：Customer/Add，其他的类似，这样可以快速添加针对这个业务表的相关功能点。

有了这些功能点的定义，我们就可以结合角色管理进行分配给不同的角色了。如下是在角色编辑界面中，为角色分配不同的权限控制点。

2、VUE+Element 前端权限控制

前面内容介绍了权限功能点的管理，以及基于角色的权限实现分配处理，这些都为前端实现界面元素的权限控制做准备的。

首先我们需要根据ABP后端的接口进行前端JS端的类的封装处理，其中前面说过，常规的Get/GetAll/Create/Update/Delete/Count等接口，我们放在BaseApi基类里面定义，其他子类继承它即可。

权限模块我们涉及到的用户管理、机构管理、角色管理、菜单管理、功能管理、审计日志、登录日志等业务类，那么这些类继承BaseApi，就会具有相关的接口了，如下所示继承关系。

由于用户相关的菜单、权限集合是在用户范畴里面，我们可以在UserApi里面定义对应的后端接口调用。

其中 GetGrantedFunctionsByUser 方法就是获取指定用户的权限功能点集合的函数。

UserApi的类文件user.js内容如下所示。

其中 GetGrantedFunctionsByUser 方法就是获取指定用户的权限功能点集合的函数，函数代码如下所示。

  GetGrantedFunctionsByUser(id) { //获取用户权限列表
    returnrequest({

      url:this.baseurl + 'GetGrantedFunctionsByUser',

      method:'get',

      params: { id }

    })

  }

在用户的Store/Modules/user.js里面，我们增加一个功能点的状态信息，如下所示。

然后在用户每次获取信息的时候，把它的功能点信息也存储起来，那么界面就可以根据这个存储内容进行相应的权限控制了。

在Mutation里面添加一个设置用户状态信息的函数，如下所示。

  SET_PERMITS: (state, permits) =>{

    state.permits=permits

  }

这样我们在用户信息获取的getInfo函数里面，就可以顺便一起获取用户的包含的权限功能点信息集合了。

  //获取用户信息
getInfo({ commit, state }) {return new Promise((resolve, reject) =>{

      user.getInfo(state.userid).then(response=>{

        const { result }=response

       

        ....................



        commit('SET_ROLES', { roles, roleNames })

        commit('SET_NAME', name)

        commit('SET_INTRODUCTION', fullName)// 获取用户权限

        user.GetGrantedFunctionsByUser(state.userid).then(data => {

          var list = data.result.items

          if (list) {

            var permits = []

            list.forEach(element => {

              if (element && element.name && typeof (element.name) !== 'undefined') {

                permits.push(element.name.toLowerCase()) // 小写

              }

            });

            // 设置用户功能权限点

            commit('SET_PERMITS', permits)

          }

        })



        resolve(result)

      }).catch(error =>{

        reject(error)

      })

    })

  },

现在前端也有这些权限功能点控制集合了，这些就是对应当前登录用户的可访问权限集合了。

接下来的就是需要根据这些权限集合，进行界面元素的控制了，如对一些操作按钮，如新增、编辑、删除、导入、导出等操作的按钮是否可以显示进行管理。

这个操作就是设计到Vue的自定义指令操作了，如不了解的自定义Directives的使用的，可以参考下官方介绍：
https://cn.vuejs.org/v2/guide/custom-directive.html

如我们定义一个v-permit 的自定义指令来处理权限功能点的绑定处理，那么界面应该如下处理。

    <el-rowstyle="float:right;padding-bottom:10px">
      <el-buttonicon="el-icon-search"type="primary"size="mini"round @click="search()">查询</el-button>
      <el-buttonicon="el-icon-refresh-left"type="warning"size="mini"round plain @click="resetSeachForm('searchForm')">重置</el-button>
      <el-buttonv-permit="['User/add']"icon="el-icon-plus"type="success"size="mini"round @click="showAdd()">添加</el-button>
      <el-buttonv-permit="['User/import']"icon="el-icon-upload2"type="warning"size="mini"round @click="showImport()">导入</el-button>
      <el-buttonv-permit="['User/export']"icon="el-icon-download"type="warning"size="mini"round @click="showImport()">导出</el-button>
    </el-row>

通过类似
v-permit="['User/add']"
的方式操作，就可以指定这个操作按钮的功能点，如果用户具有这些功能点，那么就可以使用，否则就不显示了。

我们在directive目录中定义一个permit.js的自定义指令文件，用来进行相应的处理的。

然后在index.js的发布文件里面定义装载处理逻辑，如下代码所示

import permit from './permit'const install= function(Vue) {

  Vue.directive('permit', permit)

}if(window.Vue) {

  window['permit'] =permit//eslint-disable-next-line no-undef
Vue.use(install)

}



permission.install=install

exportdefault permission

最后，在main.js里面全局装载自定义指令的操作，如下代码所示。

//全局引入并使用权限控制点的自定义指令
import permission from './directive/permission'Vue.use(permission)

有了store模块里面的状态信息，以及自定义指令的支持，在界面上对应按钮元素上，就可以利用这些权限点进行控制操作了。

为了方便读者理解，我列出一下前面几篇随笔的连接，供参考：

循序渐进VUE+Element 前端应用开发(1）--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理

循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用

循序渐进VUE+Element 前端应用开发(7）--- 介绍一些常规的JS处理函数

循序渐进VUE+Element 前端应用开发(8）--- 树列表组件的使用

循序渐进VUE+Element 前端应用开发(9）--- 界面语言国际化的处理

循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(11）--- 图标的维护和使用

循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理

循序渐进VUE+Element 前端应用开发(13）--- 前端API接口的封装处理

循序渐进VUE+Element 前端应用开发(14）--- 根据ABP后端接口实现前端界面展示

循序渐进VUE+Element 前端应用开发(15）--- 用户管理模块的处理

循序渐进VUE+Element 前端应用开发(16）--- 组织机构和角色管理模块的处理

循序渐进VUE+Element 前端应用开发(17）--- 菜单管理

循序渐进VUE+Element 前端应用开发(18）--- 功能点管理及权限控制

VUE+Element 前端应用开发框架功能介绍

循序渐进VUE+Element 前端应用开发(19）--- 后端查询接口和Vue前端的整合

使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

循序渐进VUE+Element 前端应用开发(20）--- 使用组件封装简化界面代码

循序渐进VUE+Element 前端应用开发(21）--- 省市区县联动处理的组件使用

循序渐进VUE+Element 前端应用开发(22）--- 简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理

循序渐进VUE+Element 前端应用开发(24）--- 修改密码的前端界面和ABP后端设置处理

循序渐进VUE+Element 前端应用开发(25）--- 各种界面组件的使用（1）

循序渐进VUE+Element 前端应用开发(26）--- 各种界面组件的使用（2）

电商商品数据库的设计和功能界面的处理

循序渐进VUE+Element 前端应用开发(27）--- 数据表的动态表单设计和数据存储

循序渐进VUE+Element 前端应用开发(28）--- 附件内容的管理

循序渐进VUE+Element 前端应用开发(29）--- 高级查询条件的界面设计

部署基于.netcore5.0的ABP框架后台Api服务端，以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31）--- 系统的日志管理，包括登录日志、接口访问日志、实体变化历史日志

循序渐进VUE+Element 前端应用开发(32）--- 手机短信动态码登陆处理

循序渐进VUE+Element 前端应用开发(33）--- 邮件参数配置和模板邮件发送处理

使用代码生成工具快速开发ABP框架项目

使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理

使用Vue-TreeSelect组件的时候，用watch变量方式解决弹出编辑对话框界面无法触发更新的问题

VUE+Element 前端应用开发框架功能介绍

作者: wenmo8
时间: 2023-02-28
分类: 其它
评论

前面介绍了很多ABP系列的文章《
ABP框架使用
》，一步一步的把我们日常开发中涉及到的Web API服务构建、登录日志和操作审计日志、字典管理模块、省份城市的信息维护、权限管理模块中的组织机构、用户、角色、权限、菜单等内容，以及配置管理模块，界面的高级查询处理等内容，并根据我们在Winform领域多年的开发经验，完成了系统功能在Winform界面下的实现，并利用工具实现快速的Winform界面生成工作；而在循序渐进VUE+Element 前端应用开发文章《
循序渐进VUE+Element
》中，则介绍了结合ABP+Vue+Element来构建BS的前端解决方案，通过Vue+Element实现的前端界面展示，界面美观大方；而且业务内容以模块化组装的Web界面，非常利于大型复杂系统的开发，极大提供了效率。

1、ABP框架背景知识介绍

ABP
是ASP.NET Boilerplate的简称，ABP是一个
开源
且文档友好的
应用程序框架
。ABP不仅仅是一个框架，它还提供了一个
最徍实践
的基于
领域驱动设计(DDD)
的体系结构模型。学习使用ABP框架也有一段时间了,一直想全面了解下这个框架的整个来龙去脉，并把想把它使用历程整理成一个系列出来，不过一直没有下笔来写这篇文章的开篇，就是希望能够深入了解，再深入了解一些，希望自己能够理解透彻一些，不能误人子弟，也不想和网上千篇一律的翻译官网的内容，官网的英文介绍也已经很详细了，于是我觉得还是以实际使用的过程进行一定的整理会更好。

初次了解ABP框架，对它还是非常惊艳的，它基本上是.NET 领域架构的集大成者，几乎囊括了我们.NET领域排的上名的各种技术应用，而且它本身可以支持.net framework和.net core两种技术流派，对它的介绍也是非常感兴趣。

1）ABP框架的特点

我们来大概了解下ABP框架涉及到的内容。

依赖注入
，这个部分使用 Castle windsor （依赖注入容器）来实现依赖注入，这个也是我们经常使用IOC来处理的方式；
Repository仓储模式
，已实现了Entity Framework、NHibernate、MangoDB、内存数据库等，仓储模式可以快速实现对数据接口的调用；
身份验证与授权管理
，可以使用声明特性的方式对用户是否登录，或者接口的权限进行验证，可以通过一个很细粒度的方式，对各个接口的调用权限进行设置；
数据有效性验证
，ABP自动对接口的输入参数对象进行非空判断，并且可以根据属性的申请信息对属性的有效性进行校验；
审计日志记录
，也就是记录我们对每个接口的调用记录，以及对记录的创建、修改、删除人员进行记录等处理；
Unit Of Work工作单元模式
，为应用层和仓储层的方法自动实现数据库事务，默认所有应用服务层的接口，都是以工作单元方式运行，即使它们调用了不同的存储对象处理，都是处于一个事务的逻辑里面；
异常处理
，ABP框架提供了一整套比较完善的流程处理操作，可以很方便的对异常进行进行记录和传递；
日志记录
，我么可以利用Log4Net进行常规的日志记录，方便我们跟踪程序处理信息和错误信息；
多语言/本地化支持
，ABP框架对多语言的处理也是比较友好的，提供了对XML、JSON语言信息的配置处理；
Auto Mapping自动映射
，这个是ABP的很重要的对象隔离概念，通过使用AutoMaper来实现域对象和DTO对象的属性映射，可以隔离两者的逻辑关系，但是又能轻松实现属性信息的赋值；
动态Web API层
，利用这个动态处理，可以把Application Service 直接发布为Web API层，而不需要在累赘的为每个业务对象手工创建一个Web API的控制器，非常方便；
动态JavaScript的AJax代理处理
，可以自动创建Javascript 的代理层来更方便使用Web Api，这个在Web层使用。

除了这些重要特性外，ABP框架还有很多一些特别的功能或者概念。

多租户支持（每个租户的数据自动隔离，业务模块开发者不需要在保存和查询数据时写相应代码；
软删除支持（继承相应的基类或实现相应接口，会自动实现软删除）
系统设置存取管理（系统级、租户级、用户级，作用范围自动管理）
EventBus实现领域事件(Domain Events)
模块以及模块的依赖关系实现插件化的模块处理等等

ABP框架主要还是基于领域驱动的理念来构建整个架构的，其中领域驱动包含的概念有域对象Entities、仓储对象Repositories、域服务接口层Domain Services、域事件Domain Events、应用服务接口Application Services、数据传输对象DTOs等。

ABP官方网站：http://www.aspnetboilerplate.com，从里面可以查看很详细的案例和文档说明，可以根据需要下载不同类型的基础框架。

ABP GitHub源码地址：https://github.com/aspnetboilerplate，可以下载整个基础的框架内容，以及相关的样板案例代码。

基于ABP框架基础上，我们整理完善了整个权限体系，以及基于这个基础上进行的业务系统快速开发，我们整理后的ABP快速开发框架的架构图示，如下图所示（以字典模块为例说明）

以上是后端API的框架架构，引入了前后端分离的Vue + Element 作为前端技术路线，那么前后端的边界则非常清晰，前端可以在通过网络获取对应的JSON就可以构建前端的应用了。

在前端处理中，主要就是利用Vuex模式中的Store对象里实现对Action和Mutation的请求处理，获取数据后，实现对State状态中的数据进行更新。如果仅仅是当前页面的数据处理，甚至可以不需要存储State信息，而直接通过前端封装的API类获取到返回的数据，直接更新到界面视图上即可。

Vue + Element前端项目的视图、Store模块、API模块、Web API之间关系如下所示。

前端根据ABP后端的接口进行前端JS端的类的封装处理，引入了ES6类的概念实现业务基类接口的统一封装，简化代码。

2、基于Vue + Element前端ABP框架功能介绍

1）登录界面

系统登录界面效果如下所示。

或者

其中里面的文本内容，我们都是以国际化处理内容。

2）主体框架界面

主体框架界面采用的是基于后台配置的菜单动态生成，左侧是菜单，右边顶部是特定导航条和内容区。

首页内容区包括了一些常规的统计展示信息和各种图表综合展示内容。

我们来看看图表展示的效果图，其中柱状图效果如下所示。

饼状图效果如下所示。

曲线图效果如下所示。

其他类型，极坐标和散点图形

或者曲线和柱状图组合的图形

其中顶部导航条，提供查询、全屏切换、修改布局大小、多语言选择菜单、头像及快捷菜单处理。

3）用户管理界面

用户列表包括分页查询及列表展示、以及可以利用按钮进行新增、编辑、查看用户记录，或者对指定用户进行重置密码操作。

我们把常规的列表界面，新增、编辑、查看、导入等界面放在一起，除了列表页面，其他内容以弹出层对话框的方式进行处理，如下界面示意所示。

用户编辑界面如下所示。

当然可以查看这个用户本身拥有的权限功能点和拥有的菜单，如下界面所示。

4）组织机构管理

组织机构主要就是一个层级的对象关系，一般包含但不限于公司、部门、工作组等的定义，其中组织机构包含用户成员和角色成员的关系，如下界面所示。

组织机构可以修改机构名称和对应的父类节点，如下界面所示。

组织机构包含的成员可以添加多个人员记录，其中可以对组织成员列表进行添加、删除的操作。。

单击机构列表界面中组织成员部分的【添加成员】按钮，弹出对话框选择添加组织成员。

组织机构中角色列表界面如下所示，其中可以对角色列表进行添加、删除的操作。

单击机构列表界面中角色部分的【添加角色】按钮，弹出对话框选择添加角色。

5）角色管理

角色信息没有层级关系，可以通过列表展示。

其中角色包含权限分配、角色成员和拥有菜单的维护，如下是角色编辑界面，包含角色基本信息、拥有权限、包含成员、拥有菜单的管理等。菜单对于角色来说，应该是一种界面资源，可以通过配置进行管理对应角色用户的菜单。

编辑界面如下所示。

角色的权限包含系统可以用的权限，并可以勾选为角色设置所需的功能点，如下界面所示。

用户成员则和机构的用户管理一样，可以指定多个用户，这里不再赘述。

而菜单对于角色来说，应该是一种界面资源，可以通过配置进行管理对应角色用户的菜单，如下界面所示。

通过配置好角色包含的菜单，用户登录系统后，系统根据当前用户角色具有的菜单项目，动态构建显示对应的列表菜单及筛选可用路由列表。

6）功能管理

严格来说，ABP框架并没有统一管理好权限功能点的，它没有任何表来存储这个功能集合，而是通过派生AuthorizationProvider的子类来定义权限功能点

我在这个基础上引入了一个权限功能的表用来存储功能点的，然后提供管理界面来动态维护这些功能点。如下界面所示。

我们刚才在角色里面看到可以分配的权限内容，就是基于这个权限表的信息展示。

这样我们可以动态添加或者批量添加所需要的功能点，并且和整个权限管理模块串联起来，形成一个完整的控制体系。

另外我们还可以通过左侧树列表的按钮管理列表，可以添加、编辑、删除或级联删除对应的节点及其下面所有子节点。

系统登录后，客户端自动获取对应用户的角色功能点，然后我们每次打开一个新的业务窗体，客户端会进行界面的权限逻辑控制，如果没有权限的，那么不可以访问操作，如下是禁止了产品信息的导入、导出、新增、编辑等操作功能，如下界面所示产品界面被动态取消相关权限后，界面禁止了某些操作功能。

7）菜单管理

系统主界面的开发，基本上都是标准的界面，在系统左侧放置系统菜单，右侧中间区域则放置列表展示内容，但是在系统菜单比较多的时候，就需要把菜单分为几级处理。系统菜单在左侧放置一个自定义菜单组件列表，这样通过树形列表的收缩折叠，就可以放置非常多的菜单功能了。

在ABP + Vue + Element 快速开发框架里面，我们BS前端的菜单和其CS的菜单是各自分开的，我们在后台的权限模块系统中维护菜单内容并分配给对应角色用户，在用户登录系统后，动态加载菜单展示，并通过菜单的配置信息，跳转到对应的路由上去进行页面展示处理。

菜单资源管理的列表界面界面如下所示

单击左侧树列表项目，会在右侧展示对应父节点下的菜单列表。

在右侧的列表按钮中，可以对已有的菜单进行编辑，菜单编辑界面如下所示。

我们可以通过选择图标按钮进行菜单图标的选择，如下是选择菜单图片的界面。

8）系统登录日志

登录日志，这个就是用户尝试登录的时候，留下的记录信息，其中包括用户的登录用户名，ID，IP地址、登录时间，以及登录是否成功的状态等信息。

这个登录日志，就是在系统登录尝试的时候，留下的记录，可供管理员进行跟踪了解某个账户的使用情况，也可以根据这些登录信息进行一个统计报表的分析。

查看明细界面如下所示。

9）系统审计日志

审计日志，设置我们在访问或者调用某个应用服务层接口的时候，横切面流下的一系列操作记录，其中记录我们访问的服务接口，参数，客户端IP地址，访问时间，以及异常等信息，这些操作都是在ABP系统自动记录的，如果我们需要屏蔽某些服务类或者接口，则这些就不会记录在里面，否则默认是记录的。

审计日志的明细展示界面如下所示。

10）字典管理

字典管理界面，左侧列出字典类型，并对字典类型下的字典数据进行分页展示，右侧则利用分页展示对应字典类型的字典数据，字典管理界面如下所示。

字典大类在左侧列表进行维护，可以进行新增、编辑、删除等常规操作。

而对应字典大类的新增或者编辑窗体界面如下。

批量添加字典内容的界面如下所示。

11）产品列表展示

产品列表要展示一个产品相关的内容，包括展示产品的图片，以及产品信息介绍等内容。

展示界面中的顶部，我们利用Element的界面组件定义一个走马灯的展示效果，如下所示。

产品信息的另一个列表展示界面如下所示。

产品信息的编辑界面如下所示。

产品详细说明里面，我们采用富文本编辑，这里采用了 Tinymce 第三方组件来实现编辑处理，展示效果如下所示。

产品信息查看界面，可以对图片进行预览展示操作。

12）图标管理

在VUE+Element 前端应用中，图标是必不可少点缀界面的元素，因此整合一些常用的图标是非常必要的，还好Element界面组件里面提供了很多常见的图标，不过数量不是很多，应该是300个左右吧，因此考虑扩展更多图标，我引入了
vue-awesome
组件，它利用了Font Awesome的内置图标，实现了更多图标的整合。

Element图标管理界面如下：

基于Vue-Awesome的图标管理如下所示。

其中查询提供了名称进行图标查询，以及限制一次性展示多少个，另外提供一个自定义颜色选项，从而可以改变图标的展示颜色。

为了方便读者理解，我列出一下前面几篇随笔的连接，供参考：

循序渐进VUE+Element 前端应用开发(1）--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理

循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用

循序渐进VUE+Element 前端应用开发(7）--- 介绍一些常规的JS处理函数

循序渐进VUE+Element 前端应用开发(8）--- 树列表组件的使用

循序渐进VUE+Element 前端应用开发(9）--- 界面语言国际化的处理

循序渐进VUE+Element 前端应用开发(10）--- 基于vue-echarts处理各种图表展示

循序渐进VUE+Element 前端应用开发(11）--- 图标的维护和使用

循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理

循序渐进VUE+Element 前端应用开发(13）--- 前端API接口的封装处理

循序渐进VUE+Element 前端应用开发(14）--- 根据ABP后端接口实现前端界面展示

循序渐进VUE+Element 前端应用开发(15）--- 用户管理模块的处理

循序渐进VUE+Element 前端应用开发(16）--- 组织机构和角色管理模块的处理

循序渐进VUE+Element 前端应用开发(17）--- 菜单管理

循序渐进VUE+Element 前端应用开发(18）--- 功能点管理及权限控制

VUE+Element 前端应用开发框架功能介绍

循序渐进VUE+Element 前端应用开发(19）--- 后端查询接口和Vue前端的整合

使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面

循序渐进VUE+Element 前端应用开发(20）--- 使用组件封装简化界面代码

循序渐进VUE+Element 前端应用开发(21）--- 省市区县联动处理的组件使用

循序渐进VUE+Element 前端应用开发(22）--- 简化main.js处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进VUE+Element 前端应用开发(23）--- 基于ABP实现前后端的附件上传，图片或者附件展示管理

循序渐进VUE+Element 前端应用开发(24）--- 修改密码的前端界面和ABP后端设置处理

循序渐进VUE+Element 前端应用开发(25）--- 各种界面组件的使用（1）

循序渐进VUE+Element 前端应用开发(26）--- 各种界面组件的使用（2）

电商商品数据库的设计和功能界面的处理

循序渐进VUE+Element 前端应用开发(27）--- 数据表的动态表单设计和数据存储

循序渐进VUE+Element 前端应用开发(28）--- 附件内容的管理

循序渐进VUE+Element 前端应用开发(29）--- 高级查询条件的界面设计

部署基于.netcore5.0的ABP框架后台Api服务端，以及使用Nginx部署Vue+Element前端应用

循序渐进VUE+Element 前端应用开发(30）--- ABP后端和Vue+Element前端结合的分页排序处理

循序渐进VUE+Element 前端应用开发(31）--- 系统的日志管理，包括登录日志、接口访问日志、实体变化历史日志

循序渐进VUE+Element 前端应用开发(32）--- 手机短信动态码登陆处理

循序渐进VUE+Element 前端应用开发(33）--- 邮件参数配置和模板邮件发送处理

使用代码生成工具快速开发ABP框架项目

使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理

使用Vue-TreeSelect组件的时候，用watch变量方式解决弹出编辑对话框界面无法触发更新的问题

Winform开发中的困境及解决方案

作者: wenmo8
时间: 2023-02-28
分类: 其它
评论

在我们开发各种应用的时候，都会碰到很多不同的问题，这些问题涉及架构、模块组合、界面处理、共同部分抽象等方面，我们这里以Winform开发为例，从系统模块化、界面组件选择、业务模块场景划分、界面基类和辅助类处理、代码生成工具辅助开发等方面介绍在实际项目开发过程中碰到的困境和相关的解决方案，以便分析其中是如何逐步提高效率和整体用户体验的。

1、系统模块化

软件和建筑工程很类似，都是需要构建一个庞大而功能完整的一个系统，而工程化也意味着需要多人协作，那么就需要把一个庞大的系统横向或者纵向划分为各个可以独立施工完成的模块，虽然各个模块之间有所衔接或者交互，但是基本上可以以模块化的方式来构建，这个也是工程化开发的精髓所在。

以一个软件管理系统为例，我们尽可能把精力焦点放在客户的业务需求上，而对于常规的如权限控制、字典管理等一些常用的内容，由于它们的处理逻辑在特定领域上基本上比较固定一些，可以尽可能独立并重复使用，

而有时候，以某个特定的业务来说，同时很多处理规则也是不变的，因此也可以以业务模块的方式来划分，从而类似通用模块的方式重复使用。

模块化类似小孩子搭积木的方式构建一个所要的形状，虽然软件和建筑在这方面肯定更加复杂化，但是模块化系统是大势所趋，也是简化开发、易于维护、提高系统健壮性的重要举措。

2、界面组件选择

在Winform内置的传统样式里面，虽然提供了很多很好的界面组件，不过整体效果还是比较古板。为了增强界面的处理效果，我们一般使用一些第三方的界面套件作为Winform开发的基础，这个除了可以提高整体界面的效果外，还在很多控件层面提供丰富的处理和响应。

以前尝试过各种类型的界面套件，最终还是对DevExpress情有独钟，不仅仅是因为它是大软件公司开发的界面套件，也是因为它在界面层次提供了很多丰富的界面组件和强大的属性设置，能够极大满足各种界面复杂的要求。

使用DevExpress界面套件，可以使得我们开发的界面更加漂亮，用户体验也更好。

或者类似效果

3、业务模块的场景划分

前面说过，一个系统为了简化开发、易于维护、提高系统健壮性的可以把它按功能方式划分为各个独立模块进行开发或者重用，而对于业务模块来说，我们也还可以进一步细分。

一般系统界面中，大多数标准方式是展示业务数据的查询列表，然后在根据需要对特定记录进行编辑、查看、删除等操作。

我们把常规的列表界面，新增、编辑、查看、导入等界面放在一起，除了列表页面，其他内容以弹出层对话框的方式进行处理，如下界面示意所示。

如对于列表内容的展示，一般展示效果如下所示，主要展示数据库里面的二维表信息。

除了列表界面，另外一个就是对数据的明细展示界面了，这个界面内容可以更加多元化，如在里面承载各种控件，如文本、日期、图片、下拉列表、树形列表，以及我们自定义的一些控件，如对于附件的通过管理展示控件。

有了这些标准的展示效果，我们就可以参照这些，使用代码生成工具辅助页面内容的生成的了，生成规则以数据库元数据为参考即可。

4、界面基类和辅助类的处理

我们以常规业务模块界面来分析，主要有明细查看或编辑界面、列表界面，那么这些界面为了方便使用，我们可以抽象一部分界面处理逻辑或者共有部分内容，放在界面基类BaseEdit或者BaseDock等基类里面，如下界面所示。

尽可能把一些涉及到业务数据的处理通用规则放到基类，而变化部分则在子类进行处理即可。这样可以简化生成界面的代码，以及提高可重用率，减少维护的难度和代码臃肿。

对于一般的业务系统，可能都会涉及到不同数据库的使用，如SQLServer、Oracle、Mysql、PostgreSQL等数据库，那么这部分，可以通过使用微软企业库或者其他ORM方式进行处理，以实现系统对多种数据库的良好支持。

5、代码生成工具辅助开发

通过上面的介绍，通用部分作为模块独立使用，业务模块的界面主要划分列表和编辑查看界面两部分，而各自又进行了一定的基类抽象处理，那么相对来说已经简化很多了，不过对于业务数据来说，我们还是需要做很多重复性的工作，如界面显示、界面赋值及调用接口处理等操作，这些对业务对象固定的话，其实也是规则类似的，那么这部分我们结合代码生成工具进行批量生成即可，生成后进行一定的微调，可以极大降低出错的几率，减少代码的编写量。

在我们开发软件的时候，解决方案项目基于一定的分层组织，每个项目分层中，各个类的关系也是确定的，借助辅助工具（结合模板引擎）可以快速生成我们所需要的代码，并极大提高我们软件的开发效率，Database2Sharp代码生成工具就是一款专门针对我们自己框架结构配套的开发工具。

Database2Sharp代码生成工具，主要是基于数据库提取的元数据信息，根据表的信息和关系，字段信息等内容，生成我们框架所需要分层的类代码。

对于Winform开发，可以根据Winform框架或者混合框架的窗体界面类，生成标准的界面代码，列表界面默认具有分页查询、导入导出、高级查询、编辑、删除事件绑定，编辑界面则具有获取数据并显示在控件，保存后执行更新或者写入的操作。

7、其他

除了前面介绍的部分外，一般大的方面，我们还可以以业务方式做一些独立的组件模块，以方便重复使用，这个是大的方面。

模块化，一般需要构建好对应的框架架构，每个独立的模块，都是遵循统一的框架架构方式处理，可以极大提高代码的开发效率和降低维护的难度。

Winform开发架构如下所示。

而对于混合方式的Winform开发，那么还设计Web API模块的部署，以及客户端对Web API调用的封装，如下所示。

小的方面，还可以进一步划分一些常用的界面处理元素，如自定义控件的方式进行特殊组件的开发工作。如随笔《
在Winform界面使用自定义用户控件及TabelPanel和StackPanel布局控件
》、《
在Winform系统界面中对进展阶段的动态展示和处理
》。

循序渐进VUE+Element 前端应用开发(19）--- 后端查询接口和Vue前端的整合

作者: wenmo8
时间: 2023-02-28
分类: 其它
评论

循序渐进VUE+Element 前端应用开发的系列文章中，前面介绍了系统各个功能的处理实现，本篇随笔从一个主线上介绍前后端开发的整合，让我们从ABP框架后端的查询接口的处理，前端API接口调用的封装，以及前端Element界面的整个调用过程进行一个完整的介绍。

我们前面介绍了Vue+Element前端的接口是调用后端的ABP框架发布的API接口服务，API接口服务通过Swagger公布对应的接口信息供我们前端开发使用，提供非常好的便利；而我们使用Vue+Element的前端框架，也是需要对后端接口API的调用进行一个简单的抽象基类封装，使得常规的增删改查等常规接口继承基类即可使用，而不需要累赘、重复的代码；另外Vue+Element通过页面进行获取数据的过程中，可以传入对应的API参数条件，如分页信息和查询条件信息，这样就基本满足了一个常规的查询获取数据列表的操作，获得的数据绑定在界面的Table控件上即可。