昨天完成了聊天功能的实现，接下来的两天我们准备完成一个大功能，帖子功能，用户能够在这个贴子功能里发布自己的日常，别人可以评论点赞，就类似于朋友圈功能，我觉得这个功能也是挺重要的，增加了软件的趣味性，便于用户长期使用。以下为今日完成的内容：
<!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="forumId" name="forumId"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 class="layui-inline pane-input"><label class="layui-form-label">是否有效</label><div class="layui-input-block"><select id="isEffect" name="isEffect" lay-search=""><option value="">全部</option><option value="1">有效</option><option value="0">无效</option></select></div></div><div style="float: right;"><a class="layui-btn search_btn" onclick="doSearch()"> <iclass="layui-icon"></i>查询</a></div></div></blockquote></form><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="findReply" >查看评论</a><a class="layui-btn layui-btn-mini" lay-event="updateForum" >编辑</a><a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="deleteForum" >禁用</a></script><script type="text/html" id="isEffectTpl">{{# var isEffect=d.isEffect}}{{# if (isEffect==1){}}<span style="color:green">是</span>{{# } else if(isEffect==0){ }}<span style="color:red">否</span>{{# } }}</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, null);});function doSearch() {var forumId = $("#forumId").val();var title = $("#title").val();var isEffect = $("#isEffect").val();getlist(forumId, title, isEffect);}function getlist(forumId, title, isEffect) {tableIns = table.render({elem : '#forum',id : 'forum',method : 'post',where : {'forumId' : forumId,'title' : title,'isEffect' : isEffect},url : '${ctx}/server/forum/getForumList.action',cols : [ [ {field : 'forumId',title : '编号',width : 80,align : 'center',fixed : true,sort : true}, {field : 'userId',title : '所属用户',width : 140,align : 'center'}, {field : 'title',title : '标题',width : 140,align : 'center'}, {field : 'isEffect',title : '是否有效',width : 140,align : 'center',templet : "#isEffectTpl"}, {field : 'createTime',title : '发布时间',width : 180,align : 'center',sort : true,}, {title : '操作',width : 240,align : 'center',fixed : 'right',toolbar : '#toolBar'} ] ],page : true,limits : [ 10, 20, 30, 50, 100 ],limit : 10, //默认采用20width : '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 === 'updateForum') {var index = layui.layer.open({title : "编辑帖子",type : 2,content : "${ctx}/server/forum/goUpdateForum.action?forumId="+ data.forumId,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 === 'deleteForum') {layer.confirm('确定禁用该条帖子吗?', function(index){//向服务端发送删除指令 $.ajax({type : "post",url : "${ctx}/server/forum/deleteForum.action",dataType : "json",data : {"forumId" : data.forumId,"isEffect" : '0'},success : function(data) {if(data.code==0){layer.msg("禁用成功!");setTimeout(function () {window.location.reload();}, 1000);}else{layer.msg("禁用失败!");}}});});}else if (obj.event === 'findReply') {var index = layui.layer.open({title : "查看评论",type : 2,content : "${ctx}/server/reply/goForumReplyList.action?forumId="+ data.forumId,success : function(layero, index) {setTimeout(function() {layui.layer.tips('点击此处返回','.layui-layer-setwin .layui-layer-close', {tips : 3});}, 500)}})layui.layer.full(index);}});</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> <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="replyId" name="replyId"lay-verify="required|number" placeholder="请输入评论编号"autocomplete="off" class="layui-input"></div></div><div style="float: right;"><a class="layui-btn search_btn" onclick="doSearch()"> <iclass="layui-icon"></i>查询</a></div></div></blockquote></form><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="updateReply" >编辑</a><a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="deleteReply" >删除</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);});function doSearch() {var replyId = $("#replyId").val();getlist(replyId);}function getlist(replyId) {tableIns = table.render({elem : '#forum',id : 'forum',method : 'post',where : {'replyId' : replyId,'forumId' : '${forumReply.forumId}'},url : '${ctx}/server/reply/getForumReplyList.action',cols : [ [ {field : 'replyId',title : '编号',width : 80,align : 'center',fixed : true,sort : true}, {field : 'userId',title : '所属用户',width : 140,align : 'center'}, {field : 'forumId',title : '帖子编号',width : 140,align : 'center'}, {field : 'replyTime',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, //默认采用20width : '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 === 'updateReply') {var index = layui.layer.open({title : "编辑评论",type : 2,content : "${ctx}/server/reply/goUpdateForumReply.action?replyId="+ data.replyId,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 === 'deleteReply') {layer.confirm('确定删除该条评论吗?', function(index){//向服务端发送删除指令 $.ajax({type : "post",url : "${ctx}/server/reply/deleteForumReply.action",dataType : "json",data : {"replyId" : data.replyId,},success : function(data) {if(data.code==0){layer.msg("删除成功!");setTimeout(function () {window.location.reload();}, 1000);}else{layer.msg("删除失败!");}}});});}});</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="${forum.title}" autocomplete="off" class="layui-input" lay-verify="realName" 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">${forum.content}</textarea></div></div><div class="layui-form-item"><label class="layui-form-label">所属用户：</label><div class="layui-input-block"><input type="text" name="userId" value="${forum.userId}" autocomplete="off" class="layui-input" lay-verify="userId" placeholder="请输入用户编号" style="width:390px"></div></div><div class="layui-form-item"><label class="layui-form-label">是否有效：</label><div class="layui-input-inline" style="width:390px"><select name="isEffect" lay-verify="collType"><option value="1" <c:if test="${forum.isEffect == 1}">selected="selected"</c:if>>是</option><option value="0" <c:if test="${forum.isEffect == 0}">selected="selected"</c:if>>否</option></select></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 = '${forum.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/forumImage.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({ });//监听提交form.on('submit(demo1)', function(data) {$.ajax({type : "post",url : "${ctx}/server/forum/updateForum.action",dataType:"json",data : {"forumId" : '${forum.forumId}',"title":data.field.title,"content":data.field.content,"userId":data.field.userId,"isEffect":data.field.isEffect,"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>
