本文介绍了如何在项目中集成富文本编辑器ueditor和使用highcharts进行图表统计分析。首先，详细讲解了ueditor的下载、改名、引包、实例化及配置等步骤，然后展示了在后台存储富文本内容的方法。接着，通过创建highcharts.jsp页面，利用ajax获取后台数据并展示商品数量统计分析图表，同时提到了路径设置和数据模拟。
上节课我们将文件上传和商品详情写完了，这节课我们使用富文本和图表进行代码优化。
主要任务：富文本和图标的使用
一、富文本域
1. 上节课我们运行后的页面如下：
2. 富文本插件，一般用在新增商品时，商品详情
我们用的富文本插件叫ueditor
（1）下载：
https://ueditor.baidu.com/website/onlinedemo.html（下载最新版本即可）；
（2）改名：
解压后将整个文件夹放到项目WebContent中，直接在压缩文件里面复制/黏贴过来，名字叫utf8-jsp，utf8-jsp文件夹上右键—Refator—Rename—改成ueditor；
（3）引包：
上面复制进去的文件夹在报错，因为jsp文件夹里面有用到的类没引入需要的jar包将uedotor/jsp/lib下面的jar包复制到WebContent/Web-inf/lib下；
（4）实例：
editor/下面有个index.html，启动项目，访问一下看看：http://localhost:8080/shop
（5）使用插件：
我们要在goods.jsp使用插件，使用前必须引入以下3个文件，从index.html上面拷贝，然后改下文件引入的路径
<script type="text/javascript" charset="utf-8" src="${ ctx }/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${ ctx }/ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="${ ctx }/ueditor/lang/zh-cn/zh-cn.js"></script>
（6）调用富文本编辑器：
在新增的那个div里面，将商品详情表单文本框注释，改成下面的写法（可取index,html里面复制）稍微改下宽和高，然后在<script>标签里面启用一下
<div class="formInput">
<span>商品状态 1-正常 2-下架 3-删除 默认下架：</span>
<input type="text" name="goodStatus" id="goodStatus" />
</div>
<input class="btn2 formButton" type="button" value="保存" onClick="create()" />
<input class="btn2 formButton" type="button" value="关闭" onClick="closeDiv()" />
<div class="formInput">
<span>商品详情：</span>
<script id="editor" type="text/plain" style="width:100%;height:400px;"></script>
<!-- <input type="text" name="goodDetail" id="goodDetail" /> -->
</div>
<script type="text/javascript">
var ue = UE.getEditor('editor');
function closeDiv(){
$(".box").hide();
}
</script>
（7）改路径：
/ueditor/jsp/config.json改下图片保存路径和访问路径前缀
"imageUrlPrefix": "../", /* 图片访问路径前缀 */
"imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
（8）后台代码：
GoodsCondition添加属性editorValue
private String editorValue;
public String getEditorValue() {
return editorValue;
}
public void setEditorValue(String editorValue) {
this.editorValue = editorValue;
}
Controller的create方法：因为我们要把详情存到goodDetail字段，所以
@ResponseBody
@RequestMapping("/create.do")
public boolean create(GoodsCondition goods,HttpServletRequest request){
try{
goods.setGoodDetail(goods.getEditorValue());
String path = request.getSession().getServletContext().getRealPath("/");
System.out.println(path);
goodsService.create(goods,path);
}catch(Exception e){
System.out.println(e.getMessage());
return false;
}
return true;
}
项目重启下，新增就可以成功了。
（9）修改：
改下goods.jsp页面的打开修改页面的那个edit函数 UE.getEditor 是手动给富文本框赋值，参考index.html
function edit(id){
$.ajax({
type:"get",
url:"${ ctx}/goods/findById.do",
data:{"id":id},
success:function(data){
$("#id").val(data.id);
$("#catId").val(data.catId);
$("#goodName").val(data.goodName);
$("#goodSn").val(data.goodSn);
$("#goodNumber").val(data.goodNumber);
$("#goodPrice").val(data.goodPrice);
$("#costPrice").val(data.costPrice);
$("#goodWeight").val(data.goodWeight);
/* $("#mainImg").val(data.mainImg);
$("#subImg").val(data.subImg);
$("#goodDetail").val(data.goodDetail); */
$("#goodStatus").val(data.goodStatus);
UE.getEditor('editor').setContent(data.goodDetail, true);
$(".box").show();
}
});
}
刷新jsp页面再点修改按钮，就可以了
二、图表highcharts
做统计分析的图表，有很多插件：echarts、highcharts、funsioncharts、jasperreport等。
去官网看：https://www.highcharts.com.cn/demo/highcharts
1. 在shop项目下新建个highcharts.jsp做“商品数量统计分析”页面
注意引入的highcharts.js和highcharts.jsp页面的相对路径关系：
jsp页面上一级目录下面的highcharts目录下面的highcharts.js，所以路径用../ 上级目录
启动项目，输入：http://localhost:8080/shop/jsp/highcharts.jsp
2. ajax
页面数据肯定不能是死的，得从数据库的商品表里取数据，然后显示在图上。我们需要用到ajax，所以需要引入jquery.js，顺便把可以导出图片的js也引入
<script src="../highcharts/exporting.js"></script>
<script src="../highcharts/export-data.js"></script>
<script src="../js/jquery.min.js"></script>
Body中添加ajax获取图表数据
3、前台ajax写法
由于ajax获取后台请求地址，所以需要用到项目根路径pageContext.request.contextPath
<!-- 自定义标签的一个用法，设置一个变量 格式：c:setc:if c:foreach -->
<c:set var="ctx" value="${ pageContext.request.contextPath}" />
<body>里面新建个div，用来展示ajax获取后台的数据
<div id="echartsAjax" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 异步加载数据
$.getJSON('${ ctx}/goods/chartsData.do').done(function (data) {
alert(data);
// 图表配置
Highcharts.chart('echartsAjax', {
//下面这个是可以添加的导出，好多，不写就没有
lang: {
printChart: '打印图表',
downloadJPEG: '下载 JPEG 文件',
downloadPDF: '下载 PDF 文件',
downloadPNG: '下载 PNG 文件',
downloadSVG: '下载 SVG 文件',
downloadCSV: '下载 CSV 文件',
downloadXLS: '下载 XLS 文件',
viewData: '查看数据表格'
},
chart: {
type: 'bar' //指定图表的类型，默认是折线图（line）
},
title: {
text: '我的第一个AJAX图表' // 标题
},
xAxis: {
categories: data.category // x 轴分类
},
yAxis: {
title: {
text: '吃水果个数' // y 轴标题
}
},
series: [{ // 数据列
name: '小明',
data: data.data1 // 数据
}, {
name: '小红',
data: data.data2
}]
});
});
</script>
4. 后台查询数据
GoodsController.java中添加方法
先不查数据库了，先拼点假数据
@ResponseBody
@RequestMapping("/chartsData.do")
public Map<String,Object> chartsData(){
//拼装需要传回前台的数据
Map<String,Object> map = new HashMap<String,Object>();
List<String> category = new ArrayList<String>();
category.add("苹果");
category.add("香蕉");
category.add("橙子");
map.put("category", category);
List<Integer> data1 = new ArrayList<Integer>();
data1.add(10);
data1.add(15);
data1.add(8);
map.put("data1", data1);
List<Integer> data2 = new ArrayList<Integer>();
data2.add(22);
data2.add(12);
data2.add(30);
map.put("data2", data2);
return map;
}
运行项目，访问http://localhost:8088/shop/jsp/highcharts.jsp
5.highcharts.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!-- 引入jstl自定义的c标签 -->
<!-- 自定义标签的一个用法，设置一个变量 格式：c:setc:if c:foreach -->
<c:set var="ctx" value="${ pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>商品统计分析</title>
<script src="../highcharts/highcharts.js"></script>
<script src="../highcharts/exporting.js"></script>
<script src="../highcharts/export-data.js"></script>
<script src="../js/jquery.min.js"></script>
</head>
<body>
<div id="echartsAjax" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 异步加载数据
$.getJSON('${ ctx}/goods/chartsData.do').done(function (data) {
alert(data);
// 图表配置
Highcharts.chart('echartsAjax', {
//下面这个是可以添加的导出，好多，不写就没有
lang: {
printChart: '打印图表',
downloadJPEG: '下载 JPEG 文件',
downloadPDF: '下载 PDF 文件',
downloadPNG: '下载 PNG 文件',
downloadSVG: '下载 SVG 文件',
downloadCSV: '下载 CSV 文件',
downloadXLS: '下载 XLS 文件',
viewData: '查看数据表格'
},
chart: {
type: 'bar' //指定图表的类型，默认是折线图（line）
},
title: {
text: '我的第一个AJAX图表' // 标题
},
xAxis: {
categories: data.category // x 轴分类
},
yAxis: {
title: {
text: '吃水果个数' // y 轴标题
}
},
series: [{ // 数据列
name: '小明',
data: data.data1 // 数据
}, {
name: '小红',
data: data.data2
}]
});
});
</script>
<!-- 图表容器 DOM -->
<div id="container" style="width: 600px;height:400px;"></div>
<script>
// 图表配置
var options = {
chart: {
type: 'bar' //指定图表的类型，默认是折线图（line）
},
title: {
text: '我的第一个图表' // 标题
},
xAxis: {
categories: ['苹果', '香蕉', '橙子'] // x 轴分类
},
yAxis: {
title: {
text: '吃水果个数' // y 轴标题
}
},
series: [{ // 数据列
name: '小明',
data: [1, 0, 4] // 数据
}, {
name: '小红',
data: [5, 7, 3]
}]
};
// 图表初始化函数
var chart = Highcharts.chart('container', options);
</script>
</body>
</html>
扫一扫
1990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
