《构建一个具备从后端数据库获取数据并再前端显示的内容页面:前后端实现解析》
一、前端页面:布局与功能
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找…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU:如何让RNN变得更聪明? 在深度学习的世界里,循环神经网络(RNN)以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而,传统RNN存在的一个严重问题——梯度消失&#…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色,华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型,能助力我们轻松驾驭 DeepSeek-V3/R1,本文中将分享如何…...

Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...

Netty从入门到进阶(二)
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架,用于…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机,因为在使用过程中发现 Airsim 对外部监控相机的描述模糊,而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置,最后在源码示例中找到了,所以感…...
CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为:一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...