后端 | 您所在的位置:网站首页 › 后端维护地址 › 后端 |
后端-数据字典模块开发
1、需求和准备1.1、创建service_cmn模块1.2、新建application.properties配置文件1.3、准备实体类1.4、配置类1.5、持久层1.6、业务层1.7、控制层1.8、启动类
2、数据字典列表功能2.1、接口开发2.2、前端开发2.2.1、添加路由2.2.2、新建js文件,调用后端接口2.2.3、编辑vue页面2.2.3.1、vue页面代码解释
2.3、测试
1、需求和准备
1.1、创建service_cmn模块
1.2、新建application.properties配置文件
# 服务端口
server.port=8202
# 服务名
spring.application.name=service_cmn
# 环境设置:dev、test、prod
spring.profiles.active=dev
# mysql数据库连接
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/yygh_cmn?characterEncoding=utf-8&useSSL=false
spring.datasource.username=root
spring.datasource.password=root
#返回json的全局时间格式
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8
#配置mapper xml文件的路径
mybatis-plus.mapper-locations=classpath:com/study/yygh/hosp/mapper/xml/*.xml
#mybatis-plus.mapper-locations=classpath:com/atguigu/yygh/mapper/xml/*.xml
# nacos服务地址
#spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848
#开启sentinel
#feign.sentinel.enabled=true
#设置sentinel地址
#spring.cloud.sentinel.transport.dashboard=http://127.0.0.1:8858
#mongodb地址
#spring.data.mongodb.host=192.168.44.163
#spring.data.mongodb.port=27017
#spring.data.mongodb.database=yygh_hosp
#rabbitmq地址
#spring.rabbitmq.host=127.0.0.1
#spring.rabbitmq.port=5672
#spring.rabbitmq.username=guest
#spring.rabbitmq.password=guest
1.3、准备实体类
@Data
@ApiModel(description = "数据字典")
@TableName("dict")
public class Dict {
private static final long serialVersionUID = 1L;
@ApiModelProperty(value = "id")
private Long id;
@ApiModelProperty(value = "创建时间")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@TableField("create_time")
private Date createTime;
@ApiModelProperty(value = "更新时间")
@TableField("update_time")
private Date updateTime;
@ApiModelProperty(value = "逻辑删除(1:已删除,0:未删除)")
@TableLogic
@TableField("is_deleted")
private Integer isDeleted;
@ApiModelProperty(value = "其他参数")
@TableField(exist = false)
private Map param = new HashMap();
@ApiModelProperty(value = "上级id")
@TableField("parent_id")
private Long parentId;
@ApiModelProperty(value = "名称")
@TableField("name")
private String name;
@ApiModelProperty(value = "值")
@TableField("value")
private String value;
@ApiModelProperty(value = "编码")
@TableField("dict_code")
private String dictCode;
@ApiModelProperty(value = "是否包含子节点")
@TableField(exist = false)
private boolean hasChildren;
}
1.4、配置类
@Configuration
@MapperScan(basePackages = "com.study.yygh.cmn.mapper")
public class CmnConfig {
//分页插件
@Bean
public PaginationInterceptor paginationInterceptor() {
PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
// 设置请求的页面大于最大页后操作, true调回到首页,false 继续请求 默认false
// paginationInterceptor.setOverflow(false);
// 设置最大单页限制数量,默认 500 条,-1 不受限制
// paginationInterceptor.setLimit(500);
// 开启 count 的 join 优化,只针对部分 left join
paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
return paginationInterceptor;
}
}
1.5、持久层
mapper: public interface DictMapper extends BaseMapper { }mapper.xml 1.6、业务层接口 public interface DictService extends IService { }实现类: @Service public class DictServiceImpl extends ServiceImpl implements DictService { } 1.7、控制层 @ApiModel("数据字典管理") @RestController @RequestMapping("admin/cmn/dict") @CrossOrigin public class DictController { @Autowired private DictService dictService; } 1.8、启动类 @SpringBootApplication @ComponentScan(basePackages = {"com.study"}) public class ServiceCmnApplication { public static void main(String[] args) { SpringApplication.run(ServiceCmnApplication.class,args); } } 2、数据字典列表功能 2.1、接口开发1、控制层方法 //根据数据id查询子数据列表 @ApiModelProperty("//根据数据id查询子数据列表") @RequestMapping("findChildData/{id}") public Result findChildData(@PathVariable Long id){ List list = dictService.findChildData(id); return Result.ok(list); }2、业务层 @Service public class DictServiceImpl extends ServiceImpl implements DictService { //根据数据id查询子数据列表 @Override public List findChildData(Long id) { QueryWrapper query = new QueryWrapper(); query.eq("parent_id",id); List dictList = baseMapper.selectList(query);//查询父节点为id的所有子数据对象 //遍历集合中的每一个对象,并调用方法,判断该对象是否有子数据 for(Dict dict:dictList){ Long dictId = dict.getId(); boolean flag = this.isChildren(dictId);//如果对象是否有子数据,返回true dict.setHasChildren(flag);//将hasChildren属性设置为flag的值 } return dictList; } //判断该id是否有子数据 private boolean isChildren(Long id){ //封装查询条件 QueryWrapper query = new QueryWrapper(); query.eq("parent_id",id); Integer count = baseMapper.selectCount(query);//如果有数据,会返回查询出的记录条数 return count > 0;//如果查询出数据,返回true } } 2.2、前端开发 2.2.1、添加路由在src/router/index.js文件中添加路由 //数据字典设置 { path: '/cmn', component: Layout, redirect: '/cmn/list', name: '数据管理', alwaysShow: true,//由于该模块下只有一个数据字典子节点,所以在页面上只会展示数据字典节点,而不会展示数据管理功能,而使用了alwaysShow: true,即便该模块只有一个功能点,也会展示数据管理按钮的 meta: { title: '数据管理', icon: 'example' }, children: [ { path: 'list', name: '数据字典', component: () => import('@/views/dict/list'), meta: { title: '数据字典', icon: 'table' } } ] },不使用alwaysShow:true时,只显示数据字典 使用了alwaysShow:true。可以下拉,同时显示数据管理和数据字典 2.2.2、新建js文件,调用后端接口 import request from '@/utils/request' export default{ //编写方法,调用后端接口 //根据id查询子数据列表 dictList(id){ return request({ url:`/admin/cmn/dict/findChildData/${id}`, method:'get' }) } } 2.2.3、编辑vue页面 {{ scope.row.name }} {{ row.dictCode }} {{ scope.row.value }} {{ scope.row.createTime }} //引入js文件 import dict from '@/api/dict.js' export default { data() { return { list:[],//初始化数据,数据字典列表数组 } }, created() { this.getDictList(1) }, methods:{ //数据字典列表 getDictList(id){ dict.dictList(id) .then(response=>{ // console.log(response) this.list = response.data }) }, getChildrens(tree,treeNode,resolve){ dict.dictList(tree.id) .then(response=>{ resolve(response.data) }) } } } 2.2.3.1、vue页面代码解释1、:data=“list” 要显示测数据 2、lazy:懒加载。即页面的下拉列表中要显示的数据,只有点击下拉列表时才进行数据渲染。 3、load 我们点击页面上的箭头时,会显示箭头下边的数据,而箭头下边的数据也要调用方法进行查询。使用load的意思时当我们点击箭头时执行下方数据的查询的方法。 getChildrens函数: element-ui官方解释: 4、:tree-props 根据hasChildren的值做判断,如果hasChildren值为true,才展示下拉列表。否则不展示下拉列表。 所以在返回的数据对象中要包含hasChildren属性。 4、slot-scope=“scope” 5、getChildrens方法表示可以查询第一级下边的第二级数据,可以查询第二级下边的第三级数据。实际上做了个递归操作。 通过tree.id查询里边的内容的。resolve(response.data)将查询出来的内容做显示 2.3、测试测试后我们发现表格下拉功能没有成功。这是因为我们使用的element-ui代码版本较高,而项目中使用的element-ui版本较低,即两者版本不一致导致的。 我们只需在package.json中修改element-ui版本即可。 如下图所示,element-ui版本原来是2.4.6,修改额lelement-ui版本为2.12.0 再次测试,下拉列表功能成功展示: |
CopyRight 2018-2019 实验室设备网 版权所有 |