A049_CMS_UEDitor_轮播图

1. 内容介绍

Ueditor
轮播图CRUD

2.UEditor

2.1 什么是UEditor

UEditor是百度的一款所见即所得的编辑器(富文本编辑器)，大家可以看看一下这款编辑器的效果

2.2 使用UEditor 步骤

2.2.1 导入UEditor的文件

2.2.2 把jar包导入当前项目中

2.2.3 引入UEditor的文件

<!-- 配置文件 -->
<script type="text/javascript"
				src="/static/js/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript"
				src="/static/js/ueditor/ueditor.all.js"></script>

3.UEditor项目集成

3.1.1 修改文章界面代码

<div class="form-group row">
	 <label class="control-label col-md-2">文章内容</label>
	 <div class="col-md-10">
	      <!-- 加载编辑器的容器 -->
	      <script id="container" name="content" type="text/plain">
	      </script>
	      <!-- 实例化编辑器 -->
	      <script type="text/javascript">
	           UE.getEditor('container',{
	               initialFrameHeight:330 ,//编辑器初始化高度
	               zIndex : 99999999
	           });                          
	       </script>
	 </div>
</div>

3.1.2 添加弹出框清空UEditor

	$("#saveForm]").val("clearForm");
	var ue = UE.getEditor('container');
	//清空UEditor中的内容
	ue.ready(function() {
			ue.setContent("");
	});
	$("#openModal").modal("show");

3.1.3 修改弹出框回显UEditor内容

//修改代码	  $("#table-demo-baseCode").on("click","a[data-article]",function(){
	//重置
	$("#saveForm]").val("clearForm");
	//回显数据
	var article = $(this).data("article");
	//获取UEDitor对象
	var ue = UE.getEditor('container');
	//加载内容回显
	ue.ready(function() {
	    ue.setContent(article.content);
	});
	$("#saveForm input[name='title']").val(article.title);
	$("#saveForm select[name='typeId']").val(article.typeId);
	$("#saveForm input[name='url']").val(article.url);
	$("#saveForm input[name='id']").val(article.id);
	$("#saveForm input[name='enable']").val([article.enable?1:0]);
	$("#saveForm textArea").val(article.content);
	$("#openModal").modal("show");
});

4.轮播图

4.1 domain设计

public class Slide {
	private Long id;
	//图片名
	private String name;
	//图片路径
	private String path;
	//创建时间
	private Date createDate = new Date();
	//默认启用状态
	private Boolean enable;
}

4.2 添加/修改轮播图

@Override
public void save(Slide slide, HttpServletRequest request) throws IOException {
	MultipartFile image = null;
	//判断是否是上传请求
	if (ServletFileUpload.isMultipartContent(request)){
	    MultipartHttpServletRequest multipartRequest
		=WebUtils.getNativeRequest(request, MultipartHttpServletRequest.class);
		//获取前端传递的image对象
	   image = multipartRequest.getFile("image");
	}
	//如果image不为空，就证明有上传附件
	if(image  != null){
	   //开始上传附件
	   String rootPath = request.getServletContext().getRealPath("/");
	   //就证明是修改，要把之前的图片给干掉
	   if(slide.getId() != null){
	      String path  =
		  slideMapper.selectById(slide.getId()).getPath();
	      //把上传附件的绝对路径进行拼接
	      File file = new File(rootPath,path);
		  //如果文件存在，则删除
	      if(file.exists()){
	         file.delete();
	      }
	    }	
	    //获取附件名
	    String fileName = image.getOriginalFilename();
	    //新名字
	    slide.setName(fileName);
	    //获取附件名的后缀
	    String extension = FilenameUtils.getExtension(fileName);
	    //随机产生新名字
	    String newFileName = System.currentTimeMillis()+"."+extension;
	    //存储路径
	    String path = Constant.UPLOADPATH+newFileName;	
	    //拼接文件对象
	    File file = new File(rootPath,path);
	    //判断是否有父文件夹，如果没有，则创建
	    if(!file.getParentFile().exists()){
	        file.mkdirs();
	    }
	    FileOutputStream fileOutputStream = new FileOutputStream(file);
	    //开始上传
		IOUtils.copy(image.getInputStream(), fileOutputStream);
	    fileOutputStream.close();
		//设置上传路径
	    slide.setPath(path);
	 }     
	 if(slide.getId() == null){
	     slideMapper.save(slide);
	 }else{
	     slideMapper.update(slide);
	 }
}

4.3 删除轮播图

@Override
public void remove(Long id, HttpServletRequest request) {
	//获取根绝对路径
	String rootPath = request.getServletContext().getRealPath("/");
	//根据id查询轮播图对象
	Slide slide = slideMapper.selectById(id);
	//把根路径和轮播图的相对路径进行拼接，生成file的绝对路径
	File file = new File(rootPath,slide.getPath());
	//如果文件则删除
	if(file.exists()){
		file.delete();
	}
	//删除数据
	slideMapper.delete(id);
}

4.4 前端轮播图ajax上传附件

4.4.1 引入js文件

//引入jquery-from js文件，拥有清空form表单功能，也拥有ajax上传功能
<script src="/static/js/jquery-form.js"></script>

4.4.2 前台form表单html代码

<div class="modal fade" id="openModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
		   </button>
        </div>
        <div class="modal-body">
            <form class="form-horizontal" id="saveForm" enctype="multipart/form-data">
                <input type="hidden" name="id">
                <div class="form-group row">
                     <label class="control-label col-md-2">上传附件</label>
                     <div class="col-md-10">
                          <input class="form-control"  name="image" type="file">
                     </div>
                </div>
                <div class="form-group row">
                     <label 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" 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>
              <button type="button" data-method="save"  class="btn btn-primary">保存</button>
          </div>
     </div>
</div>

4.4.3 ajax上传附件

$("#saveForm").ajaxSubmit({
	url:"/system/slide/save",  //提交的地址
	type: "post",  //提交的方式
	dataType: "json",  //返回的数据类型
	success:function(result){
		if(result.success){
			//关闭窗体
			$('#openModal').modal('hide')
			//刷新列表
			GridManager.refreshGrid("demo-baseCode");
		}
	}
});

4.4.4 前台动态显示轮播图（sql语句）

<select id="selectListByEnable" resultType="Slide">
    select * from t_slide where enable=1
</select>

4.4.5 前台动态显示轮播图（js代码）

//获取启用状态的轮播图
$.get("/index/selectBanner",function(result){
    //把id为banner-swiper中内容清空
	$("#banner-swiper").html("");
	//循环数据，动态拼接代码
	$.each(result,function(i,o){
			$("#banner-swiper").append('<a target="_blank" href=""          
			class="swiper-slide swiper-lazy" 
			data-background="'+o.path+'"><div class="swiper-lazy-preloader"></div></a>');
			})
	      
	});
	 //轮播动画效果
	var bannerSwiper = new Swiper ('#banner.swiper-container', {
		autoplay: { disableOnInteraction: false },
		loop: true,
		pagination: {
			   el: '.swiper-pagination',
			   bulletElement: 'div',
			   clickable: true
		},
		lazy: true
	});
	
	$("#banner .swiper-slide").mouseenter(function() {
			bannerSwiper.autoplay.stop();
	}).mouseleave(function() {
			bannerSwiper.autoplay.start();
	}); 
});

5.课程总结

今日主要是对UEditor的熟练使用还有就是轮播图附件的上传的熟练使用，今日知识点总体来说还是比较难的，需要大家下来多去练习和回顾

6.重点知识

1.UEditor的使用
2.springMvc上传使用

7.课后练习

今日课堂代码都敲上一篇

8.今日面试题

请说出常见的设计模式，并且你哪些场景用到该设计模式

9.每日一练

Sql语句的外连接和内连接的用法，并且去感受他们的不同之处