《构建一个具备从后端数据库获取数据并再前端显示的内容页面:前后端实现解析》
一、前端页面:布局与功能
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 请求从后端的SearchChannel
Servlet 获取栏目数据,并将数据填充到页面的<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
函数用于根据用户选择的栏目、输入的标题和作者信息,从后端的SearchContent
Servlet 获取相应的内容数据,并将数据展示在页面的表格中。同时,loadPage
函数用于从后端的GetCount
Servlet 获取数据总量,根据每页显示的记录数计算出总页数,然后生成页码导航链接并展示在页面上。在页面加载时,这两个函数会被依次调用,以初始化页面数据和页码导航。
- 搜索功能:
$(".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. 页面结构 我们先来看前端页面的 HTML 结构,它主要由以下几个部分组成: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewp…...

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

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

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

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

认证鉴权框架之—sa-token
一、概述 Satoken 是一个 Java 实现的权限认证框架,它主要用于 Web 应用程序的权限控制。Satoken 提供了丰富的功能来简化权限管理的过程,使得开发者可以更加专注于业务逻辑的开发。 二、逻辑流程 1、登录认证 (1)、创建token …...
Spring源码(十一):Spring MVC之DispatchServlet
本篇重点在于分析Spring MVC与Servlet标准的整合,下节将详细讨论Spring MVC的启动/加载流程、处理请求的具体流程。 一、介绍 Spring框架提供了构建Web应用程序的全功能MVC模块。通过策略接口 ,Spring框架是高度可配置的,而且支持多种视图技…...
gitbash简单操作
https://blog.csdn.net/qq_42363495/article/details/104878170 工作区(空间)--暂存区--本地仓库--远程仓库 方法一:创建一个新的分支master,且远程库里没有该分支 只要将.gitignore文件放在文件夹下就可以,.gitignore是文本文档形式的文件…...
pnpm install安装element-plus的版本跟package.json指定的版本不一样
pnpm安装的版本不同于package.json中指定的版本可能是由于以下几种情况导致的: 依赖项冲突:当项目依赖的不同模块或库之间存在版本冲突时,pnpm可能会安装与package.json中指定的版本不同的版本。这可能是因为其他依赖项指定了不同的版本&…...

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

学习笔记——三小时玩转JQuery
也可以使用在线版,不过在线版需要有网络,网不好的情况下加载也不好 取值的时候也是只会取到有样式的纯文本,不会取到标签,会取到标签效果 prepend和append这两个方法用的比较多,before和affter用的比较少 想要把代码写…...
word试题转excel(最简单的办法,无格式要求)
分享早下班的终极秘诀~ 今天本来是个愉快的周五,心里想着周末的聚会和各种安排,然而突然一个加急任务砸了过来——要求在下周一提交一份精细整理的Excel表格! 打开Word文件一看,成堆的试题内容需要整理到Excel里。看着满屏的题目…...

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

Conmi的正确答案——在Kibana中进入Elasticsearch的索引管理页面
Elasticsearch版本:7.17.25 Kibana版本:7.17.25 注:索引即类似mysql的表。 0、进入首页 1、未创建任何“索引模式”时: 1.1、点击左边的三横菜单; 1.2、点击“Discover”,进入“发现”页面; 2…...

【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.…...
LeetCode100之三数之和(15)--Java
1.问题描述 给你一个整数数组 nums ,判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ,同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意 答案中不可以包含重复的三元组 示例1 输入&…...
并发编程三大特性--可见性和有序性
可见性: 什么是可见性: 可见性是指在数据在收到一个线程的修改时,其他的线程也可以得知并获取修改后的值的属性。这是并发编程的三大特性之一。 为了提高cpu的利用率,cpu在获取数据时,不是直接在主内存读取数据&…...

Android 使用ninja加速编译的方法
ninja的简介 随着Android版本的更迭,makefile体系逐渐增多,导致make单编模块的时间越来越长,每次都需要半个小时甚至更长时间,其原因为每次make都会重新加载所有mk文件,再生成ninja编译,此完整过程十分耗时…...
《Java 实现选择排序:原理剖析与代码详解》
目录 一、引言 二、选择排序原理 三、代码分析 1. 代码整体结构 2. main方法 3. sort方法(选择排序核心逻辑) 四、测试结果 一、引言 排序算法在计算机科学领域中是非常重要的一部分,它能够帮助我们将无序的数据按照特定的顺序进行排列…...

数据结构之双链表——考研笔记
文章目录 一.单链表VS双链表二.创建双链表(带头结点)三.双链表的插入四.双链表删除五.销毁双链表六.双链表遍历七. 循环链表八.静态链表1.用代码定义一个静态链表 一.单链表VS双链表 单链表中只包含指向它后继结点的指针,所以给定一个结点p找…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...

1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...

以光量子为例,详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学(silicon photonics)的光波导(optical waveguide)芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中,光既是波又是粒子。光子本…...

算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer (1)资源 论文&a…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...

20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码,而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库,可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画,可以包含在你的网页或应用项目中。 3.An…...

STM32---外部32.768K晶振(LSE)无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容(CL)与匹配电容(CL1、CL2)的关系 2. 如何选择 CL1 和 CL…...