一、登录
首先，做一个登录页面。
在这里，注意
内容框里的提示信息用placeholder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
height: 100vh;
background: linear-gradient(30deg,rgb(47,64,85),rgb(67,92,123)) ;
}
.container{
width: 40%;
height: 50vh;
background-color: #fff;
border-radius: 25px;
margin: 30vh auto;
margin-top: 200px;
min-width: 200px;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.container h2{
color:#6c5ce7;
font-family: aaa;
font-size: 43px;
text-align: center;
padding: 20px;
margin-bottom: 20px;
}
@font-face {
font-family: aaa;
src: url("font/ZiHun17Hao-MengQuGuoDongTi-2.ttf") format("TrueType");
}
.container .info{
width: 80%;
margin-left: 10%;
height: 25px;
}
.container .info input{
width: 100%;
height: 25px;
vertical-align: top;
outline: none;
padding: 0 12px 0 30px;
box-sizing: border-box;
border-radius: 25px;
border-color: #a29bfe;
}
.container .code{
width: 80%;
margin-left: 10%;
height: 25px;
margin-top: 25px;
}
.container .code input{
width: 100%;
height: 25px;
vertical-align: top;
outline: none;
padding: 0 12px 0 30px;
box-sizing: border-box;
border-radius: 25px;
border-color: #a29bfe;
}
.container .yanzheng{
width: 80%;
margin-left: 10%;
height: 25px;
margin-top: 25px;
display: flex;
justify-content: space-between;
/* background-color: aqua; */
}
.container .yanzheng .code{
width: 50%;
outline: none;
padding: 0 12px 0 30px;
box-sizing: border-box;
border-color: #a29bfe;
border-radius: 25px;
margin: 0;
}
.container .yanzheng img{
background-image: url("img/bg.jpg");
color: #0984e3;
width:30%;
text-align: center;
}
.container .login{
border: none;
background: linear-gradient(-30deg,rgb(47,64,85),rgb(67,92,123));
color: #fff;
border-radius: 30px;
width: 50%;
height: 10%;
cursor: pointer;
}
.container span{
text-align: center;
color: rgb(47,64,85);
font-size: 12px;
cursor: pointer;
}
.container span a{
text-decoration: none;
color: #0984e3;
}
</style>
</head>
<body>
<!-- 登录页面开始 -->
<div class="container">
<h2>登录</h2>
<div class="info">
<input type="text" placeholder="用户名" id="name" maxlength="25">
</div>
<div class="code">
<input type="password" placeholder="密码" maxlength="25">
</div>
<div class="yanzheng">
<input type="text" placeholder="验证码" maxlength="25" class="code">
<img src="img/bg.jpg" alt="">
</div>
<input type="button" value="登录" class="login">
<span>没有账号？<a href="#">去注册</a></span>
</div>
<!-- 登录页面结束 -->
</body>
</html>登陆成功之后是内容管理系统页面
二、内容管理系统
- iframe 窗口标签，框架标签 主要作用：嵌套其他页面
src 嵌入的资源
width 宽
height 高
frameborder="0" 去掉边框，是页面嵌入的更融合
name 窗口名称
- jQuery removeClass() 方法
从被选元素移除一个或多个类。
注意：如果没有规定参数，则该方法将从被选元素中删除所有类。
语法
$(selector).removeClass(classname,function(index,currentclass))
| 参数 | 描述 |
|---|---|
| classname | 可选。规定要移除的一个或多个类名称。如需移除若干个类，请使用空格分隔类名称。 注意： 如果该参数为空，则将移除所有类名称。 |
| function(index,currentclass) | 可选。返回要移除的一个或多个类名称的函数。
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/内容管理系统.css">
<script src="js/jquery.js"></script>
<script>
$(function(){
$("ul li a").on("click",function(){
for(var i=0;i<$("ul li a").length;i++){
$("ul li a").eq(i).removeClass("curent")
}
$(this).addClass("curent")
$(".title h4").text($(this).text())
})
})
</script>
</head>
<body>
<div class="container">
<div class="left">
<h4>河北大学内容管理系统</h4>
<ul >
<li>
<img src="img/文件.png" alt="">
<a href="内容管理页面.html" target="aa" class="curent">内容管理</a>
<img src="img/下一个.png" alt="">
</li>
<li>
<img src="img/栏目管理.png" alt="">
<a href="栏目管理页面.html" target="aa">栏目管理</a>
<img src="img/下一个.png" alt="">
</li>
<li>
<img src="img/用户管理.png" alt="">
<a href="用户管理页面.html" target="aa">用户管理</a>
<img src="img/下一个.png" alt="">
</li>
<li>
<img src="img/回收站.png" alt="">
<a href="回收站管理.html" target="aa">回收站</a>
<img src="img/下一个.png" alt="">
</li>
</ul>
</div>
<div class="right">
<div class="top">
<div class="title">
<img src="img/内容.png" alt="">
<h4>内容管理</h4>
</div>
<div class="exit">
<span>您好：</span>
<span>admin</span>
<a href="#">安全退出</a>
</div>
</div>
<iframe src="内容管理页面.html" frameborder="0" name="aa"></iframe>
</div>
</div>
</body>
</html>2.1 内容管理页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/内容管理页面.css">
</head>
<body>
<div class="container">
<div class="top">
<div class="serachbox">
栏目：
<select>
<option value="">全部</option>
<option value="">通知公告</option>
<option value="">军训专题</option>
<option value="">视频河大</option>
</select>标题：
<input type="text" placeholder="请输入标题">
作者：
<input type="text "placeholder="请输入作者">
<input type="button" value="搜索">
</div>
<div class="btnbox">
<input type="button" value="添加">
<input type="button" value="批量删除">
</div>
</div>
<table border="1">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>id</th>
<th>栏目</th>
<th>标题</th>
<th>摘要</th>
<th>创建时间</th>
<th>作者</th>
<th>封面图</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></th>
<td>id</th>
<td>栏目</th>
<td>标题</th>
<td>摘要</th>
<td>创建时间</th>
<td>作者</th>
<td><img src="img/天空.jpg" alt=""></th>
<td>
<input type="button" value="修改" class="update">
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td><input type="checkbox"></th>
<td>id</th>
<td>栏目</th>
<td>标题</th>
<td>摘要</th>
<td>创建时间</th>
<td>作者</th>
<td><img src="img/天空.jpg" alt=""></th>
<td>
<input type="button" value="修改" class="update">
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td><input type="checkbox"></th>
<td>id</th>
<td>栏目</th>
<td>标题</th>
<td>摘要</th>
<td>创建时间</th>
<td>作者</th>
<td><img src="img/天空.jpg" alt=""></th>
<td>
<input type="button" value="修改" class="update">
<input type="button" value="删除" class="delete">
</td>
</tr>
</tbody>
</table>
<ul class="page">
<li>首页</li>
<li>上一页</li>
<li class="curent">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>下一页</li>
<li>尾页</li>
</ul>
</div>
</body>
</html>2.2 数据库设置
内容设置
栏目设置
查询
select content.*,channelname from content,channel where content.channelid=channel.id and available=1 order by createtime desc
三、后端传数据
把文件都转到eclipse中
内容管理页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/内容管理页面.css">
<script src='js/jquery.js'></script>
<script src='js/content.js' defer></script>
</head>
<body>
<div class="container">
<div class="top">
<div class="serachbox">
栏目：
<select>
<option value="">全部</option>
<option value="">通知公告</option>
<option value="">军训专题</option>
<option value="">视频河大</option>
</select>标题：
<input type="text" placeholder="请输入标题">
作者：
<input type="text "placeholder="请输入作者">
<input type="button" value="搜索">
</div>
<div class="btnbox">
<input type="button" value="添加">
<input type="button" value="批量删除">
</div>
</div>
<table border="1">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>id</th>
<th>栏目</th>
<th>标题</th>
<th>摘要</th>
<th>创建时间</th>
<th>作者</th>
<th>封面图</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></th>
<td>id</th>
<td>栏目</th>
<td>标题</th>
<td>摘要</th>
<td>创建时间</th>
<td>作者</th>
<td><img src="img/天空.jpg" alt=""></th>
<td>
<input type="button" value="修改" class="update">
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td><input type="checkbox"></th>
<td>id</th>
<td>栏目</th>
<td>标题</th>
<td>摘要</th>
<td>创建时间</th>
<td>作者</th>
<td><img src="img/天空.jpg" alt=""></th>
<td>
<input type="button" value="修改" class="update">
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td><input type="checkbox"></th>
<td>id</th>
<td>栏目</th>
<td>标题</th>
<td>摘要</th>
<td>创建时间</th>
<td>作者</th>
<td><img src="img/天空.jpg" alt=""></th>
<td>
<input type="button" value="修改" class="update">
<input type="button" value="删除" class="delete">
</td>
</tr>
</tbody>
</table>
<ul class="page">
<li>首页</li>
<li>上一页</li>
<li class="curent">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>下一页</li>
<li>尾页</li>
</ul>
</div>
</body>
</html>$.ajax({
url:"SearchServlet",
type:"get",
success:function(value){
$("tbody").empty()
var arr=value.data
for(var i=0;i<arr.length;i++){
$("tbody").append("<tr>"+
"<td><input type='checkbox'></th>"+
"<td>"+arr[i].id+"</th>"+
"<td>"+arr[i].channelname+"</th>"+
"<td>"+arr[i].title+"</th>"+
"<td>"+arr[i].desc+"</th>"+
"<td>"+arr[i].createtime+"</th>"+
"<td>"+arr[i].author+"</th>"+
"<td><img src='img/天空.jpg' alt=''></th>"+
"<td>"+
"<input type='button' value='修改' class='update'>"+
"<input type='button' value='删除' class='delete'>"+
"</td>"+
"</tr>")
}
},
error:function(){
alert("查找出错啦")
}
})服务生：
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 解决中文乱码
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
// 设置后端给前端返回的数据为json格式
response.setContentType("text/json;charset=utf-8");
//查找
String sql="select content.*,channelname from content,channel where content.channelid=channel.id and available=1 order by createtime desc";
String[] colums= {"id","title","desc","author","createtime","channelid","channelname","content","img"};
String res=MysqlUtil.getJsonBySql(sql, colums);
//给前端响应数据
response.getWriter().write(res);
}
