实战项目（一）内容管理系统

一、实现技术

前端技术：html、javascript(jquery、ajax、json)、css

后端技术：java、mysql、servlet

开发工具：eclipse、vscode

二、项目描述

首页仿写某大学网页，上面有各种栏目及栏目内容，管理员能登录进去对首页展示的栏目和内容进行增删改查的管理，以及注册的用户信息进行管理。

三、页面展示

①首页页面

②栏目内容 more+

③单个内容详情

④登录页面

⑤注册页面

⑥忘记密码页面

⑦内容管理页面

⑧内容管理：新增，能够上传图片，引用富文本编辑器

⑨内容管理：修改，实现回显

四、关键代码展示

①首页

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hbu页面</title><link rel="stylesheet" href="resources/css/hbu.css"><script src="resources/js/jquery.js"></script><script src="resources/js/jquery.cookie.js"></script><script src="resources/js/hbu.js" defer></script>
</head><body><a name="top"></a><!-- 页面头部开始 --><div class="top"><div class="left"><img src="resources/images/logo.png" class="logo" alt=""><div class="sublogobox"><img src="resources/images/yinxin.png" class="sublogo" alt=""><h3>Newcomers' Session</h3></div></div><div class="right"><a href="">河大主页</a> |<a href="">学工网</a></div></div><!-- 页面头部结束 --><!-- 页面菜单开始 --><div class="menubox"><ul><li><a href="hbu.html">首页</a></li><li><a href="#5" class="toChannel">网上报到</a></li><li><a href="#6" class="toChannel">入学指南</a></li><li><a href="#7" class="toChannel">走进河大</a></li><li><a href="#8" class="toChannel">学在河大</a></li><li><a href="#9" class="toChannel">家在河大</a></li><li><a href="#10" class="toChannel">联系我们</a></li><li><a href="#11" class="toChannel">河大易班</a></li></ul></div><!-- 页面菜单结束 --><!-- 轮播开始 --><div class="slider"><img src="resources/images/lunbo1.jpg" alt=""></div><!-- 轮播结束 --><!-- 页面主体开始 --><div class="main"><div class="left"><h3><span>快捷方式</span></h3><ul><li><a href="#12" class="toChannel"><img src="resources/images/1.png" alt=""><h4>学院简介</h4></a></li><li><a href="#13" class="toChannel"><img src="resources/images/2.png" alt=""><h4>辅导员风采</h4></a></li><li><a href="#14" class="toChannel"><img src="resources/images/3.png" alt=""><h4>防控疫情</h4></a></li><li><a href="#15" class="toChannel"><img src="resources/images/4.png" alt=""><h4>咨询留言</h4></a></li></ul></div><div class="middle"><h3><span>通知公告</span><a href="#1" class="toChannel">more+</a></h3><ul></ul></div><div class="right"><h3><span>心理测试</span><a href="#2" class="toChannel">more+</a></h3><img src="resources/images/tu1.jpg" alt=""><h4>河大学子深情演唱《不忘初心》</h4><ul></ul></div></div><!-- 页面主体结束 --><!-- 页面军训开始 --><div class="jxbox"><div class="jx"><h3><span>军训专区</span><a href="#3" class="toChannel">more+</a></h3><ul></ul></div></div><!-- 页面军训结束 --><!-- 页面底部开始 --><div class="bottom"><div class="bottombox"><div class="left"><img src="resources/images/logo2.png" alt=""><div class="text"><h3>迎新网</h3><h3>Newcomers' Session</h3></div></div><div class="right"><img src="resources/images/yxwerweima.png" alt=""><div class="text"><h3>邮箱：hbdxxsc@126.com </h3><h3>版权所有：河北大学党委学生工作部 <a href="login.html">管理登录</a></h3></div></div></div></div><!-- 页面底部结束 --><!-- 返回顶部开始--><a href="#top" class="backTop"><span>TOP</span><img src="resources/images/top.png" alt=""></a><!-- 返回顶部结束 -->
</body></html>

/* 公共样式开始 */* {margin: 0;padding: 0;transition: all ease 2s;
}ul {list-style: none;
}a {text-decoration: none;
}/* 公共样式结束 *//* 页面头部样式开始 */.top {width: 80%;margin: 20px auto;display: flex;justify-content: space-between;align-items: center;
}.top .left {display: flex;align-items: flex-end;
}.top .left .sublogobox {margin-bottom: 5px;margin-left: 4px;
}.top .left .logo {width: 250px;
}.top .left .sublogobox .sublogo {width: 54px;
}.top .left .sublogobox h3 {font-size: 14px;color: rgb(165, 41, 31)
}.top .right {}.top .right a {color: rgb(165, 41, 31);font-size: 14px;
}/* 页面头部样式结束 *//* 页面菜单样式开始 */.menubox {background: rgb(165, 41, 31);
}.menubox ul {display: flex;width: 80%;margin: 0 auto;justify-content: space-between;
}.menubox ul li {}.menubox ul li a {padding: 10px;display: block;color: #fff;cursor: pointer;
}.menubox ul li a:hover {background: #fff;color: rgb(165, 41, 31)
}/* 页面菜单样式结束 *//* 页面轮播开始 */.slider {}.slider img {width: 100%;
}/* 页面轮播结束 *//* 页面主体开始 */.main {display: flex;width: 80%;margin: 20px auto;justify-content: space-between;
}.main>.left {width: 14%;
}.main>.left>h3,
.main>.middle>h3,
.main>.right>h3,
.jx>h3 {border-bottom: 1px solid rgb(221, 221, 221);display: flex;justify-content: space-between;align-items: center;
}.main>.left>h3 span,
.main>.middle>h3 span,
.main>.right>h3 span,
.jx>h3 span {border-bottom: 2px solid rgb(165, 41, 31);padding-bottom: 6px;font-weight: 500;font-size: 15px;
}.main>.middle>h3 a,
.main>.right>h3 a,
.jx>h3 a {color: #aaa;font-size: 12px;
}.main>.middle>h3 a:hover,
.main>.right>h3 a:hover,
.jx>h3 a:hover {color: rgb(165, 41, 31)
}.main>.left ul {}.main>.left ul li {margin: 10px 0;
}.main>.left ul li:hover {opacity: 0.7;
}.main>.left ul li:nth-child(1) {background: rgb(129, 194, 222);
}.main>.left ul li:nth-child(2) {background: rgb(254, 194, 15);
}.main>.left ul li:nth-child(3) {background: rgb(191, 214, 47);
}.main>.left ul li:nth-child(4) {background: rgb(47, 163, 220);
}.main>.left ul li a {display: block;text-align: center;padding: 10px 0;color: #fff;
}.main>.middle {width: 55%;
}.main>.middle ul {}.main>.middle ul li {margin: 10px 0 20px;border-bottom: 1px dashed rgb(221, 221, 221);padding-bottom: 20px;
}.main>.middle ul li:last-child {border: none;
}.main>.middle ul li a {display: flex;justify-content: space-between;
}.main>.middle ul li a .left {width: 12%;
}.main>.middle ul li a .left h3 {background: rgb(238, 238, 238);color: rgb(217, 49, 36);text-align: center;font-size: 30px;padding: 4px 0;
}.main>.middle ul li a .left p {background: rgb(217, 49, 36);color: #fff;text-align: center;font-size: 12px;padding: 4px 0;
}.main>.middle ul li a .right {width: 85%;
}.main>.middle ul li a .right h3 {color: rgb(217, 49, 36);font-weight: 500;font-size: 15px;
}.main>.middle ul li a .right p {color: rgb(119, 119, 119);font-size: 14px;margin-top: 9px;
}.main>.middle ul li:hover a .right p {color: rgb(217, 49, 36)
}.main>.right {width: 28%;
}.main>.right img {width: 100%;margin-top: 10px;filter: brightness(80%);
}.main>.right img:hover {filter: brightness(100%);
}.main>.right h4 {background: rgb(165, 41, 31);color: #fff;padding: 10px;font-size: 14px;font-weight: 500;
}.main>.right ul {}.main>.right ul li:nth-child(odd) {background: rgb(238, 238, 238);
}.main>.right ul li:nth-child(even) {background: rgb(245, 245, 245);
}.main>.right ul li a {color: #666;padding: 8px 10px;display: block;font-size: 14px;
}.main>.right ul li a:hover {color: rgb(165, 41, 31);transform: translate(20px);
}/* 页面主体结束 *//* 页面军训开始 */.jxbox {background: url("../images/bg.jpg");
}.jx {width: 80%;margin: 0 auto 30px;padding: 15px 0;
}.jx ul {display: flex;justify-content: space-between;margin-top: 20px;
}.jx ul li {width: 24%;background: #fff;
}.jx ul li a {display: block;position: relative;overflow: hidden;
}.jx ul li a span {background: rgb(247, 140, 131);color: #fff;font-size: 12px;padding: 5px;position: absolute;left: 0;top: 0
}.jx ul li a img {width: 100%;
}.jx ul li a h3 {padding: 3px 10px;color: rgb(217, 49, 36);font-weight: 500;font-size: 15px;
}.jx ul li a p {padding: 3px 10px 10px;color: rgb(119, 119, 119);font-size: 14px;
}.jx ul li:hover a p {color: rgb(217, 49, 36)
}.jx ul li:hover a img {transform: scale(1.2, 1.2);/*skew()倾斜 rotate()旋转 scale()缩放 translate()位移*/
}/* 页面军训结束 *//* 页面底部开始 */.bottom {background: rgb(165, 41, 31);
}.bottom .bottombox {width: 80%;margin: 0 auto;display: flex;justify-content: space-between;padding: 20px 0;align-items: center;
}.bottom .bottombox .left {display: flex;align-items: flex-end;
}.bottom .bottombox .left img {height: 60px;
}.bottom .bottombox .left .text {color: #fff;font-size: 12px;margin-bottom: 2px;margin-left: 6px;
}.bottom .bottombox .left .text h3 {font-weight: 500;
}.bottom .bottombox .right {display: flex;align-items: center;
}.bottom .bottombox .right img {height: 80px;
}.bottom .bottombox .right .text {color: #fff;font-size: 12px;
}.bottom .bottombox .right .text h3 {font-weight: 500;
}.bottom .bottombox .right .text h3 a {color: #fff;
}.bottom .bottombox .right .text h3 a:hover {background: #fff;padding: 2px;color: rgb(165, 41, 31)
}/* 页面底部结束 */.backTop {position: fixed;bottom: 10px;right: 10px;width: 50px;height: 50px;display: block;text-align: center;background: rgb(217, 49, 36);color: #fff;padding-top: 5px;
}/* 页面栏目样式开始 */.hbu_channel,
.hbu_detail{min-height: 500px;width: 80%;margin:20px auto;
}.hbu_channel h2{color: #910000;font-size: 17px;border-bottom: 2px solid #910000;padding-bottom: 4px;margin-bottom: 10px;
}.hbu_channel ul li{margin: 10px 0;border-bottom: 1px #aaa dashed;padding:5px 0;
}.hbu_channel ul li a{display: flex;justify-content: space-between;align-items: center;color: #666;
}.hbu_channel ul li a div{width: 90%;
}.hbu_channel ul li a h3{font-size: 14px;color: #555;
}.hbu_channel ul li a p{font-size: 13px;line-height: 25px;margin-top: 5px;
}.hbu_channel ul li a span{font-size: 13px;
}/* 页面栏目样式开始 *//* 详情页面样式开始 */.hbu_detail h5{border-bottom: 1px solid #aaa;margin: 10px 0;padding-bottom: 5px;color: #666;
}.hbu_detail h5 a{color: #666;
}.hbu_detail div h3{text-align: center;font-size: 20px;margin: 30px 0;
}.hbu_detail div .subinfo{text-align: end;font-size: 13px;font-weight: 600;margin-bottom: 30px;
}.hbu_detail div .subinfo span{font-weight: 500;margin-right: 15px;
}/* 详情页面样式结束 */

//剪裁方法
function cut_str(str,len){if(str.length>len){str=str.substring(0,len)+"..."}return str
}//加载通知公告
$.ajax({url:"hbu?action=getContent&channelid=1&limit=4",type:"get",success:function(value){$(".middle ul").empty()var arr = value.datafor(var i=0; i<arr.length;i++){$(".middle ul").append("<li>"+"<a href='#"+arr[i].id+"' class='toDetail'>"+"<div class='left'>"+"<h3>"+arr[i].createtime.substring(8,10)+"</h3>"+"<p>"+arr[i].createtime.substring(0,7)+"</p>"+"</div>"+"<div class='right'>"+"<h3>"+cut_str(arr[i].title,30)+"</h3>"+"<p>"+cut_str(arr[i].desc,80)+"</p>"+"</div>"+"</a>"+"</li>")}	},error:function(){console.log("加载通知公告失败")}
})//加载心理测试
$.ajax({url:"hbu?action=getContent&channelid=2&limit=5",type:"get",success:function(value){$(".right ul").empty()var arr = value.datafor(var i=0; i<arr.length;i++){$(".right ul").append("<li><a href='#"+arr[i].id+"' class='toDetail'>"+cut_str(arr[i].title,10)+"</a></li>")}},error:function(){console.log("加载心理测试失败")}
})//加载军训专区
$.ajax({url:"hbu?action=getContent&channelid=3&limit=4",type:"get",success:function(value){$(".jx ul").empty()var arr = value.datafor(var i=0; i<arr.length;i++){$(".jx ul").append("<li>"+"<a href='#"+arr[i].id+"' class='toDetail'>"+"<span>"+arr[i].createtime.substring(0,10)+"</span>"+"<img src='upload/"+arr[i].imgurl+"' alt=''>"+"<h3>"+cut_str(arr[i].title,10)+"</h3>"+"<p>"+cut_str(arr[i].desc,50)+"</p>"+"</a>"+"</li>")}},error:function(){console.log("加载心理测试失败")}
})//跳转到栏目页面
$(".toChannel").on("click",function(){$.cookie("channelid",$(this).attr("href"))location.href="hbu_channel.html"
})//跳转到详情页面
$("body").on("click",".toDetail",function(){$.cookie("contentid",$(this).attr("href"))location.href="hbu_detail.html"
})

②内容管理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>内容管理页面</title><link rel="stylesheet" href="resources/css/content.css"><script src="resources/js/jquery.js"></script><script src="resources/js/jquery.cookie.js"></script><script src="resources/layer/layer.js"></script><script src="resources/js/content.js" defer></script>
</head>
<body><div class="container"><div class="search_box"><div class="search"><select class='searchChannel'></select><input type="text" placeholder="请输入标题" class="searchTitle"><input type="text" placeholder="请输入作者" class="searchAuthor"><input type="button" value="查找" class="search_btn"></div><div class="btns"><input type="button" value="批量删除" class="deleteAll"><input type="button" value="添加" class="add"></div></div></div><table border="1" ><thead><tr><th width="25px"><input type="checkbox" name="" id="" class="checkAll"></th><th width="30px">序号</th><th width="90px">栏目</th><th width="">题目</th><th width="">摘要</th><th width="90px">创建时间</th><th width="80px">封面图</th><th width="">作者</th><th width="90px">操作</th></tr></thead><tbody></tbody></table><ul class="page"></ul>
</body>
</html>

*{padding: 0;margin: 0;
}.container{width: 98%;margin: 20px auto;
}.container .search_box{display: flex;justify-content: space-between;margin-bottom: 20px;
}.container .search_box .search{display: flex;align-items: center;
}.container .search_box .search select,
.container .search_box .search input{padding: 3px 3px;margin-right: 10px;font-size: 13px;
}.container .search_box .search select,
.container .search_box .search input[type=text]{border: 1.5px solid rgb(243, 104, 104);outline: none;padding: 8px 10px;
}.container .search_box .search select:focus,
.container .search_box .search input[type=text]:focus{border: 3px solid rgb(243, 104, 104); 
}.container .search_box .search input[type=button]{background: linear-gradient(30deg, plum, pink);color: white;border: none;font-size: 15px;padding: 6px 8px;cursor: pointer;
}.container .search_box .search input:hover{box-shadow: 1px 1px 2px plum;
}.container .search_box .btns input{background: rgb(227, 232, 141);font-size: 15px;color: rgb(237, 137, 137);padding: 5px 5px;border: none;margin-right: 15px;margin-top: 5px;cursor: pointer;
}.container .search_box .btns input:hover{background: rgb(244, 118, 118);
}table{width: 98%;margin: 20px auto;border: 1px solid wheat;
}table thead tr{background: rgb(244, 118, 118);color: white;font-size: 13px;
}table th tr th{padding: 3px 0;
}table tr td,
table tr th{border: 1px solid white;text-align: center;
}table tbody tr:nth-child(odd){background: rgb(244, 226, 226);
}
table tbody tr:nth-child(even){background: whitesmoke;
}table tbody input[type=button]{background: rgb(124, 233, 245);border:2px solid rgb(106, 230, 244);font-size: 14px;margin-left: 5px;padding: 2px 3px;color: rgb(247, 127, 127);
}.page{display: flex;justify-content: center;
}.page li{list-style: none;margin: 5px;border: 1px solid plum;padding: 3px 6px;font-size: 13px;color: brown;cursor: pointer;
}.page .current{background: rgb(255, 217, 47);
}

//页面大小
var pageSize=4function loadData(page){var title = $(".searchTitle").val().trim()var author = $(".searchAuthor").val().trim()var channelid = $(".searchChannel").val()$.ajax({url:"ContentServlet?action=getContent&title="+title+"&author="+author+"&page="+page+"&pageSize="+pageSize+"&channelid="+channelid,type:"get",success:function(value){var arr = value.data$("tbody").empty()for(var i=0; i<arr.length;i++){$("tbody").append("<tr>"+"<td><input type='checkbox' index='"+arr[i].id+"' class='option'></td>"+"<td>"+arr[i].id+"</td>"+"<td>"+arr[i].channelname+"</td>"+"<td>"+arr[i].title+"</td>"+"<td>"+arr[i].desc+"</td>"+"<td>"+arr[i].createtime.substring(0,10)+"</td>"+//"<td>"+arr[i].imgurl+"</td>"+"<td><img src='upload/"+arr[i].imgurl+"' style='width:70px;height:55px;object-fit:cover'></td>"+"<td>"+arr[i].author+"</td>"+"<td><input type='button' value='修改' class='update' index='"+arr[i].id+"'><input type='button' value='删除' class='delete' index='"+arr[i].id+"' ></td>"+"</tr>")}},error:function(){alert("查找失败")}
})
}//加载分页
function loadPage(){var title = $(".searchTitle").val().trim()var author = $(".searchAuthor").val().trim()var channelid = $(".searchChannel").val()$.ajax({url:"ContentServlet?action=getCount&title="+title+"&author="+author+"&channelid="+channelid,type:"get",success:function(value){var count = value.msg$(".page").empty()$(".page").append("<li class='first'>首页</li>")$(".page").append("<li class='prev'>上一页</li>")for(var i=0;i<Math.ceil(count/pageSize);i++){if(i==0){$(".page").append("<li class='current item'>"+(i+1)+"</li>")}else{$(".page").append("<li class='item'>"+(i+1)+"</li>")}}$(".page").append("<li class='next'>下一页</li>")$(".page").append("<li class='last'>尾页</li>")},error:function(){alert("查找失败")}
})
}//加载栏目
function loadChannel(){$.ajax({url:"ChannelServlet?action=getChannel",type:"get",async:false,     //默认为异步请求，设置为同步success:function(value){var arr = value.data$(".searchChannel").append("<option value='0'>全部</option>")for(var i=0; i<arr.length;i++){$(".searchChannel").append("<option value='"+arr[i].id+"'>"+arr[i].channelname+"</option>")}},error:function(){alert("栏目加载失败")}})
}
loadChannel()
//加载数据
loadData(1)
loadPage()//搜索框搜索
$(".search_btn").on("click",function(){loadData(1)	loadPage()
})//指定页码加载
$(".page").on("click",".item",function(){//数据切换loadData($(this).text())//样式切换$(this).addClass("current").siblings().removeClass("current")$(".checkAll").prop("checked",false)
})//首页切换
$(".page").on("click",".first",function(){//数据切换loadData(1)//样式切换$(".item").removeClass("current").first().addClass("current")
})//尾页切换
$(".page").on("click",".last",function(){//数据切换loadData($(".item").length)//样式切换$(".item").removeClass("current").last().addClass("current")$(".checkAll").prop("checked",false)
})//上一页切换
$(".page").on("click",".prev",function(){if($("li.current").text()==1){layer.alert("当前已经是第一页啦")return}//数据切换loadData($("li.current").text()-1)//样式切换$("li.current").removeClass("current").prev().addClass("current")$(".checkAll").prop("checked",false)
})//下一页切换
$(".page").on("click",".next",function(){if($("li.current").text()==$(".item").length){layer.alert("当前已经是最后页啦")return}//数据切换loadData(parseInt($("li.current").text())+1)//样式切换$("li.current").removeClass("current").next().addClass("current")$(".checkAll").prop("checked",false)
})//单个删除
$("tbody").on("click",".delete",function(){var id = $(this).attr("index")layer.confirm('确定要删除吗?', function(){$.ajax({url:"ContentServlet",type:"post",data:{id,action:"delete_id"},success:function(value){				layer.msg(value.msg,{icon: 2,time: 2000 // 设置 2 秒后自动关闭},function(){location.reload()	``})		},error:function(){layer.msg("删除信息失败啦")}})}, function(){layer.msg("感谢手下留情")})/**if(confirm("确定要删除吗？")){$.ajax({url:"ContentServlet",type:"post",data:{id,action:"delete_id"},success:function(value){				alert(value.msg)location.reload()			},error:function(){alert("删除信息失败啦")}})}else{alert("感谢手下留情")}**/})//批量删除
$(".deleteAll").on("click",function(){var ids=""for(var i=0;i<$(".option:checked").length;i++){//$(".option:checked")[i].getAttribute("index")   //js方法ids +=$(".option:checked").eq(i).attr("index")+","}ids=ids.slice(0,-1)    //slice(start,end)  不包含end,支持负数截取if(ids.length==0){alert("请至少选择一项")return}if(confirm("确定要删除吗？")){$.ajax({url:"ContentServlet",type:"post",data:{ids,action:"deleteAll"},success:function(value){				alert(value.msg)location.reload()			},error:function(){alert("批量删除信息失败啦")}})}else{alert("感谢手下留情")location.reload()	}
})//全选
$(".checkAll").on("change",function(){if($(".checkAll").prop("checked")){$(".option").prop("checked",true)}else{$(".option").prop("checked",false)}})$("tbody").on("click",".option",function(){var flag = truefor(var i=0;i<$(".option").length;i++){flag &= $(".option").eq(i).prop("checked")}if(flag){$(".checkAll").prop("checked",true)}else{$(".checkAll").prop("checked",false)}
})//添加
$(".add").on("click",function(){location.href="router?path=add"
})//修改
$("tbody").on("click",".update",function(){$.cookie("id",$(this).attr("index"))location.href="router?path=add"
})

③内容管理添加|修改

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>添加|修改页面</title><link rel="stylesheet" href="resources/css/add.css"><script src="resources/js/jquery.js"></script><script src="resources/js/jquery.cookie.js"></script><script src="resources/layer/layer.js"></script><script src="resources/js/add.js" defer></script>
</head>
<body><div class="container"><h3>信息添加</h3><div class="item"><span>标题</span><input type="text" class="title"></div><div class="item"><span>栏目</span><select class='channel'></select></div><div class="item"><span>摘要</span><input type="text" class="desc"></div><div class="item"><span>作者</span><input type="text" class="author"></div><div class="item"><span>创建时间</span><input type="datetime-local" class="createtime"></div><div class="item"><span>封面图</span><form class="imgbox"><input type="file" class="imgurl" name="imgurl"><input type="hidden" class="file_value"></form><div class="img_display"></div></div><div class="item"><span>内容</span><!--  <textarea name="" id="" cols="30" rows="10" class="content"></textarea> --><!-- 加载编辑器的容器 --><script id="container" name="content" type="text/plain"></script><!-- 配置文件 --><script type="text/javascript" src="resources/utf8-jsp/ueditor.config.js"></script><!-- 编辑器源码文件 --><script type="text/javascript" src="resources/utf8-jsp/ueditor.all.js"></script>	</div><div class="item"><input type="button" value="添加" class="add"><input type="button" value="取消" class="back"></div></div>
</body>
</html>

*{padding: 0;margin: 0;
}.container{width: 97%;margin: 30px auto;border: 7px solid rgb(247, 146, 146);border-radius: 70px 70px 70px 70px;
}.container h3{position: relative;left: 450px;top: -28px;font-size: 30px;padding: 4px 6px;color: rgb(235, 136, 136);background: whitesmoke;display: inline;
}.container .item{margin: 20px;display: flex;flex-direction: column;
}.container .item span{font-size: 15px;margin-bottom: 8px;color: gray;
}.container .item textarea,
.container .item select,
.container .item input{outline: none;padding: 3px 6px;border-radius: 3px;border: 1px solid gray;
}.container .item textarea:hover,
.container .item select:hover,
.container .item input:hover{box-shadow: 1px 1px 2px greenyellow
}.container .item textarea{min-height: 130px;
}.container .item:last-child{flex-direction: row;
}.container .item:last-child input{background: none;margin-left: 15px;font-size: 13px;padding: 2px 8px;color: gray;
}.container .item:last-child input:hover{cursor: pointer;
}

var ue = UE.getEditor('container');
var action = "add"//上传图片
$(".imgurl").on("change",function(){if($(".imgurl").val()){//对图片进行序列化console.log($(".imgbox")[0])var data = new FormData($(".imgbox")[0])  //把表单数据序列化console.log(data.get("imgurl").name)$.ajax({url:"upload",type:"post",data:data,contentType:false,       //发送的数据格式，默认是文本processData:false,       //处理数据，以对象形式上传的数据会被转化成字符串的形式上传success:function(value){console.log(value)$(".img_display").empty()$(".img_display").append("<img src='upload/"+value.imgurl+"' style='width:80px;height:auto;'>")//给隐藏域设置值$(".file_value").val(value.imgurl)},error:function(){alert("上传图像出错啦！")}})}else{$("file_value").val("")$(".img_display").empty()alert("请上传图片")}
})//加载栏目
function loadChannel(){$.ajax({url:"ChannelServlet?action=getChannel",type:"get",async:false,     //默认为异步请求，设置为同步success:function(value){var arr = value.datafor(var i=0; i<arr.length;i++){$(".channel").append("<option value='"+arr[i].id+"'>"+arr[i].channelname+"</option>")}},error:function(){alert("栏目加载失败")}})
}
loadChannel()//修改
var id = $.cookie("id")$.cookie("id","")
if(id){//回显	$.ajax({url:"ContentServlet?action=getById&id="+id,type:"get",success:function(value){var obj = value.data[0]$(".title").val(obj.title)$(".channel").val(obj.channelid)$(".desc").val(obj.desc)$(".author").val(obj.author)$(".createtime").val(obj.createtime)//隐藏域设置值$(".file_value").val(obj.imgurl)//缩略图回显$(".img_display").append("<img src='upload/"+obj.imgurl+"' style='width:80px;height:60px;object-fit:cover'>")//$(".content").val(obj.content)ue.ready(function(){//设置编辑器的内容ue.setContent(obj.content);});$(".add").val("修改")$("h3").text("信息修改")action="update"},error:function(){alert("回显信息失败")}})
}//添加|修改
$(".add").on("click",function(){var title = $(".title").val()var desc = $(".desc").val()var author = $(".author").val()var createtime = $(".createtime").val()//获取隐藏域的值var imgurl = $(".file_value").val()//var content = $(".content").val()var content = ue.getContent()var channelid = $(".channel").val()$.ajax({url:"ContentServlet",type:"post",data:{id,title,channelid,desc,author,createtime,imgurl,content,action},success:function(value){alert(value.msg)location.href="router?path=content"},error:function(){alert("添加信息失败")}})
})//取消
$(".back").on("click",function(){location.href="router?path=content"
})

④数据库连接|数据语句执行

package sql;import java.sql.Connection;
import java.sql.DriverManager;public class DBConnection {public static void main(String[] args) {}String driver = "com.mysql.jdbc.Driver";
//	String url = "jdbc:mysql://127.0.0.1:3306/first?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC&useSSL=true";String url="jdbc:mysql://localhost:3306/hbu?useUnicode=true&characterEncoding=UTF-8";String user = "root";String password = "123456";public Connection conn;public DBConnection() {try {Class.forName(driver);conn = (Connection) DriverManager.getConnection(url, user, password);//// if(!conn.isClosed())// System.out.println("Succeeded connecting to the Database!");} catch (Exception e) {e.printStackTrace();}}public void close() {try {this.conn.close();} catch (Exception e) {e.printStackTrace();}}}

package sql;import java.rmi.StubNotFoundException;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class MysqlUtil {public static void main(String[] args) {//		String sqlcount = "select count(*) from admin";
//		String sql = "select * from admin";
//		String[] colums = {"id","account","password"};
//		String json = getJsonBySql(sqlcount, sql, colums);
//		System.out.println(json);/*String sql = "insert into t_student(name,age,sex) values(\"张三\",21,\"男\")";System.out.println(add(sql));*//*String sqldel = "delete from gq_user where id=11";System.out.println(del(sqldel));*//*String sqlupdate ="update gq_user set age = 30 where username=\"gs1\"";System.out.println(update(sqlupdate));*//*String sql = "select count(*) from gq_user";System.out.println(getCount(sql));*//*String[] col = {"id","name","age"};String sql = "select * from t_student";String sqlCount = "select count(*) from t_student";String strJson = getJsonBySql(sqlCount,sql,col);System.out.println(strJson);*//*String sqlcount = "select count(*) from gq_user";String sql="select * from gq_user";String[] col = {"username","age","id","sex","salary"};System.out.println(getJsonBySql(sqlcount, sql, col));*//*String sql = "select * from t_user";String[] column = {"id","username","password","available"};ArrayList<String[]> strings = MysqlUtil.showUtil(sql, column);for (String[] string : strings) {System.out.println(Arrays.toString(string));}*/String sql = "select * from student";String[] strs = {"s_id","s_name"};String data = getJsonBySql(sql,strs);System.out.println(data);}/*添加*/public static int add(String sql) {// System.out.println("sql语句是：" + sql);int i=0;//数据库连接DBConnection db = new DBConnection();try {        PreparedStatement preStmt = (PreparedStatement) db.conn.prepareStatement(sql);i=preStmt.executeUpdate();preStmt.close();db.close();//关闭连接 System.out.println("数据插入成功，sql语句是：" + sql);} catch (Exception e) {e.printStackTrace();}return i;//返回影响的行数，1为执行成功;}/*修改数据*/public static int update(String sql) {int i =0;DBConnection db = new DBConnection();try {PreparedStatement preStmt = (PreparedStatement) db.conn.prepareStatement(sql);i = preStmt.executeUpdate();preStmt.close();db.close();System.out.println("数据更新成功，sql语句是：" + sql);} catch (SQLException e) {e.printStackTrace();}return i;}/*删除*/public static int del(String delstr) {int i=0;DBConnection db = new DBConnection();try {    PreparedStatement preStmt = (PreparedStatement) db.conn.prepareStatement(delstr);i=preStmt.executeUpdate();//executeUpdate()返回受影响的行数preStmt.close();db.close();System.out.println("数据删除成功，sql语句是：" + delstr);} catch (SQLException e){e.printStackTrace();}return i;}/*查询数量*/public static int getCount(String sql) {int sum = 0;DBConnection db = new DBConnection();try {Statement stmt = (Statement) db.conn.createStatement();ResultSet rs = (ResultSet) stmt.executeQuery(sql);while (rs.next()) {sum += rs.getInt(1);}rs.close();db.close();} catch (Exception e) {// TODO: handle exception}return sum;}/***功能描述 查询json数据带数据总量* @author 郭帅* @date 2021-03-22 10:30* @param sqlcount 查询数量的sql* @param sql 查询具体数据的sql* @param colums 查询的字段* @return java.lang.String*/public static String getJsonBySqlDataGrid( String sqlcount,String sql,String[] colums){int count = getCount(sqlcount);System.err.println("标红信息展示sql:" + sql);ArrayList<String[]>  result = new ArrayList<String[]>();DBConnection db = new DBConnection();try {Statement stmt = (Statement) db.conn.createStatement();ResultSet rs = (ResultSet) stmt.executeQuery(sql);while(rs.next()){String[] dataRow = new String[colums.length];for( int i = 0; i < dataRow.length; i++ ) {dataRow[i] = rs.getString( colums[i] );}result.add(dataRow);}rs.close();db.close();//} catch (SQLException e) {e.printStackTrace();}return listToJsonDataGrid(result,colums,count);}/***功能描述 查询json数据* @author 郭帅* @date 2021-03-22 10:30* @param sql 查询具体数据的sql* @param colums 查询的字段* @return java.lang.String*/public static String getJsonBySql( String sql,String[] colums){System.err.println("标红信息展示sql:" + sql);ArrayList<String[]>  result = new ArrayList<String[]>();DBConnection db = new DBConnection();try {Statement stmt = (Statement) db.conn.createStatement();ResultSet rs = (ResultSet) stmt.executeQuery(sql);while(rs.next()){String[] dataRow = new String[colums.length];for( int i = 0; i < dataRow.length; i++ ) {dataRow[i] = rs.getString( colums[i] );}result.add(dataRow);}rs.close();db.close();//} catch (SQLException e) {e.printStackTrace();}return listToJson(result,colums);}/***功能描述 查询数据* @author 郭帅* @date 2021-03-22 10:38* @param sql 查询具体数据的sql* @param colums  查询的字段* @return java.util.ArrayList<java.lang.String[]>*/public static ArrayList<String[]> showUtil( String sql, String[] colums){ArrayList<String[]>  result = new  ArrayList<String[]>();DBConnection db = new DBConnection();try {Statement stmt = (Statement) db.conn.createStatement();ResultSet rs = (ResultSet) stmt.executeQuery(sql);while(rs.next()){String[] dataRow = new String[colums.length];for( int i = 0; i < dataRow.length; i++ ) {dataRow[i] = rs.getString( colums[i] );}result.add(dataRow);}rs.close();db.close();//} catch (SQLException e) {e.printStackTrace();}return result;}/*** 转化为json数据字符串* @param* @return*/public static String listToJsonDataGrid( ArrayList<String[]> list,String[] colums,int count) {String jsonStr = "{\"code\":0,\"msg\":\"成功了\",\"count\":"+count+",\"data\":[";for(int i = 0; i < list.size(); i++) {String arr = "{";for( int j = 0; j < list.get(0).length; j++) {if( list.get(i)[j] == null || "NULL".equals(list.get(i)[j])) {arr += "\"" + colums[j] + "\":\"\"";}else {arr += "\"" + colums[j] + "\""+":" ;arr +=  "\"" + list.get(i)[j].replace("\"","\\\"") + "\"";}if( j < list.get(0).length - 1 ) {arr += ",";}}arr += "}";if( i < list.size() - 1 ) {arr += ",";}jsonStr += arr;}jsonStr += "]}";return jsonStr;}/*** 转化为json数据字符串* @param* @return*/public static String listToJson( ArrayList<String[]> list,String[] colums) {String jsonStr = "{\"code\":0,\"msg\":\"成功了\",\"data\":[";for(int i = 0; i < list.size(); i++) {String arr = "{";for( int j = 0; j < list.get(0).length; j++) {if( list.get(i)[j] == null || "NULL".equals(list.get(i)[j])) {arr += "\"" + colums[j] + "\":\"\"";}else {arr += "\"" + colums[j] + "\""+":" ;arr +=  "\"" + list.get(i)[j].replace("\"","\\\"") + "\"";}if( j < list.get(0).length - 1 ) {arr += ",";}}arr += "}";if( i < list.size() - 1 ) {arr += ",";}jsonStr += arr;}jsonStr += "]}";return jsonStr;}}

⑤首页栏目内容加载servlet

package servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import sql.MysqlUtil;/*** Servlet implementation class HbuServlet*/
@WebServlet("/hbu")
public class HbuServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public HbuServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/json;charset=utf-8");String action = request.getParameter("action");String[] colums = {"id","title","desc","content","author","createtime","channelid","imgurl"};String[] channel_colums = {"id","channelname"};String res = "";switch(action) {//查找内容case "getContent":String channelid = request.getParameter("channelid");String limit = request.getParameter("limit");String sql = "select * from content where available = 1 and channelid = "+channelid+" order by createtime desc";if(limit!=null&&!"".equals(limit)) {sql +=" limit 0,"+limit;}res = MysqlUtil.getJsonBySql(sql, colums);break;//查找栏目名称case "getChannel":channelid = request.getParameter("channelid");sql = "select * from channel where id = "+channelid;res = MysqlUtil.getJsonBySql(sql, channel_colums);break;//查找根据id查内容case "getDetail":String contentid = request.getParameter("contentid");sql = "select * from content where id = "+contentid;res = MysqlUtil.getJsonBySql(sql, colums);break;default:break;}response.getWriter().write(res);}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}

⑥内容管理servlet

package servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import sql.MysqlUtil;/*** Servlet implementation class ContentServlet*/
@WebServlet("/ContentServlet")
public class ContentServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public ContentServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/json;charset=utf-8");String action = request.getParameter("action");String title = request.getParameter("title");String author = request.getParameter("author");String page = request.getParameter("page");String pageSize = request.getParameter("pageSize");String channelid = request.getParameter("channelid");String[] colums = {"id","title","desc","content","author","createtime","channelid","imgurl"};String[] colums_all = {"id","title","channelname","desc","content","author","createtime","channelid","imgurl"};String res = "{\"msg\":\"查找失败\",\"code\":0}";switch(action) {case "getContent":String sql="select content.*,channelname from content,channel where content.channelid = channel.id and available=1 and title like \"%"+title+"%\" and author like \"%"+author+"%\"";if(!"0".equals(channelid)) {sql +=" and channelid="+channelid;}sql +=" order by createtime desc limit "+(Integer.parseInt(page)-1)*Integer.parseInt(pageSize)+","+pageSize;res = MysqlUtil.getJsonBySql(sql, colums_all);break;case "getCount":channelid = request.getParameter("channelid");sql="select count(*) from content where available=1 and title like \"%"+title+"%\" and author like \"%"+author+"%\"";if(!"0".equals(channelid)) {sql +=" and channelid="+channelid;}int count = MysqlUtil.getCount(sql);res = "{\"msg\":\""+count+"\",\"code\":0}";break;case "getById":String id = request.getParameter("id");sql="select * from content where id="+id;res = MysqlUtil.getJsonBySql(sql, colums);break;default:break;}response.getWriter().write(res);}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/json;charset=utf-8");String action = request.getParameter("action");String res = "{\"msg\":\"删除失败\",\"code\":0}";String id = request.getParameter("id");switch(action) {case "delete_id":String sql="update content set available=0 where id="+id;int num = MysqlUtil.update(sql);if(num>0) {res = "{\"msg\":\"删除成功\",\"code\":1}";}break;case "deleteAll":String ids = request.getParameter("ids");sql="update content set available=0 where id in("+ids+")";num = MysqlUtil.update(sql);if(num>0) {res = "{\"msg\":\"批量删除成功\",\"code\":1}";}break;case "add":String title = request.getParameter("title");String desc = request.getParameter("desc");String author = request.getParameter("author");String imgurl = request.getParameter("imgurl");String createtime = request.getParameter("createtime");String channelid = request.getParameter("channelid");String content = request.getParameter("content");content = content.replaceAll("\"", "\'");sql="insert into content(title,`desc`,content,author,createtime,channelid,imgurl,available) values(\""+title+"\",\""+desc+"\",\""+content+"\",\""+author+"\",\""+createtime+"\","+channelid+",\""+imgurl+"\",1)";res = "{\"msg\":\"添加信息失败\",\"code\":0}";num = MysqlUtil.add(sql);if(num>0) {res = "{\"msg\":\"添加信息成功\",\"code\":1}";}break;case "update":id = request.getParameter("id");System.out.println(id);title = request.getParameter("title");channelid = request.getParameter("channelid");imgurl = request.getParameter("imgurl");desc = request.getParameter("desc");author = request.getParameter("author");createtime = request.getParameter("createtime");content = request.getParameter("content");sql="update content set title='"+title+"',`desc`='"+desc+"',content='"+content+"',author='"+author+"',createtime='"+createtime+"',channelid='"+channelid+"',imgurl='"+imgurl+"' where id = "+id;res = "{\"msg\":\"修改信息失败\",\"code\":0}";num = MysqlUtil.update(sql);if(num>0) {res = "{\"msg\":\"修改信息成功\",\"code\":1}";}break;default:break;}response.getWriter().write(res);}}

⑦验证码servlet

package servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.CircleCaptcha;/*** Servlet implementation class CaptchaServlet*/
@WebServlet("/captcha")
public class CaptchaServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public CaptchaServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//定义图形验证码的长、宽、验证码字符数、干扰元素个数CircleCaptcha captcha = CaptchaUtil.createCircleCaptcha(200, 100, 4, 20);//CircleCaptcha captcha = new CircleCaptcha(200, 100, 4, 20);//图形验证码写出，可以写出到文件，也可以写出到流//captcha.write("d:/circle.png");//获取验证码的文字内容//System.out.println(captcha.getCode());HttpSession session = request.getSession();session.setAttribute("captcha", captcha.getCode());//写出到浏览器captcha.write(response.getOutputStream());//验证图形验证码的有效性，返回boolean值//captcha.verify("1234");}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}

⑧图片上传servlet

package servlet;import java.io.IOException;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;import sql.MysqlUtil;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;/*** Servlet implementation class UploadServlet*/
@WebServlet("/upload")
public class UploadServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public UploadServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubresponse.getWriter().append("Served at: ").append(request.getContextPath());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// TODO Auto-generated method stub//设置请求和响应的编码格式req.setCharacterEncoding("utf-8");resp.setContentType("text/json;charset=UTF-8"); resp.setCharacterEncoding("utf-8");//表单String realFileName="";//核心ApiFileItemFactory factory = new DiskFileItemFactory();ServletFileUpload fileUpload = new ServletFileUpload(factory);//判断是否是muitipart/form-data类型if(!ServletFileUpload.isMultipartContent(req)) {//resp.getWriter().println("表单的enctype属性不是multipart/form-data类型");System.out.println("表单的enctype属性不是multipart/form-data类型");return;}//设置单个文件上传大小fileUpload.setFileSizeMax(8*1024*1024); //设置总上传文件大小fileUpload.setSizeMax(60*1024*1024);//解析请求try {List<FileItem> parseRequest = fileUpload.parseRequest(req);//获取数据for (FileItem fileItem : parseRequest) {//判断数据类型是不是普通的form表单字段if(!fileItem.isFormField()) {//上传文件String fileName = fileItem.getName();InputStream fileStream = fileItem.getInputStream();//定义保存的父路径（服务器部署的真实路径）String parentDir = this.getServletContext().getRealPath("/upload");//定义绝对路径//String parentDir = "D:\\eclipse-workspace-new\\myWish\\WebContent\\upload";//使用UUID+文件名的方式，避免文件重名realFileName = UUID.randomUUID().toString()+"-"+fileName;//创建要保存的文件File file = new File(parentDir,realFileName);//判断文件夹是否存在if(!file.getParentFile().exists()) {//创建文件夹[多级文件夹]file.madir是创建单一文件夹file.getParentFile().mkdirs();}//创建输出流OutputStream out = new FileOutputStream(file);//创建字节缓存byte[] buffer = new byte[1024];int len = -1;//一次读取1kb(1024byte),返回-1表明读取完毕while((len = fileStream.read(buffer))!=-1) {//一次写入1kb(1024byte)out.write(buffer,0, len);}System.out.println(realFileName);//冲刷流资源out.flush();//关闭流out.close();fileStream.close();}}} catch (FileUploadException e) {e.printStackTrace();} String json="";if(realFileName!=null && !"".equals(realFileName)) {json = "{\"msg\":\"上传成功\",\"imgurl\":\""+realFileName+"\"}";}else {json = "{\"msg\":\"上传失败\"}";}resp.getWriter().print(json);}}