1概述
Vue结合Springboot及MyBatis是当下B/S开发模式的热门技术,Vue重点在视图层的开发应用上,vue-cli 是官方发布的脚手架，可快速搭建前端框架，其运用到的关键技术包括单页面开发、Vue路由、Vue状态管理,axios请求和响应技术。Springboot应用于后端开发，其是Spring开发技术的升级，引入注解，简化了Web 框架的配置和开发流程。Mytatis是对象映射框架，内置jdbc，只关注SQL本身。其前端的开发过程如下:Vue单页面template部分结合iview控件布置页面布局,script 部分定义Javascript脚本,style部份定义设置class样式。在script中通过axios的post方法与后端服务器进行数据交互。后端开发过程如下：通过Mybatis自动生成工具Mybatis-generator-core生成表对应的映射文件、model类及DAO类，分别置于应用目录的mapping、en⁃tity及Dao，对代码作微调,Dao继承basedao完成公用的增、删、改、查功能，映射文件将自动生成的增、删、改、查的配置id改名，否则运行会报错。接下来编写service类自动装配dao类，调用dao方法。最后编写controller类与读取前端传入参数，调用sevice方法，将运算结果反馈给前端。
2技术应用解析
2.1操作员管理模块（Vue前端）
实现的功能包括：界面分为左右两部份，左面树型结构，列出操作员姓名，右边为TAB页第一页列出操
作员的一般信息，包括用户代码、用户姓名、口令、工作状态、帐户状态、是否业务管理员。第二至第六页分别对操作单位角、应用系统角、操作部门角、操作菜单角、人员类别角进行授权，分别使用iview 控件穿梭框实现。操作角编码作为唯一键用作穿梭框的Key值，为管理不同tab页中角的状态，使用Vue 的Store进行状态管理，在穿梭框按钮的onchange事件中应用this.storemit(“updateyyxts”,newTargetKeys)，调用store中的mutations更新每个tab页中用户对应操作权限赋予的角。在保存按钮中通过vm.yyxts=vm. $store.s.forEach(item=>{vm.user⁃role.push(item)})读取用户赋予的操作角，通过axios
发送到后台写入数据库中。读取store的状态值后台保存时Vue存在一个BUG，第一个值需要通过vm.user⁃role=vm.$store.state.app.unit;vm.$storemit("updateu⁃nits",vm.$store.state.app.unit)；读取后马上要回写一次，否则userrole后续读取的状态值在连续点击保存的情况下，每次不重新刷新而是累加上次读取的状态值，导致读取的状态值失真。组合权限按钮显示所有角所拥有的组合操作权限，以应用系统角为例，左边树型控件显示所有的应用系统，右边为表格控件，显示该用户所具有的可操作的应用系统，树型控件子节点根据用户可操作和不可操作的应用系统分别渲染成勾和叉的自定义图标，自定义图标从阿里巴巴图标库下载，将下载的文件夹拷贝到目录static下，在欲引入的Vue文件style中通过@import'../../../static/iconfont/iconfont.css'引入，在script程序段通过class:'iconfont iconseleted'设置自定义图标。
springboot框架的作用
2.2菜单角权限MyBatis原生态SQL实现（springboot 后端）
操作员管理模块的显示用户可操作的菜单需从后台获取权限数据，菜单分三级菜单，一级菜单、二级菜单，三级菜单分别存储在不同的表中，反映操作员权限
作者简介：陈倩怡(1967-)，女，本科，高级工程师，研究方向：计算机软件；何军(1969-)，男，硕士，高级工程师，研究方向：计算机系统软件工程。
Vue+Springboot+MyBatis技术应用解析
陈倩怡，何军
（中国人民银行长沙中心支行，长沙410005）
摘要：采用流行的框架Vue+Springboot+Mybatis进行业务开发，对关键模块进行了具体解析，给出了开发方法和应当关注的方面，对B/S应用开发具有参考价值。
关键词:Vue；springboot；mybatis；axios；切面技术
14
2020.01

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