itest 开源测试管理项目中封装的下拉列表小组件:实现下拉列表使用者前后端0行代码

导读:

主要从4个方面来阐述,1:背景;2:思路;3:代码实现;4:使用

一:封装背景

      像easy ui 之类的纯前端组件,也有下拉列表组件,但是使用的时候,每个下拉列表,要配一个URL ,以及设置URL反回来的值和 select 的text ,和value 的对应关系 ,这有2个问题:一使用者必须知道URL ,二,如果页面有10个下拉表表,要请求后台10次,肯定影响性能,而我想要的是使用者只要申明用哪个数据字典就行了,其他根本不用操心,另外加上在做itest开测试测试管理项目的时候,有几个页面,特别多下拉列表,且是动态数据,到处都有处理下拉表列表,后台代码还好,前端到处都要用JS处理,就算是用vue ,或理angular JS 一样要处理,我这人又很懒, 最怕重复的代码,千女散花似的散落在各个角落中,一不做,二不休干脆不如简单的写一个组件(前后端都有的),让使用者前后端0行代码。我们先来看看一下,itest 开源测试管理项目中这个界面,下拉列表,多得头大,处理不好,会很慢。可以在这体验这个多下拉列表页面(点测试,然后选择一个项目,然后点缺陷管理,再点增加),体验地址:https://itest.work/rsf/site/itest/product/index.html 然后点在线体验

itest 开源测试管理项目中封装的下拉列表小组件:实现下拉列表使用者前后端0行代码

二:封装实现思路

(1) 后端,第1步,字典对像维护:项目中所有字典放一张表中,定义了一个完整的父类,子类只要通过@DiscriminatorValue 注解标明某个字典,在字典分类字段上的值就行

(2) 后端,第2步,写一个初始化字典的工具类,主要完成的功能,一是缓存字典数据,二提供,把某个list 的对像中的字典属性转换为他的名称,如把性别中的0转为“男”,1 转为女,这个转换主要是为前端 表格组件用,在后台把转换了,不用前台再加format 之类的函数处理

(3) 后端,第3步,对前端实现rest 接口,返回下拉列表数据,参数:前端下拉表的元素ID用逗号拼成的串,,以及他对应的字典类型和逗号拼成的串,这么做是实现,批量一次以MAP返回前端所有下拉列表的数据,Map<String,List<BaseDictionary>>,key 为字前端下拉表列元素的ID,value 是一个字典对像的list

(4) 写一个公用JS ,描扫页面中的下拉列表对像,获取其ID,同时 获取,下拉表中自定义的用于标识字典类型的html 属性,把这些按对应的顺序拼为(3)中描述的两个以逗号隔开的字符串

三:代码实现

      (1) BaseDictionary   抽像类定义字典对像的通用的方法

(2) Dictionary 继承 BaseDictionary   ,Dictionary是所有字典类对像的实体类父类,采用子类和父类共一张表的策略  ,Dictionary   类上的注解如下

    @Entity
@Table(name = "t_dictionary")
@Inheritance(strategy = InheritanceType.SINGLE_TABLE)
@DiscriminatorColumn(
name = "type_name",
discriminatorType = DiscriminatorType.STRING
)
@DiscriminatorValue(value = "all")

其他字典类,只要申明一下就行,如下面的姓别,主要是要用 DiscriminatorValue注解申明t_dictionary表中的type_name 字段的值为什么时表示这个子类,下面示例表示  type_name   为Gender 表示姓别的字典类

@Entity
@DiscriminatorValue("Gender")
public class Gender extends Dictionary{ }

(3) DictionaryCacheServiceImpl ,实现DictionaryCacheService 接中,同时定义一个init 方法,来加载字典到缓存 通过@PostConstruct 注解告诉spring ,构造这个对像完后成,就执行init 方法

(4) DictionaryHolderService  ,实现public Map<String, String> getDictionaryHolder() ,方法,一个静态的MAP, key 是字典类型,也就是具体的字典子类中,@DiscriminatorValue注解的值,value 就是 字典包名的类名,DictionaryCacheServiceImpl,通过这接口,知道有哪些字典类,然后加载到缓存中,后续版本我们通过spi 实现 DictionaryHolderService ,有老项目, 他们直接在 applicationContext.xml 中配置一个MAP ,

(5) DictionaryRest  ,提供rest 接口供前端调用

(6) 前端公用JS ,只要引入该JS,他会自动扫描页面上的下拉表组件,后来我们实现了jquery 版本,easy ui 版,angular 版本

另外,现在公司内部,我们字典,后端做成两部分,上面描述的我称作自定议字段,是项目内部字典,还有一个公共字典,在前端,在自定义HTML 属性中,除了字典属性外,还有一个是自定议的,还是公用的;公用的做成一个微服务了,只要POM中引入相关包就行了

上面简单回顾了一个实现思路,下面就上代码:

BaseDictionary

public abstract class BaseDictionary {

    public abstract String getDictId();

    public abstract String getDesc();

    public abstract String getValue();

}

Dictionary

/**
* <p>标题: Dictionary.java</p>
* <p>业务描述:字典公共父类</p>
* <p>公司:itest.work</p>
* <p>版权:itest 2018 </p>
* @author itest andy
* @date 2018年6月8日
* @version V1.0
*/
@Entity
@Table(name = "t_dictionary")
@Inheritance(strategy = InheritanceType.SINGLE_TABLE)
@DiscriminatorColumn(
name = "type_name",
discriminatorType = DiscriminatorType.STRING
)
@DiscriminatorValue(value = "all")
public class Dictionary extends BaseDictionary implements Serializable { private static final long serialVersionUID = 1L; private Integer dictId;
private String desc;
private String value; public Dictionary() { } public Dictionary(Integer dictId) {
this.dictId = dictId;
} public Dictionary(Integer dictId, String desc, String value) {
this.dictId = dictId;
this.desc = desc;
this.value = value;
} /**
* @return dictId
*/
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
@Column(name = "ID", unique=true, nullable=false, length=32)
public Integer getDictId() {
return dictId;
} /**
* @param dictId dictId
*/
public void setDictId(Integer dictId) {
this.dictId = dictId;
} /**
* @return desc
*/
@Column(name = "lable_text", length = 100)
public String getDesc() {
return desc;
} /**
* @param desc desc
*/
public void setDesc(String desc) {
this.desc = desc;
} /**
* @return value
*/
@Column(name = "value", length = 100)
public String getValue() {
return value;
} /**
* @param value value
*/
public void setValue(String value) {
this.value = value;
} }

DictionaryCacheServiceImpl

package cn.com.mypm.framework.app.service.dictionary.impl;

import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map; import javax.annotation.PostConstruct; import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.context.annotation.DependsOn;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional; import cn.com.mypm.framework.app.dao.common.CommonDao;
import cn.com.mypm.framework.app.entity.dictionary.BaseDictionary;
import cn.com.mypm.framework.app.service.dictionary.DictionaryCacheService;
import cn.com.mypm.framework.app.service.dictionary.DictionaryHolderService;
import cn.com.mypm.framework.common.SpringContextHolder;
import cn.com.mypm.framework.utils.ItestBeanUtils;
@Service("dictionaryCacheService")
@DependsOn("springContextHolder")
public class DictionaryCacheServiceImpl implements DictionaryCacheService { private static Log log = LogFactory.getLog(DictionaryCacheServiceImpl.class); private static DictionaryHolderService dictionaryHolder;
/**
*
*/
private static Map<String, List<BaseDictionary>> direcListMap = new HashMap<String, List<BaseDictionary>>();
/**
* key 为字典type value 为某类字段的map 它的key为字典value ,value这字典的名称
*/
private static Map<String, BaseDictionary> dictionaryMap = new HashMap<String, BaseDictionary>(); public DictionaryCacheServiceImpl() { } @PostConstruct
@Transactional(propagation = Propagation.REQUIRED, rollbackFor = Exception.class)
public void init() {
try {
if (SpringContextHolder.getBean("dictionaryHolderService") != null) {
dictionaryHolder = SpringContextHolder.getBean("dictionaryHolderService");
} Iterator<Map.Entry<String, String>> it = dictionaryHolder.getDictionaryHolder().entrySet().iterator();
CommonDao commonDao = SpringContextHolder.getBean("commonDao");
while (it.hasNext()) {
Map.Entry<String, String> me = (Map.Entry<String, String>) it.next();
List<BaseDictionary> list = commonDao.findDictionary(me.getValue());
if (list != null) {
String type = me.getKey();
direcListMap.put(type, list);
for (BaseDictionary dc : list) {
dictionaryMap.put(type + "_" + dc.getValue(), dc);
}
}
}
} catch (Exception e) {
log.warn("======PLS confirm if or not configuration dictionaryHolder=====");
log.warn(e.getMessage());
} } /**
*
* @param value
* 字典值
* @param type
* 字典类型
* @return 字典名称
*/
public static String getDictNameByValueType(String value, String type) {
if (dictionaryMap.get(type + "_" + value) != null) {
return dictionaryMap.get(type + "_" + value).getDesc();
}
return ""; } /**
*
* @param type
* 字典类型
* @return 字典列表
*/
public static List<BaseDictionary> getDictListByType(String type) { return direcListMap.get(type) == null ? null : direcListMap.get(type);
} public Map<String, BaseDictionary> getDictionaryMap() {
return dictionaryMap;
} public Map<String, List<BaseDictionary>> getDictionaryListMap() {
return direcListMap;
} /**
* 把list中字典表中代码值转换为他的名称
*
* @param list
* @param praAndValueMap
* key为list中object的表示字典表的属性 (支持通过点来多层次的属性如 dto.user.id或是无层次的id),
* value为他的类型,如学历,性别
*/
@Override
public void dictionaryConvert(List<?> list, Map<String, String> dictMapDesc) {
if (list == null || list.isEmpty()) {
return;
}
if (dictMapDesc == null || dictMapDesc.isEmpty()) {
return;
} for (Object currObj : list) {
this.dictionaryConvert(currObj, dictMapDesc); }
} public void dictionaryConvert(Object dictObj,
Map<String, String> dictMapDesc) {
if (dictObj == null) {
return;
}
if (dictMapDesc == null || dictMapDesc.isEmpty()) {
return;
}
try {
Iterator<Entry<String, String>> it = dictMapDesc.entrySet()
.iterator();
String[] propertys = null;
while (it.hasNext()) {
Entry<String, String> me = it.next();
propertys = me.getKey().split("\\.");
Object dictValue = ItestBeanUtils.forceGetProperty(dictObj,
propertys[0]);
if (dictValue == null) {
continue;
}
if (propertys.length == 1) {
;
ItestBeanUtils.forceSetProperty(dictObj, me.getKey(),
DictionaryCacheServiceImpl.getDictNameByValueType(
(String) dictValue, me.getValue()));
} else {
Object laseLayerObj = null;
for (int i = 1; i < propertys.length; i++) {
if (i != propertys.length - 1
|| (propertys.length == 2 && i == 1)) {
laseLayerObj = dictValue;
} dictValue = ItestBeanUtils.forceGetProperty(dictValue,
propertys[i]); if (dictValue == null) {
break;
}
}
if (dictValue != null && laseLayerObj != null) {
ItestBeanUtils.forceSetProperty(laseLayerObj,
propertys[propertys.length - 1],
DictionaryCacheServiceImpl
.getDictNameByValueType(
(String) dictValue,
me.getValue()));
}
}
dictValue = null;
}
} catch (NoSuchFieldException e) {
logger.error(e.getMessage(), e);
}
} }

DictionaryRest

package cn.com.mypm.framework.app.web.rest.dict;

import java.util.HashMap;
import java.util.List;
import java.util.Map; import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController; import cn.com.mypm.framework.app.entity.dictionary.BaseDictionary;
import cn.com.mypm.framework.app.entity.vo.dict.BatchLoad;
import cn.com.mypm.framework.app.service.common.BaseDic;
import cn.com.mypm.framework.app.service.dictionary.PubDicInterface;
import cn.com.mypm.framework.app.service.dictionary.impl.DictionaryCacheServiceImpl;
import cn.com.mypm.framework.common.SpringContextHolder; @RestController
@RequestMapping("/itestAPi/dictService")
public class DictionaryRest { private static Log logger = LogFactory.getLog(DictionaryRest.class); @GetMapping(value="/find/{type}",consumes="application/json")
public List<BaseDictionary> find(@PathVariable("type") String type) { return DictionaryCacheServiceImpl.getDictListByType(type); } //项目内自定义字典
@PostMapping(value="batchLoad",consumes="application/json")
public Map<String,List<BaseDictionary>> load(@RequestBody BatchLoad batchLoad){
if(batchLoad==null){
return null;
}
if(batchLoad.getIds()==null||batchLoad.getIds().trim().equals("")){
return null;
}
if(batchLoad.getDicts()==null||batchLoad.getDicts().trim().equals("")){
return null;
}
String[] idsArr = batchLoad.getIds().split(",");
String[] dictsArr = batchLoad.getDicts().split(",");
Map<String,List<BaseDictionary>> resultMap = new HashMap<String,List<BaseDictionary>>(idsArr.length);
int i = 0;
for(String id :idsArr){
List<BaseDictionary> currDict = DictionaryCacheServiceImpl.getDictListByType(dictsArr[i]);
if(currDict!=null&&!currDict.isEmpty()){
resultMap.put(id, currDict);
}
i++;
}
return resultMap;
}

//公共字典
@PostMapping(value="pubBatchLoad",consumes="application/json")
public Map<String,List<BaseDic>> pubLoad(@RequestBody BatchLoad batchLoad){
if(batchLoad==null){
return null;
}
if(batchLoad.getIds()==null||batchLoad.getIds().trim().equals("")){
return null;
}
if(batchLoad.getDicts()==null||batchLoad.getDicts().trim().equals("")){
return null;
}
PubDicInterface pubDicInterface = null ;
try {
pubDicInterface = SpringContextHolder.getBean("pubDicInterface");
} catch (Exception e) {
logger.error("pub dic no pubDicInterface implements "+e.getMessage(),e);
return null;
}
return pubDicInterface.batchLoadDic(batchLoad);
}
}

列举几个字典类:

@Entity
@DiscriminatorValue("AccessMode")
public class AccessMode extends Dictionary{ }
@Entity
@DiscriminatorValue("Gender")
public class Gender extends Dictionary{ }
import javax.persistence.DiscriminatorValue;
import javax.persistence.Entity; @Entity
@DiscriminatorValue("CertificateType")
public class CertificateType extends Dictionary{ }

不一一列举了,总之后端,只要定义,字典类就行了

 

加载字典的公共JS ,下面是eas ui 版本,且作缺省执行的JS中要执行的方法,

/**
* 批量获取页面字典数据
*/
function batDicts(opts)
{
// action
var url = '';
// type 区分是公共不是项目内自定义字典
var type = 'public';
if(!!opts) {
if(!!opts.type) {
type = opts.type;
}
}
var dicts = [];
var pageCombos = $(document).data("bsui-combobox")||{};
$.each(pageCombos, function(i, n){
if(i && n) {
var td = i.split('^');
if(2 === td.length) {
if(td[0]===type && -1===$.inArray(td[1], dicts)) {
dicts.push(td[1]);
}
}
}
});
if(!!url && dicts.length > 0) {
// req params
var params = '{"ids": "'+dicts.join(",")+'","dicts": "'+dicts.join(",")+'"}';
// post request
ajaxReq(url, params, '', '',{
'type' : 'POST',
'contentType':'application/json; charset=UTF-8'
}).done(function(data){
$.each(dicts, function(i,n){
if(!!pageCombos[type+'^'+n]
&& !pageCombos[type+'^'+n]['getted']
&& !!data[n]) {
pageCombos[type+'^'+n]['getted'] = true;
pageCombos[type+'^'+n]['data'] = data[n];
$.each(pageCombos[type+'^'+n]["list"], function(){
// 更新页面combo
$(this).combobox('loadData', data[n]);
});
}
});
});
}
} /**
* 一次设置页面上所有下拉列表
*/
function batCombo()
{
batDicts({
type: 'public',
url: $CommonUI._PUBLIC_DICT_SERVICE_URL
});
batDicts({
type: 'custom',
url: $CommonUI._CUSTOM_DICT_SERVICE_URL
});
}

四:使用

在前端,正常使用select 组件的基本上,增加一个自定义属性 即,可,不用写任何JS代码,当然要引用公用JS

itest 开源测试管理项目中封装的下拉列表小组件:实现下拉列表使用者前后端0行代码

简单吧,前端,什么都不用了,只要定义了用什么字典及是公共字典,还是自定义的,后端,是通用的代码,只需要申明字类就 OK ,如 Gender ,有其他的,如学历等,只要后台定义一个 他的类,并用 @DiscriminatorValue 申明就行了 , 不再写任何代码  ,是不是很省事呀, easy ui ,缺省的下拉表表组件,只要写URL和两个属性,但是下拉多,一个下拉请求一次后台,这很不友好,且需要使用者知道URL,或是实现 load 的JS函数,侵入性我认为太大。

另外,前面gird 的数据,通知会包含量字典数据,通知会在前端通过 grid 组年中,定义format 方法,时行转行,这麻烦,转换者,还要知道如来转,所以后台字典的service 实现中中增加了一个方法,用于把list 中的的对像里的字典属性转换为其名称

        /**
* 把list中字典表中代码值转换为他的名称
*
* @param list
* @param praAndValueMap
* key为list中object的表示字典表的属性 (支持通过点来多层次的属性如 dto.user.id或是无层次的id),
* value为他的类型,如学历,性别
*/
@Override
public void dictionaryConvert(List<?> list, Map<String, String> dictMapDesc)
上一篇:jQuery 特效:盒子破碎和移动动画效果


下一篇:让Quality Center走下神坛--测试管理工具大PK(转)