帝可得项目之点位管理改造之区域管理改造

前言

看完帝可得项目之点位管理再看这个

点位管理模块下面的区域管理页面改造

这里还是把页面原型和看完帝可得项目之点位管理这篇文章做好的界面放在下面，免得大家还要翻上一篇文章。

说明

由于在帝可得项目之点位管理这篇文章中我的views下面的三个页面文件忘记替换了，所以你们在看完帝可得项目之点位管理后做出的页面应该是下面这个。

区域管理页面原型：

看完帝可得项目之点位管理这篇文章做好的界面（只展示列表页）：

（1）将主键id改为序号并调整格式

首先打开前端项目中的views下面的manage下面的region下面的index.vue文件

找到对应的代码区域将"主键id"改为"序号"并添加一个type属性，属性值为“index”，如图所示

刷新页面

发现此时序号这列宽度太窄导致制动换行，所以添加一个width属性，属性值为50

刷新页面

（2）移除修改和删除的图标

将图中两个画圈圈的地方删掉，也就是删除两个icon属性

刷新页面

这里测试新增页面，发现与原型保持一致，就添加一组数据试试

（3）在区域列表展示的时候添加点位数这一列

实现方案：

• 方案一：同步存储
  在区域表中添加一个node_count字段，里面存储点位数量的信息，当我们查询区域列表的时候，就可以同步返回点位数量。
  优点：单表查询，效率高
  缺点：每次点位数据发生变化时，都需要更新区域表，增加了额外的工作量，如果更新操作出现遗漏，还会导致数据不一致。
• 方案二：关联查询
  在mapper中编写关联查询语句
  优点：保证数据的实时性和准确性
  缺点：涉及到多表关联，比较复杂，当点位数量比较大的时候，还会影响查询性能。

由于点位数据通常不是特别大，为了保证点位数量的实时性和准确性，我们选择第二种方案

关联查询语句：

SELECT r.*,COUNT(n.id) AS node_count FROM tb_region r LEFT JOIN tb_node n ON r.id = n.region_id GROUP BY r.id;

关联查询语句写好后，我们需要建立一个用于映射数据库查询结果并返回到前端的vo类。

方法：首先，在后端代码的domain文件夹下面建立一个vo文件夹，如图所示

现在我们做的是点位管理模块下面的区域管理页面，所以我们在vo文件夹下面新建一个名为RegionVo的类，如图所示

我们让RegionVo这个类继承Region,然后在定义一个点位数量属性nodeCount,如图所示。

然后我们打开mapper文件夹里面的RegionMapper,在代码的最后面新建一个查询区域列表的方法。

然后没有安装MybaitsX插件的全装一下，怎么安装可以去搜一下，这里就不介绍了，安装完后选中selectRegionVoList，然后按Ctrl+Enter,跳转到xml文件中去，然后在select标签中插入我们写好的sql语句，注意要去掉sql语句最后面的分号。然后我们插入进去的sql语句是查询所有区域列表的，但是我们的实际需求中需要按照区域的名称实现动态sql,所以找到原有的查询sql复制粘贴到上图我们刚插进去的sql语句的下面，然后给region_name加一个别名，如图所示

注意，这里的AS后面是node_count,但是Vo实体类中是nodeCount,若依默认将驼峰命名的功能给关了，所以我们需要打开，找到dkd-admin下面的mybatis-config.xml配置文件，如图所示

将功能打开：

到此，Mapper层编写完毕，接下来是编写业务层。

打开IRegionSrevice文件

将Mapper中的方法直接站过来，如图所示

然后创建方法的实现，点击下图中的箭头所指的位置

最后修改RegionController.java中的代码

到此后端代码终于改好了，最好是清除一下缓存再重启一下项目，重启之后进入区域管理，打开f12,点击搜索按钮，查看返回信息，出现nodeCount属性则证明后端代码成功改好了。如图所示

接下来改造前端代码，在区域管理的页面上加入新的一列名为点位数，并将prop属性设置为nodeCount,如图所示

改好之后刷新页面，至此关于点位管理模块下面的区域管理就改好了，如图所示