今天是劉小愛自學Java的第109天。
感謝你的觀看，謝謝你。
話不多説，開始今天的學習：
看到了幾個小需求，心裏莫名地覺得癢癢，想把它們搞明白，到底具體是如何實現的？
一開始以為花個十幾二十分鐘就可以將其搞定，搞定後再接着學後面的知識點。
結果光這幾個小問題就搞了我一晚上，唉，果然自己還是太笨了。
是哪些需求呢？容我慢慢道來。
一、業務需求與分析
一共有6個需求，乍一看超簡單，當然事實上確實也不難，但是容易忽視一些小問題。
其中將需求做個整理，如下圖：
分頁欄上一共有10個按鈕，選中按鈕時將其動態置為特殊顏色。
按鈕保證前五後四的原則：
當選中的按鈕小於6時，那頁面顯示的按鈕為1-10這十個按鈕。
當選中的按鈕大於6時，顯示的按鈕就得動態變化了。
選中按鈕為1時：首頁和上一頁隱藏。
選中按鈕為最後頁時：末頁和下一頁隱藏。
點首頁回到第1頁，點末頁回到最後一頁。
點上一頁在當前頁往前移動一位，點下一頁在當前頁往後移動一位。
這些功能使用起來當然簡單了，但是它具體用代碼是如何實現的呢？
寫代碼之前，先做個小小的分析捋一捋思路：
中的四個參數
這幾個參數前兩天都仔細説明過，並且已經從服務器中響應了對應的數據。
中的四個參數
這是我們需要實現的6個小功能中，與之密切關聯的4個變量。
其實在Java中，無外乎就是變量和方法。
遇到了一個需求，首先要考慮的就是將該需求中相關參數定義成Java中的一個變量。
再通過這些變量加上方法的使用實現具體的某個需求，這樣的一個思路過程。
二、Java代碼編寫
因為是在分頁基礎上拓展了這些功能，所以只需要在Service層中添加代碼即可。
都是一些簡單的數學計算，但也正是這，讓我意識到了數學在編程中的重要性：
計算上一頁和下一頁
説白了其實也就是小學數學中的分類討論：
如果當前頁碼不為1，那麼上一頁也就是當前頁碼減1。
如果當前頁碼為1，那麼上一頁不變，還為1。
如果當前頁碼不為最後一頁，那麼下一頁也就是當前頁碼加1。
如果當前頁碼為最後一頁，那麼下一頁不變，還是最後一頁。
這些在Java裏就可以用三元運算符來表示，當然也可以用if條件語句判斷。
計算起始頁和結束頁
這個要考慮到的就更多了，頁面中展示的頁碼為10個並且保證前五後四的原則，那麼：
如果總頁數小於10，就沒法展示10個了，起始頁為1，結束頁為總頁數。
如果總頁數大於10，起始頁就等於當前頁-5，結束頁也就等於當前頁+4。但是要注意：
如果起始頁計算結果小於1，那麼起始頁為1，結束頁為10。
如果結束頁計算結果大於總頁數，那麼結束頁為總頁數，起始頁為總頁數-9。
這些在Java裏就可以用if條件語句來判斷。
最後將數據以鍵值對的形式封裝到map中，再轉換成json數據響應給前端即可。
三、JavaScript代碼編寫
1靜態資源
這是最原始的靜態頁面，數據都是寫死了的，按鈕沒有特殊效果，數據也不能動態變化。
而我們要做的事情就是：將服務器響應的數據動態拼接到該頁面中。
將頁面拼接好之後，要使用選擇器找到該標籤，並將拼接頁面添加到該標籤。
而如何定位該標籤？有兩種選擇器可以用：
可以在標籤中定義一個id，通過id選擇器準確地定位該標籤。
也可以通過層級選擇器定位該標籤。
2取出響應數據
以鍵值對的形式，將服務器響應的數據一一取出來，再將這些數據動態拼接到頁面中。
3拼接頁面
不用我們一個個字母敲，將靜態資源中對應的代碼複製過來，再利用“+”完成動態拼接。
其中getPageData()是我們自定義的一個函數，在該函數里面會向服務器發送請求，從而才會得到上面我們需要知道的這些數據。
在前天就詳細講解過該函數的功能，其有兩個參數：起始頁碼數，每頁顯示數據量。
首頁和上一頁
只有當前頁碼大於1的時候，才會出現首頁和上一頁，使用if判斷語句即可實現，其中：
首頁也就是getPageData（1,8）
上一頁也就是getPageData（prePage,8）
利用for循環完成動態拼接
從beginPage開始到endPage結束，這分別對應着分頁欄上顯示的按鈕數值。
那麼就需要使用到for循環遍歷了，其中每次循環的值為i，每次循環完自增1：
對應的函數為getPageData（i,8）
標籤內容也就是i，對應按鈕顯示的數值。
哪次循環等於當前頁碼數時，就利用css的類選擇器給其設定樣式，從而實現動態變化。
末頁和下一頁
只有當前頁碼數小於總頁數的時候，才會出現末頁和下一頁，同樣使用if判斷語句，其中：
末頁也就是getPageData（totalPage,8）
下一頁也就是getPageData（nextPage,8）
以上也就是對一開始的6個小需求的思路分析、以及代碼編寫的一個完整過程。
最後
謝謝你的觀看。
如果可以的話，麻煩幫忙點個贊，謝謝你。