部门治理的实现

1. API设计说明

部门业务后盾API分层架构及调用关系如图

2. 客户端实现

2.1 新建部门治理模板

在src/components/views 下新建目录 dept-control/index.vue
这里须要用到树形表格所以引入 vxe-table
官方网站
装置胜利之后咱们抉择这个表格进行数据渲染

template局部

<template> <div> <vxe-toolbar :refresh="{query: reload}" export print custom> <template v-slot:buttons> <vxe-button @click="insertEvent">新增</vxe-button> <vxe-button @click="saveEvent">保留</vxe-button> </template> </vxe-toolbar> <vxe-table resizable show-overflow export-config keep-source ref="xTree" row-id="id" :loading="loading" :tree-config="treeConfig" :edit-config="{trigger: 'click', mode: 'row', showStatus: true}" :data="tableData"> <vxe-table-column type="checkbox" width="60"></vxe-table-column> <vxe-table-column field="id" title="Id"></vxe-table-column> <vxe-table-column field="name" title="名称" tree-node></vxe-table-column> <vxe-table-column field="parentName" title="下级机构"></vxe-table-column> <vxe-table-column field="sort" title="排序号"></vxe-table-column> </vxe-table> </div></template>

script局部

2.2 配置axios获取dept数据

在src/api/article.js中减少如下代码

export function getDeptList() { return request({ url: 'http://localhost:8843/dept/doFindObjects', method:'post' })}

2.3 配置路由

在 src/router/index.js 文件
新增路由对象

{ path: '/deptControl', component: Layout, redirect: 'dept-control/index', children: [ { path: 'index', component: () => import('@/views/dept-control/index'), name: 'DeptControl', meta: { title: '部门治理', icon: 'table', noCache: true } } ]}

3.服务端实现

公共数据处理类 JsonResult

在springbootApplication main办法类所在的目录下新建目录(以下称根目录！！！) 新建目录 common/vo/JsonResult.java
写入如下代码

package com.tsuki.common.vo;import lombok.Data;import java.io.Serializable;@Datapublic class JsonResult implements Serializable { public static final long serialVersionUID = 1L; private int state = 1; //status code,1 for SUCCESS,0 fro ERROR private String message = "ok"; //status message; private Object data; //the correct data; private int code=20000;//status code for vue-element-admin /**Constructors*/  public JsonResult(){} /** * set the message that expect {@code JsonResult} to return * @param message the message */ public JsonResult(String message){ this.message=message; } /** * usually executed when need to package a object to {@code JsonResult} * @param data the object */ public JsonResult(Object data){ this.data = data; } /** * usually executed when an exception is encountered * @param t {@code java.lang.Throwable} * For example : *                if(!correct){ *                  new JsonResult(Throwable t); *                } */  public JsonResult(Throwable t){ this.code=20001; this.state=0; this.message = t.getMessage(); }}

3.1 创立pojo对象

在springbootApplication main办法类所在的目录下新建目录(以下称根目录！！！) 新建目录 pojo/Dept.java
写入如下代码

@Datapublic class Dept implements Serializable { private static final long serialVersionUID = 6997118400003373008L; private Integer id; private String name; private Integer parentId; private Integer sort; private String note; private Date createdTime; private Date modifiedTime; private String createdUser; private String modifiedUser; private List<Dept> childDept; //子部门 private String parentName;}

其中 @Data是Lombok插件提供的注解作用是主动构建 get set 和toString()等办法

3.2 Dao局部

在根目录下新建目录 dao/DeptDao.java
写入如下代码

List<Dept> findObjects();

3.3 Mapper局部

在src/main/resources/下新建目录 mappers/sys/DeptMapper.xml
写入如下代码 其中 namespace部门自定义成本人的包构造

<?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.tsuki.dao.DeptDao"> <resultMap id="Dept" type="com.tsuki.pojo.Dept">    <id property="id" column="id"/>    <result property="name" column="name"/>    <result property="sort" column="sort"/>    <collection property="childDept" javaType="list" ofType="com.tsuki.pojo.Dept">        <id property="id" column="cid"/>        <result property="name" column="cname"/>        <result property="parentName" column="parentName"/>        <result property="sort" column="csort"/>    </collection> </resultMap> <select id="findObjects" resultMap="Dept">    select child.id cid,child.name cname,parent.name parentName,child.sort csort,           parent.id,parent.name,parent.sort           from sys_depts child           left join sys_depts parent on           child.parentId=parent.id    </select></mapper>

3.4 Service局部

在根目录下新建service/DeptService.java
写入一下代码

package com.tsuki.service;import com.tsuki.common.bo.PageObject;import com.tsuki.pojo.Dept;import java.util.List;public interface DeptService {/** * 查问所有记录 * @return {@link Dept} */List<Dept> findObjects();}

并在其目录下创立实现类impl/DeptServiceImpl.java

3.5 Controller局部

在根目录下新建 controller/DeptController.java

package com.tsuki.controller;import com.tsuki.common.vo.JsonResult;import com.tsuki.pojo.Dept;import com.tsuki.service.DeptService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;@RestController@RequestMapping("dept")@CrossOriginpublic class DeptController { @Autowired private DeptService deptService; @RequestMapping("doFindObjects") public JsonResult doFindObjects(String name){ try { return new JsonResult(deptService.findObjects()); }catch (Throwable e){ return new JsonResult(e); } } }