wuhuacong(伍华聪)的专栏

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

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

摘要： 在前面随笔《循序渐进VUE+Element 前端应用开发(15）--- 用户管理模块的处理》中介绍了用户管理模块的内容，包括用户列表的展示，各种查看、编辑、新增对话框的界面处理和后台数据处理操作，本篇随笔继续深化Vue + Element权限管理模块管理的内容，介绍组织机构和角色管理模块的处理，通过组织机构和角色管理模块的介绍，使得我们了解界面组件化模块的开发思路和做法，提高我们界面设计的技巧，并减少代码的复杂性，提高界面代码的可读性，同时也是利用组件的复用管理。 阅读全文

摘要： 在前面随笔介绍了ABP+Vue前后端的整合处理，包括介绍了ABP的后端设计，以及前端对ABP接口API的ES6的封装，通过JS的继承类处理，极大减少了重复臃肿的代码，可以简化对后端API接口的封装，而且前端使用Element组件，很好展示API获得的数据，通过在界面中展示树状列表，以及表格列表数据，可以构建一个很好的列表展示界面，而常规的界面，通过也包括了新增、编辑、查看等展示场景，一般我们通过对话框的方式进行展示处理。本篇随笔以权限管理模块中的用户管理为媒介，进行相关功能的介绍和界面设计的处理。 阅读全文

摘要： 在前面随笔《循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理》简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能，本篇随笔继续深化这一主题，着重介绍基于ABP后端接口信息，实现对前端界面的开发工作。 ABP（ASP.NET Boilerplate）框架主要是基于.net core 进行的后端Web API的开发，结合Swagger的管理界面我们可以看到发布的 API 的接口明细信息，这样前端技术人员可以很容易整合前端的API应用。Vue + Element的前端应用，是目前较为流行的前端技术整合，Vue提供了前端框架很好的支持，Element提供了非常不错的界面组件封装和处理，通过ABP后端API接口和前端Vue+Element的整合，可以很好实现前后端的分离处理，同时又极大提高各自开发过程，并利用最新、应用广泛的技术来实现最好的技术应用。 阅读全文

摘要： 在前面随笔《循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理》介绍了一个系统最初接触到的前端登录处理的实现，但往往对整个系统来说，一般会有很多业务对象，而每个业务对象的API接口又有很多，不过简单来说也就是常规的增删改查，以及一些自定义的接口，通用都比较有规律性。而本身我们这个VUE+Element 前端应用就是针对ABP框架的业务对象，因此前端的业务对象接口也是比较统一的，那么可以考虑在前端中对后端API接口调用进行封装，引入ES6的方式进行前端API的抽象简化。本篇随笔主要针对这个方面，介绍前端API接口的封装处理，以便简化我们大量类似的业务接口的累赘代码实现。 阅读全文

摘要： VUE+Element 前端是一个纯粹的前端处理，前面介绍了很多都是Vue+Element开发的基础，从本章随笔开始，就需要进入深水区了，需要结合ABP框架使用（如果不知道，请自行补习一下我的随笔：ABP框架使用），ABP框架作为后端，是一个非常不错的技术方向，但是前端再使用Asp.NET 进行开发的话，虽然会快捷一点，不过可能显得有点累赘了，因此BS的前端选项采用Vue+Element来做管理（后续可能会视情况加入Vue+AntDesign），CS前端我已经完成了使用Winform+ABP的模式了。本篇随笔主要介绍Vue+Element+ABP的整合方式，先从登录开始介绍。 阅读全文

摘要： 在VUE+Element 前端应用中，图标是必不可少点缀界面的元素，因此整合一些常用的图标是非常必要的，还好Element界面组件里面提供了很多常见的图标，不过数量不是很多，应该是300个左右吧，因此考虑扩展更多图标，我引入了vue-awesome组件，它利用了Font Awesome的内置图标，实现了更多图标的整合，可以在项目中使用更多的图标元素了，另外在本随笔的图标管理中，提供了对图标名称进行搜索，并根据图标颜色样式生成对应图标的代码，非常方便使用。 阅读全文

摘要： 在我们做应用系统的时候，往往都会涉及图表的展示，综合的图表展示能够给客户带来视觉的享受和数据直观体验，同时也是增强客户认同感的举措之一。基于图表的处理，我们一般往往都是利用对应第三方的图表组件，然后在这个基础上为它的数据模型提供符合要求的图表数据即可，VUE+Element 前端应用也不例外，我们这里使用了基于vue-echarts组件模块来处理各种图表vue-echarts是对echarts图表组件的封装。 阅读全文

摘要： 我们开发的系统，一般可以不用考虑语言国际化的问题，大多数系统一般是给本国人使用的，而且直接使用中文开发界面会更加迅速 一些，不过框架最好能够支持国际化的处理，以便在需要的时候，可以花点时间来实现多语言切换的处理，使系统具有更广泛的受众用户。VUE+Element 前端应用实现国际化的处理还是非常方便的，一般在Main.js函数里面引入语言文件，然后在界面上进行一定的处理，把对应的键值转换为对应语言的语义即可。本篇随笔介绍在VUE+Element 前端应用中如何实现在界面快速的支持多语言国际化的处理逻辑代码。 阅读全文

摘要： 在我前面随笔《循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用》里面曾经介绍过一些常规的界面组件的处理，主要介绍到单文本输入框、多文本框、下拉列表，以及按钮、图片展示、弹出对话框、表单处理，本篇随笔补充这一个主题，介绍树列表组件和下拉列表树组件在项目中的使用，以及一个SplitPanel的组件。 阅读全文

摘要： 在我们使用VUE+Element 处理界面的时候，往往碰到需要利用JS集合处理的各种方法，如Filter、Map、reduce等方法，也可以涉及到一些对象属性赋值等常规的处理或者递归的处理方法，以前对于这些不是很在意，但往往真正使用的时候，需要了解清楚，否则很容易脑袋出现短路的情况。本篇随笔列出一些在VUE+Element 前端开发中经常碰到的JS处理场景，供参考学习。 阅读全文

摘要： 在我们开发BS页面的时候，往往需要了解常规界面组件的使用，小到最普通的单文本输入框、多文本框、下拉列表，以及按钮、图片展示、弹出对话框、表单处理等等，本篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用，使得我们对如何利用Element组件有一个大概的认识。 阅读全文

摘要： 在我们一般开发的系统界面里面，列表页面是一个非常重要的综合展示界面，包括有条件查询、列表展示和分页处理，以及对每项列表内容可能进行的转义处理，本篇随笔介绍基于Vue +Element基础上实现表格列表页面的查询，列表展示和字段转义处理。在前面随笔《循序渐进VUE+Element 前端应用开发(4）--- 获取后端数据及产品信息页面的处理》介绍了一个对产品列表的卡片式图片分页展示处理，其中涉及到了对于Element 组件分页控件的操作，本篇随笔继续深化这一组件的使用，结合表格展示来处理效果展示。 阅读全文

摘要： 在前面随笔《循序渐进VUE+Element 前端应用开发(3）--- 动态菜单和路由的关联处理》中介绍了在Vue + Element整合框架中，实现了动态菜单和动态路由的处理，从而可以根据用户角色对应的菜单实现本地路由的过滤和绑定，菜单顺利弄好了，就需要进一步开发页面功能了，本篇随笔介绍一个案例，通过获取后端数据后，进行产品信息页面的处理。 阅读全文

摘要： 在我开发的很多系统里面，包括Winform混合框架、Bootstrap开发框架等系列产品中，我都倾向于动态配置菜单，并管理对应角色的菜单权限和页面权限，实现系统对用户权限的控制，菜单一般包括有名称、图标、顺序、URL连接等相关信息，对于VUE+Element 前端应用来说，应该原理上差不多，本篇随笔介绍结合服务端的动态菜单配置和本地路由的关联处理，实现动态菜单的维护和展示的处理。 阅读全文

摘要： 在我们开发Vue应用的时候，很多时候需要记录一些变量的内容，这些可以用来做界面状态的承载，也可以作为页面间交换数据的处理，处理这些内容可以归为Vuex的状态控制。例如我们往往前端需要访问后端数据，一般是通过封装的Web API调用获取数据，而使用Store模式来处理相关的数据或者状态的变化，而视图View主要就是界面的展示处理。本篇随笔主要介绍如何整合这三者之间的关系，实现数据的获取、处理、展示等逻辑操作。 阅读全文

摘要： 之前一直采用VS进行各种前端后端的开发，随着项目的需要，正逐步融合纯前端的开发模式，开始主要选型为Vue + Element 进行BS前端的开发，后续会进一步整合Vue + AntDesign的界面套件，作为两种不同界面框架的展现方式。采用Vue + Element 的前端开发和之前的开发模式需要有较大的转变，以及需要接触更多的相关知识，本系列随笔基于循序渐进的学习研究方式，对使用Vue + Element 这种前端开发的各个方面进行一个完整的介绍，并结合我对BS前端已有的框架功能，进行两者的融合。本篇随笔主要介绍开发环境的准备工作，包括需要准备好相关的开发工具，插件辅助等，以及对开发保存的自动修正处理，调试的配置的内容等。 阅读全文

摘要： 在前面随笔《利用微信公众号实现商品的展示和支付（1）》介绍了商品的列表和明细信息的处理，本篇随笔接着上一篇，继续介绍关于商品的微信支付和购物车处理方面，其中微信支付里面，也涉及到了获取微信共享地址的处理，从而个更加方便录入邮寄地址信息；购物车可以从本地的localStorage对象进行获取和处理，也可通过接口获取数据库记录的购物车信息，本案例介绍通过localStorage进行购物车处理方式。 阅读全文

摘要： 在较早随笔《微信小程序结合后台数据管理实现商品数据的动态展示、维护》中介绍过使用小程序实现商品的展示，其实基于对应的接口，我们使用H5页面来开发基于公众号的商品展示和支付，也是产不多的原理，不过H5页面和小程序的界面处理代码有一些差异吧了，整体的实现思路倒是差不多的。本篇随笔介绍基于H5页面的开发，参照一些微店的展示页面，实现商品的展示和支付等操作。 阅读全文