學(xué)校網(wǎng)站建設(shè)計劃湖南專業(yè)關(guān)鍵詞優(yōu)化服務(wù)水平
目錄
文章列表的的功能介紹：
????????1、進(jìn)入頁面
? ? ? ? 2、頁面內(nèi)的各種功能設(shè)計
????????（1）文章表格
? ? ? ? （2）刪除按鈕
? ? ? ? （3）編輯按鈕
? ? ? ? （4）發(fā)表文章按鈕
? ? ? ? （5）所有分類下拉框
? ? ? ? （6）關(guān)鍵字檢索
? ? ? ? （7）所有狀態(tài)下拉框
? ? ? ? （8）篩選按鈕
? ? ? ? （9）頁面底部的頁碼跳轉(zhuǎn)
一、網(wǎng)頁設(shè)計
二、HTML代碼
三、css代碼
四、js代碼
?
本次項目為后臺管理系統(tǒng)，在本系統(tǒng)內(nèi)的第四個界面為窗體程序內(nèi)的文章列表頁面，作為首頁內(nèi)大分類下的小分類項目，需要和首頁進(jìn)行聯(lián)合
文章列表的的功能介紹：
在進(jìn)行本頁面時，我們將進(jìn)行多個功能的串聯(lián)
????????1、進(jìn)入頁面
? ? ? ? 在首頁進(jìn)入時需要變換分類的樣式，使用排他思想即可進(jìn)行該項操作，而在大分類展開小分類的事件中使用基礎(chǔ)動畫效果即可
? ? ? ? 2、頁面內(nèi)的各種功能設(shè)計
????????（1）文章表格
????????由于數(shù)據(jù)庫的調(diào)取，我們需要實時對表格進(jìn)行更改，此時就要進(jìn)行以下思路：
調(diào)取數(shù)據(jù) > 渲染表格 > 用戶操作數(shù)據(jù) > 數(shù)據(jù)庫接受更改，并存儲 > 調(diào)取數(shù)據(jù)? >重新渲染表格
在調(diào)取接口時，使用拼接表格操作，將需要調(diào)取的數(shù)據(jù)直接進(jìn)行渲染。
? ? ? ? 在調(diào)取數(shù)據(jù)庫內(nèi)的數(shù)據(jù)時，會同時返回數(shù)據(jù)量和多種數(shù)據(jù)，根據(jù)調(diào)用接口的不同來確定返回數(shù)據(jù)
? ? ? ? （2）刪除按鈕
????????需注意每條數(shù)據(jù)在數(shù)據(jù)庫和網(wǎng)頁都具有一個唯一的標(biāo)識符，該行的重點在于點擊按鈕時告知數(shù)據(jù)庫刪除的標(biāo)識符，并返回數(shù)據(jù)。在后端數(shù)據(jù)庫更改完數(shù)據(jù)后我們再次對表格進(jìn)行渲染，以調(diào)取刪除后的數(shù)據(jù)來完成該次操作。
? ? ? ? 在編寫代碼時，我們需注意前端注重的交互體驗，即人機交互體驗，類似于刪除時提醒用戶是否刪除，告知刪除是否完成等操作。
????????即注重用戶體驗也是前端的主要目標(biāo)之一。
? ? ? ? （3）編輯按鈕
? ? ? ? 在要求中我們確定編輯按鈕作為跳轉(zhuǎn)按鈕存在，將跳轉(zhuǎn)到發(fā)表文章大分類內(nèi)進(jìn)行編輯，但是需要注意的是我們再跳轉(zhuǎn)該網(wǎng)頁的同時要附帶我們點擊編輯時所點擊的編輯選項的唯一標(biāo)識符，作為下個頁面內(nèi)渲染數(shù)據(jù)的支持
? ? ? ? （4）發(fā)表文章按鈕
? ? ? ? 發(fā)表文章按鈕同理但是不做攜帶唯一標(biāo)識符的處理
? ? ? ? （5）所有分類下拉框
? ? ? ? 該下拉框會有專門的接口為我們進(jìn)行調(diào)取來選擇本身有的分類選項和后續(xù)我們添加的分類選項
? ? ? ? （6）關(guān)鍵字檢索
? ? ? ? 該處不做交互設(shè)計，我們只需要在其中寫入數(shù)值讓其他操作能讀取到其中的內(nèi)容并接收即可
? ? ? ? （7）所有狀態(tài)下拉框
? ? ? ? 該處也不做特殊處理，需要注意某些類似于布爾值一般的對錯二選一，我們一般不使用接口進(jìn)行特殊渲染，而是對其進(jìn)行選擇操作，即返回他們的值然后接收
? ? ? ? （8）篩選按鈕
? ? ? ? 該處按鈕的設(shè)計將會返回三個值，分別是關(guān)鍵字檢索，所有分類下拉框，所有狀態(tài)下拉框
即我們的接口將調(diào)用多項值，在代碼設(shè)計中我們將會獲取其中的值并返回數(shù)據(jù)庫，然后接收數(shù)據(jù)庫修改后返回的值。
? ? ? ? （9）頁面底部的頁碼跳轉(zhuǎn)
? ? ? ? 該處我們需獲取表格后對總頁數(shù)進(jìn)行顯示（后端會返還頁數(shù)和每頁條目消息），獲取并寫入跳轉(zhuǎn)頁等操作
當(dāng)我們對于這些基礎(chǔ)功能進(jìn)行一些簡單的說明和歸類后我們就可以開始進(jìn)行該頁面的項目編寫
一、網(wǎng)頁設(shè)計
二、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中的頭部和選擇區(qū)域 --><div class="header" id="header">文章列表</div><div class="main" id="main"><input type="text" class="maintext" id="maintext" placeholder="請輸入關(guān)鍵字···"><select name="" id="mainselect1" value=""><option value="" selected>所有分類</option></select><select name="" id="mainselect2" value=""><option value="" selected>所有狀態(tài)</option><option value="已發(fā)布">已發(fā)布</option><option value="草稿">草稿</option></select><button class="mainbtn" id="mainbtn">篩選</button><button class="mainpublish" id="mainpublish">發(fā)表文章</button></div><!-- 此處是表格渲染的區(qū)域 --><div class="btm"><table><thead><th id="title">標(biāo)題</th><th id="author">作者</th><th id="classify">分類</th><th id="submission">提交時間</th><th id="state">狀態(tài)</th><th id="operate">操作</th></thead><tbody></tbody></table><!-- 該處是頁碼中跳轉(zhuǎn)按鈕和頁碼變化的按鈕 --><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">跳轉(zhuǎn)</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代碼
// 定義文章的跳轉(zhuǎn)頁面初始在第一頁
var page = 1// 定義后端數(shù)據(jù)庫返回的總頁數(shù)的變量
var totalpage// 定義狀態(tài)的值
var state = ""// 定義分類的值
var type = ""// 定義文章列表內(nèi)的唯一標(biāo)識符的id值被賦值的對象
var index// 定義關(guān)鍵字檢索的值
var key = ""//獲取文章列表分類的具體數(shù)據(jù)并對其進(jìn)行渲染
getlist()//獲取文章列表表格數(shù)據(jù)并渲染
getTable()//上一頁
$("#btmup").on("click", function () {//點擊時值是否小于正常頁數(shù)的最小值if (page > 1) {// 如果不小于則在需要減少時進(jìn)行自減page--//并重新將賦值給page,同時進(jìn)行表格的再次渲染,使之前寫入的page值發(fā)生改變已做到改變渲染的頁面getTable()} else {//如果是小于最小值則提示用戶已經(jīng)是首頁alert("已經(jīng)是首頁")}})//下一頁
$("#btmdown").on("click", function () {//點擊時值是否大于正常頁數(shù)的最大值if (page < totalpage) {//如果不大于則進(jìn)行自增page++//并重新將賦值給page,同時進(jìn)行表格的再次渲染,使之前寫入的page值發(fā)生改變已做到改變渲染的頁面getTable()}else {//如果大于最大值則提示用戶已經(jīng)是尾頁alert("已經(jīng)是尾頁")}})//跳轉(zhuǎn)
$("#btmload").on("click", function () {//獲取到輸入的值，并對其中可能出現(xiàn)的浮點數(shù)進(jìn)行向下取整處理//同時對其進(jìn)行使用變量代替var text = Math.floor($("#btmtext").val())// 當(dāng)變量在我們后端數(shù)據(jù)庫返回的正常頁數(shù)內(nèi)時if (text <= totalpage && text > 0) {// 我們將需要跳轉(zhuǎn)的數(shù)賦值給pagepage = text;// 同時進(jìn)行表格的再次渲染,使之前寫入的page值發(fā)生改變已做到改變渲染的頁面getTable()}// 如果我們獲取到的值已經(jīng)超過了正常頁數(shù)else {//則提示用戶輸入正確的頁數(shù)alert("請輸入正確的頁數(shù)")//同時對我們的輸入框進(jìn)行清空并返回第一頁，且再次對表格進(jìn)行渲染來完成刷新$("#btmtext").val("")$("#btmtext").val(1)getTable()}
})//刪除按鈕事件
//通過事件委托的形式，在點擊時通過父元素來獲取到我們點擊的元素
$("tbody").on("click", "#btn2", function () {// 定義一個選擇提示框，提醒用戶是否確定刪除var r = confirm("確定要刪除嗎")// 在此我們獲取到該刪除按鈕父級元素th的父級元素tr，即該行的唯一標(biāo)識符index = $(this).parents().parents().attr("index")// 如果我們獲取到選擇提示框的值是trueif (r) {// 開始調(diào)用接口$.ajax({// 接口地址url: "http://localhost:8080/api/v1/admin/article/delete",// 請求方式type: "post",// 請求頭headers: {"Authorization": sessionStorage.getItem("token")},// 請求體data: {id: index},// 請求成功success(res) {//獲取msg的值來判斷后端數(shù)據(jù)庫返回值的值是否為我們需要的值if (res.msg == "文章刪除成功") {// 重新獲取表格數(shù)據(jù)并渲染getTable()// 并對用戶提示該處文章刪除成功alert("已刪除該文章")}},// 請求失敗error(err) {console.log(err)}})}
})//篩選按鈕點擊事件
$("#mainbtn").on("click", function () {//該處重新對page值進(jìn)行重置，防止我們再進(jìn)行篩選時，我們之前的page值還在page = 1// 調(diào)取接口$.ajax({// 接口地址// 需注意此時我們的接口返回的值將會對關(guān)鍵字檢索，分類選擇，狀態(tài)選擇，頁數(shù)選擇，每頁顯示條數(shù)進(jìn)行篩選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()// 同時對表格進(jìn)行重新渲染getTable()},// 請求失敗error(err) {// 返回錯誤console.log(err);}})
})//編輯跳轉(zhuǎn)到發(fā)表文章頁面
//注意我們的表格內(nèi)容是使用渲染的方式進(jìn)行的，我們通過點擊事件來獲取到我們點擊的元素，
$("tbody").on("click", "#btn1", function () {//獲取到我們點擊的元素，即該行的唯一標(biāo)識符index = $(this).parents().parents().attr("index")//并將該行的唯一標(biāo)識符賦值給index，且在跳轉(zhuǎn)時將該標(biāo)識符進(jìn)行攜帶，以實現(xiàn)跳轉(zhuǎn)至編輯頁面時我們對于數(shù)據(jù)的渲染的準(zhǔn)確性//在對跳轉(zhuǎn)時我嗎們使用location.href來進(jìn)行跳轉(zhuǎn)，并直接將變量拼接到跳轉(zhuǎn)地址中l(wèi)ocation.href = `./publish.html?id=` + index// console.log(`./publish.html?id=` + index);})//發(fā)表文章按鈕的點擊事件
$("#mainpublish").on("click", function () {// 由于不需要攜帶數(shù)據(jù)，所以直接跳轉(zhuǎn)即可location.href = `./publish.html`
})//表格的渲染，由于需要不斷的調(diào)用，并且需要在頁面開始的時候進(jìn)行一次渲染，所以將其寫成一個封裝函數(shù)
function getTable() {// 調(diào)取接口$.ajax({// 接口地址// 需注意此時我們的接口返回的值將會對關(guān)鍵字檢索，分類選擇，狀態(tài)選擇，頁數(shù)選擇，每頁顯示條數(shù)進(jìn)行篩選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) {// 此處編寫代碼時可在控制臺獲取到所需的數(shù)據(jù)，但一般省略// console.log(res)// 在msg中獲取到數(shù)據(jù)獲取成功時if (res.msg == "數(shù)據(jù)獲取成功") {// 先對總頁數(shù)進(jìn)行獲取并渲染$("#btmt").html("共 " + res.data.totalPage + " 頁")// 聲明一個需要進(jìn)行拼接前的空字符串，且注意帶變量為局部變量var str = ""totalpage = res.data.totalPage// 將獲取到的對象組成的偽數(shù)組進(jìn)行聲明變量并賦值var arr = res.data.data//遍歷該數(shù)組for (var item of arr) {//在獲取到值之后將其進(jìn)行拼接，并對其加入一個可以在全局讀取的唯一標(biāo)識符//注意此處我們使用的是item.id，即我們獲取到的對象中的id值，該值在后端數(shù)據(jù)庫中為唯一的數(shù)據(jù)標(biāo)識符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);}})//渲染表格后寫入當(dāng)前page值代表的頁數(shù)$("#btmtext").val(page)}//分類的提取，由于需要不斷的調(diào)用，并且需要在頁面開始的時候進(jìn)行一次渲染，所以將其寫成一個封裝函數(shù)
function getlist() {// 調(diào)用接口 $.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 == "獲取成功") {// 聲明一個變量進(jìn)行拼接var str = ""var arr = res.data//先拼接一個默認(rèn)選中且不再數(shù)據(jù)庫內(nèi)的全選選項str += `<option value="" selected > 所有分類</option >`for (var item of arr) {//遍歷并拼接分類數(shù)據(jù)str += `<option value="${item.id}">${item.name}</option>`}//將其寫入下拉框中$("#mainselect1").html(str)}},// 請求失敗error(err) {// 返回錯誤console.log(err);}})
}