目录
- 浏览次数
- 页面加载发送请求
- 后台处理请求
- 前台展示
- 展示日期
- 富文本编辑
- static下引入富文本资源文件夹
- 模态框文本域替换成如下内容
- 底部引入相关文件
- 调整模态框样式
- 把富文本选项移到模态框前面
- 上传表情或图片等富文本
- 添加操作手动清空富文本编辑器内容
- 修改操作手动回显富文本编辑器内容
- 轮播图
- 侧边菜单栏添加轮播图管理
- 轮播图跳转和页面准备
- 查询所有后端实现
- 页面展示轮播图
- 高级查询，图片后台展示
- 上传图片
- 修改添加或修改模态框
- 配置上传解析器
- 后端代码
- tips:文件上传功能
浏览次数
文章页面浏览次数的实现
页面加载发送请求
<script type="text/javascript">
$(function(){// 页面加载
// 地址栏路径
var href = location.href;
// alert(href); http://localhost/static/template/1611537130388.html
// 获取url
var url = href.substring(href.lastIndexOf("/")+1);
// alert(url)
$.ajax({
type: "post",
url: "/home/updateClickCountByUrl", //后台路径
data: {"url":url},
dataType: "json",
success: function(msg){
console.debug(msg.clickCount);
}
});
})
</script>
后台处理请求
HomeController
/**
* @Description:根据url更新点击量
*/
@RequestMapping("/updateClickCountByUrl")
@ResponseBody
public Article updateClickCountByUrl(String url){
return service.updateClickCountByUrl(url);
}
ArticleServiceImpl
@Override
public Article updateClickCountByUrl(String url) {
// 根据url查询数据 article
Article article = mapper.findArticleByUrl(url);
// 获取点击量
Integer count = article.getClickCount();
// 自增一再set回去
article.setClickCount(count+1);
mapper.update(article);
return article;
}
ArticleMapper
<!-- Article findArticleByUrl(String url); -->
<select id="findArticleByUrl" resultType="article">
select * from t_article where url=#{url}
</select>
前台展示
<span><span b>分类: </span>视频教程</span><span><span b>浏览: </span><span id="clickCount">0</span></span>
<script type="text/javascript">
$(function(){// 页面加载
// 地址栏路径
var href = location.href;
// alert(href); http://localhost/static/template/1611537130388.html
// 获取url
var url = href.substring(href.lastIndexOf("/")+1);
// alert(url)
$.ajax({
type: "post",
url: "/home/updateClickCountByUrl",
data: {"url":url},
dataType: "json",
success: function(msg){
//console.debug(msg.clickCount);
$("#clickCount").html(msg.clickCount);
}
});
})
</script>
展示日期
数据由添加操作生成页面的时候Article对象里的数据进到模板里来生成
<div class="info">
<span><span b>日期: </span><span>${createDate ?date}</span></span><span><span b>浏览: </span><span id="clickCount">0</span></span>
</div>
富文本编辑
图片与视频等非文本多媒体内容一般放入本地工程即本地服务器或云端三方服务器中
案例参考：http://fex.baidu.com/ueditor/
static下引入富文本资源文件夹
模态框文本域替换成如下内容
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
底部引入相关文件
配置文件，编辑器源码文件，和实例化编辑器，修改路径，调整z轴显示可选表情
<!-- 配置文件 -->
<script type="text/javascript" src="/static/ueditor/ueditor.config.js"> </script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/static/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
调整模态框样式
大模态框:来自bootstarp官网
修改文字和框体之间空隙:col-md-?
把富文本选项移到模态框前面
加上大数字的z轴
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container',{
zIndex: 8888
});
</script>
上传表情或图片等富文本
默认保存文件到项目中，地址保存进数据库。可在config.json中修改上传参数。
添加操作手动清空富文本编辑器内容
注意重启服务后清空缓存
// 添加操作 绑定添加按钮 事件委托
$("body").on("click","#addBtn",function(){
// 清空form中数据
$("#saveForm").clearForm();
// 手动清空富文本编辑器内容
var ue = UE.getEditor('container');
ue.ready(function(){
ue.setContent(''); //赋值给UEditor
});
// 手动清空隐藏域id
$("#saveId").val("");
// 弹出模态框
$("#saveModal").modal("show");
})
修改操作手动回显富文本编辑器内容
注意重启服务后清空缓存
// 修改操作 绑定修改按钮 事件委托
$("body").on("click","a[data-row]",function(){
// 清空form中数据
$("#saveForm").clearForm(); // clearForm()、ajaxSubmit()都是jquery-form.js插件的方法
// 数据回显 获取数据
var row = $(this).data("row");
// console.debug(row);
// 数据回显 插件提供的方法
$("#saveForm").setForm(row);
// 手动回显富文本编辑器内容
var ue = UE.getEditor('container');
ue.ready(function(){
ue.setContent(row.content); //赋值给UEditor
});
// 弹出模态框
$("#saveModal").modal("show");
})
轮播图
侧边菜单栏添加轮播图管理
index.jsp的leftMenu.jsp添加轮播图
<div class="app-sidebar__overlay" data-toggle="sidebar"></div>
<aside class="app-sidebar">
<div class="app-sidebar__user">
<img class="app-sidebar__user-avatar" width="48px" height="48px" src="/static/system/images/m1.jpg" alt="User Image">
<div>
<p class="app-sidebar__user-name">John Doe</p>
</div>
</div>
<ul class="app-menu">
<li>
<a class="app-menu__item" href="/system/article/index">
<!-- 通过controller跳转到/WEB-INF/views/article/article.jsp -->
<i class="app-menu__icon fa fa-dashboard"></i>
<span class="app-menu__label">文章管理</span>
</a>
</li>
<li>
<a class="app-menu__item" href="/system/slide/index">
<i class="app-menu__icon fa fa-dashboard"></i>
<span class="app-menu__label">轮播图管理</span>
</a>
</li>
</ul>
</aside>
轮播图跳转和页面准备
新建slideController
@Controller
@RequestMapping("/system/slide")
public class SlideController {
@RequestMapping("/index")
public String index(){
return "slide/slide";
}
}
复制Article文件夹和Article.jsp文件到同级目录并改名slide和slide.jsp，修改slide.js引入路径
复制Article文件夹和Article.js文件到同级目录并改名slide和slide.js，slide.js中修改findAll路径
查询所有后端实现
slide.js
document.querySelector('#table-demo-ajaxPageCode').GM({
gridManagerName: 'demo-ajaxPageCode', //名字随意
ajaxData: '/system/slide/findAll', //改成findAll
ajaxType: 'POST',
supportAjaxPage: true, //是否支持分页
sizeData: [5,10,15,20],
pageSize: 5,
currentPageKey: "localPage",
pageSizeKey: "pageSize",
supportAdjust: false,
supportDrag: false,
columnData: [
后端代码
略
页面展示轮播图
document.querySelector('#table-demo-ajaxPageCode').GM({
gridManagerName: 'demo-ajaxPageCode', //名字随意
ajaxData: '/system/slide/findAll', //改成findAll
ajaxType: 'POST',
supportAjaxPage: true, //是否支持分页
sizeData: [5,10,15,20],
pageSize: 5,
currentPageKey: "localPage",
pageSizeKey: "pageSize",
supportAdjust: false,
supportDrag: false,
columnData: [
{
key: 'name',
align: "center",
text: '图片名称'
},{
key: 'path',
align: "center",
text: 'path',
},{
key: 'createDate',
align: "center",
text: '日期'
},{
key: 'enable',
align: "center",
text: '是否启用',
template: function(cell, row, index, key){// 模板
//console.debug(cell) // enable属性对应的值
//console.debug(row) // 一行数据的信息 是一个对象
//console.debug(index) // 索引
//console.debug(key) // key对应的字段
return cell?"启用":"禁用";
}
},{
key: 'id',
align: "center",
text: '操作 <a style="color:green" id="addBtn" href="javascript:;">添加</a>',
template: function(cell, row, index, key){// 模板
// row是一个json对象，要转成string
var str = JSON.stringify(row);
// console.debug(str);
// data: 数据必须是标准格式 {'id':10,'name':'zs'}
return '<a style="color:red" data-id="'+cell+'" href="javascript:;">删除</a> '+
"<a style='color:blue' data-row='"+str+"' href='javascript:;'>修改</a>";
}
}
]
});
高级查询，图片后台展示
jsp，js，query，mapper，
SlideQuery
@Data
@AllArgsConstructor
@NoArgsConstructor
public class SlideQuery extends PageQuery{
private String name;
private Boolean enable;
}
mapper
<mapper namespace="cn.itsource.mapper.SlideMapper">
<select id="findAll" resultType="Slide">
select * from t_slide
<include refid="query"></include>
limit #{begin}, #{pageSize}
</select>
<!-- Integer findCount(ArticleQuery aq); -->
<select id="findCount" resultType="int">
select count(id) from t_slide
<include refid="query"></include>
</select>
<!-- void add(Slide slide); -->
<insert id="add">
insert into t_slide(name,path,createDate,enable)
values(#{name},#{path},#{createDate},#{enable})
</insert>
<!-- sql片段 -->
<sql id="query">
<where>
<if test="enable!=null">
and enable = #{enable}
</if>
<if test="name!=null and ''!=name.trim()">
and name like concat('%',trim(#{name}),'%' )
</if>
</where>
</sql>
</mapper>
图片后台展示
{
key: 'path',
align: "center",
text: 'path',
template: function(cell, row, index, key){// 模板
return "<img width='50px' src='"+cell+"'>";
}
},
创建upload文件夹，放入图片，数据库引用路径，前台展示引用图片
tips:删除富文本
上传图片
文件通过上传解析器和IO流代码上传到工程里，信息保存进数据库。
修改添加或修改模态框
<!-- 添加或者修改的模态框 -->
<div class="modal fade bs-example-modal-lg" id="saveModal">
<div class="modal-dialog modal-lg">
<div class="modal-content message_align">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="/system/slide/save" method="post" class="form-horizontal" id="saveForm">
<input type="hidden" name="id" id="saveId">
<div class="form-group row">
<label for="photo" class="control-label col-md-2">上传图片</label>
<div class="col-md-10">
<input class="form-control" type="file" name="photo">
</div>
</div>
<div class="form-group row">
<label for="enable" class="control-label col-md-2" >是否启用</label>
<div class="col-md-10">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" checked="checked" id="enable" name="enable" value="1">启用
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="enable" value="0">禁用
</label>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<a href='javascript:void(0);' id="saveButton" class="btn btn-success" >确定</a>
</div>
</div>
</div>
</div>
配置上传解析器
applicationContext-mvc.xml
<!-- 上传解析器 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 设置上传文件的最大尺寸为1MB -->
<property name="maxUploadSize">
<!-- spring el写法：1MB -->
<value>#{1024*1024*20}</value>
</property>
<!-- 效果同上 -->
<!-- <property name="maxUploadSize" value="1048576" /> -->
</bean>
后端代码
SlideController
@RequestMapping("/save")
@ResponseBody
public AjaxResult save(Slide slide,HttpServletRequest req,MultipartFile photo){
try {
service.save(slide,req,photo);
return new AjaxResult();
} catch (Exception e) {
e.printStackTrace(); // 打印异常信息
return new AjaxResult(false, "保存失败");
}
}
SlideServiceImpl
@Override
public void save(Slide slide, HttpServletRequest req,MultipartFile photo) throws Exception {
// 获取upload路径
String realPath = req.getServletContext().getRealPath("/upload");
File file = new File(realPath);
if(!file.exists()){// 如果路径不存在，就创建一个
file.mkdirs();
}
// 判断photo是否为空
if(photo!=null){// 做上传操作
// 获取文件名
//获取后缀
String oName = photo.getOriginalFilename(); // asldfsadf.jpg
String suffix = oName.substring(oName.lastIndexOf("."));
String name = System.currentTimeMillis()+suffix;
// 准备输入流
InputStream input = photo.getInputStream();
// 输出流
FileOutputStream output = new FileOutputStream(new File(realPath, name));
// 上传的核心代码
IOUtils.copy(input, output);
// 关流
output.close();
input.close();
// name path
slide.setName(name);
slide.setPath("/upload/"+name);
}
// 添加数据库操作
if(slide.getId()==null){
if(photo!=null){
mapper.add(slide);
}
}else{// 修改操作
}
}
SlideMapper
<!-- void add(Slide slide); -->
<insert id="add">
insert into t_slide(name,path,createDate,enable)
values(#{name},#{path},#{createDate},#{enable})
</insert>
tips:文件上传功能
上传三要素 上传解析器 文件上传
