从零开始实现放置游戏(八)——实现后台管理系统(6)代码重构

简介:   前几张,我们主要实现了升级经验、人物等级属性、地图、地图怪物,这四种配置的增删查改以及Excel导入功能。我们主要以地图怪物为例,因此在文章末尾提供的源代码中只实现了地图怪物这部分的逻辑功能。  如果你照猫画虎,把4种配置功能的逻辑全部实现的话,就会发现,增删查改的代码基本相同,除了SQL语句和模型对象不同,其他地方变化不大。  本章我们利用泛型模板,对整个系统就行重构。在重构结束后,你就会发现写代码简直就是特喵的艺术!

 前几张,我们主要实现了升级经验、人物等级属性、地图、地图怪物,这四种配置的增删查改以及Excel导入功能。我们主要以地图怪物为例,因此在文章末尾提供的源代码中只实现了地图怪物这部分的逻辑功能。


  如果你照猫画虎,把4种配置功能的逻辑全部实现的话,就会发现,增删查改的代码基本相同,除了SQL语句和模型对象不同,其他地方变化不大。


  本章我们利用泛型模板,对整个系统就行重构。在重构结束后,你就会发现写代码简直就是特喵的艺术


后端重构


idlewow-core


  我们从最底层开始,首先重构位于core模块中的数据访问层。目前看来,基本上所有的模型对象,都应包含增删查改、批量添加、列表查询这些基本方法。那我们把这些方法抽象到一个单独的Mapper和Manager里。


  新建com.idlewow.common包,再该包下新建接口类BaseMapper:


BaseMapper.java


再在该包下,新建一个抽象类BaseManager,代码如下:


BaseManager.java


 还是以地图怪物为例,我们重构MapMobMapper和MapMobManager,只要让他们继承BaseMapper和BaseManager即可,代码如下:


MapMobMapper.java


MapMobManager.java


重构后的Mapper和Manager直接继承基类的增删查改方法,无需在各个业务中一遍又一遍的书写重复代码。


idlewow-rms


  在rms模块中,主要对controller中的重复代码进行重构。在前几章,我们抽象出过一个BaseController,在里面实现了一些最基础的方法。这里,我们再抽象出一个CrudController来实现数据的增删查该;在CrudController的基础上,再抽象出一个ExcelController来实现Excel的批量导入。


  在com.idlewow.rms.controlelr包下新建抽象类CrudContoller,代码如下:


CrudController.java


 这个CrudController起到了一个模板的作用,可以说非常的精髓。首先,利用泛型约束,解决了不同业务数据模型、查询参数不同的问题。然后,通过反射获取不同业务controller的Url映射,解决了不同业务跳转页面路径不同的问题。具体业务的controller直接继承此类,无需再写任何代码,即可实现增删查改。


  下面我们再实现Excel导入功能的模板类,在该包内新建一个抽象类ExcelController,代码如下:


ExcelController.java


在这个类中,我们将Excel导入功能分解成3个方法。importExcel,对应前端点击事件,保存上传的临时文件;saveExcelData,保存解析出的数据,即调用mapper的批量添加方法;这两个方法都是通用的,直接在ExcelController中实现即可。只有loadExcelData,解析Excel数据这个方法,不同业务的实现不同,我们把它定义成抽象方法,等待各个业务自己实现。


  好了,基类已经定义好了,我们让MapMobController继承ExcelController即可,代码如下:


 MapMobController.java


 现在业务Controller里,只有一个独立实现的loadExcelData方法,再也不用重复书写增删查改了。(注意:这个类里多了个缓存对象mapCache,是我用来缓存地图数据的。pom中添加了对应包,具体可在源码中查看。用法比较简单,可搜EhCache。)


前端重构


  除了后端代码冗余外,其实很容易发现,前端的代码重复部分也很多,尤其是写ajax请求的部分,其实每次变化的只有url地址,或者请求参数等。我们直接在js里定义一个类来实现增删查改等这些ajax请求的通用部分。


  在/webapp/js/helper.js中,定义一个类CRUD,代码如下:


 Helper.js


然后,在/webapp/js/wow/map_mob中,修改add.js, edit.js 和 list.js 如下:


add.js


 edit.js


list.js


 可以看到,重构后的js,和后端一样,简洁多了。


运行效果


  这里,由于改动了core模块,需要先对项目编译打包。再运行rms模块,即可正常启动项目。启动后,效果和之前一样,只是代码变得简洁多了,这里就不再截图了。


小结


  本章终于把冗余的代码进行了重构,整个代码瞬间提升了几层逼格,变得干净多了。

说明:我的代码风格就是不套用设计模式,在不确定最终效果时,不做过多提前设计,先实现了再说,实现了再慢慢重构,还有就是几乎不注释。


  最近因为有其他的事情,所以停更了一周。写到这里其实发现这一大章题目似乎叫RMS系统的初步实现更好。


  写代码和写文章其实差别还有点大。自己写代码的时候,想到哪写到哪,各个模块并行随缘开发。但写文章就必须按一定顺序来,否则容易让人困惑。所以文章里的代码都是单独拉一个分支重新整理的。

相关文章
|
5月前
|
编解码 前端开发 JavaScript
带您一步步构建一个基本的动态新闻网站,包括页面布局、样式设计以及交互效果的实现
【6月更文挑战第14天】构建动态新闻网站实战项目,涉及页面布局、样式设计和交互实现。首页采用顶部导航栏、轮播图和新闻列表布局;新闻列表页按分类显示新闻,详情页展示完整内容并可添加相关推荐和评论。设计注重色彩搭配、字体选择和布局间距,实现轮播图效果、导航栏交互和响应式设计,提升用户体验。该项目有助于锻炼HTML和CSS技能,理解网页设计实际应用。
150 1
|
开发框架 移动开发 自然语言处理
uniapp制作项目的思路
uniapp制作项目的思路
|
6月前
|
前端开发 测试技术 UED
前端知识(十四)——浅谈用户体验测试的主要功能
前端知识(十四)——浅谈用户体验测试的主要功能
131 0
|
6月前
|
前端开发 关系型数据库 数据库连接
项目重构,从零开始搭建一套新的后台管理系统(后端版)
项目重构,从零开始搭建一套新的后台管理系统(后端版)
278 0
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件2
前端学习笔记202305学习笔记第二十三天-重构菜单组件2
52 1
|
前端开发 JavaScript API
重撸后台管理系统的小体会
重撸后台管理系统的小体会
68 0
|
C语言
C项目(贪吃蛇BUG解决及功能扩展)
C项目(贪吃蛇BUG解决及功能扩展)
131 0
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件1
前端学习笔记202305学习笔记第二十三天-重构菜单组件1
51 0
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件3
前端学习笔记202305学习笔记第二十三天-重构菜单组件3
54 0
|
小程序 UED 开发者
小程序开发必备功能的吐血整理【个人中心界面样式大全】
小程序开发必备功能的吐血整理【个人中心界面样式大全】
693 1
小程序开发必备功能的吐血整理【个人中心界面样式大全】
下一篇
无影云桌面