后端向页面传数据（内容管理系统）

Lojarro2024-10-10 17:48

一、登录

首先，做一个登录页面。

在这里，注意

内容框里的提示信息用placeholder

html 复制代码 
<!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)* 可选。返回要移除的一个或多个类名称的函数。 * index - 返回集合中元素的 index 位置。 * currentclass - 返回被选元素的当前类名。
html 复制代码 
<!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 内容管理页面

html 复制代码 
<!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 数据库设置

内容设置

栏目设置

查询

sql 复制代码 
select content.*,channelname from content,channel where content.channelid=channel.id and available=1 order by createtime desc

三、后端传数据

把文件都转到eclipse中

内容管理页面

html 复制代码 
<!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>
javascript 复制代码 
$.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("查找出错啦")
	}


})

服务生：

java 复制代码 
	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);
		
	}
相关推荐
荆州克莱2 小时前
深入理解Redis（七）----Redis实现分布式锁
spring boot·spring·spring cloud·css3·技术
会飞的哈士奇2 小时前
Html让两个Dom进行连线 , 可以自定义连接的位置
前端·javascript·html
贩卖纯净水.2 小时前
HTML5和CSS3新增特性
前端·css3·html5
Justinc.4 小时前
CSS3_伸缩盒模型（十）
前端·css·css3
羊小猪~~11 小时前
前端入门一之ES6--递归、浅拷贝与深拷贝、正则表达式、es6、解构赋值、箭头函数、剩余参数、String、Set
开发语言·前端·javascript·css·正则表达式·html·es6
方方怪16 小时前
HTML文本标签学习记录
前端·html
流沙QS16 小时前
时钟之CSS+JS版
前端·javascript·css
墨渊君92517 小时前
CSS 技巧：如何让 div 完美填充 td 高度
前端·javascript·css·web
五寸执念*17 小时前
css新增选择器（二十五课）
前端·css
热门推荐
01PyTorch机器学习实现液态神经网络02聊聊 Python 中的同步原语，为什么有了 GIL 还需要同步原语03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05RAG 实践- Ollama+RagFlow 部署本地知识库06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07【目标跟踪】相机运动补偿08软件工程从理论到实践客观题汇总(头歌第一章至第八章)09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10Unity中PICO实现 隔空取物 和 接触抓取物体