Day87.二手房管理: 数据字典 (zTree组件)、小区管理

焰火青年·

已于 2022-06-27 15:10:11 修改

阅读量853

点赞数 1

分类专栏：尚好房文章标签： java-ee zTree dubbo

于 2022-06-20 18:06:29 首次发布

本文链接：https://blog.csdn.net/a111042555/article/details/125377967

版权

尚好房专栏收录该内容

9 篇文章 5 订阅

订阅专栏

2. 新增页面：dict/index.html

3、主界面添加左侧导航

四、dubbo消费端接口 (DictController层)

五、dubbo服务端接口

1、service-api 新建接口 DictService

2、service-house 新建实现类 DictServiceImpl

二、CommunityController

三、CommunityService

四、CommunityServiceImpl

五、CommunityDao

六、CommunityDao.xml

数据字典

数据字典是数的结构，需要用到组件：zTree

一、搭建service-house模块

搭建方式与service-acl一致，这里可直接复制service-acl模块，改名为service-house模块

1，在service模块中，复制service-acl模块，改名为service-house模块 (建议在硬盘中操作)

2，修改pom.xml文件，只是修改名称和 Jetty端口

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <parent>
        <artifactId>service</artifactId>
        <groupId>com.atguigu</groupId>
        <version>1.0</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>

    <artifactId>service-house</artifactId>
    <packaging>war</packaging>

    <build>
        <plugins>
            <plugin>
                <groupId>org.eclipse.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>9.4.15.v20190215</version>
                <configuration>
                    <!-- 如果检测到项目有更改则自动热部署，每隔n秒扫描一次。默认为0，即不扫描-->
                    <scanIntervalSeconds>10</scanIntervalSeconds>
                    <webAppConfig>
                        <!--指定web项目的根路径，默认为/ -->
                        <contextPath>/</contextPath>
                    </webAppConfig>
                    <httpConnector>
                        <!--端口号，默认 8080-->
                        <port>7002</port>
                    </httpConnector>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

4，父模块service 聚合service-house，识别项目

    <modules>
        <module>service-acl</module>
        <module>service-house</module>
    </modules>

5，修改 spring-registry.xml 文件，发布的应用名称与服务端端口

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:dubbo="http://code.alibabatech.com/schema/dubbo"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
                            http://www.springframework.org/schema/beans/spring-beans.xsd
                            http://code.alibabatech.com/schema/dubbo
                            http://code.alibabatech.com/schema/dubbo/dubbo.xsd">
    <!-- 指定应用名称 -->
    <dubbo:application name="service-house"/>
    <!--指定暴露服务的端口，如果不指定默认为20880 -->
    <dubbo:protocol name="dubbo" port="20882"/>
    <!--指定服务注册中心地址-->
    <dubbo:registry address="zookeeper://127.0.0.1:2181"/>
    <!--批量扫描，发布服务-->
    <dubbo:annotation package="com.atguigu"/>
</beans>

6，删除mapper下的xml，与各种实现类

二、zTree渲染、简单Json格式

数据字典我们使用zTree渲染

在线文档：Demo [zTree -- jQuery tree plug-ins.]

异步加载数据节点：先展示父节点，当点击父节点时，再去加载子节点。而不是同一时刻全部加载。

实现方式：

1、构建服务器端接口：根据上级节点id获取子节点数据列表，返回特定数据格式：

2、参照示例，进行页面渲染；

数据库中的数据，需要封装成什么样的格式才能通过zTree展示？

1、标准 JSON 数据

2、简单 JSON 数据

zTree 会根据返回的 id 与 pId进行关联，形成父子关系

在角色管理-分配权限功能中，也需要展示树结构

三、页面开发(实现)

1. 引入zTree组件 (静态文件)

将资源文件中的zTree_v3文件夹复制到static/js/plugins目录下

2. 新增页面：dict/index.html

zTree依赖jquery，需要先将jquery引用，但head文件已引用

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--插入代码片段(已包含JQuery)-->
<head th:include="common/head :: head"></head>
<!--引入zTree组件-->
<link rel="stylesheet" th:href="@{/static/js/plugins/zTree_v3/zTreeStyle.css}" type="text/css">
<script type="text/javascript" th:src="@{/static/js/plugins/zTree_v3/jquery.ztree.core.js}"></script>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-content" style="width: 98%;">

            <!--展示数据的标签 通过#treeDemo cs选择器指定-->
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>

        </div>
    </div>
</div>

<script th:inline="javascript">
    $(function(){
        // 文档地址:http://www.treejs.cn/v3/demo.php#_108
        var setting = {
            async: {    //异步的
                enable: true,   //启用异步方式加载树结构
                url:"/dict/findZnodes", //指定请求地址，获取数节点数据
                type:"get",     //请求方式
                //id为数节点的主键，作为参数发送
                autoParam:["id"],   //传递树节点的属性值给服务器，属性名称固定
                //otherParam:{"otherParam":"zTreeAsyncTest"},  其他参数，属性名自定义
                dataFilter: filter  //数据过滤
            }
        };
        //对返回的数据进行过滤  result 表示controller方法返回的结果，将数据封装到result对象中
        function filter(treeId, parentNode, result) {
            var childNodes = result.data
            if (!childNodes) return null;   //如果为空，取空
            for (var i=0, l=childNodes.length; i<l; i++) {
                //将多个.n替换为. 赋值给name
                childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
            }
            return childNodes;
        }
        //zTree初始化，将数据渲染到1d=treeDemo标签内
        $(document).ready(function(){
            //在treeDemo标签中初始化zTree，通过setting发起请求
            $.fn.zTree.init($("#treeDemo"), setting);
        });
    });
</script>
</body>
</html>

3、主界面添加左侧导航

<a class="J_menuItem" href="/dict" data-index="0">数据字典</a>

四、dubbo消费端接口 (DictController层)

先写完一套组件，再进行功能实现！！ (Controller->Service->ServiceImpl->Dao->xml)

web-admin下，新建DictController

//二手房管理
@Controller
@RequestMapping("/dict")
public class DictController extends BaseController {

    private static final String PAGE_INDEX = "dict/index";
    //注意，Dubbo下的Reference注解
    @Reference
    DictService dictService;

    //数据字典
    @RequestMapping("/findZnodes")
    @ResponseBody   //响应体 异步返回数据
    //通过节点id获取子节点集合，并返回; defaultValue="0": 第一次访问时还没有树，因此赋值为0，查询根节点的子节点
    public Result findZnodes(@RequestParam(value = "id",required = false,defaultValue = "0") Long parentId){

        //传递的是节点的id，作为外键 (parentId) 来使用; 每一个树节点都是一个json对象，用map集合来表示json
        //[{ id:1, pId:0, name:"全部分类", isParent:true}]
        List<Map<String,Object>> data = dictService.findZnodesByParentId(parentId);

        //工具类 将数据封装到Result对象上，返回json串
        return Result.ok(data);
    }

    @RequestMapping
    public String index(){
        return PAGE_INDEX;
    }
}

五、dubbo服务端接口

1、service-api 新建接口 DictService

public interface DictService extends BaseService<Dict> {
    List<Map<String, Object>> findZnodesByParentId(Long parentId);

    List<Dict> findListByParentId(Long parentId);
}

2、service-house 新建实现类 DictServiceImpl

//发布服务，注意导包，指定发布的接口类
@Service(interfaceClass = DictService.class)
@Transactional
public class DictServiceImpl extends BaseServiceImpl<Dict> implements DictService {

    @Autowired
    DictDao dictDao;

    @Override
    public BaseDao<Dict> getEntityDao() {
        return dictDao;
    }

    @Override
    public List<Map<String, Object>> findZnodesByParentId(Long parentId) {
        //返回的是list，需要转换为map。虽然可以返回map类型的集合，但是需要做业务处理，所以还是返回为实体对象
        List<Dict> list = dictDao.findZnodesByParentId(parentId);

        //需要进行类型转换
        List<Map<String, Object>> data = new ArrayList<Map<String, Object>>();

        for (Dict dict : list) {
            //代表一个节点: [{ id:1, pId:0, name:"全部分类", isParent:true}]
            Map<String, Object> map = new HashMap<>();
            map.put("id",dict.getId());
            map.put("pId",dict.getParentId());
            map.put("name",dict.getName());

            //isParent 表示当前节点是否为父节点;有孩子就是父节点 (样式需要)
            Long id = dict.getId();
            Long pId = id;
            //调用Dao层方法判断是否有子节点 (是否为父节点)
            int count = dictDao.countIsParent(pId); //根据pid统计孩子数量
            map.put("isParent", count > 0 ? true : false);
            
            data.add(map);
        }

        return data;
    }
}

3、DictDao 接口、xml实现

(xml文件复制，修改即可)

package com.atguigu.dao;

import com.atguigu.base.BaseDao;
import com.atguigu.entity.Dict;
import java.util.List;

public interface DictDao extends BaseDao<Dict> {
    List<Dict> findListByParentId(Long parentId);
    Integer countIsParent(Long id);
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.atguigu.dao.DictDao">

    <!--映射: (ORM) Object Relationship Mapping-->
    <resultMap id="Dict" type="Dict">
        <id property="id" column="id"></id>
        <result column="parent_id" property="parentId" ></result>
        <result column="name" property="name" ></result>
        <result column="dict_code" property="dictCode" ></result>
        <result column="create_time" property="createTime" ></result>
        <result column="update_time" property="updateTime" ></result>
        <result column="is_deleted" property="isDeleted" ></result>
    </resultMap>
    <!--复用查询的字段-->
    <sql id="column">
           id,parent_id,name,dict_code,create_time,update_time,is_deleted
    </sql>

    <!--查询去全部子节点-->
    <select id="findZnodesByParentId" parameterType="long" resultMap="Dict">
        select <include refid="column"></include>
        from hse_dict
        where parent_id=#{parentId}
    </select>
    <!--统计是否有子节点(判断是否为父节点)-->
    <select id="countIsParent" parameterType="long" resultType="int">
        select count(*)
        from hse_dict
        where parent_id=#{parentId}
    </select>
    

    <!--增删改查实际没有用到，删除了分页查询-->
    <!--添加 主键回填-->
    <insert id="insert" useGeneratedKeys="true" keyProperty="id">
        insert into hse_dict(parent_id,name,dict_code)
        values (#{parentId},#{name},#{dictCode})
    </insert>
    <!--根据id查询-->
    <select id="selectById" resultType="Dict">
        select <include refid="column"></include>
        from hse_dict
        where id = #{id} and is_deleted = 0;
    </select>
    <!--修改-->
    <update id="update">
        update hse_dict
        <set>
            <if test="parentId!=null and parentId!=''">
                parent_id = #{parentId},
            </if>
            <if test="name!=null and name!=''">
                name = #{name},
            </if>
            <if test="dictCode!=null and dictCode!=''">
                dictCode = #{dictCode},
            </if>
            update_time = now()
        </set>
        where id = #{id}
    </update>
    <!--软删除：就是修改表的is_deleted字段值： 0 表示正常    1 表示被删除-->
    <delete id="delete">
        update hse_dict set is_deleted = 1 ,update_time = now() where id = #{id}
    </delete>
</mapper>

六、断点测试：

第一次访问时：

点击全部分类时：

小区管理

小区管理重点：二级联动：区域与板块、列表回显

区域与板块数据在数据字典里面，通过编码：beijing，可以获取区域数据

添加小区保存的是区域与板块的数据字典id，因此还需要根据字典id获取字段名称

因此数据字典需提供3个接口：

1、通过编码获取子节点数据（区域数据）

2、通过节点id获取子节点数据（通过区域id，获取板块数据）

3、通过字典id获取字典名称