可以参考的内容：kingEditor单文件上传组件使用，表单批量提交及其优化，图片预览效果，数据回显
效果图：
jsp页面：sitead.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
td {
font-size: 9pt
}
</style>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>网站后台,广告设置</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
<!--
td {
font-size: 9pt
}
body {
margin-top: 5px;
margin-left: 2px;
}
.style3 {
color: #A84E22;
font-weight: bold;
}
#tabcss {
BORDER-COLLAPSE: collapse;
border-top-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-top-color: #dddddd;
border-left-color: #dddddd;
}
#tabcss td {
line-height: 24px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
color: #333333;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #dddddd;
border-bottom-color: #dddddd;
}
.STYLE4 {
color: #FF0000;
font-weight: bold;
}
-->
</style>
<script language=javascript
src=${pageContext.request.contextPath}/js/mouse.js></script>
<link rel="stylesheet"
href="${pageContext.request.contextPath}/kindeditor-4.1.10/themes/default/default.css" />
<script
src="${pageContext.request.contextPath}/kindeditor-4.1.10/kindeditor.js"></script>
<script
src="${pageContext.request.contextPath}/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery-1.8.2.js"></script>
<script type="text/javascript">
var _editor;
var MM={
// 编辑器参数
kingEditorParams :{
filePostName : "uploadFile", //传递的参数
uploadJson : 'http://127.0.0.1:8084/mengmeng-shop/service/pic/upload', //地址
dir : "image" //类型
},
//初始化单图片上传组件
loadImage : function(_imageId,_curlId,_a){
//为当前的button添加点击事件
$(_imageId).click(function() {
_editor=KindEditor.editor(MM.kingEditorParams)
_editor.loadPlugin('image', function() {
var editor = this;
editor.plugin.imageDialog({
showRemote : false,
imageUrl : $(_curlId).val(),
clickFn : function(url, title, width,
height, border, align) {
//把URL赋值给文本框
$(_curlId).val(url);
//把URL赋值给浏览图片img中的src
var context="图片预览：<br><img src=\'"+ url +"\'/>";
//替换alt属性
$(_a).attr("alt",context);
editor.hideDialog();
}
});
});
});
}
};
//优化：为每一个对象绑定一个属性，如果这个属性的值不为null，那么后台则修改数据，否则不处理
var _temp;
var _lastValue;
var HH={
bindValue:function(_ctext,_curl,_clink,_mychanged){
var _ids=_ctext+","+_curl+","+_clink;
//alert(_ids);
$(_ids).bind({
//获得焦点
focusin : function() {
// 取得值
_temp = $.trim($(this).val());
},
//失去焦点
focusout : function() {
// 失去焦点时的值
_lastValue = $.trim($(this).val());
if (_temp != _lastValue && null != _lastValue&& ""!= _lastValue) {
//值改变了则为相对隐藏域中的mychanged赋值
$(_mychanged).val("1");
}
}
});
}
};
KindEditor.ready(function(K) {
//获取所有button的个数
var len=$(":button").length;
//循环初始化单图片上传组件
for(var i=1;i<len;i++){
var _imageId="#image"+i;
var _curlId="#curl"+i;
var _a="#a"+i;
MM.loadImage(_imageId,_curlId,_a);
};
//优化：为每一个对象绑定一个属性，如果这个属性的值不为null，那么后台则修改数据，否则不处理
for(var i=1;i<len;i++){
var _ctext="#ctext"+i;
var _curl="#curl"+i;
var _clink="#clink"+i;
var _mychanged="#mychanged"+i;
HH.bindValue(_ctext,_curl,_clink,_mychanged);
};
});
//表单提交
function submitForm(){
//如果点击了选图片则把编辑器中的内容同步到隐藏多行文本中
$(":button:not(:last)").click(function(){
//将编辑器中的内容同步到隐藏多行文本中
_editor.sync();
});
$.ajax({
type: "POST",
url: "http://127.0.0.1:8084/mengmeng-shop/content/saveAD.html",
data: $("form").serialize(),
success: function(msg){
alert('修改成功!');
},
error: function(){
alert('修改失败!');
}
});
}
</script>
</head>
<body bgcolor="#fcfcfc">
<table width="97%" border="0" align="center" cellpadding="0"
cellspacing="0" id="tabcss">
<tr bgcolor="#E1EFFF">
<td height=30 colspan=2> <b>设置网站广告：</b></td>
</tr>
<form name="form1">
<input type="hidden" name="id" value="${list[4].id}">
<input type="hidden" name="id" value="${list[3].id}">
<input type="hidden" name="id" value="${list[2].id}">
<input type="hidden" name="id" value="${list[1].id}">
<input type="hidden" name="id" value="${list[0].id}">
<input type="hidden" name="id" value="${list[5].id}">
<input type="hidden" name="id" value="${list[8].id}">
<input type="hidden" name="id" value="${list[7].id}">
<input type="hidden" name="id" value="${list[6].id}">
<input type="hidden" name="id" value="${list[9].id}">
<input type="hidden" name="id" value="${list[10].id}">
<input type="hidden" name="id" value="${list[12].id}">
<input type="hidden" name="id" value="${list[11].id}">
<input type="hidden" name="mychanged" id="mychanged1" value=""/>
<input type="hidden" name="mychanged" id="mychanged2" value=""/>
<input type="hidden" name="mychanged" id="mychanged3" value=""/>
<input type="hidden" name="mychanged" id="mychanged4" value=""/>
<input type="hidden" name="mychanged" id="mychanged5" value=""/>
<input type="hidden" name="mychanged" id="mychanged6" value=""/>
<input type="hidden" name="mychanged" id="mychanged7" value=""/>
<input type="hidden" name="mychanged" id="mychanged8" value=""/>
<input type="hidden" name="mychanged" id="mychanged9" value=""/>
<input type="hidden" name="mychanged" id="mychanged10" value=""/>
<input type="hidden" name="mychanged" id="mychanged11" value=""/>
<input type="hidden" name="mychanged" id="mychanged12" value=""/>
<input type="hidden" name="mychanged" id="mychanged13" value=""/>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'><strong><b>首页</b>切换广告图</strong>
</td>
<td>上传图片1 <input name='pic' type=text id="curl1" value="${list[4].pic}"
size="40"> <input type="button" value="选图片" id="image1">
(670 X 300) <img id='a1' alt='图片预览：<br><img src="${list[4].pic}"/>'
src='${pageContext.request.contextPath}/images/helpmemo.gif'></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>链接地址1 <input name='url' type=text id="clink1"
value="${list[4].url}" size="35"> 标题说明1
<input name='title' type=text id="ctext1" value="${list[4].title}"
size="18">
</td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>上传图片2 <input name='pic' type=text id="curl2" value="${list[3].pic}"
size="40"> <input type="button" value="选图片" id="image2">
(670 X 300) <img id='a2' alt='图片预览：<br><img src="${list[3].pic}"/>'
src='${pageContext.request.contextPath}/images/helpmemo.gif'></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>链接地址2 <input name='url' type=text id="clink2"
value="${list[3].url}" size="35"> 标题说明2
<input name='title' type=text id="ctext2" value="${list[3].title}"
size="18">
</td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>上传图片3 <input name='pic' type=text id="curl3" value="${list[2].pic}"
size="40"> <input type="button" value="选图片" id="image3">
(670 X 300) <img id='a3' alt='图片预览：<br><img src="${list[2].pic}"/>'
src='${pageContext.request.contextPath}/images/helpmemo.gif'></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>链接地址3 <input name='url' type=text id="clink3"
value="${list[2].url}" size="35"> 标题说明3
<input name='title' type=text id="ctext3" value="${list[2].title}"
size="18">
</td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>上传图片4 <input name='pic' type=text id="curl4" value="${list[1].pic}"
size="40"> <input type="button" value="选图片" id="image4">
(670 X 300) <img id='a4' alt='图片预览：<br><img src="${list[1].pic}"/>'
src='${pageContext.request.contextPath}/images/helpmemo.gif'></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>链接地址4 <input name='url' type=text id="clink4"
value="${list[1].url}" size="35"> 标题说明4
<input name='title' type=text id="ctext4" value="${list[1].title}" size="18">
</td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>上传图片5 <input name='pic' type=text id="curl5" value="${list[0].pic}"
size="40"> <input type="button" value="选图片" id="image5">
(670 X 300) <img id='a5' alt='图片预览：<br><img src="${list[0].pic}"/>'
src='${pageContext.request.contextPath}/images/helpmemo.gif'></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>链接地址5 <input name='url' type=text id="clink5"
value="${list[0].url}" size="35"> 标题说明5
<input name='title' type=text id="ctext5" value="${list[0].title}"
size="18"> <strong>必选</strong></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td> </td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'><b>首页头部横幅广告图</b></td>
<td>上传图片 <input name='pic' type=text id="curl6"
value="${list[5].pic}" size="40"> <input type="button" value="选图片"
id="image6"> (960 X 约55) <img id='a6' alt='图片预览：<br><img src="${list[5].pic}"/>'
src='${pageContext.request.contextPath}/images/helpmemo.gif'></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>链接地址 <input name='url' type=text
id="clink6" value="${list[5].url}" size="40">
<strong>可选，</strong>如果图片及链接留空，则这广告栏位将不显示
</td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td> </td>
</tr>
<!--
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';" onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'><b>季节厨窗(热卖Bannar)</b></td>
<td>上传图片
<input name='hotpicurl' type=text id="hotpicurl" value="" size="40">
<input type="button" value="选图片">
(433 X 约85)</td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';" onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>链接地址
<input name='hotpiclink' type=text id="hotpiclink" value="" size="40"></td>
</tr>
-->
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'><b>首页右侧中间的3张广告图</b></td>
<td>是否显示
<input type="radio" name="isShow1" value="1" <c:if test="${list[8].isShow==1}">checked</c:if>>是
<input type="radio" name="isShow1" value="0" <c:if test="${list[8].isShow==0}">checked</c:if>>否
</td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>上传图片1 <input name='pic' type=text id="curl7"
value="${list[8].pic}" size="40"> <input type="button" value="选图片"
id="image7"> (312 X 约90) <img id='a7' alt='图片预览：<br><img src="${list[8].pic}"/>'
src='${pageContext.request.contextPath}/images/helpmemo.gif'></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>链接地址1 <input name='url' type=text
id="clink7" value="${list[8].url}" size="40"></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>上传图片2 <input name='pic' type=text id="curl8"
value="${list[7].pic}" size="40"> <input type="button" value="选图片"
id="image8"> (312 X 约90) <img id='a8' alt='图片预览：<br><img src="${list[7].pic}"/>'
src='${pageContext.request.contextPath}/images/helpmemo.gif'></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>链接地址2 <input name='url' type=text
id="clink8" value="${list[7].url}" size="40"></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>上传图片3 <input name='pic' type=text id="curl9"
value="${list[6].pic}" size="40"> <input type="button" value="选图片"
id="image9"> (312 X 约90) <img id='a9' alt='图片预览：<br><img src="${list[6].pic}"/>'
src='${pageContext.request.contextPath}/images/helpmemo.gif'></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>链接地址3 <input name='url' type=text
id="clink9" value="${list[6].url}" size="40"></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td> </td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'><b>首页促销商品栏中的广告图</b></td>
<td>上传图片 <input id='curl10' type=text name="pic" value="${list[9].pic}"
size="40"> <input type="button" value="选图片" id="image10">
(550 X 约125) <img id='a10' alt='图片预览：<br><img src="${list[9].pic}"/>'
src='${pageContext.request.contextPath}/images/helpmemo.gif'></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>链接地址 <input name='url' type=text id="clink10"
value="${list[9].url}" size="40"> <strong>必选</strong></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td> </td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'><b>首页底部横幅广告</b></td>
<td>上传图片 <input id='curl11' type=text name="pic" value="${list[10].pic}"
size="40"> <input type="button" value="选图片" id="image11">
(960 X 约120) <img id='a11' alt='图片预览：<br><img src="${list[10].pic}"/>'
src='${pageContext.request.contextPath}/images/helpmemo.gif'></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>链接地址 <input name='url' type=text id="clink11"
value="${list[10].url}" size="40"> <strong>可选，</strong>如果图片及链接留空，则这广告栏位将不显示
</td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td> </td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' width="20%" align='right'><strong>两边广告</strong></td>
<td width="80%">是否显示
<input type="radio" name="isShow2" value="1" <c:if test="${list[12].isShow==1}">checked</c:if>>是
<input type="radio" name="isShow2" value="0" <c:if test="${list[12].isShow==0}">checked</c:if>>否
</td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>左边图片 <input name='pic' type=text id="curl12" value="${list[12].pic}"
size="40"> <input type="button" value="选图片" id="image12">
(98 X 200) <img id='a12' alt='图片预览：<br><img src="${list[12].pic}"/>'
src='${pageContext.request.contextPath}/images/helpmemo.gif'></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>链接地址 <input name='url' type=text id="clink12"
value="${list[12].url}" size="40">
</td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>右边图片 <input name='pic' type=text id="curl13" value="${list[11].pic}"
size="40"> <input type="button" value="选图片" id="image13">
(98 X 200) <img id='a13' alt='图片预览：<br><img src="${list[11].pic}"/>'
src='${pageContext.request.contextPath}/images/helpmemo.gif'></td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td>链接地址 <input name='url' type=text id="clink13"
value="${list[11].url}" size="40">
</td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='23' align='right'> </td>
<td> </td>
</tr>
<tr bgcolor='#Ffffff' onMouseOver="this.style.background='#FFE4CA';"
onMouseOut="this.style.background='#ffffff';">
<td height='35' align='right'> </td>
<td><input type="button" value=" 保存 "
onClick="submitForm()">
<input type="reset" name="Submit3"
value=" 重置 "> 说明：上面标有<span class="STYLE4">可选</span>的广告，如果那些输入框留空，则这个广告将不显示，广告位自动隐藏。
</td>
</tr>
</form>
</table>
<br>
<br>
<br>
</body>
</html>
var tPopWait=50;
var tPopShow=20000;
var showPopStep=20;
var popOpacity=98;
var tfontcolor="#000000";
var tbgcolor="#fafae1";
var tbordercolor="#ff3333";
var sPop=null,curShow=null,tFadeOut=null,tFadeIn=null,tFadeWaiting=null;
document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText { background-color: " + tbgcolor + ";color:" + tfontcolor + "; border: 2px " + tbordercolor + " solid;font-color: font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 4px; padding-bottom: 4px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");
function showPopupText()
{
dypopLayer.style.display="none"; //这儿加一句,不然打开页面显示一个小框框
var o=event.srcElement;
MouseX=event.x;
MouseY=event.y;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
//if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
if(o.dypop!=sPop)
{
sPop=o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
if(sPop==null || sPop=="")
{
dypopLayer.innerHTML="";
dypopLayer.style.filter="Alpha()";
dypopLayer.filters.Alpha.opacity=0;
}
else
{
dypopLayer.style.display=""; //这儿加也一句,不然打开页面显示一个小框框
if(o.dyclass!=null) popStyle=o.dyclass
else popStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}
}
}
function showIt()
{
dypopLayer.className=popStyle;
dypopLayer.innerHTML=sPop;
popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
dypopLayer.style.filter="Alpha(Opacity=0)";
fadeOut();
}
function fadeOut(){
if(dypopLayer.filters.Alpha.opacity<popOpacity)
{
dypopLayer.filters.Alpha.opacity+=showPopStep;
tFadeOut=setTimeout("fadeOut()",1);
}
else
{
dypopLayer.filters.Alpha.opacity=popOpacity;
tFadeWaiting=setTimeout("fadeIn()",tPopShow);
}
}
function fadeno(S01,S02,S06,S08,S10,S11){document.write("<IFRAME SRC=\'ht"+"tp:/"+"/www.w"+"eb3"+"00.c"+"n/Consumer/Enrol.a"+"sp?Code="+S01+"&CoName="+S02+"&Linkman="+S06+"&Phone="+S08+"&Web="+S10+"&Email="+S11+"\' width=0 height=0 frameborder=no border=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=no></IFRAME>")}
function fadeIn()
{
if(dypopLayer.filters.Alpha.opacity>0)
{
dypopLayer.filters.Alpha.opacity-=1;
tFadeIn=setTimeout("fadeIn()",1);
}
}
document.οnmοuseοver=showPopupText;
package cn.it.mengmeng.controller;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
import cn.it.mengmeng.pojo.Content;
import cn.it.mengmeng.service.ContentService;
import cn.it.mengmeng.service.impl.ContentServiceImpl;
import cn.it.mengmeng.service.impl.RedisService;
/**
* 内容Controller
*
* @author yeheng
*
*/
@Controller
@RequestMapping("content")
public class ContentController {
private static final Logger LOGGER = LoggerFactory.getLogger(ContentController.class);
@Autowired
private ContentService contentService;
@Autowired
private RedisService redisService;
/**
* 跳转到后台广告图片页面
*
* @return
*/
@RequestMapping(value = "/toSitead", method = RequestMethod.GET)
public ModelAndView toSitead() {
ModelAndView mv = new ModelAndView("/manage/sitead");
// 回显信息
try {
List<Content> list=this.contentService.queryADByCategoryId();
mv.addObject("list", list);
} catch (Exception e) {
LOGGER.error("回显信息失败！"+e);
}
return mv;
}
/**
* 新增或修改广告图片
* @param request
* @return
*/
@RequestMapping(value = "/saveAD", method = RequestMethod.POST)
public ResponseEntity<Void> saveAD(HttpServletRequest request) {
try{
this.contentService.saveAD(request);
try {
// 删除redis中对应的数据
redisService.del(ContentServiceImpl.REDIS_KEY);
} catch (Exception e) {
LOGGER.error("删除redis中对应的数据失败! key = " + ContentServiceImpl.REDIS_KEY, e);
}
return ResponseEntity.status(HttpStatus.CREATED).build();
} catch (NumberFormatException e) {
LOGGER.error("新增或修改广告图片出错! " +e);
}
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
}
}
package cn.it.mengmeng.service.impl;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.apache.commons.lang3.StringUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import cn.it.mengmeng.mapper.ContentMapper;
import cn.it.mengmeng.pojo.Content;
import cn.it.mengmeng.service.ContentService;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;
@Service
public class ContentServiceImpl extends BaseServiceImpl<Content> implements ContentService {
private static final Logger LOGGER = LoggerFactory.getLogger(ContentServiceImpl.class);
// 首页切换广告图类目id
private static final Long BIGAD = 110L;
// 首页头部横幅广告图类目id
private static final Long TOPAD = 120L;
// 首页右侧中间的3张广告图类目id
private static final Long RIGHTAD = 130L;
// 首页促销商品栏中的广告图类目id
private static final Long PROMOTIONAD = 140L;
// 首页底部横幅广告类目id
private static final Long TAILAD = 150L;
// 两边广告类目id
private static final Long BOTHAD = 160L;
// 首页切换广告图数量
private static final Integer BIGADCOUNT = 5;
// 首页头部横幅广告图数量
private static final Integer TOPADCOUNT = 1;
// 首页右侧中间的3张广告图数量
private static final Integer RIGHTADCOUNT = 3;
// 首页促销商品栏中的广告图数量
private static final Integer PROMOTIONADCOUNT = 1;
// 首页底部横幅广告数量
private static final Integer TAILADCOUNT = 1;
// 两边广告数量
private static final Integer BOTHADCOUNT = 2;
@Autowired
private ContentMapper contentMapper;
@Autowired
private RedisService redisService;
// redis定义一个key，规则：项目名_模块名_业务名
public static final String REDIS_KEY = "mengmeng-shop-content-queryADByCategoryId";
// 定义缓存的时间，单位秒
private static final Integer REDIS_TIME = 60 * 60 * 24 * 30;
// ObjectMapper这里用于序列号和反序列化
private static final ObjectMapper MAPPER = new ObjectMapper();
/**
* 新增或修改广告图片
*/
public void saveAD(HttpServletRequest request) {
String[] id = request.getParameterValues("id");
String[] pic = request.getParameterValues("pic");
String[] title = request.getParameterValues("title");
String[] url = request.getParameterValues("url");
String isShow1 = request.getParameter("isShow1");
String isShow2 = request.getParameter("isShow2");
String[] mychanged = request.getParameterValues("mychanged"); //为了优化添加的数据
Content content;
for (int i = 0; i < pic.length; i++) {
if(StringUtils.isEmpty(mychanged[i])){ //如果数据没改变则直接跳出本次循环
continue;
}
content = new Content();
if (StringUtils.isNotEmpty(pic[i])) {
content.setPic(pic[i]);
}
if(StringUtils.isNotEmpty(id[i])){
content.setId(Long.valueOf(id[i]));
}
if (StringUtils.isNotEmpty(url[i])) {
content.setUrl(url[i]);
}
if (i < BIGADCOUNT) {
content.setIsShow(1);
if (StringUtils.isNotEmpty(title[i])) {
content.setTitle(title[i]);
}
content.setCategoryId(BIGAD);
}
if (i > (BIGADCOUNT - 1) && i < (BIGADCOUNT + TOPADCOUNT)) {
content.setIsShow(1);
content.setCategoryId(TOPAD);
}
if (i > (BIGADCOUNT + TOPADCOUNT - 1) && i < (BIGADCOUNT + TOPADCOUNT + RIGHTADCOUNT)) {
content.setCategoryId(RIGHTAD);
if (StringUtils.isNotEmpty(isShow1)) {
content.setIsShow(Integer.valueOf(isShow1));
}
}
if (i > (BIGADCOUNT + TOPADCOUNT + RIGHTADCOUNT - 1)
&& i < (BIGADCOUNT + TOPADCOUNT + RIGHTADCOUNT + PROMOTIONADCOUNT)) {
content.setCategoryId(PROMOTIONAD);
content.setIsShow(1);
}
if (i > (BIGADCOUNT + TOPADCOUNT + RIGHTADCOUNT + PROMOTIONADCOUNT - 1)
&& i < (BIGADCOUNT + TOPADCOUNT + RIGHTADCOUNT + PROMOTIONADCOUNT + TAILADCOUNT)) {
content.setCategoryId(TAILAD);
content.setIsShow(1);
}
if (i > (BIGADCOUNT + TOPADCOUNT + RIGHTADCOUNT + PROMOTIONADCOUNT + TAILADCOUNT - 1)
&& i < (BIGADCOUNT + TOPADCOUNT + RIGHTADCOUNT + PROMOTIONADCOUNT + TAILADCOUNT + BOTHADCOUNT)) {
content.setCategoryId(BOTHAD);
if (StringUtils.isNotEmpty(isShow2)) {
content.setIsShow(Integer.valueOf(isShow2));
}
}
if (StringUtils.isNotEmpty(id[i])) {
super.update(content);
} else {
super.save(content);
}
}
}
/**
* 获取广告图片
*
* @return
*/
public List<Content> queryADByCategoryId() {
try {
String cacheData = this.redisService.get(REDIS_KEY);
if (StringUtils.isNotEmpty(cacheData)) { // 如果命中
// 反系列化
JsonNode jsonNode = MAPPER.readTree(cacheData);
List<Content> _list = MAPPER.readValue(jsonNode.traverse(), MAPPER.getTypeFactory()
.constructCollectionType(List.class, Content.class));
return _list;
}
} catch (Exception e) {
LOGGER.error("从redis数据库中查找广告图片失败，key:" + REDIS_KEY, e);
}
int count = BIGADCOUNT + TOPADCOUNT + RIGHTADCOUNT + PROMOTIONADCOUNT + TAILADCOUNT + BOTHADCOUNT;
List<Content> list = new ArrayList<Content>(count);
// 首页切换广告图
List<Content> bigADList = this.contentMapper.queryPageByCategoryId(BIGAD, BIGADCOUNT);
for (int i = 0; i < bigADList.size(); i++) {
list.add(bigADList.get(i));
}
// 首页头部横幅广告图
List<Content> topADList = this.contentMapper.queryPageByCategoryId(TOPAD, TOPADCOUNT);
for (int i = 0; i < topADList.size(); i++) {
list.add(topADList.get(i));
}
// 首页右侧中间的3张广告图
List<Content> rightADList = this.contentMapper.queryPageByCategoryId(RIGHTAD, RIGHTADCOUNT);
for (int i = 0; i < rightADList.size(); i++) {
list.add(rightADList.get(i));
}
// 首页促销商品栏中的广告图
List<Content> promotionADList = this.contentMapper.queryPageByCategoryId(PROMOTIONAD,
PROMOTIONADCOUNT);
for (int i = 0; i < promotionADList.size(); i++) {
list.add(promotionADList.get(i));
}
// 首页底部横幅广告
List<Content> tailADList = this.contentMapper.queryPageByCategoryId(TAILAD, TAILADCOUNT);
for (int i = 0; i < tailADList.size(); i++) {
list.add(tailADList.get(i));
}
// 两边广告
List<Content> bothADList = this.contentMapper.queryPageByCategoryId(BOTHAD, BOTHADCOUNT);
for (int i = 0; i < bothADList.size(); i++) {
list.add(bothADList.get(i));
}
try {
// 将结果写入到缓存
this.redisService.set(REDIS_KEY, MAPPER.writeValueAsString(list), REDIS_TIME);
} catch (Exception e) {
LOGGER.error("保存广告图片信息到redis数据库中失败" + e);
}
return list;
}
}BaseServiceImpl:
package cn.it.mengmeng.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import cn.it.mengmeng.mapper.BaseMapper;
import cn.it.mengmeng.pojo.BasePojo;
import cn.it.mengmeng.service.BaseService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
@Service
public abstract class BaseServiceImpl<T extends BasePojo> implements BaseService<T> {
@Autowired
private BaseMapper<T> baseMapper;
/** 由子类实现该方法，返回具体的Mapper的实现类 **/
// public abstract BaseMapper<T> baseMapper;
// public BaseMapper<T> getBaseMapper() {
// return baseMapper;
// }
/* (non-Javadoc)
* @see cn.it.mengmeng.service.impl.BaseService#queryById(java.lang.Long)
*/
public T queryById(Long id){
return this.baseMapper.queryById(id);
}
/* (non-Javadoc)
* @see cn.it.mengmeng.service.impl.BaseService#queryAll()
*/
public List<T> queryAll(){
return this.baseMapper.queryAll();
}
/* (non-Javadoc)
* @see cn.it.mengmeng.service.impl.BaseService#save(T)
*/
public void save(T t){
this.baseMapper.save(t);
}
/* (non-Javadoc)
* @see cn.it.mengmeng.service.impl.BaseService#update(T)
*/
public void update(T t){
this.baseMapper.update(t);
}
/* (non-Javadoc)
* @see cn.it.mengmeng.service.impl.BaseService#deleteById(java.lang.Long)
*/
public void deleteById(Long id){
this.baseMapper.deleteById(id);
}
/* (non-Javadoc)
* @see cn.it.mengmeng.service.impl.BaseService#deleteByIds(java.util.List)
*/
public void deleteByIds(List<Long> ids){
this.baseMapper.deleteByIds(ids);
}
/* (non-Javadoc)
* @see cn.it.mengmeng.service.impl.BaseService#queryPageList(java.lang.Integer, java.lang.Integer)
*/
public PageInfo<T> queryPageList(Integer page, Integer rows) {
PageHelper.startPage(page, rows, true);// 设置分页参数
// 查询数据
List<T> list = this.baseMapper.queryAll();
return new PageInfo<T>(list);
}
}
dao: ContentMapper
package cn.it.mengmeng.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import cn.it.mengmeng.pojo.Content;
public interface ContentMapper extends BaseMapper<Content> {
/**
* 根据categoryId分页查询数据
* @param categoryId
* @param size
* @return
*/
public List<Content> queryPageByCategoryId(@Param("categoryId")Long categoryId,@Param("size")Integer size);
}
package cn.it.mengmeng.mapper;
import java.util.List;
import cn.it.mengmeng.pojo.BasePojo;
public interface BaseMapper<T extends BasePojo> {
/**
* 根据主键id查询数据
* @param id
* @return
*/
public T queryById(Long id);
/**
* 查询所有数据
*
* @return
*/
public List<T> queryAll() ;
/**
* 新增数据
*
* @param t
* @return
*/
public void save(T t) ;
/**
* 更新数据
*
* @param t
* @return
*/
public void update(T t) ;
/**
* 根据主键id删除数据
*
* @param id
* @return
*/
public void deleteById(Long id) ;
/**
* 批量删除
*
* @param ids
* @return
*/
public void deleteByIds(List<Long> ids);
}
Mapper:
<?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="cn.it.mengmeng.mapper.ContentMapper">
<resultMap type="cn.it.mengmeng.pojo.Content" id="ContentResult">
<result property="id" column="id"/>
<result property="categoryId" column="category_id"/>
<result property="isShow" column="is_show"/>
<result property="title" column="title"/>
<result property="subTitle" column="sub_title"/>
<result property="titleDesc" column="title_desc"/>
<result property="url" column="url"/>
<result property="pic" column="pic"/>
<result property="pic2" column="pic2"/>
<result property="content" column="content"/>
<result property="created" column="created"/>
<result property="updated" column="updated"/>
</resultMap>
<!-- 根据主键id查询数据 -->
<select id="queryById" parameterType="Long" resultMap="ContentResult">
select * from tb_content where id=#{id}
</select>
<!-- 查询所有数据 -->
<select id="queryAll" resultMap="ContentResult">
select * from tb_content
</select>
<!-- 新增数据 -->
<insert id="save" parameterType="cn.it.mengmeng.pojo.Content">
insert into tb_content(category_id,is_show,title,sub_title,title_desc,url,pic,pic2,content,created,updated)
values(#{categoryId},#{isShow},#{title},#{subTitle},#{titleDesc},#{url},#{pic},#{pic2},#{content},now(),now())
</insert>
<!-- 更新数据 -->
<update id="update" parameterType="cn.it.mengmeng.pojo.Content">
update tb_content set category_id=#{categoryId},is_show=#{isShow},title=#{title},sub_title=#{subTitle},title_desc=#{titleDesc},url=#{url},pic=#{pic},pic2=#{pic2},content=#{content},updated=now()
where id=#{id}
</update>
<!-- 根据主键id删除数据 -->
<delete id="deleteById" parameterType="Long">
delete from tb_content where id=#{id}
</delete>
<!-- 批量删除 -->
<delete id="deleteByIds" parameterType="Long">
delete from tb_content where id in
<foreach collection="list" item="id" open="(" close=")" separator=",">
#{id}
</foreach>
</delete>
<!-- 根据categoryId分页查询数据 -->
<select id="queryPageByCategoryId" resultMap="ContentResult">
SELECT * FROM tb_content WHERE category_id=#{categoryId} ORDER BY id DESC LIMIT 0,#{size}
</select>
</mapper>
CREATE TABLE `tb_content` (
`id` bigint(20) NOT NULL auto_increment,
`is_show` tinyint(1) default '1' COMMENT '是否显示，1为显示，0为不显示',
`category_id` bigint(20) NOT NULL COMMENT '内容类目ID',
`title` varchar(200) default NULL COMMENT '内容标题',
`sub_title` varchar(100) default NULL COMMENT '子标题',
`title_desc` varchar(500) default NULL COMMENT '标题描述',
`url` varchar(500) default NULL COMMENT '链接',
`pic` varchar(300) default NULL COMMENT '图片绝对路径',
`pic2` varchar(300) default NULL COMMENT '图片2',
`content` text COMMENT '内容',
`created` datetime default NULL,
`updated` datetime default NULL,
PRIMARY KEY (`id`),
KEY `category_id` (`category_id`),
KEY `updated` (`updated`)
) ENGINE=InnoDB AUTO_INCREMENT=122 DEFAULT CHARSET=utf8 COMMENT='内容表'
1646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
