一、实现技术
前端技术：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.data
for(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.data
for(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.data
for(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=4
function 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 = true
for(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.data
for(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 stub
doGet(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 stub
doGet(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 stub
response.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="";
//核心Api
FileItemFactory 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);
}
}
![[pip] pip 包管理及虚拟环境的使用](https://img-blog.csdnimg.cn/direct/079972ebc46f49c4b98fb90f83a98286.jpeg#pic_center)
