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

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

news 2026/2/9 6:37:47

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

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);}
});

相关文章：

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

一、前端页面&#xff1a;布局与功能 1. 页面结构 我们先来看前端页面的 HTML 结构&#xff0c;它主要由以下几个部分组成&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewp…...

编程日记 2024/11/4 15:04:11

Rust 力扣 - 59. 螺旋矩阵 II

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 使用一个全局变量current记录当前遍历到的元素的值 我们只需要一圈一圈的从外向内遍历矩阵&#xff0c;每一圈遍历顺序为上边、右边、下边、左边&#xff0c;每遍历完一个元素后current 我们需要注意的是如果上…...

编程日记 2024/11/4 15:02:09

2.4w字 —TS入门教程

目录 1. 什么是TS 2. TS基本使用 3 TS基础语法 3.1 基础类型约束 3.11 string&#xff0c;number&#xff0c;boolean&#xff0c; null和undefined 3.12 any 3.13 unknown 3.14 void 3.15 数组 3.16 对象 3.2 函数的约束 3.21 普通写法 3.22 函数表达式 3.22 可选…...

编程日记 2024/11/4 15:01:08

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

报错&#xff1a; 解决&#xff1a; 将编码都改成UTF-8或者GBK&#xff1a;...

编程日记 2024/11/4 14:52:59

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

技术背景 RTSP转RTMP推送&#xff0c;好多开发者第一想到的是采用ffmpeg命令行的形式&#xff0c;如果对ffmpeg比较熟&#xff0c;而且产品不要额外的定制和更高阶的要求&#xff0c;未尝不可&#xff0c;如果对产品稳定性、时延、断网重连等有更高的技术诉求&#xff0c;比较…...

编程日记 2024/11/4 14:51:58

认证鉴权框架之—sa-token

一、概述 Satoken 是一个 Java 实现的权限认证框架&#xff0c;它主要用于 Web 应用程序的权限控制。Satoken 提供了丰富的功能来简化权限管理的过程&#xff0c;使得开发者可以更加专注于业务逻辑的开发。 二、逻辑流程 1、登录认证 &#xff08;1&#xff09;、创建token …...

编程日记 2024/11/4 14:50:57

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

本篇重点在于分析Spring MVC与Servlet标准的整合&#xff0c;下节将详细讨论Spring MVC的启动/加载流程、处理请求的具体流程。 一、介绍 Spring框架提供了构建Web应用程序的全功能MVC模块。通过策略接口 &#xff0c;Spring框架是高度可配置的&#xff0c;而且支持多种视图技…...

编程日记 2024/11/4 14:48:54

gitbash简单操作

https://blog.csdn.net/qq_42363495/article/details/104878170 工作区(空间)--暂存区--本地仓库--远程仓库 方法一&#xff1a;创建一个新的分支master&#xff0c;且远程库里没有该分支 只要将.gitignore文件放在文件夹下就可以&#xff0c;.gitignore是文本文档形式的文件…...

编程日记 2024/11/4 14:46:51

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

pnpm安装的版本不同于package.json中指定的版本可能是由于以下几种情况导致的&#xff1a; 依赖项冲突&#xff1a;当项目依赖的不同模块或库之间存在版本冲突时&#xff0c;pnpm可能会安装与package.json中指定的版本不同的版本。这可能是因为其他依赖项指定了不同的版本&…...

编程日记 2024/11/4 14:43:47

Java线程池的核心内容详解

文章内容已经收录在《面试进阶之路》&#xff0c;从原理出发&#xff0c;直击面试难点&#xff0c;实现更高维度的降维打击&#xff01; 目录 文章目录 目录Java线程池的核心内容详解线程池的优势什么场景下要用到线程池呢&#xff1f;线程池中重要的参数【掌握】新加入一个任…...

编程日记 2024/11/4 14:41:44

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

也可以使用在线版&#xff0c;不过在线版需要有网络&#xff0c;网不好的情况下加载也不好 取值的时候也是只会取到有样式的纯文本&#xff0c;不会取到标签&#xff0c;会取到标签效果 prepend和append这两个方法用的比较多&#xff0c;before和affter用的比较少 想要把代码写…...

编程日记 2024/11/4 14:39:41

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

分享早下班的终极秘诀~ 今天本来是个愉快的周五&#xff0c;心里想着周末的聚会和各种安排&#xff0c;然而突然一个加急任务砸了过来——要求在下周一提交一份精细整理的Excel表格&#xff01; 打开Word文件一看&#xff0c;成堆的试题内容需要整理到Excel里。看着满屏的题目…...

编程日记 2024/11/4 14:38:39

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

目录 第一章 研究背景与意义 1.1 研究背景 1.2 研究意义 1.3 研究目的 第二章 关于系统的设计 2.1系统总体架构设计 2.2功能模块设计 2.3数据存储与管理 第三章 系统功能介绍 3.1成绩录入及发布 3.2班级管理和学生管理 3.3成绩分析结果展示 3.4用户反馈与改进 …...

编程日记 2024/11/4 14:35:35

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

Elasticsearch版本&#xff1a;7.17.25 Kibana版本&#xff1a;7.17.25 注&#xff1a;索引即类似mysql的表。 0、进入首页 1、未创建任何“索引模式”时&#xff1a; 1.1、点击左边的三横菜单&#xff1b; 1.2、点击“Discover”&#xff0c;进入“发现”页面&#xff1b; 2…...

编程日记 2024/11/4 14:34:34

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

目录 一、常见的锁策略1.1 悲观锁 vs 乐观锁1.2 重量级锁 vs 轻量级锁1.3 挂起等待锁 vs 自旋锁1.4 普通互斥锁 vs 读写锁1.5 可重入锁 vs 不可重入锁1.6 不公平锁 vs 公平锁 二、synchronized特性2.1 synchronized的锁策略2.2 synchronized加锁过程2.3 其它优化措施 三、CAS3.…...

编程日记 2024/11/4 14:33:33

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

1.问题描述 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意 答案中不可以包含重复的三元组 示例1 输入&…...

编程日记 2024/11/4 14:32:29

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

可见性&#xff1a; 什么是可见性&#xff1a; 可见性是指在数据在收到一个线程的修改时&#xff0c;其他的线程也可以得知并获取修改后的值的属性。这是并发编程的三大特性之一。 为了提高cpu的利用率&#xff0c;cpu在获取数据时&#xff0c;不是直接在主内存读取数据&…...

编程日记 2024/11/4 14:29:26

Android 使用ninja加速编译的方法

ninja的简介 随着Android版本的更迭&#xff0c;makefile体系逐渐增多&#xff0c;导致make单编模块的时间越来越长&#xff0c;每次都需要半个小时甚至更长时间&#xff0c;其原因为每次make都会重新加载所有mk文件&#xff0c;再生成ninja编译&#xff0c;此完整过程十分耗时…...

编程日记 2024/11/4 14:26:17

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

目录 一、引言 二、选择排序原理 三、代码分析 1. 代码整体结构 2. main方法 3. sort方法&#xff08;选择排序核心逻辑&#xff09; 四、测试结果 一、引言 排序算法在计算机科学领域中是非常重要的一部分&#xff0c;它能够帮助我们将无序的数据按照特定的顺序进行排列…...

编程日记 2024/11/4 14:23:13

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

文章目录 一.单链表VS双链表二.创建双链表&#xff08;带头结点&#xff09;三.双链表的插入四.双链表删除五.销毁双链表六.双链表遍历七. 循环链表八.静态链表1.用代码定义一个静态链表 一.单链表VS双链表 单链表中只包含指向它后继结点的指针&#xff0c;所以给定一个结点p找…...

编程日记 2024/11/4 14:21:11

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/21 9:20:07

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2026/1/31 17:09:43

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2026/1/26 14:24:46

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2026/2/6 14:42:11

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2026/2/3 8:13:35

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2026/1/23 11:53:19

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2026/1/26 4:49:33

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01