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

news2024/11/5 14:59:28

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2231814.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

安卓开发之数据库的创建与删除

安卓开发之数据库的创建与删除

目录 前言&#xff1a;基础夯实&#xff1a;数据库的创建数据库的删除注意事项 效果展示&#xff1a;遇到问题&#xff1a;如何在虚拟机里面找到这个文件首先&#xff0c;找到虚拟机文件的位置其次&#xff0c;找到数据库文件的位置 核心代码&#xff1a; 前言&#xff1a; 安…
阅读更多...
基于SSM+微信小程序的订餐管理系统（点餐2）

基于SSM+微信小程序的订餐管理系统（点餐2）

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于SSM微信小程序的订餐管理系统实现了管理员和用户。管理端实现了 首页、个人中心、用户管理、菜品分类管理、菜品信息管理、订单信息管理、配送信息管理、菜品评价管理、订单投诉管理、…
阅读更多...
《AI在企业战略中的关键地位：以微软和阿里为例》

《AI在企业战略中的关键地位：以微软和阿里为例》

内容概要 在当今商业环境中&#xff0c;人工智能&#xff08;AI&#xff09;的影响力如滔滔洪水&#xff0c;愈演愈烈。文章将揭示AI在企业战略中的崛起&#xff0c;尤其以微软和阿里巴巴为代表的企业&#xff0c;这两家科技巨头通过不同方式&#xff0c;将智能技术融入其核心…
阅读更多...
华为荣耀曲面屏手机下面空白部分设置颜色的方法

华为荣耀曲面屏手机下面空白部分设置颜色的方法

荣耀部分机型下面有一块空白区域&#xff0c;如下图红框部分 设置这部分的颜色需要在themes.xml里面设置navigationBarColor属性 <item name"android:navigationBarColor">android:color/white</item>
阅读更多...
【ESP32】ESP-IDF开发 | I2C从机接收i2c_slave_receive函数的BUG导致程序崩溃解决（idf-v5.3.1版本）

【ESP32】ESP-IDF开发 | I2C从机接收i2c_slave_receive函数的BUG导致程序崩溃解决（idf-v5.3.1版本）

1. 问题 在调试I2C外设的demo时&#xff0c;按照官方文档的描述调用相关API&#xff0c;烧录程序后发现程序会不断崩溃&#xff0c;系统log如下。 初步分析log&#xff0c;原因是访问到了不存在的地址。一开始我以为是自己的代码问题&#xff0c;反反复复改了几次都会出现同样的…
阅读更多...
企业数字化转型实施中的挑战与解决方案：架构引领的战略路径

企业数字化转型实施中的挑战与解决方案：架构引领的战略路径

在企业推动数字化转型的过程中&#xff0c;通常会面临复杂的挑战。随着技术的不断演进和业务环境的变化&#xff0c;企业架构&#xff08;Enterprise Architecture, EA&#xff09;成为帮助企业应对这些挑战的关键工具。通过提供一个全面的战略蓝图&#xff0c;EA使企业能够在保…
阅读更多...
桑基图在医学数据分析中的更复杂应用示例

桑基图在医学数据分析中的更复杂应用示例

桑基图&#xff08;Sankey Diagram&#xff09;能够有效地展示复杂的流动关系&#xff0c;特别适合用于医学数据分析中的多种转归和治疗路径的可视化。接下来&#xff0c;我们将构建一个稍微复杂的示例&#xff0c;展示不同疾病患者在治疗过程中的流动&#xff0c;以及他们的治…
阅读更多...
[SICTF Round4] PWN

[SICTF Round4] PWN

这PWN题似乎是给我出的&#xff0c;4个一血1个2血。密码又过于简单。逆向太难了又不大会。 Stack fengshui main可以溢出覆盖rbpret所以它每一步都需要移栈。 可用的ROP里没有pop rdi,在4004c0里有错位的01 5d c3 &#xff1a;add DWORD PTR [rbp-0x3d], ebx 并且有对应的p…
阅读更多...
消息中间件类型介绍

消息中间件类型介绍

ActiveMQ&#xff1a; ActiveMQ可是个老将了&#xff0c;它功能全面、稳定可靠&#xff0c;还支持多种协议和编程语言。如果你需要一个兼容性好、易于集成的消息中间件&#xff0c;ActiveMQ可是个不错的选择。 RabbitMQ&#xff1a; RabbitMQ以其简单易用和高性能著称。它支持丰…
阅读更多...
【设计模式系列】组合模式（十二）

【设计模式系列】组合模式（十二）

目录 一、什么是组合模式 二、组合模式的角色 三、组合模式的典型应用 四、组合模式在Mybatis SqlNode中的应用 4.1 XML映射文件案例 4.2 Java代码使用案例 一、什么是组合模式 组合模式&#xff08;Composite Pattern&#xff09;是一种结构型设计模式&#xff0c;其核…
阅读更多...
Ghidra无头模式（自动化批处理执行重复性任务）

Ghidra无头模式（自动化批处理执行重复性任务）

Ghidra无头模式&#xff08;自动化批处理执行重复性任务&#xff09; 与Ghidra GUI探索单个项目中的单个文件不同&#xff0c;Ghidra headless analyzer&#xff08;Ghidra无头分析器&#xff09;更加适合批处理和用脚本控制Ghidra。 &#xff08;一&#xff09;启动analyzeHea…
阅读更多...
【大众点评】店铺评论 加密参数生成逆向分析

【大众点评】店铺评论 加密参数生成逆向分析

点击好评 https://www.dianping.com/ajax/json/shopDynamic/allReview 分析参数_token 直接搜_token 共17个&#xff0c;优先看和请求相关的 给第一个_token打上断点&#xff0c;然后切换评论&#xff0c;就直接断住了 n h(i, e.sendData) _token: n 现在给它打上断点&am…
阅读更多...
Fsm3

Fsm3

采用读热码编写方式&#xff1a; module top_module(input clk,input in,input areset,output out); ////reg [3:0]A 4d0001;// reg [3:0]B 4d0010;//reg [3:0]C 4d0100;// reg [3:0]D 4d1000; //1、首先用读热码定义四个状态变量parameter A 4d0001 ,B 4d0010, C 4d01…
阅读更多...
在腾讯云服务器上部署MaxKB项目(基于LLM大语言模型的知识库问答系统)

在腾讯云服务器上部署MaxKB项目(基于LLM大语言模型的知识库问答系统)

前言 一&#xff0c; MaxKB介绍 MaxKB是基于LLM大语言模型的知识库问答系统&#xff0c;旨在成为企业的最强大脑。它支持开箱即用&#xff0c;无缝嵌入到第三方业务系统&#xff0c;并提供多模型支持&#xff0c;包括主流大模型和本地私有大模型&#xff0c;为用户提供智能问…
阅读更多...
【大众点评】加密参数生成逆向分析

【大众点评】加密参数生成逆向分析

点击好评 https://www.dianping.com/ajax/json/shopDynamic/allReview 分析参数_token 直接搜_token 共17个&#xff0c;优先看和请求相关的 给第一个_token打上断点&#xff0c;然后切换评论&#xff0c;就直接断住了 n h(i, e.sendData) _token: n 现在给它打上断点&am…
阅读更多...
【Python+Pycharm】2024-Python安装配置教程

【Python+Pycharm】2024-Python安装配置教程

【PythonPycharm】2024-Python安装配置教程 一、下载装 Python 1、进入Python官网首页&#xff0c;下载最新的Python版本 Download Python | Python.org 选择对应版本下载 安装 测试安装情况 python如果安装失败 在系统环境变量添加安装路径 where pythonwin7安装路径添加…
阅读更多...
Python中如何计算整商：详解整除运算及其应用场景

Python中如何计算整商：详解整除运算及其应用场景

目录 一、整除运算的基本概念 1. 语法 2. 工作原理 二、整除运算的详细解析 1. 整数之间的整除 2. 浮点数之间的整除 3. 整数与浮点数之间的整除 三、整除运算的应用场景 1. 数据处理中的取整操作 2. 循环中的步进控制 3. 分页显示数据 4. 时间计算中的取整 四、整…
阅读更多...
sql注入——靶场Less1

sql注入——靶场Less1

?id1 ?id99union select 1,2,3-- 查看占位 ?id1 order by 3-- 尝试出表有几列 ?id1 order by 4-- 说明只有三列 ?id99 union select 1,database(),3-- 查询当前使用的数据库的名称 ?id99 union select 1,group_concat(table_name),3 from information_schema.tables …
阅读更多...
教你将华为手机投屏到macOS系统的电脑，协同办公不用愁！

教你将华为手机投屏到macOS系统的电脑，协同办公不用愁！

这个信息爆炸的时代&#xff0c;工作效率成为了衡量个人能力的一个重要指标。很多人都了解过华为手机的协同办公能力&#xff0c;华为电脑也可以让多台华为手机同时显示在一个电脑屏幕里。 如果电脑不是华为的&#xff0c;电脑系统换成macOS&#xff0c;还能达到将多台华为手机…
阅读更多...
【IC每日一题--单bitCDC跨时钟和同步FIFO】

【IC每日一题--单bitCDC跨时钟和同步FIFO】

IC Daily QA--CDC跨时钟和同步FIFO 1 八股题&#xff1a;CDC跨时钟数据传输问题--单bit跨时钟1.1 从慢时钟到快时钟--->直接打两拍即可&#xff1b;1.2 快时钟到慢时钟1.2.1 脉冲信号展宽边沿检测1.2.2 慢到快时钟--握手边沿 2 手撕题&#xff1a;同步FIFO代码&#xff1b;1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023