匠人精神网站建设,seo 网站排名,新闻资讯app开发,上海哪家网站建设好目录 文章列表的的功能介绍#xff1a; 1、进入页面 2、页面内的各种功能设计 #xff08;1#xff09;文章表格 #xff08;2#xff09;删除按钮 #xff08;3#xff09;编辑按钮 #xff08;4#xff09;发表文章按钮 #xff08;5#xff09;所有分类下拉框 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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title文章列表/titlelink relstylesheet href./CSS/reset.csslink relstylesheet href./CSS/article.css/headbody!-- 在该处代码完成iframe中的头部和选择区域 --div classheader idheader文章列表/divdiv classmain idmaininput typetext classmaintext idmaintext placeholder请输入关键字···select name idmainselect1 valueoption value selected所有分类/option/selectselect name idmainselect2 valueoption value selected所有状态/optionoption value已发布已发布/optionoption value草稿草稿/option/selectbutton classmainbtn idmainbtn筛选/buttonbutton classmainpublish idmainpublish发表文章/button/div!-- 此处是表格渲染的区域 --div classbtmtabletheadth idtitle标题/thth idauthor作者/thth idclassify分类/thth idsubmission提交时间/thth idstate状态/thth idoperate操作/th/theadtbody/tbody/table!-- 该处是页码中跳转按钮和页码变化的按钮 --div classfootspan classbtmup idbtmup上一页/spaninput typetext classbtmtext idbtmtextspan stylebackground-color: white; idbtmt/spanspan classbtmload idbtmload跳转/spanspan classbtmdown idbtmdown下一页/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 perpage10,//请求方式 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 perpage10,// 请求方式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}/tdtd styletext-align: center;${item.author}/tdtd styletext-align: center;${item.category}/tdtd styletext-align: center;${item.date}/tdtd styletext-align: center;${item.state}/tdtd styletext-align: center;button classbtn1 idbtn1编辑/buttonbutton classbtn2 idbtn2删除/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);}})
}
