结组作业，第二次冲刺（5）
今天是第二次冲刺的第5天，昨天完成了收藏功能，今天我们准备完成广告功能，可以将广告挂在想要挂的地方，可以是图片，可以是文字，这个功能更可能现在用不到，但是以后可能用的到，以下为今日部分代码：
package com.work.controller; import java.util.Date; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.ModelAndView; import com.work.common.utils.BaseUtil; import com.work.common.utils.JsonUtil; import com.work.pojo.Adver; import com.work.pojo.User; import com.work.service.AdverService; @Controller @RequestMapping("/server/adver") public class AdverController extends BaseUtil{ @Autowired private AdverService adverService; //去广告列表 @RequestMapping("/goAdverList") public ModelAndView goAdverList(ModelAndView mv){ mv.setViewName("server/adverManage/adverList"); return mv; } //获取广告列表 @RequestMapping("/getAdverList") public void getAdverList(HttpServletResponse response,Adver adver,Integer page,Integer limit){ if(page == null){ page = 1; } if(limit == null){ limit = 10; } int totalCount = adverService.getAdverListCount(adver); List<Adver> list = adverService.getAdverList(adver,(page-1) * limit, limit); output(response,JsonUtil.buildJsonByTotalCount(list, totalCount)); } //去添加广告 @RequestMapping("/goAddAdver") public ModelAndView goAddAdver(ModelAndView mv){ mv.setViewName("server/adverManage/addAdver"); return mv; } //添加广告 @RequestMapping("/addAdver") public void addAdver(HttpServletRequest request,HttpServletResponse response,Adver adver){ User serverUser = (User) request.getSession().getAttribute("serverUser"); adver.setCreateTime(new Date()); adver.setUserId(serverUser.getUserId()); adverService.addAdver(adver); output(response,JsonUtil.buildFalseJson(0, "添加成功！")); } //去编辑广告 @RequestMapping("/goUpdateAdver") public ModelAndView goUpdateAdver(ModelAndView mv,Integer id){ Adver adver = adverService.getAdverById(id); mv.addObject("adver", adver); mv.setViewName("server/adverManage/updateAdver"); return mv; } //编辑广告 @RequestMapping("/updateAdver") public void updateAdver(HttpServletResponse response,Adver adver){ adverService.updateAdver(adver); output(response,JsonUtil.buildFalseJson(0, "编辑成功！")); } //删除广告 @RequestMapping("/deleteAdver") public void deleteAdver(HttpServletResponse response,Integer id){ adverService.deleteAdverById(id); output(response,JsonUtil.buildFalseJson(0, "删除成功！")); } }
<!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <c:set var="ctx" value="${pageContext.request.contextPath}" /> <html> <head> <meta charset="utf-8"> <title>添加广告</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" href="${ctx}/server/layui/css/layui.css" media="all" /> <link rel="stylesheet" href="${ctx}/server/font-awesome/css/font-awesome.min.css"> <style type="text/css"> #Images li{ float:left; margin-left:10px; height:300px; margin-bottom:20px; } #Images img{ height:300px; } .img_del{ cursor: pointer; } </style> </head> <body> <div style="margin: 15px;"> <div class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">标题：</label> <div class="layui-input-block"> <input type="text" name="title" autocomplete="off" class="layui-input" lay-verify="title" placeholder="请输入标题" style="width:390px"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">内容：</label> <div class="layui-input-block"> <textarea placeholder="请输入内容" class="layui-textarea" name="content" lay-verify="content"></textarea> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">广告位置：</label> <div class="layui-input-block"> <input type="text" name="position" autocomplete="off" class="layui-input" lay-verify="position" placeholder="请输入位置" style="width:390px"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">图片：</label> <div class="layui-input-block"> <button type="button" class="layui-btn" id="uploadNewImg">图片上传</button> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"></label> <ul class="layer-photos-demo" id="Images" lay-verify="uploadNewImg"></ul> </div> <div class="layui-form-item"> <label class="layui-form-label"></label> <div class="layui-input-block"> <button class="layui-btn" lay-submit="" lay-filter="demo1">确认</button> <button onclick="goBack();" class="layui-btn layui-btn-primary">返回</button> </div> </div> </div> </div> </body> <script type="text/javascript" src="${ctx}/server/js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="${ctx}/server/layui/layui.js"></script> <script type="text/javascript"> var image = ''; //图片集合删除 function delImages(){ var i_s=$("#Images .img_del"); for(var i=0;i<i_s.length;i++){ $("#Images .img_del").get(i).index=i; $("#Images .img_del:eq("+i+")").click(function(){ var i=this.index; $("#Images li:eq("+i+")").remove(); }) } } layui.use('upload', function() { var $ = layui.jquery, upload = layui.upload; upload.render({ url: '${ctx}/imageUpload/systemImage.action' ,elem: '#uploadNewImg' //指定原始元素，默认直接查找class="layui-upload-file" ,method: 'post', //上传接口的http类型 dataType:"json" ,multiple: true ,before: function(obj){ //预读本地文件示例，不支持ie8 obj.preview(function(index, file, result){ }); } ,done: function(res){ //$('#Images').append('<li><img layer-src="'+ res.msg +'" src="'+ res.msg +'" alt="'+ res.msg +'" class="layui-upload-img"><div class="operate"><i class="layui-icon img_del"></i></div></li>'); $('#Images').html('<li><img src="'+ res.msg +'" class="layui-upload-img"><div class="operate"><i class="layui-icon img_del"></i></div></li>'); image = res.msg; delImages(); } }); }); layui.use([ 'form', 'layer'], function() { form = layui.form, layer = layui.layer; //自定义验证规则 form.verify({ title : function(value) { if (value.trim() == '') { return '标题不能为空'; } }, content : function(value) { if (value.trim() == '') { return '内容不能为空'; } }, position : function(value) { if (value.trim() == '') { return '位置不能为空'; } }, uploadNewImg : function(value) { if ($('#Images li').length < 1) { return '请上传图片'; } } }); //监听提交 form.on('submit(demo1)', function(data) { $.ajax({ type : "post", url : "${ctx}/server/adver/addAdver.action", dataType:"json", data : { "title":data.field.title, "content":data.field.content, "position":data.field.position, "image":image }, success : function(result) { if(result.code==0){ layer.msg("添加成功"); setTimeout(function () { layer.closeAll("iframe"); //刷新父页面 parent.location.reload(); }, 1000); } else{ layer.msg(result.msg,{time:2000}); } },error:function(){ layer.msg("添加失败"); } }); return false; }); }); function goBack(){ window.history.go(-1); } </script> </html>
<!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <c:set var="ctx" value="${pageContext.request.contextPath}" /> <html> <head> <title>广告列表</title> <link rel="stylesheet" href="${ctx}/server/layui/css/layui.css" media="all"> </head> <body> <form class="layui-form layui-form-pane" action=""> <blockquote class="layui-elem-quote news_search"> <div class="layui-form-item"> <div class="layui-inline pane-select"> <label class="layui-form-label">广告编号</label> <div class="layui-input-block "> <input type="text" id="adverId" name="adverId" lay-verify="required|number" placeholder="请输入广告编号" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline pane-select"> <label class="layui-form-label">标题</label> <div class="layui-input-block "> <input type="text" id="title" name="title" lay-verify="required|number" placeholder="请输入标题" autocomplete="off" class="layui-input"> </div> </div> <div style="float: right;"> <a class="layui-btn search_btn" onclick="doSearch()"> <i class="layui-icon"></i>查询 </a> </div> </div> </blockquote> </form> <fieldset class="layui-elem-field site-demo-button"> <div> <button id="addAdver" style="margin-left: 10px;" class="layui-btn layui-btn-primary">添加广告</button> </div> </fieldset> <table class="layui-table" id="forum" lay-filter="forum" lay-data="{id: 'forum'}"></table> <script type="text/html" id="toolBar"> <a class="layui-btn layui-btn-mini" lay-event="updateAdver" >编辑</a> <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="deleteAdver" >删除</a> </script> <script type="text/javascript" src="${ctx}/server/js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="${ctx}/server/layui/layui.all.js"></script> <script> layui.use([ 'layer', 'table', 'laydate' ], function() { table = layui.table; layer = layui.layer; var laydate = layui.laydate; //--------------方法渲染TABLE---------------- //日期范围 laydate.render({ elem : '#startAndendTime', calendar : true, range : '~' }); getlist(null, null); }); function doSearch() { var adverId = $("#adverId").val(); var title = $("#title").val(); getlist(adverId, title); } function getlist(adverId, title) { tableIns = table.render({ elem : '#forum', id : 'forum', method : 'post', where : { 'id' : adverId, 'title' : title }, url : '${ctx}/server/adver/getAdverList.action', cols : [ [ { field : 'id', title : '编号', width : 80, align : 'center', fixed : true, sort : true }, { field : 'userId', title : '所属用户', width : 140, align : 'center' }, { field : 'title', title : '标题', width : 140, align : 'center' }, { field : 'position', title : '位置', width : 140, align : 'center' }, { field : 'createTime', title : '发布时间', width : 180, align : 'center', sort : true, }, { title : '操作', width : 180, align : 'center', fixed : 'right', toolbar : '#toolBar' } ] ], page : true, limits : [ 10, 20, 30, 50, 100 ], limit : 10, //默认采用20 width : '100%', height : 'auto', loading : true, even : true, response : { statusName : 'code' //数据状态的字段名称，默认：code , statusCode : 0 //成功的状态码，默认：0 , countName : 'count' //数据总数的字段名称，默认：count , dataName : 'data' //数据列表的字段名称，默认：data }, done : function(res, curr, count) { } }); } table.on('tool(forum)', function(obj) { var data = obj.data; if (obj.event === 'updateAdver') { var index = layui.layer.open({ title : "编辑帖子", type : 2, content : "${ctx}/server/adver/goUpdateAdver.action?id=" + data.id, success : function(layero, index) { setTimeout(function() { layui.layer.tips('点击此处返回', '.layui-layer-setwin .layui-layer-close', { tips : 3 }); }, 500) } }) layui.layer.full(index); }else if (obj.event === 'deleteAdver') { layer.confirm('确定删除该条广告吗?', function(index){ //向服务端发送删除指令 $.ajax({ type : "post", url : "${ctx}/server/adver/deleteAdver.action", dataType : "json", data : { "id" : data.id, }, success : function(data) { if(data.code==0){ layer.msg("删除成功!"); setTimeout(function () { window.location.reload(); }, 1000); }else{ layer.msg("删除失败!"); } } }); }); } }); $(window).one("resize",function() { $("#addAdver").click(function() { var index = layui.layer.open({ title : "添加广告", type : 2, content : "${ctx}/server/adver/goAddAdver.action", success : function(layero,index) { setTimeout(function() { layui.layer.tips('点击此处返回','.layui-layer-setwin .layui-layer-close',{ tips : 3 }); }, 500) } }) layui.layer.full(index); }) }).resize(); </script> </body> </html>
<!DOCTYPE html> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <c:set var="ctx" value="${pageContext.request.contextPath}" /> <html> <head> <meta charset="utf-8"> <title>编辑广告</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" href="${ctx}/server/layui/css/layui.css" media="all" /> <link rel="stylesheet" href="${ctx}/server/font-awesome/css/font-awesome.min.css"> <style type="text/css"> #Images li{ float:left; margin-left:10px; height:300px; margin-bottom:20px; } #Images img{ height:300px; } .img_del{ cursor: pointer; } </style> </head> <body> <div style="margin: 15px;"> <div class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">标题：</label> <div class="layui-input-block"> <input type="text" name="title" value="${adver.title}" autocomplete="off" class="layui-input" lay-verify="title" placeholder="请输入标题" style="width:390px"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">内容：</label> <div class="layui-input-block"> <textarea placeholder="请输入内容" class="layui-textarea" name="content" lay-verify="content">${adver.content}</textarea> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">广告位置：</label> <div class="layui-input-block"> <input type="text" name="position" value="${adver.position}" autocomplete="off" class="layui-input" lay-verify="position" placeholder="请输入位置" style="width:390px"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">图片：</label> <div class="layui-input-block"> <button type="button" class="layui-btn" id="uploadNewImg">图片上传</button> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"></label> <ul class="layer-photos-demo" id="Images" lay-verify="uploadNewImg"></ul> </div> <div class="layui-form-item"> <label class="layui-form-label"></label> <div class="layui-input-block"> <button class="layui-btn" lay-submit="" lay-filter="demo1">确认</button> <button onclick="goBack();" class="layui-btn layui-btn-primary">返回</button> </div> </div> </div> </div> </body> <script type="text/javascript" src="${ctx}/server/js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="${ctx}/server/layui/layui.js"></script> <script type="text/javascript"> var image = '${adver.image}'; if(image != ''){ $('#Images').html('<li><img src="'+ image +'" class="layui-upload-img"><div class="operate"><i class="layui-icon img_del"></i></div></li>'); } //图片集合删除 function delImages(){ var i_s=$("#Images .img_del"); for(var i=0;i<i_s.length;i++){ $("#Images .img_del").get(i).index=i; $("#Images .img_del:eq("+i+")").click(function(){ var i=this.index; $("#Images li:eq("+i+")").remove(); }) } } delImages(); layui.use('upload', function() { var $ = layui.jquery, upload = layui.upload; upload.render({ url: '${ctx}/imageUpload/systemImage.action' ,elem: '#uploadNewImg' //指定原始元素，默认直接查找class="layui-upload-file" ,method: 'post', //上传接口的http类型 dataType:"json" ,multiple: true ,before: function(obj){ //预读本地文件示例，不支持ie8 obj.preview(function(index, file, result){ }); } ,done: function(res){ //$('#Images').append('<li><img layer-src="'+ res.msg +'" src="'+ res.msg +'" alt="'+ res.msg +'" class="layui-upload-img"><div class="operate"><i class="layui-icon img_del"></i></div></li>'); $('#Images').html('<li><img src="'+ res.msg +'" class="layui-upload-img"><div class="operate"><i class="layui-icon img_del"></i></div></li>'); image = res.msg; delImages(); } }); }); layui.use([ 'form', 'layer'], function() { form = layui.form, layer = layui.layer; //自定义验证规则 form.verify({ title : function(value) { if (value.trim() == '') { return '标题不能为空'; } }, content : function(value) { if (value.trim() == '') { return '内容不能为空'; } }, position : function(value) { if (value.trim() == '') { return '位置不能为空'; } }, uploadNewImg : function(value) { if ($('#Images li').length < 1) { return '请上传图片'; } } }); //监听提交 form.on('submit(demo1)', function(data) { $.ajax({ type : "post", url : "${ctx}/server/adver/updateAdver.action", dataType:"json", data : { "id" : '${adver.id}', "title":data.field.title, "content":data.field.content, "position":data.field.position, "image":image }, success : function(result) { if(result.code==0){ layer.msg("编辑成功"); setTimeout(function () { layer.closeAll("iframe"); //刷新父页面 parent.location.reload(); }, 1000); } else{ layer.msg(result.msg,{time:2000}); } },error:function(){ layer.msg("编辑失败"); } }); return false; }); }); function goBack(){ window.history.go(-1); } </script> </html>
