自学内容网 自学内容网
自学内容网 > 正文

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

🕗 发布于 2024-11-08 20:09 数据库  前端  

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

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

原文地址：https://blog.csdn.net/qq_69304031/article/details/143467578

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024