目录
一、需求说明
1、需求UI
说明：以下数据现存放于excel中，需要对excel进行处理，生产json数据，最后通过json将数据渲染到jsp中。
二、整体设计
1、json结构设计
- UML类图：套层结构设计
2、excel设计
- 容器信息
说明：每个sheet页都存放着不同层级的信息。
- 导航信息
说明：用来定义导航的高度、使用的模板、以及导航内部链接加载的方式（示例为导航设计初始数据，可以直接复用）
- 一级信息
说明：用来定义一级的基本信息，对应导航位置：
填写信息如下：
- 二级信息
说明：用来定义二级的基本信息，对应导航位置：
填写信息如下：
- 三级信息
说明：用于写入三级的基本信息。对应导航位置：
填写信息如下：
- 相关推荐
说明：用于写入相关推荐的基本信息。对应导航位置：
填写信息如下：
3、程序设计
说明：代码结构如下：
三、核心逻辑
1、入口类核心代码
说明：读excel，输出json
/**
* 简单测试excel数据是否有可读性：sheet页是否完整
*/
public void importExcel(File navExcel, String exportPath, String exportName, String columnCode) throws IOException, BiffException {
InputStream stream = new FileInputStream(navExcel);
Workbook book = Workbook.getWorkbook(stream);
//读取数据NavReadExcelUtil;或提示错误
Container container = NavReadExcelUtil.readNavInformation(book.getSheet(0));
List<FirstLevelParam> firstLevelParamList = NavReadExcelUtil.readFirstLevel(book.getSheet(1));
List<SecondLevelParam> secondLevelParamList = NavReadExcelUtil.readSecondLevel(book.getSheet(2));
List<ThreeLevelParam> threeLevelParamList = NavReadExcelUtil.readThreeLevel(book.getSheet(3));
List<ThreeLevelParam> recommendParamList = NavReadExcelUtil.readRecommend(book.getSheet(4));
//转换为json。NavConvertToJsonUtil
String json = navConvertToJsonUtil.getJsonObjectResult(container,firstLevelParamList,secondLevelParamList,threeLevelParamList,recommendParamList,columnCode);
//导出json文件
createJsonFile(json,exportPath,exportName);
}
/**
* 输出json文件
*/
private static void createJsonFile(String jsonData,String exportPath, String exportName) throws IOException {
//连接流
FileOutputStream fos=null;
//链接流
BufferedOutputStream bos =null;
try {
fos = new FileOutputStream(exportPath+"//"+exportName+".json");
bos = new BufferedOutputStream(fos);
bos.write(jsonData.getBytes());;
bos.flush();
} catch (FileNotFoundException e) {
e.printStackTrace();
}
log.info("输出json文件："+exportPath+"\\"+exportName+".json");
}
2、excel读取类核心代码
说明：举例读取导航信息、一级信息（其他层级获取方式相同）
/**
* 读取导航基本信息
*/
public static Container readNavInformation(Sheet sheet){
Container container = new Container();
container.setHeight(sheet.getCell(0,2).getContents().trim());
container.setTemplate(sheet.getCell(1,2).getContents().trim());
container.setPjaxContainer(sheet.getCell(2,2).getContents().trim());
String hrefTaget = sheet.getCell(3,2).getContents().trim();
container.setHrefTaget(hrefTaget.contains("pjax")?"pjax":hrefTaget);
return container;
}
/**
* 读取一级菜单信息
*/
public static List<FirstLevelParam> readFirstLevel(Sheet sheet){
//FirstLineMark
Map<String,Integer> sheetTitleAndSort = setFirstLineMark(sheet);
List<FirstLevelParam> firstLevelParamList = new ArrayList<>();
for (int i = 2; i < sheet.getRows(); i++) {
FirstLevelParam firstLevelParam = new FirstLevelParam();
firstLevelParam.setTitle(getContent(sheet,sheetTitleAndSort.get("一级标题"),i));
firstLevelParam.setSort(Integer.parseInt(getContent(sheet,sheetTitleAndSort.get("一级顺序"),i)));
firstLevelParam.setShortCode(getContent(sheet,sheetTitleAndSort.get("short_code"),i));
firstLevelParam.setHrefTaget(getContent(sheet,sheetTitleAndSort.get("hrefTaget"),i));
firstLevelParam.setNavMarginLeft(getContent(sheet,sheetTitleAndSort.get("navMarginLeft"),i));
firstLevelParam.setNarrowHidden(getContent(sheet,sheetTitleAndSort.get("narrowHidden"),i));
firstLevelParamList.add(firstLevelParam);
}
return firstLevelParamList;
}
/**
* 标记首航数据
*/
private static Map<String,Integer> setFirstLineMark(Sheet sheet) {
Map<String,Integer> sheetTitleAndSort = new HashMap<>();
for (int i = 0; i < sheet.getColumns(); i++) {
Cell cell = sheet.getCell(i,0);
sheetTitleAndSort.put(cell.getContents().trim(),cell.getColumn());
}
return sheetTitleAndSort;
}
/**
* 获取指定列数据
*/
private static String getContent(Sheet sheet, Integer col, Integer row) {
String content = sheet.getCell(col,row).getContents().trim();
return content;
}
3、excel读取实体类转json VO
/**
* 将excel实体类转为jsonvo
*/
public String getJsonObjectResult(Container container, List<FirstLevelParam> firstLevelParamList, List<SecondLevelParam> secondLevelParamList, List<ThreeLevelParam> threeLevelParamList, List<ThreeLevelParam> recommendParamList){
execNav(container,firstLevelParamList);
execGroup(container,secondLevelParamList);
JSONObject jsonObjectResult = (JSONObject) JSON.toJSON(container);
String jsons = JSON.toJSONString(jsonObjectResult);
return jsons;
}
/**
* 在容器中写入navs
*/
private void execNav(Container container, List<FirstLevelParam> firstLevelParamList) {
List<Nav> navList = new ArrayList<>();
//一级菜单排序
Collections.sort(firstLevelParamList);
for (FirstLevelParam firstLevelParam : firstLevelParamList){
Nav nav = new Nav();
Link link = getLinkAttribute(firstLevelParam);
nav.setLink(link);
nav.setNavPaddingLeft(firstLevelParam.getNavMarginLeft());
if (!firstLevelParam.getNarrowHidden().isEmpty()){
nav.setNarrowHidden(Integer.parseInt(firstLevelParam.getNarrowHidden()));
}
navList.add(nav);
}
container.setNavs(navList);
}
/**
* 设置推荐链接
*/
private void execRecommend(Container container, List<ThreeLevelParam> recommendParamList) {
for (Nav nav :container.getNavs()){
List<Link> linkList = new ArrayList<>();
for (ThreeLevelParam recommendLink : recommendParamList){
if (recommendLink.getFirstTitle().equals("all")|| recommendLink.getFirstTitle().equals(nav.getLink().getTitle())){
linkList.add(getLinkAttribute(recommendLink));
}
}
nav.getRecommend().setLinks(linkList);
}
}
/**
* 给nav、group设置link属性
* @param basicsParam
* @return
*/
private Link getLinkAttribute(BasicsParam basicsParam) {
Link link =new Link();
//存在新标题使用新标题，不存在则使用旧标题
link.setTitle((basicsParam.getNewTitle() != "" && basicsParam.getNewTitle() != null)? basicsParam.getNewTitle():basicsParam.getTitle());
//针对于推荐链接url
link.setUrl(basicsParam.getUrl() != null ? basicsParam.getUrl(): (basicsParam.getShortCode()== null ? null:basicsParam.getShortCode()));
if (basicsParam.getHrefTaget() != ""){
link.setHrefTaget(basicsParam.getHrefTaget().contains("pjax")?"pjax":basicsParam.getHrefTaget());
}
return link;
}
4、生成json
说明：通过程序生成json结构如下：
四、jsp结构
<%-- 导航高度--%>
<c:set var="height" value="${height}"/>
<%-- 导航内 链接整体 点击加载跳转方式--%>
<c:set var="hrefTaget" value="${hrefTaget}"/>
<%-- 导航内 链接整体是否为pjax加载--%>
<c:set var="isPjaxhref" value="${hrefTaget eq 'pjax'}"/>
<%--导航容器--%>
<div class="wiget_container wiget_${template}_container" style="height: ${height}">
<%--左侧 一级菜单--%>
<div class="container-left">
<div class="nav-title-list">
<c:forEach var="nav" items="${navs}" varStatus="status">
<c:set var="isLinkPjaxHref" value="${nav.link.hrefTaget eq 'pjax'}"/>
<div class="container-left-item <c:if test="${status.index == 0}">active</c:if>"
data-countId="${status.index}"
data-url="${nav.link.url}"
target="${nav.link.hrefTaget eq null ? (isPjaxhref ? "_self":hrefTaget):(isLinkPjaxHref ? "_self":nav.link.hrefTaget)}"
linkType="${nav.link.hrefTaget eq null ? (isPjaxhref ? "pjax":""):(isLinkPjaxHref ? "pjax":"")}">
<div class="link nav-link">
<a href="javascript:void(0)">${nav.link.title}</a>
</div>
</div>
</c:forEach>
</div>
</div>
<%-- 右侧二级菜单 recommend--%>
<div class="container-right">
<c:forEach var="nav" items="${navs}" varStatus="status">
<%--二级菜单 groups --%>
<div class="groups-recommend-list <c:if test="${status.index == 0}">active</c:if>" data-countId="${status.index}"
style="padding-left: ${nav.navPaddingLeft}">
<c:set var="colNum" value="0"/>
<c:forEach var="group" items="${nav.groups}" varStatus="status">
<c:if test="${group.col ge colNum}">
<c:set var="colNum" value="${group.col}"/>
</c:if>
</c:forEach>
<c:forEach begin="1" end="${colNum}" step="1" var="index">
<div class="group-col group-col-${index} ${nav.narrowHidden eq index ? "narrow-hidden":""}" >
<c:forEach var="group" items="${nav.groups}">
<c:if test="${group.col == index}">
<c:set var="isLinkPjaxHref" value="${group.link.hrefTaget eq 'pjax'}"/>
<div class="group" style="width: ${group.groupWidth} ; margin:0px 0px 20px ${group.groupMarginLeft}">
<div class="link group-title-link ">
<a href="javascript:void(0)"
data-url="${group.link.url}"
target="${group.link.hrefTaget eq null ? (isPjaxhref ? "_self":hrefTaget):(isLinkPjaxHref ? "_self":group.link.hrefTaget)}"
linkType="${group.link.hrefTaget eq null ? (isPjaxhref ? "pjax":""):(isLinkPjaxHref ? "pjax":"")}"
style="cursor:${group.link.url eq null ? "default;text-decoration:none;":"pointer"} ">${group.link.title}</a>
</div>
<div class="link-list">
<c:forEach var="link" items="${group.links}" varStatus="vs">
<c:set var="isLinkPjaxHref" value="${link.hrefTaget eq 'pjax'}"/>
<div class="link link-item">
<a href="javascript:void(0)"
data-url="${link.url}"
target="${link.hrefTaget eq null ? (isPjaxhref ? "_self":hrefTaget):(isLinkPjaxHref ? "_self":link.hrefTaget)}"
linkType="${link.hrefTaget eq null ? (isPjaxhref ? "pjax":""):(isLinkPjaxHref ? "pjax":"")}"> ${link.title} </a>
</div>
</c:forEach>
</div>
</div>
</c:if>
</c:forEach>
</div>
</c:forEach>
<%--recommend--%>
<c:if test="${not empty nav.recommend}">
<c:set var="recommend" value="${nav.recommend}"/>
<div class="recommend-list ${nav.narrowHidden eq colNum+1 ? "narrow-hidden":""}" style="width: ${recommend.groupWidth}">
<div class="recommend">
<div class="recommend-title">${recommend.title}</div>
<div class="recommend-items">
<c:forEach var="link" items="${recommend.links}">
<c:set var="isLinkPjaxHref" value="${link.hrefTaget eq 'pjax'}"/>
<div class="recommend-item">
<a href="${link.url}"
target="${link.hrefTaget eq null ? (isPjaxhref ? "_self":hrefTaget):(isLinkPjaxHref ? "_self":link.hrefTaget)}"
linkType="${link.hrefTaget eq null ? (isPjaxhref ? "pjax":""):(isLinkPjaxHref ? "pjax":"")}">${link.title}</a>
</div>
</c:forEach>
</div>
</div>
</div>
</c:if>
</div>
</c:forEach>
</div>
</div>
五、效果展示
说明：css样式与js比较业余，如果需要可以评论滴滴我。
六、其他说明
通过excel生成json最后部署到页面上的整体结构、核心代码如上。核心代码过多，且存在一些重复的逻辑，所以并未将全部代码贴进来。
1、读excel 依赖引入
jxl.jar 是通过java操作excel表格的工具类库；是开放源码文件，操作简单。
jxl官方下载地址：https://mvnrepository.com/artifact/net.sourceforge.jexcelapi/jxl/2.6.12
（上述链接是2.6.12版本下载地址，可根据自己的需求进行下载）
关于具体使用在网上可以找到很多参考，即excel的创建、读取、写入等等操作。
基础参考：https://blog.csdn.net/wmlwml0000/article/details/80842772
2、json操作 依赖引入
fastjson官方下载地址：https://mvnrepository.com/artifact/com.alibaba/fastjson/1.2.72
（上述链接是1.2.72版本下载地址，可根据自己的需求进行下载）
Fastjson的基本使用方法大全：https://www.cnblogs.com/chenhuan821361335/p/8185086.html
3277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
