后台管理系统窗体程序:文章管理 > 文章列表

目录

文章列表的的功能介绍:

        1、进入页面

        2、页面内的各种功能设计

        (1)文章表格

        (2)删除按钮

        (3)编辑按钮

        (4)发表文章按钮

        (5)所有分类下拉框

        (6)关键字检索

        (7)所有状态下拉框

        (8)筛选按钮

        (9)页面底部的页码跳转

一、网页设计

二、HTML代码

三、css代码

四、js代码


 

本次项目为后台管理系统,在本系统内的第四个界面为窗体程序内的文章列表页面,作为首页内大分类下的小分类项目,需要和首页进行联合

文章列表的的功能介绍:

在进行本页面时,我们将进行多个功能的串联

        1、进入页面

        在首页进入时需要变换分类的样式,使用排他思想即可进行该项操作,而在大分类展开小分类的事件中使用基础动画效果即可

        2、页面内的各种功能设计

        (1)文章表格

        由于数据库的调取,我们需要实时对表格进行更改,此时就要进行以下思路:

调取数据 > 渲染表格 > 用户操作数据 > 数据库接受更改,并存储 > 调取数据  >重新渲染表格

在调取接口时,使用拼接表格操作,将需要调取的数据直接进行渲染。

        在调取数据库内的数据时,会同时返回数据量和多种数据,根据调用接口的不同来确定返回数据

        (2)删除按钮

        需注意每条数据在数据库和网页都具有一个唯一的标识符,该行的重点在于点击按钮时告知数据库删除的标识符,并返回数据。在后端数据库更改完数据后我们再次对表格进行渲染,以调取删除后的数据来完成该次操作。

        在编写代码时,我们需注意前端注重的交互体验,即人机交互体验,类似于删除时提醒用户是否删除,告知删除是否完成等操作。

        即注重用户体验也是前端的主要目标之一。

        (3)编辑按钮

        在要求中我们确定编辑按钮作为跳转按钮存在,将跳转到发表文章大分类内进行编辑,但是需要注意的是我们再跳转该网页的同时要附带我们点击编辑时所点击的编辑选项的唯一标识符,作为下个页面内渲染数据的支持

        (4)发表文章按钮

        发表文章按钮同理但是不做携带唯一标识符的处理

        (5)所有分类下拉框

        该下拉框会有专门的接口为我们进行调取来选择本身有的分类选项和后续我们添加的分类选项

        (6)关键字检索

        该处不做交互设计,我们只需要在其中写入数值让其他操作能读取到其中的内容并接收即可

        (7)所有状态下拉框

        该处也不做特殊处理,需要注意某些类似于布尔值一般的对错二选一,我们一般不使用接口进行特殊渲染,而是对其进行选择操作,即返回他们的值然后接收

        (8)筛选按钮

        该处按钮的设计将会返回三个值,分别是关键字检索,所有分类下拉框,所有状态下拉框

即我们的接口将调用多项值,在代码设计中我们将会获取其中的值并返回数据库,然后接收数据库修改后返回的值。

        (9)页面底部的页码跳转

        该处我们需获取表格后对总页数进行显示(后端会返还页数和每页条目消息),获取并写入跳转页等操作

当我们对于这些基础功能进行一些简单的说明和归类后我们就可以开始进行该页面的项目编写

一、网页设计

二、HTML代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文章列表</title><link rel="stylesheet" href="./CSS/reset.css"><link rel="stylesheet" href="./CSS/article.css"></head><body><!-- 在该处代码完成iframe中的头部和选择区域 --><div class="header" id="header">文章列表</div><div class="main" id="main"><input type="text" class="maintext" id="maintext" placeholder="请输入关键字···"><select name="" id="mainselect1" value=""><option value="" selected>所有分类</option></select><select name="" id="mainselect2" value=""><option value="" selected>所有状态</option><option value="已发布">已发布</option><option value="草稿">草稿</option></select><button class="mainbtn" id="mainbtn">筛选</button><button class="mainpublish" id="mainpublish">发表文章</button></div><!-- 此处是表格渲染的区域 --><div class="btm"><table><thead><th id="title">标题</th><th id="author">作者</th><th id="classify">分类</th><th id="submission">提交时间</th><th id="state">状态</th><th id="operate">操作</th></thead><tbody></tbody></table><!-- 该处是页码中跳转按钮和页码变化的按钮 --><div class="foot"><span class="btmup" id="btmup">上一页</span><input type="text" class="btmtext" id="btmtext"><span style="background-color: white;" id="btmt"></span><span class="btmload" id="btmload">跳转</span><span class="btmdown" id="btmdown">下一页</span></div></div></body>
<script src="./JS/jquery.min.js"></script>
<script src="./JS/move.js"></script>
<script src="./JS/article.js"></script></html>

三、css代码

button{cursor: pointer;
}
body
{font-size: 16px;background-color: #f2f3f5;
}
.header
{width: 88vw;height: 4vh;background-color: #fbfbfb;margin: 3vh auto;margin-bottom: 0px;line-height: 4vh;border: 1px solid #a2a2a3;padding-left: 2vw;
}
.main   
{        color: #5b5b5b;font-size: 13px;width: 88vw;background-color: #ffffff;margin: 0vh auto;border: 1px solid #a2a2a3;border-top: none;padding: 2vh 1vw;position: relative;
}
.maintext
{padding-left: 5px;height: 20px;width: 150px;outline: none;margin: 0px 10px;
}
#mainselect1 , 
#mainselect2
{height: 24px;width: 100px;padding-left: 5px;margin-right: 10px;cursor: pointer;
}.mainbtn
{background-color: white;border: 1px solid #5b5b5b;height: 24px;width: 50px;border-radius: 3px;
}.mainpublish
{background-color: #5cb85c;border: none;height: 24px;width: 70px;color: white;border-radius: 3px;position: absolute;right: 20px;
}.btm   
{        height: 75vh;color: #5b5b5b;font-size: 13px;width: 88vw;background-color: #ffffff;margin: 3vh auto;margin-top: 0px;border: 1px solid #a2a2a3;border-top: none;padding: 2vh 1vw;position: relative;
}table
{border: 1px solid #a2a2a3;border-collapse: collapse;font-size: 14px;
}
th ,td{border: 1px solid #a2a2a3;height: 40px;}
td
{padding:0px  10px;
}#title
{width: 50vw;
}
#author
{width: 8vw;
}#classify
{width: 12vw;
}
#submission
{width: 10vw;
}
#state
{width: 10vw;}
#operate
{width: 12vw;
}.btm span{padding: 10px 20px;background-color: #c5c5c5;border-radius: 10px;cursor: pointer;}
.btmtext{min-width: 20px;max-width: 50px;/* padding-left: 5px; */text-align: center;outline: none;   height: 30px;
}
.foot
{position: absolute;bottom: 20px;left: 50%;margin-left: -140px;
}.btn1
{background-color: #ffcb8b;border: 1px solid #3a3a3a;width: 50px;height: 25px;color: black;font-size: 12px;border-radius: 5px;
}
.btn2
{background-color: #d9534f;border: 1px solid #3a3a3a;width: 50px;height: 25px;color: white;border-radius: 5px;font-size: 12px;
}

四、js代码

// 定义文章的跳转页面初始在第一页
var page = 1// 定义后端数据库返回的总页数的变量
var totalpage// 定义状态的值
var state = ""// 定义分类的值
var type = ""// 定义文章列表内的唯一标识符的id值被赋值的对象
var index// 定义关键字检索的值
var key = ""//获取文章列表分类的具体数据并对其进行渲染
getlist()//获取文章列表表格数据并渲染
getTable()//上一页
$("#btmup").on("click", function () {//点击时值是否小于正常页数的最小值if (page > 1) {// 如果不小于则在需要减少时进行自减page--//并重新将赋值给page,同时进行表格的再次渲染,使之前写入的page值发生改变已做到改变渲染的页面getTable()} else {//如果是小于最小值则提示用户已经是首页alert("已经是首页")}})//下一页
$("#btmdown").on("click", function () {//点击时值是否大于正常页数的最大值if (page < totalpage) {//如果不大于则进行自增page++//并重新将赋值给page,同时进行表格的再次渲染,使之前写入的page值发生改变已做到改变渲染的页面getTable()}else {//如果大于最大值则提示用户已经是尾页alert("已经是尾页")}})//跳转
$("#btmload").on("click", function () {//获取到输入的值,并对其中可能出现的浮点数进行向下取整处理//同时对其进行使用变量代替var text = Math.floor($("#btmtext").val())// 当变量在我们后端数据库返回的正常页数内时if (text <= totalpage && text > 0) {// 我们将需要跳转的数赋值给pagepage = text;// 同时进行表格的再次渲染,使之前写入的page值发生改变已做到改变渲染的页面getTable()}// 如果我们获取到的值已经超过了正常页数else {//则提示用户输入正确的页数alert("请输入正确的页数")//同时对我们的输入框进行清空并返回第一页,且再次对表格进行渲染来完成刷新$("#btmtext").val("")$("#btmtext").val(1)getTable()}
})//删除按钮事件
//通过事件委托的形式,在点击时通过父元素来获取到我们点击的元素
$("tbody").on("click", "#btn2", function () {// 定义一个选择提示框,提醒用户是否确定删除var r = confirm("确定要删除吗")// 在此我们获取到该删除按钮父级元素th的父级元素tr,即该行的唯一标识符index = $(this).parents().parents().attr("index")// 如果我们获取到选择提示框的值是trueif (r) {// 开始调用接口$.ajax({// 接口地址url: "http://localhost:8080/api/v1/admin/article/delete",// 请求方式type: "post",// 请求头headers: {"Authorization": sessionStorage.getItem("token")},// 请求体data: {id: index},// 请求成功success(res) {//获取msg的值来判断后端数据库返回值的值是否为我们需要的值if (res.msg == "文章删除成功") {// 重新获取表格数据并渲染getTable()// 并对用户提示该处文章删除成功alert("已删除该文章")}},// 请求失败error(err) {console.log(err)}})}
})//筛选按钮点击事件
$("#mainbtn").on("click", function () {//该处重新对page值进行重置,防止我们再进行筛选时,我们之前的page值还在page = 1// 调取接口$.ajax({// 接口地址// 需注意此时我们的接口返回的值将会对关键字检索,分类选择,状态选择,页数选择,每页显示条数进行筛选url: "http://localhost:8080/api/v1/admin/article/query?key=" + key + "&state=" + state + "&type=" + type + "&page=" + page + "&perpage=10",//请求方式    type: "get",// 请求头headers: {"Authorization": sessionStorage.getItem("token")},// 请求成功success(res) {// 我们的的变量将获取到我们在筛选页面的筛选条件的具体值state = $("#mainselect2").val()type = $("#mainselect1").val()key = $("#maintext").val()// 同时对表格进行重新渲染getTable()},// 请求失败error(err) {// 返回错误console.log(err);}})
})//编辑跳转到发表文章页面
//注意我们的表格内容是使用渲染的方式进行的,我们通过点击事件来获取到我们点击的元素,
$("tbody").on("click", "#btn1", function () {//获取到我们点击的元素,即该行的唯一标识符index = $(this).parents().parents().attr("index")//并将该行的唯一标识符赋值给index,且在跳转时将该标识符进行携带,以实现跳转至编辑页面时我们对于数据的渲染的准确性//在对跳转时我吗们使用location.href来进行跳转,并直接将变量拼接到跳转地址中location.href = `./publish.html?id=` + index// console.log(`./publish.html?id=` + index);})//发表文章按钮的点击事件
$("#mainpublish").on("click", function () {// 由于不需要携带数据,所以直接跳转即可location.href = `./publish.html`
})//表格的渲染,由于需要不断的调用,并且需要在页面开始的时候进行一次渲染,所以将其写成一个封装函数
function getTable() {// 调取接口$.ajax({// 接口地址// 需注意此时我们的接口返回的值将会对关键字检索,分类选择,状态选择,页数选择,每页显示条数进行筛选url: "http://localhost:8080/api/v1/admin/article/query?key=" + key + "&state=" + state + "&type=" + type + "&page=" + page + "&perpage=10",// 请求方式type: "get",// 请求头headers: {"Authorization": sessionStorage.getItem("token")},// 请求成功success(res) {// 此处编写代码时可在控制台获取到所需的数据,但一般省略// console.log(res)// 在msg中获取到数据获取成功时if (res.msg == "数据获取成功") {// 先对总页数进行获取并渲染$("#btmt").html("共 " + res.data.totalPage + " 页")// 声明一个需要进行拼接前的空字符串,且注意带变量为局部变量var str = ""totalpage = res.data.totalPage// 将获取到的对象组成的伪数组进行声明变量并赋值var arr = res.data.data//遍历该数组for (var item of arr) {//在获取到值之后将其进行拼接,并对其加入一个可以在全局读取的唯一标识符//注意此处我们使用的是item.id,即我们获取到的对象中的id值,该值在后端数据库中为唯一的数据标识符str += `<tr index=${item.id}><td>${item.title}</td><td style="text-align: center;">${item.author}</td><td style="text-align: center;">${item.category}</td><td style="text-align: center;">${item.date}</td><td style="text-align: center;">${item.state}</td><td style="text-align: center;"><button class="btn1" id="btn1">编辑</button><button class="btn2" id="btn2">删除</button></td></tr>`// 同时写入两个按钮,一个为编辑,一个为删除}// 将拼接后的字符串写入表格中$("tbody").html(str)//表格的样式,即对表格各行换色$("tr:odd").css("background", "#f5f5f5")}},// 请求失败error(err) {// 返回错误console.log(err);}})//渲染表格后写入当前page值代表的页数$("#btmtext").val(page)}//分类的提取,由于需要不断的调用,并且需要在页面开始的时候进行一次渲染,所以将其写成一个封装函数
function getlist() {// 调用接口 $.ajax({// 接口地址url: "http://localhost:8080/api/v1/admin/category/list",// 请求方式type: "get",// 请求头headers: {"Authorization": sessionStorage.getItem("token")},// 请求成功success(res) {// console.log(res)if (res.msg == "获取成功") {// 声明一个变量进行拼接var str = ""var arr = res.data//先拼接一个默认选中且不再数据库内的全选选项str += `<option value="" selected > 所有分类</option >`for (var item of arr) {//遍历并拼接分类数据str += `<option value="${item.id}">${item.name}</option>`}//将其写入下拉框中$("#mainselect1").html(str)}},// 请求失败error(err) {// 返回错误console.log(err);}})
}

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows10/11开启卓越性能模式 windows开启卓越性能电源模式 工作电脑开启卓越性能模式 电脑开启性能模式

Windows10/11开启卓越性能模式 windows开启卓越性能电源模式 工作电脑开启卓越性能模式 电脑开启性能模式 1、所要用到的激活工具2、开启电脑卓越性能模式Windows11Windows10在电源模式中选择卓越性能模式 3、将系统版本切换为 工作站版本 1、所要用到的激活工具 KMS激活工具(…

D62【python 接口自动化学习】- python基础之数据库

day62 SQL 基础 学习日期&#xff1a;20241108 学习目标&#xff1a;MySQL数据库-- 131 SQL基础和DDL 学习笔记&#xff1a; SQL的概述 SQL语言的分类 SQL的语法特征 DDL - 库管理 DDL - 表管理 总结 SQL是结构化查询语言&#xff0c;用于操作数据库&#xff0c;通用于绝大…

计算机图形学 实验二 三维模型读取与控制

目录 一、实验内容 二、具体内容 (在实验2.3的基础上进行修改) 1、OFF格式三维模型文件的读取 2、三维模型的旋转动画 3、键盘鼠标的交互 4、模型的修改 三、代码 一、实验内容 读取实验提供的off格式三维模型&#xff0c;并对其赋色。利用鼠标和键盘的交互&#xff0…

Redis 中 Bitmap 原理和应用

Bitmap Redis中的Bitmap&#xff08;位图&#xff09;是一种较为特殊数据类型&#xff0c;它以最小单位bit来存储数据&#xff0c;我们知道一个字节由 8个 bit 组成&#xff0c;和传统数据结构用字节存储相比&#xff0c;这使得它在处理大量二值状态&#xff08;true、false 或…

Springboot3.3.5 启动流程(源码分析)

一图搞懂 SpringBoot 启动流程&#xff08;清晰明了&#xff09;&#xff1a; createWebServer &#xff08;ServletWebApplicationContext&#xff09;流程 finishBeanFactoryInitialization&#xff08;ServletWebApplicationContext&#xff09;Bean装配流程 真正干活的&am…

CSS实现图片3D立体效果

概述 本文主要讲述如何通过 CSS 简单的设置就可以实现图片的 3D 立体效果。 3D 立体效果 当鼠标移入某一个图片上时,其余图片会像该图片倾斜。 具体实现 静图如下: 倒影效果图片会有一个倒影效果,其代码如下: <style>img {-webkit-box-reflect: below 1px linea…

java: 无法访问org.springframework.web.bind.annotation.RequestMapping

一、报错问题 java: 无法访问org.springframework.web.bind.annotation.RequestMapping 二、原因分析 SpringBoot使用了3.0或者3.0以上&#xff0c;因为Spring官方发布从Spring6以及SprinBoot3.0开始最低支持JDK17。所以仅需要将SpringBoot版本降低为3.0以下即可&#xff08;或…

Node.js:Express 服务 路由

Node.js&#xff1a;Express 服务 & 路由 创建服务处理请求req对象 静态资源托管托管多个资源挂载路径前缀 路由模块化 Express是Node.js上的一个第三方框架&#xff0c;可以快速开发一个web框架。本质是一个包&#xff0c;可以通过npm直接下载。 创建服务 Express创建一…

知识中台赋能法律咨询服务:八大核心优势

法律咨询服务领域&#xff0c;知识中台以其独特的功能和优势&#xff0c;为行业发展注入了新的活力。以下是知识中台在法律咨询服务中展现的八大核心优势&#xff1a; 一、法律知识资源的全面整合 知识中台致力于收集、整理和整合各类法律知识资源&#xff0c;包括法律法规、…

【青牛科技】GC5931:工业风扇驱动芯片的卓越替代者

在工业领域&#xff0c;工业风扇的稳定高效运行对于维持良好的生产环境至关重要。而驱动芯片作为工业风扇控制系统的核心元件&#xff0c;其性能直接影响风扇的工作状态。芯麦 GC5931 作为一款新型驱动芯片&#xff0c;在替代 A5931/Allegro 应用于工业风扇中展现出了非凡的优势…

使用Netty实现一个简单的聊天服务器

✅作者简介&#xff1a;热爱Java后端开发的一名学习者&#xff0c;大家可以跟我一起讨论各种问题喔。 &#x1f34e;个人主页&#xff1a;Hhzzy99 &#x1f34a;个人信条&#xff1a;坚持就是胜利&#xff01; &#x1f49e;当前专栏&#xff1a;Netty &#x1f96d;本文内容&a…

【HarmonyOS】鸿蒙应用低功耗蓝牙BLE的使用心得 (二)

【HarmonyOS】鸿蒙应用低功耗蓝牙BLE的使用心得 &#xff08;二&#xff09; 一、前言 目前鸿蒙应用的实现逻辑&#xff0c;基本都是参考和移植Android端来实现。针对BLE低功耗蓝牙来说&#xff0c;在鸿蒙化的实现过程中。我们发现了&#xff0c;鸿蒙独有的优秀点&#xff0c…

第六十三周周报 GCN-CNNGA

文章目录 week 63 GCN-CNNGA摘要Abstract1. 题目2. Abstract3. 文献解读3.1 Introduction3.2 创新点 4. 网络结构4.1 数据分析4.2 混合深度学习框架的发展4.3 Mul4.4 CNN block4.5 GCN block4.6 GRU block4.7 注意力机制4.8 模型评估标准 5. 实验结果5.1 不同邻接矩阵的性能评价…

geoserver+postgis 最短路径规划常见问题记录

一、说明 具体实现步骤可参考其他博文&#xff0c;下面的这个博主写的很详细&#xff0c;步骤很清晰&#xff0c;注释也很全。geoserverpostgis 最短路径规划_geoserver 最短路径 存储过程-CSDN博客 本次文章&#xff0c;仅记录过程中需要注意的方面。 二、数据预处理 目标&a…

石油安全理论知识题库 考试宝在线刷题

一、单选题&#xff08;每题有4个选项&#xff0c;其中只有1个是正确的&#xff0c;将正确的选项号填入括号内&#xff09; 1.新修订的《中华人民共和国安全生产法》于&#xff08; &#xff09;正式实施。 A、2014年1月1日 B、2014年12月1日 C、2015年1月1日 D、2015年…

航空标志灯技术革新:提升夜间飞行安全

航空标志灯 随着低空飞行活动的增多和新型飞行器&#xff08;如无人机、热气球和直升机&#xff09;的普及&#xff0c;地面重要设施的安全面临前所未有的挑战。因此&#xff0c;航空标志灯的安装变得尤为重要。它们通过提升城市天际线、广袤乡村、跨河桥梁及电力网络等复杂地…

前后端交互接口(三)

前后端交互接口&#xff08;三&#xff09; 前言 前两集我们先做了前后端交互接口的约定以及浅浅的阅读了一些proto代码。那么这一集我们就来看看一些重要的proto代码&#xff0c;之后把protobuffer给引入我们的项目当中&#xff01; gateway.proto 我们来看一眼我们的网关…

机器学习—sigmoid的替代品

Z状结肠激活函数&#xff0c;在隐藏层中&#xff0c;在输出层&#xff0c;因为用逻辑回归建立神经网络&#xff0c;创造了大量的逻辑回归单元&#xff0c;但是如果你使用其他激活函数&#xff0c;神经网络可以变得更加强大。 以需求预测为例&#xff0c;给定价格&#xff0c;航…

数据分析-44-时间序列预测之深度学习方法TCN

文章目录 1 TCN简介1.1 网络示意图1.2 TCN优点2 模拟应用2.1 模拟数据2.2 预处理创建滞后特征2.3 划分训练集和测试集2.4 创建TCN模型2.5 模型训练2.6 模型预测3 自定义my_TCN模型3.1 my_TCN()函数3.2 训练模型3.3 模型预测3.4 改进4 参考附录1 TCN简介 时间卷积网络(TCN)是…

2024最新AI绘画系统软件(Midjourney)+GPT4文档分析总结,多模态识图理解,AI文生图/图生图/混图生图(图像混合)

一、前言 人工智能的快速发展已成为全球关注的焦点&#xff0c;其应用领域广泛&#xff0c;涵盖绘图、语言处理、视频编辑等。前沿技术不仅推动科技创新&#xff0c;还在艺术创作、内容生产和商业实践等方面展示出巨大潜力。例如&#xff0c;AI语言模型显著提升了内容自动生成、…