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

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);
		
	}
相关推荐
大怪v1 小时前
【搞发🌸活】不信书上那套理论！亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
WebDesign_Mu5 小时前
为了庆祝2025英雄联盟全球总决赛开启，我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
做好一个小前端5 小时前
后端接口获取到csv格式内容并导出，拒绝乱码
前端·javascript·html
携欢6 小时前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss
Bellafu66610 小时前
selenium的css定位方式有哪些
css·selenium·tensorflow
我有一棵树12 小时前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择，—— 两种变量别混为一谈
前端·css·scss
rising start13 小时前
前端基础一、HTML5
前端·html·html5
Never_Satisfied13 小时前
在JavaScript / HTML中，div容器在内容过多时不显示超出的部分
开发语言·javascript·html
im_AMBER13 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父13 小时前
前端速通—CSS篇
前端·css
热门推荐
01两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答02BongoCat - 跨平台键盘猫动画工具03GitHub 镜像站点04UV安装并设置国内源05Linux下V2Ray安装配置指南06GitLab 零基础入门指南：从安装到项目管理全流程07智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践0846个Nano-banana 精选提示词，持续更新中092025羊城杯网络安全大赛 wp10UV 工具安装与国内镜像源配置指南