admin 管理员组文章数量: 1184232
2024年6月10日发(作者：云开发小程序)
Vue+Springboot+Mybatis开发消费管理系统
何军，陈倩怡
（中国人民银行长沙中心支行，长沙410000）
摘要院采用当下热门开发技术Vue+Springboot+Mybatis开发消费管理系统，给出了完整的开发过程和
方法，对网页管理系统开发具有参考价值
关键词院Vue框架；Springboot框架；Mybatis框架
1概述
第三方
Vue
iview
是用于构建用户界面的渐进式框架
库袁基于脚手架框架开发Web
袁
前端页面
通过整合
袁
可提供强大的伸缩能力遥Springboot用于服务器端的
开发袁是由Pivotal团队提供的全新框架袁基于约定大
于配置的思想袁简化Spring应用的初始搭建及开发过
程袁其实质不是什么新的框架袁只是默认配置了很多
框架的使用方式遥Mybatis是一款优秀的持久层框架袁
可以使用简单的载酝蕴或注解来配置和映射原生信息袁
支持定制化杂匝蕴尧存储过程以及高级映射袁避免手动
和JDBC代码设置参数及获取结果集遥开发消费管理
系统前端集成了iview尧Vuex遥后端集成了Lombok尧
P6spy尧
库
2
Oracle遥
Druid数据库连接池遥数据库采用关系型数据
前端开发
采用IntelliJIDEA编辑器袁使用技术袁安装
vue-cli
搭建前
脚手架构建工具
端页面袁脚手架执行
袁综合集成
过程院
iview尧
->main.
store袁快速
js->遥
对象的创建工作
主程序入口文件
袁完成路由对象
渊冤袁
尧vuex对象的加载
主要完成
遥
Vue
2.1
路由对象控制页面的跳转
路由对象
袁在其全局守卫鄄
foreEach袁
思路是院如果当前处于锁定状态
根据用户是否登录来引导页面跳转
袁则引导页面至
袁其基本
loking
页面袁如果未登录袁则引导至登录页面袁如果已登录袁
且前往的是登录页面袁则引导至主页面袁否则袁判断用
户是否拥有登录页面的权限袁有则跳转袁无则报错遥
跳由配置院路由配置文件()配置路由袁形
式如下袁
{
path:'/detail-inquire',
icon:'android-options',
name:'detail-inquire',
title:'明细查询',
component:Main,
children:[
{path:'detailinquire',title:'消费明细查询',
name:'detailinquire',access:true,component:()=>
import('@/myviews/detail/')}
]
},
对于url为/detail-inquire/detailinquire袁则运行对象
遥
2.2消费明细查询页面解析
（
）
图1
分袁
template放置页面控件
中分为Template尧
袁script放置代码
Script尧
袁
Style
Style
3
控
部
作者简介：何军渊1969-冤袁男袁硕士袁高级工程师袁研
究方向院计算机系统软件工程曰陈倩怡渊1967-冤袁女袁
本科袁高级工程师袁研究方向院计算机软件遥
收稿日期：2018-11-14
2019.02
87
制页面控件的显示方式遥页面控件包括Grid栅格尧
Card
择器
卡片
尧Button
尧Form
按钮
表单
尧Page
尧Table
分页
表格
遥Grid
尧DataPicker
栅格完成页面布
日期选
局袁Card卡片显示内容袁Form表单完成数据提交袁
DataPicker
换遥Tabel表格展示查询结果数据
选择或输入日期袁Page
遥
分页快速进行数据切
提交页面调用的方
法如下
changePage
院
(currentPage){
letvm=this;
letjson1={"startTime":ime,"end鄄
Time":e,"currentPage":currentPage};
('/detail/getDetailPaged',json1)
.then(function(response){
letpage=;
=ount;
t=tPage;
ata=;
}).catch(function(error){
vm.$(error);
});
},通过ajax向后台服务端提交参数获取数据遥
3后端开发
后端服务器开发采用Springboot框架袁完成与前端
页面及后台数据库的交互遥采取三层架构模型Con鄄
troller尧
局守卫遥
Service尧Dao层袁通过过滤器实现跨域访问及全
3.1
创建过滤器实现
跨域访问
Filter袁在其doFilter方法中设置
代码院
publicvoiddoFilter(ServletRequestservletRequest,
ServletResponseservletResponse,FilterChainfilter鄄
Chain)throwsIOException,ServletException{
HttpServletResponseresponse=(HttpServle鄄
tResponse)servletResponse;
quest)
HttpServletRequest
servletRequest;
request=(HttpServletRe鄄
String
HttpSession
url=uestURI();
Stringusername
session
=(String)ribute("
=sion(true);
username");
der("Access-Control-Allow-O鄄
rigin",der("Origin"));
der("Access-Control-Allow-
Credentials","true");
88
2019.02
der("Access-Control-Allow-
Methods","POST,GET,PATCH,DELETE,PUT");
der("Access-Control-Max-
Age","3600");
der("Access-Control-Allow-
Headers","Origin,X-Requested-With,Content-Type,
authorization,Accept");
//用户的请求url为登录页面则视为正常访问
if(th("login")||th("js")||
th("css")||th("gif")||th
("jpg")){
er(request,response);
return;
}
//如果session为空袁则说明用户没有登录袁将当前
//网页重定向到登录页面
if(null==username||((String)username).length()
==0){
uestDispatcher("/nologin").for鄄
ward(request,response);
return;
}else{//正常访问
er(request,response);
return;
}
}
3.2
vice
@RequestMapping
层
detailController
Controller层
（
detailController）
detailService
负责与前端页面交互
方法
(value
遥与页面交互代码如下
袁并调用Ser鄄
="/getDetailPaged",method
院
={,})
publicPageBeangetRolesPaged(@RequestBody
@NotNull(message="请选择日期")Map ject>reqMap,HttpServletRequestrequest){ IntegercurrentPage=(Integer)("cur鄄 rentPage"); List PageBeanpage=newPageBean(); StringstartTime=(String)("startTime"); StringendTime=(String)("endTime"); HashMap HashMap ("startTime",startTime); ("endTime",endTime); (下转第102页) 性袁使媒资中资源具有良好的兼容性尧开放性袁以便于 媒体信息传输尧交换等遥在媒体管理系统中袁不同的媒 体资源可采用不同的编码方式袁在对不同类别的数据资 源进行存储时应根据新资源的特点采用不同的存储格 式遥比如在线课程中的视频素材袁用于交流共享或长期 保存的媒体资料可以使用MOV尧MPG2等高画质文件格 式存储袁这些格式都支持MPEG-24:2:0和4:2:2袁全I 帧尧IP帧尧IBP帧编码方式袁能实现可变码率尧多格式 存储遥来自原始创作或内部交换的媒体资源则可以使用 视频的原始格式进行存储遥同时袁还应建立一个低码流 渊H.264冤的镜像文件袁用于用户在线检索尧在线浏览尧 下载尧代理编辑遥这样袁既可以使系统中存储的资源占 用较少的系统空间袁又顺利可以进入其他不同厂商的媒 (上接第88页) ("currentPage",currentPage); amt_logs=ByConditions (map); inttotalCount=ByCondition鄄 sCount(map); alCount(totalCount); eSize(10); rentPage(currentPage); eNum(totalCount/10+1); a(amt_logs); returnpage; } 3.3Service层(DetailServiceImpl) 调用Dao层的方法袁从数据库获取数据遥 资系统遥对于其他的媒体资源如声音尧图片尧文本等由 于其原始文件相对比较小袁所以要尽量用其质量最好的 原文件进行存储袁以保障以后使用中的最佳效果遥由于 媒体资源主要以视频文件为主袁目前袁最具代表性的视 频制式标准有MP4和MOV遥这些标准的数字视频图像 均采用国际标准的H.264和Indeo进行压缩编码袁这些 编码具有平台通用性强尧数据量小尧图像质量高的特 点遥这此编码格式的视频数据流可直接进入在线课程的 制作尧上线尧存储尧分配尧传输遥随着高清在线课程的 不断普及袁新的高清编码格式也不断出现袁如H.265尧 FLV等高质量尧低码流的视频编码格式将为人们提供新 理及应用提供更广阔的空间遥 对于有一对一及多对多关系的实体袁手工微调遥 amt_中存在一对一关系的实体袁在re鄄 sulMap节点中配置 count_typeResultMap"> "resultMap="BaseResultMap"> selectcount(*)fromamt_log,gr_user_info where=#{startTime}]]> andand amt_=gr_user_ 的存储和制作格式遥云存储尧云管理将为媒体资产的管 5结语 @Override publicintselectByConditionsCount(HashMap< String,Object>map){ returnamt_ByConditionsCount (map); } 3.4Dao层 （ amt_logMapper） 提供接口方法selectByConditions(HashMap 项目采用前后端分离的理念袁vue负责页面展示袁 SpringBoot负责业务逻辑处理袁利于项目开发及后期 维护遥 参考文献 [1]梁灏.实战.清华大学出版社,2017. 机械工业出版社,2016. 2017. [2]王福强.SpringBoot揭秘院快速构建微服务体系. [3]刘增辉.Mybatis从入门到精通.电子工业出版社, Object>map);具体实现由Mybatis配置文件完成遥 4Mybatis数据库配置文件开发 用Mybatis自动生成工具mybatis-generator-core-1.3.7生 成每个表对应的dao尧mapping配置文件尧model实体袁 Mybatis配置文件开发步骤袁先建立数据库表袁再 102 2019.02
版权声明：本文标题：VueSpringbootMybatis开发消费管理系统 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1718029413a716186.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论