2024年4月13日发(作者：)

Vue+Springboot+MyBatis技术应用解析

陈倩怡，何军

（中国人民银行长沙中心支行，长沙410005）

摘要院采用流行的框架Vue+Springboot+Mybatis进行业务开发，对关键模块进行了具体解析，给出了

开发方法和应当关注的方面，对B/S应用开发具有参考价值。

关键词院Vue；springboot；mybatis；axios；切面技术

1概述

的热门技术

Vue结合

袁Vue

Springboot

重点在视图层的开发应用上

及MyBatis是当下B/S开发模式

袁vue-cli

是官方发布的脚手架袁可快速搭建前端框架袁其运用到

的关键技术包括单页面开发尧Vue路由尧Vue状态管

理袁axios请求和响应技术遥Springboot应用于后端开发,

其是Spring开发技术的升级袁引入注解袁简化了Web

框架的配置和开发流程遥Mytatis是对象映射框架袁内置

jdbc,

页面

只关注

template

SQL

部分结合

本身遥其前端的开发过程如下

iview控件布置页面布局

院

袁

Vue

script

单

部分定义Javascript脚本袁style部份定义设置class样

式遥在script中通过axios的post方法与后端服务器进

行数据交互遥后端开发过程如下院通过Mybatis自动生

成工具Mybatis-generator-core生成表对应的映射文件尧

model

tity

的增

及

类及

尧

Dao袁

DAO

删尧

对代码作微调

类袁分别置于应用目录的

改尧查功能袁

袁

映射文件将自动生成的增

Dao继承basedao

mapping尧

完成公用

en鄄

尧

删尧改尧查的配置id改名袁否则运行会报错遥接下来

编写service类自动装配dao类袁调用dao方法遥最后编

写controller类与读取前端传入参数袁调用sevice方法袁

将运算结果反馈给前端

2

遥

2援1

技术应用解析

实现的功能包括

操作员管理模块

院

（

界面分为左右两部份

Vue前端

）

袁左面树型

结构袁列出操作员姓名袁右边为TAB页第一页列出操

作员的一般信息袁包括用户代码尧用户姓名尧口令尧工

作状态尧帐户状态尧是否业务管理员遥第二至第六页分

别对操作单位角色尧应用系统角色尧操作部门角色尧操

作菜单角色尧人员类别角色进行授权袁分别使用iview

控件穿梭框实现遥操作角色编码作为唯一键用作穿梭框

的Key值袁为管理不同tab页中角色的状态袁使用Vue

14

2020.01

的Store进行状态管理袁在穿梭框按钮的onchange事件

中应用(野updateyyxts冶,newTargetKeys),

调用store中的mutations更新每个tab页中用户对应操

作权限赋予的角色遥在保存按钮中通过=vm.

$;h

(item=>{

发送到后台写入数据库中

(item)})读取用户赋予的操作角色

遥读取store的状态值后台保

袁通过

鄄

axios

存时Vue存在一个BUG袁第一个值需要通过鄄

role=vm.$;

nits",vm.$)曰

vm.$

否则userrole后续读取的状态值在连续点击保存的情况

读取后马上要回写一次

("updateu鄄

袁

下袁每次不重新刷新而是累加上次读取的状态值袁导致

读取的状态值失真遥组合权限按钮显示所有角色所拥有

的组合操作权限袁以应用系统角色为例袁左边树型控件

显示所有的应用系统袁右边为表格控件袁显示该用户所

具有的可操作的应用系统袁树型控件子节点根据用户可

操作和不可操作的应用系统分别渲染成勾和叉的自定义

图标袁自定义图标从阿里巴巴图标库下载袁将下载的文

件夹拷贝到目录static下袁在欲引入的Vue文件style中

通过@import'../../../static/iconfont/'引入袁在

script

图标遥

程序段通过class:'iconfonticonseleted'设置自定义

2援2

后端

）

菜单角色权限MyBatis原生态SQL实现

（

springboot

操作员管理模块的显示用户可操作的菜单需从后台

获取权限数据袁菜单分三级菜单袁一级菜单尧二级菜

单袁三级菜单分别存储在不同的表中袁反映操作员权限

作者简介：陈倩怡渊1967-冤袁女袁本科袁高级工程师袁

研究方向院计算机软件曰何军渊1969-冤袁男袁硕士袁高

级工程师袁研究方向院计算机系统软件工程遥

的表存在另二个表中袁通过一个SQL语句一次性获取

权限数据袁SQL语句结构比较复杂袁有左连接及排序曰

这种情况下袁常规的MyBatis面向对象的方法无法实现袁

可以改用原生态SQL完成功能遥第一步在gr_cd1gn鄄

中书写

"selectMenusByyhdm"

SQL语法院

resultType="java.

"parameterType="">

${_parameter}

返回值为Map集合曰第二步在dao层中

书写接口函数List>select鄄

MenusByyhdm(Stringsql);第三步在service层中书写

调用函数院

@Override

publicList>selectMenus鄄

Byyhdm(HashMapmap)

{

Stringsql="(1xh,2xh,t.

cd3xh,1mc,2mc,3mcfromgr_role_qxt,

gr_cd1gnt1,gr_cd2gnt2,gr_cd3gnt3,gr_role_sett4,

gr_czy_='"+("yhdm")+"'

_no=__type='"+

("role_type")+"'_role_no=_role_no";

sql=sql+"1xh=1xhandt.

cd1xh=1xh(+)2xh=2xh(+)andt.

cd1xh=1xh(+)2xh=2xh(+)andt.

cd3xh=3xh(+))orderbycd1xh,cd2xh,cd3xh";

List>result=

gr_MenusByyhdm(sql);

returnresult;

}曰第四步在controller层中写处理http连接的函

数袁处理与vue前端的连接遥publicMenusListget鄄

Menus(@RequestBodyMapreqMap,

HttpServletRequestrequest)

其基本思路是院获取Vue前端传入的map参数袁

将map参数分解袁调用service层服务函数得到权限数

据袁其中有两次查询袁一次得所用菜单袁一次得用户可

操作菜单袁将结果封装成对象返回给Vue前端展示遥

2援3

上传模块界面用

文件上传模块

（

Vue

iview

前端

控件

）

upload读取上传文件

名,

浏览

Button>

用formData读取上传文件数据袁

handleUpload1(file){

1=file;

th1=;

returnfalse;

},

upload(){

varformData=newFormData();

('file',1);

通过axios的post与后台通信袁将文件数据传送到后台

varconfig='multipart/form-data;';

varurlStr="/upload/oneFile";

(urlStr,formData,config)

.then(function(response)遥

2援4

public

文件接收模块

StringoneFile(@RequestParam(value

（

Springboot后端

）

="file",re鄄

quired=false)MultipartFilefiles,HttpServletRequest

req)throwsIOException{

StringuploadPath="D:/photos";

//构建上传的文件夹

Filedir=newFile(uploadPath);

if(!()){

();

}

MultipartHttpServletRequestmultiparthttpservle鄄

treq=(MultipartHttpServletRequest)req

Listlist=multiparthttpservletreq.

getFiles("file");

for(MultipartFilemultifile:list){

Stringpath=dir+"/"+ginal鄄

Filename();

FilenewFile=newFile(path);

erTo(newFile);

}

使用bean设置文件上传大小袁

MultipartConfigFactoryfactory1=newMulti鄄

partConfigFactory();

//单个文件最大

Factory.1setMaxFileSize("200MB");

//设置总上传数据大小

RequestSize("200MB");

MultipartConfig();

将该bean放置到启动类中即生效遥

2援5切面技术实现日志插入

以切面技术实现通过注解扩展方法代码

（Springboot后端）

袁在方法上

(下转第28页)

2020.01

15

设中袁使图书馆的环境尧服务尧管理尧资源更加智能

化袁可以通过实体图书馆和虚拟网络平台两种途径进行

管理服务袁争取为线上线下相结合的渠道构建整体化服

务系统遥通过物联网技术实现对用户和图书馆的智慧化

服务和管理袁改造传统意义上的图书馆遥智慧图书馆的

建设内容包括环境智慧化尧服务智慧化尧管理智慧化和

资源智慧化4个方面遥

4.3物联网校园安防

智慧校园安防应以保障学生和教职员工的人身安全

的管理模型袁提高学校管理工作的水平遥建立智慧校园

校务管理平台袁是教育现代化发展的必然趋势袁是智慧

校园建设的重要任务遥

4.5物联网校园文化

校园文化是一种特殊的社会文化现象袁是智慧校园

的又一个重要功能遥它是以建设有中国特色的社会主义

文化为根基袁是学校在长期教育教学实践中积累形成

的袁老师和学生共同遵循的价值观念和行为准则遥智慧

校园文化一般由硬件设备及软件系统构成袁主要包括校

园内网络尧数字广播尧网络电视尧交互智能平板显示

屏尧数字标牌尧校园信息发布系统主题互动展示软件及

主题电子签名软件等遥学校架构内外部网络以及服务器

提供外部和内部的网络服务曰专业场景应用软件与终端

硬件结合袁实现互动展示遥

为重点袁是智慧校园的重要功能之一遥它采用光纤尧无

线等传输网络袁运用计算机技术尧图像技术尧物联网技

术等袁实时尧形象尧真实地对校园进行视频监控和电子

巡查遥校园安防系统一般包括视频监控尧入侵报警尧门

禁管理尧车辆管理和安防综合监管平台5部分遥智能人

脸识别门禁系统袁正在各中职院校和中小学开始运用遥

使学校门口真正实现野智慧化冶管理遥学校门口安装智

能闸机袁学生老师野刷脸冶出入校园袁彻底解决学校的

安全管理和考勤管理袁与以往的监控相比更安全袁是学

校智慧校园领域精心打造的又一力作遥

4.4物联网校务管理

智慧校园的校务管理功能主要体现在用信息化工具

5结语

结合国内中职院校教学条件以及学习者特征袁提出

符合我国中职院校的物联网实施的方案袁打造智慧校

园袁为广大师生提供更安全尧方便尧快捷的教学环境袁

实现资源的整合和共享袁真正实现中职院校将物联网应

用于智慧校园遥

参考文献

[1]刘修文.物联网技术应用要要要智慧校园.机械工业

出版社.

[2]黄玉兰.物联网概论.人民邮电出版社.

录表中遥

即云计算尧大数据等新技术来优化学校资源配置袁提高

学校行政和组织效率袁对教育教学进行预测和规划袁促

进管理方法的科学化和管理模式的智慧化袁进而形成新

(上接第15页)

添加注解@MyLog1(value="明细查询测试",model鄄

name="所有明细查询")袁方法执行完后袁执行添加的切面

方法袁切入点执行saveSyslog袁

MyLogmyLog1=otation(My鄄

);

if(myLog1!=null){

Stringvalue=();

ark(value);

ame(ame());

}

将注解添加的value和modelname参数引入syslog

类对象中袁syslog读取用户代码尧主机名尧IP地址尧操

作日期尧操作时间形成一条日志信息记录袁插入日志记

3结语

车袁是B/S开发的黄金组合袁易于上手袁易于开发尧调

试和维护遥

参考文献

[1]梁灏.实战.清华大学出版社,2017.

机械工业出版社,2016.

2017.

[2]王福强.SpringBoot揭秘院快速构建微服务体系.

[3]刘增辉.MyBatis从入门到精通.电子工业出版社,

Vue尧Springboot尧MyBatis作为项目开发的三驾马

28

2020.01