当前位置：首页 > news >正文

《构建一个具备从后端数据库获取数据并再前端显示的内容页面：前后端实现解析》

news 2025/7/10 20:43:59

一、前端页面：布局与功能

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/content.css"><script src="js/jquery.js"></script><script src="js/jquery.cookie.js"></script><script src="js/content.js" defer></script>
</head>
<body><div class="container"><!-- 搜索框与按钮区域 --><div class="top"><div class="searchbox">栏目：<select><option value="">全部</option><option value="">通知公告</option><option value="">军训专题</option><option value="">视频河大</option></select>标题：<input type="text" placeholder="请输入标题" class="title">作者：<input type="text" placeholder="请输入作者" class="author"><input type="button" value="搜索" class="search"></div><div class="btnbox"><input type="button" value="添加" class="add"><input type="button" value="批量删除" class="remove"></div></div><!-- 数据展示表格 --><table border="1"><thead><tr><td><input type="checkbox" class="check_all"></td><td>id</td><td>栏目</td><td>标题</td><td>摘要</td><td>创建时间</td><td>作者</td><td>封面图</td><td>操作</td></tr></thead><tbody><tr><td><input type="checkbox"></td><td>id</td><td>栏目</td><td>标题</td><td>摘要</td><td>创建时间</td><td>作者</td><td><img src="img/4162a71b86c33e60fde74366a43b8a9.jpg"></td><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>1</li><li>2</li><li>3</li><li>4</li><li>下一页</li><li>尾页</li> --></ul></div>
</body>
</html>

在这个 HTML 结构中，我们可以看到页面被清晰地划分为几个功能区域：

搜索框与按钮区域：位于页面顶部，用户可以通过选择栏目、输入标题和作者信息，然后点击 “搜索” 按钮来查找特定的内容。这里还提供了 “添加” 和 “批量删除” 按钮，分别用于添加新内容和删除多条选中的记录。
数据展示表格：用于展示从后端获取到的内容数据，每一行代表一条记录，包含了诸如 id、栏目、标题、摘要、创建时间、作者、封面图等信息，并且每条记录还提供了 “修改” 和 “删除” 操作按钮。
页码导航区域：虽然初始时可能为空，但在加载数据后，会根据数据量动态生成页码导航链接，方便用户在多页数据之间进行切换。

2. 样式设置

为了让页面有一个良好的视觉呈现，我们使用了 CSS 样式来对页面元素进行布局和美化。以下是一些关键的 CSS 样式设置：

* {padding: 0;margin: 0;
}img {width: 100px;
}li {list-style: none;
}.container {padding: 20px;
}.container.top {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;
}.container.top.searchbox {color: rgb(81, 81, 81);font-weight: 600;font-size: 14px;
}.container.top.searchbox input[type=text],
.container.top.searchbox select {margin-right: 10px;padding: 5px;outline: none;border-radius: 3px;border: 1px solid rgb(81, 81, 81);font-size: 13px;
}.container.top input[type=button],
table tbody td input {width: 60px;color: #fff;font-size: 13px;padding: 5px;border: none;background: rgb(255, 184, 0);
}.container.top.btnbox input[type=button]:nth-of-type(1) {background: rgb(162, 51, 198);
}.container.top.btnbox input[type=button]:nth-of-type(2) {background: rgb(144, 54, 78);
}table {border: 1px solid rgb(247, 222, 229);border-collapse: collapse;width: 100%;
}table thead th {background: rgb(247, 247, 248);color: rgb(81, 81, 81);font-weight: 500;padding: 5px;font-size: 13px;
}table tbody td {text-align: center;color: rgb(81, 81, 81);padding: 4px;font-size: 14px;
}table tbody td input {font-size: 12px;
}table tbody td input.update {background: rgb(30, 159, 255);
}table tbody td input.delete {background: rgb(22, 159, 255);
}.page {margin-top: 20px;display: flex;justify-content: flex-end;
}.page li {border: 1px solid rgb(81, 81, 81);color: rgb(81, 81, 81);padding: 4px 3px;font-size: 12px;margin: 2px;cursor: pointer;
}.page li.current {background: rgb(22, 148, 122);color: #fff;
}

通过这些 CSS 样式，我们对页面的整体布局、元素的大小、颜色、边框等进行了细致的设置，使得页面看起来更加整洁、美观且易于操作。

3. 前端交互逻辑（JavaScript）

前端页面的交互功能主要通过 JavaScript 来实现，这里使用了 jQuery 库来简化 DOM 操作和异步请求等操作。以下是一些关键的 JavaScript 函数及其功能：

加载栏目数据：

$.ajax({url: "SearchChannel",type: "get",async: false, // 同步执行success: function (value) {var arr = value.data;$("select").empty();$("select").append(" <option value=0>全部</option>");for (var i = 0; i < arr.length; i++) {$("select").append("<option value='" + arr[i].id + "'>" + arr[i].channelname + "</option>");}},error: function () {alert("加载栏目出错");}
});

这个函数在页面加载时会被调用，它通过 AJAX 请求从后端的SearchChannelServlet 获取栏目数据，并将数据填充到页面的<select>下拉菜单中，以便用户选择要搜索的栏目。

加载数据和页码：

var pageSize = 6; // 一页大小
var page = 1; // 页码// 进入页面查找
var loadDate = function () {var channelid = $("select").val();var title = $(".title").val();var author = $(".author").val();$.ajax({url: "SearchContent",type: "get",data: {channelid,title,author,pageSize,page,},success: function (value) {$("tbody").empty();var arr = value.data;for (var i = 0; i < arr.length; i++) {$("tbody").append("<tr>" +"<td><input type='checkbox' class='check_item' index='" + arr[i].id + "'></td>" +"<td>" + arr[i].id + "</td>" +"<td>" + arr[i].channelname + "</td>" +"<td>" + arr[i].title + "</td>" +"<td>" + arr[i].desc + "</td>" +"<td>" + arr[i].creatime + "</td>" +"<td>" + arr[i].author + "</td>" +"<td><img src = 'upload/" + arr[i].imhurl + "' style='width:100px;height:80px;object-fit:cover'></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("查找内容出错");}});
};var loadPage = function () {var channelid = $("select").val();var title = $(".title").val();var author = $(".author").val();$.ajax({url: "GetCount",type: "get",data: {channelid,title,author,pageSize,page,},success: function (value) {$(".page").empty();$(".page").append("<li class='first'>首页</li>");$(".page").append("<li class='prev'>上一页</li>");for (var i = 0; i < Math.ceil(value.code / 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("查找内容出错");}});
}// 进入页面加载数据
loadPage();
loadDate();

这里定义了loadDate函数用于根据用户选择的栏目、输入的标题和作者信息，从后端的SearchContentServlet 获取相应的内容数据，并将数据展示在页面的表格中。同时，loadPage函数用于从后端的GetCountServlet 获取数据总量，根据每页显示的记录数计算出总页数，然后生成页码导航链接并展示在页面上。在页面加载时，这两个函数会被依次调用，以初始化页面数据和页码导航。

搜索功能：

$(".search").on("click", function () {page = 1;loadDate();loadPage();
});

当用户点击 “搜索” 按钮时，会触发这个点击事件处理函数。它首先将页码重置为 1，然后分别调用loadDate和loadPage函数，重新从后端获取符合搜索条件的数据并更新页面展示和页码导航。

页码切换功能：

$(".page").on("click", ".item", function () {page = $(this).text();loadDate();// 样式切换$(this).addClass("current");$(this).siblings().removeClass("current");
});$(".page").on("click", ".first", function () {page = 1;loadDate();// 样式切换$(".item").removeClass("current").first().addClass("current");
});$(".page").on("click", ".last", function () {page = $(".item").length;loadDate();// 样式切换$(".item").removeClass("current").last().addClass("current");
});$(".page").on("click", ".prev", function () {if (page == 1) {alert("当前已经是第一页了");return;}page = page - 1;loadDate();// 样式切换$(".item").removeClass("current").eq(page - 1).add("current");
});$(".page").on("click", ".next", function () {if (page == $(".item").length) {alert("当前已经是最后一页了");return;}page = parseInt(page) + 1;loadDate();// 样式切换$(".item").removeClass("current").eq(parseInt(page) - 1).add("current");
});

这些函数分别处理了用户点击页码导航中的不同按钮（如普通页码、首页、尾页、上一页、下一页）时的操作。它们会根据用户点击的页码更新当前页码变量page，然后调用loadDate函数重新获取相应页码的数据并更新页面展示，同时还会对页码导航的样式进行切换，以突出显示当前页码。

批量删除功能：

$(".remove").on("click", function () {var ids = '';for (var i = 0; i < $(".check_item:checked").length; i++) {ids += $(".check_item:checked").eq(i).attr("index") + ",";}ids = ids.substring(0, ids.length - 1);console.log(ids);if (ids.length == 0) {alert("至少选择一项");return;}// 删除$.ajax({url: "RemoveServlet",type: "post",data: {ids},success: function (value) {alert(value);// 页面刷新location.reload();},error: funciton() {alert("删除失败");}});
});

当用户点击 “批量删除” 按钮时，这个函数会被触发。它会遍历页面上所有被选中的复选框（通过check_item类标识），获取它们对应的记录 id，并将这些 id 拼接成一个字符串，然后通过 AJAX 请求发送到后端的RemoveServlet，在后端完成删除操作后，根据返回结果提示用户并刷新页面。

全选与单选关联功能：

$(".check_all").on("change", function () {if ($(".check_all").prop("checked")) {$(".check_item").prop("checked", true);} else {$(".check_item").prop("checked", false);}
});$("tbody").on("change", ".check_item", function () {var flag = true;for (var i = 0; i < $(".check_item").length; i++) {flag = flag & $(".check_item").eq(i).prop("checked");}if (flag) {$(".check_all").prop("checked", true);} else {$(".check_all").prop("checked", false);}
});

《构建一个具备从后端数据库获取数据并再前端显示的内容页面：前后端实现解析》

一、前端页面：布局与功能

1. 页面结构

2. 样式设置

3. 前端交互逻辑（JavaScript）

相关文章：

《构建一个具备从后端数据库获取数据并再前端显示的内容页面：前后端实现解析》

Rust 力扣 - 59. 螺旋矩阵 II

2.4w字 —TS入门教程

java: 未结束的字符文字报错及解决：将编码全部改为UTF-8或者GBK

Android平台RTSP转RTMP推送之采集麦克风音频转发

认证鉴权框架之—sa-token

Spring源码(十一)：Spring MVC之DispatchServlet

gitbash简单操作

pnpm install安装element-plus的版本跟package.json指定的版本不一样

Java线程池的核心内容详解

学习笔记——三小时玩转JQuery

word试题转excel（最简单的办法，无格式要求）

基于web的中小学成绩管理系统的设计与实现

Conmi的正确答案——在Kibana中进入Elasticsearch的索引管理页面

【JavaEE】【多线程】进阶知识

LeetCode100之三数之和(15)--Java

并发编程三大特性--可见性和有序性

Android 使用ninja加速编译的方法

《Java 实现选择排序：原理剖析与代码详解》

数据结构之双链表——考研笔记

内存分配函数malloc kmalloc vmalloc

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

OkHttp 中实现断点续传 demo

如何为服务器生成TLS证书

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

Mysql中select查询语句的执行过程

QT3D学习笔记——圆台、圆锥

Netty从入门到进阶（二）

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝