畢設開發日記-總集篇

總耗時兩個月的畢業設計終于完成告一段落了，我也回家後放松了幾天。我的畢業設計開發過程中，在每一天結束開發的睡覺前都會在我的手機上記錄今天的開發過程，至于為什麼要用手機記錄而不直接用Typora，可能是習慣吧，之前看書學習遇到靈感總結都是随手掏出手機進行記錄的。現在把所有的開發日記重新記錄放上部落格，當作自己的一段回憶。

一、開發前根據上一個課設獲得的思路

思路1(11.8)：該思路在開發過程中也伴随着修改，也不是最初的版本

多一個複選框tr，再使用jquery的checked選中選擇器獲得元素，通過元素jquery的dom内容操作來擷取表單具體某一項内容，最後使用ajax傳回服務端

添加和删除都使用ajax異步響應。

留言也使用分頁，同時更改業務邏輯，使留言一直顯示。

留言送出也使用ajax

留言頁面內建一個h5的音樂播放器

下載下傳自52player的h5底部欄播放器，但存在邏輯錯誤，隻能播放時切換，暫停是切換後，暫停功能将失效。

改正了這個錯誤，并用ajax和json生成播放清單來播放。還修改了css使之支援bootstrap響應式布局

背景管理table頁面中，包含三個管理。

頁面使用js更換title

使用jq更換加深的li标簽

使用ajax和json變化table内容

admin中有大量的重複代碼，是否可以用controller實作那些echarts和table以及上述三個内容的替換。

update頁面使用ajax和json及jq預先填充輸入框

注冊和update頁面使用ajax和json獲得資料庫資訊，告知使用者名不能一樣，黑馬教程視訊有

登陸和注冊頁面的el表達式使用ajax替換

header頭根據ajax傳的session變換按鈕和圖檔

歌單頁strong填充使用者名

個人中心頁需要改成固定的已登陸，否則無法打開，同時根據gander有不同的頭像

思路2(11.8)：前端前台頁面思路

bookstrap重構:

字型樣式統一用架構

第一行導航欄

第二行container留白内嵌輪播圖

第三行再說

二、前端前台開發階段

這個過程總跨度有半個月時間吧，在我軟考結束後就計劃開始了開發。但也不是一整天的在開發，當時還在學習JQuery+Ajax+Json，在學習感覺疲頓就會開發起來；或者是直接開始開發，煩了就換個環境學習。這個階段是痛苦的，因為我并沒有系統的學習過HTML和CSS，特别是CSS的樣式布局，雖然看懂這些代碼，但想要做出一種樣式時，隻能進行百度CSS方法，因為自己隻有一些基礎的CSS方法。

三、正式開始開發

正式開發是在學習的實習回來後開始的，已經是12月份，在此之前也還有課業考試之類的。

12.2

完成pojo，mapper，service及其他配置檔案，并用junit完成了測試

12.3-12.4

注冊頁面前後端分離設計實作

方案一。

表單不送出，button變為button類型而不是submit，使用ajax傳入請求參數進行處理，然後傳回一個flag，再根據flag填充span或者注冊成功重定向至登入頁面

方案二。

重新設計controller邏輯，使用modelandview進行頁面跳轉設計，但是html能直接擷取model資料，需要綁定到url中進行拆分擷取

方案取舍:

第一個方案雖然需要在前端多寫ajax代碼，但是是異步的而且不需要進行頁面跳轉重新整理，速度很快

第二個方案雖然背景封裝user對象更簡單，但是url會暴露資訊，雖然我這次是個提示資訊，但其他時候呢，不夠安全。

綜述，選擇第一種方案

方案一遇到的問題，ajax的data參數中，key名不需要加引号，之後springmvc會自動映射。嵌套json封裝實體類時，注意格式

12.4-12.5

登入功能使用的ajax實作，比較簡單

html前後端分離實作根據session根本導航欄樣式，有為已登陸的樣式，無為兩個按鈕的思路:

建立兩個不同導航欄html檔案，在頁面加載導航欄檔案時，根據session選擇加載不同的html檔案實作樣式控制

同時想到了安全問題:

把元件html檔案以及背景admin相關的html檔案放入一個pages檔案夾，對其進行過濾器的通路限制

這裡又遇到了一個問題，因為我的登入功能是使用的ajax和responsebody注解的異步，查閱資料顯示該方法無法儲存session，這也是為什麼在controller層用session做判斷傳回時，明明有return傳回值，idea卻報沒有傳回值的錯誤

12.5

解決昨天的晚上問題的思路，

原本是

使用modelandview進行頁面跳轉存儲session并在url中綁上提示字段，通過js判斷url進行alert并跳轉

後來設定viewname時使用redirect關鍵字有問題，就又重新把方法設為String類型後，重定向綁字段跳轉

之後就是按照昨天晚上的思路在每一個需要加載header的頁面都用一個jq的ajax函數判斷user的性别加載不同的圖檔即可

完成了導航欄的變化，完成了登出功能

12.6

其實昨天并沒有完全實作要求的功能，最後是加載兩個不同的html檔案完成的，但是兩個html檔案僅僅隻有一個單詞的不同。

今天就一直在糾結這個問題，今天終于進一步了解了load()函數，在加載導航欄html的同時，還能添加一個函數作為參數完成對該導航欄html頁面元素的設定

同時學會了window.resize()函數的使用，使用它完成了根據視窗大小對頁面設定不同背景

同時今天開始學習vue的知識

今天學到的一個重要知識點:v-for

使用它配合ajax進行table的變化

同時使用v-on的一些補充配合，進行方法邏輯配合

還有最重要的知識點，v-model雙向綁定，進行表單更新

12.8

修正了持久層和業務層的邏輯。

完成了使用者更新頁面:

資訊表單預先根據session填充原來的資訊

密碼表單通過ajax獲得原密碼驗證，在通過ajax更新密碼

重新思考vue的運作和項目的契合方式

原密碼的獲得因為不想再進行一次ajax的送出，是以是在上一個預先填充表單資訊的ajax中儲存的一個全局變量然後在該js方法調用的，不知道會不會用安全問題，浏覽器f12也沒有相關的包就暫時這樣了

又修改了驗證使用者名是否存在的邏輯，原本的邏輯雖然會提示使用者名已存在但是你如果仍要送出也是可以送出的。

現在添加了一個全局js變量用于判斷，同時還根據session的有無，提示是否是否為原使用者名，用于通過驗證可送出。再還需要通過過濾器，若是已登陸有session，則不可以通過url（登入後使用者可頁面本身無按鈕連結進入注冊頁面）進入注冊頁面，否則可能會繞過上述邏輯注冊出一個與目前使用者名相同的使用者

12.10

準備完成曲庫子產品時，想添加标簽和簡介功能是以今天就完成了這個子產品

早上完成了兩個頁面的js代碼，可用與添加簡介和标簽，并變化對應的dom元素，思路是:

在+号标簽上綁定事件在其前面添加一個input元素，同時在input元素上綁定一個回車按鍵事件，回車後先var元素儲存text，然後删除input元素，再添加一個text為var元素的标簽标簽元素。

下午根據一下思路開始:

曲庫子產品的标簽使用session儲存，不儲存到資料庫。歌單标簽和簡介儲存至資料庫，是以有建了兩張MySQL表，同時與pojo，持久層和業務層對應完成，并通過junit測試

今天晚上研究了半晚上的vue或jquery的滑鼠移入移出事件（兩個語言都試過），關于标簽元素移入時顯示x，移出時隐藏x，x用于删除标簽。但是由于原網頁标簽體都是空的，新生成标簽後，滑鼠函數事件就不生效了，不知道是不是作用域或者生命周期的問題。

12.10後半夜-12.11 1點

之後想着先利用後端生成幾個标簽元素。就利用session儲存曲庫的标簽，并顯示。這裡研究了蠻久的session，更了解了SpringMVC的session機制，特别是modelMap這裡。但這裡浪費更多時間的是打錯了單詞，我吐了，英語啊英語。還了解了ajax傳中文亂碼的問題

12.15

今天重新開始了開發，解決了幾天前滑鼠事件，可能是幾天前思維進入死局了，其實就是jq元素選擇錯誤的問題，标簽選對了就很簡單就完成了，就是一個滑鼠事件綁定函數傳入this元素進行子元素的隐藏和顯示就行

為了比對font元素中x号的删除函數，修改了兩處的邏輯:

1.jQuery入口函數填充标簽的ajax處，font标簽增加value屬性為key值

2.前端建立标簽并上傳至session的函數處，修改邏輯。原邏輯會在前端立即生成标簽元素，改為ajax上傳成功後根據傳回值做判斷，正确則重新整理頁面由第一點的jQuery函數生成新标簽。原因:因為直接生成标簽無法知曉session的key值，這樣就沒辦法填充font的value屬性

完成了标簽删除函數的實作，奇怪的是使用map存儲獲得的session，然後對map進行移除元素就能實作session的元素删除，而不需要額外的操作，很友善很奇怪，我也搞不懂。

然後偶然發現一個bug，在添加元素時生成了input元素再點+标簽還會生成input标簽，需要生成了後對+标簽添加css屬性

然後今天晚上完成了使用者簡介的增加，删除和修改。修改處遇到了個問題，就是因為修改前是有簡介的，是以隐藏了input元素，是以在修改函數中是用ID是擷取不到input元素，使它show()顯示出來的，隻能通過append再添加一個input元素進來。這裡還有一個可完善的點，因為一個使用者目前隻有一個歌單，是以簡介也是唯一的，删除簡介隻需要獲得userid就能删除，不需要簡介表的ID，是以簡介表的ID字段是多餘的。

12.18

上午，把歌單标簽的增删查給做完了，因為背景邏輯和前面的簡介相同，前端邏輯又和前面的曲庫标簽一樣，就查方面的json值擷取不一樣。很快就做完了。

下午和晚上磨洋工的把vue應用了起來，完成了歌單和曲庫的歌曲表格，但沒用弄分頁

知道了透明背景色怎麼設定

設定了一下歌單的标題，使用vue

設定了留言闆處使用者名，使用vue

留言顯示處大緻完成，但是時間轉換為json後變為了一串數字，百度找到了解決方案，明天再試

想到了個人中心頁面還要有留言顯示和删除功能

12.19

早上把昨天晚上留下的使用者留言使用者名的問題解決了。因為message表是隻有userid這個字段，沒有username字段的，是以查表擷取不了username。本來是想在message表再添加一個username字段，但user表中username字段不是主鍵，與message表的該字段不能形成主外鍵級聯限制。是以現在的解決方案是建立了一個包含username的vo對象。用它做泛型，使用list儲存獲得的message的list，并根據message的list中的userid獲得username儲存至新vo對象的list中，最後把這個list傳回

這個新vo對象還有一個好處是，不需要在前端頁面把json轉換後的數字轉換成日期格式了，直接講新vo對象的日期對象改為String類型變為日期格式，這樣轉換為json也還是日期格式

晚上完成了遊客和使用者留言的顯示，使用vue前端顯示。完成了留言的儲存，使用者使用資料庫儲存，遊客使用session儲存。在儲存和顯示遊客session時，遇到了比對不了vue的v-for。最後是使用了map裡面再嵌套map解決的。

早上完成了個人中心的留言表格的前端代碼及後端邏輯，并用vue顯示

下午找到了歌單處删除歌單的邏輯錯誤，擷取歌單的邏輯是獲得music的資訊，是以前端獲得的ID是musicid，删除歌單不能以歌單表ID昨晚删除标志，應該為userID＋musicID，因為一個使用者隻能添加一次同一首歌曲，是以這兩個的并集一定是唯一的，是以歌單的ID字段其實是不需要的。這裡邏輯有點像15那天的簡介删除。

其實是可以變成一個使用者有多歌單的，但這樣就需要變很多:

0.講現有歌單資訊表用于表示使用者與歌單關系及其資訊的表，而與歌曲沒有關系，故将musicID字段改為歌單歌曲表ID。建立一個歌單資訊表，主鍵為歌單資訊表ID，再添加一個musicID為外鍵。歌單資訊表在添加一個歌單名稱字段。

1.把簡介表并入歌單資訊表，歌單資訊表ID變成簡介字段的主鍵，一個歌單對應一個簡介。

2.标簽表修改外鍵字段，從userID變為歌單資訊ID。

3.添加邏輯需要修改，因為表關系已經改變，不是使用userID查找原歌單表中該user是否含有該musicID，而是改成前端點選添加按鈕後使用userID查找歌單資訊表中該user下的所有歌單元組中的歌單名稱清單顯示在前端；再根據的點選歌單名稱，查找該歌單資訊元組對應的歌單歌曲表下是否含有該musicID(後端思路:根據歌單資訊表ID查歌單歌曲表的musicID字段，得到一個數組，周遊比對)，有則提示不能重複，無則添加。

4.删除歌單歌曲也不是比對userID+musicID，而是歌單資訊表ID+userID，這裡操作的表對象也變了，變為了歌單歌曲表

5.前端也需要改變，導航欄歌單處點選進去的是有個顯示userID查找歌單資訊表得到資料處理後的表單頁面，同時還包含建立和删除歌單功能，點選歌單欄左側播放圖檔則進入留言播放頁播放，同時需要判斷這個歌單裡面歌曲是否為空，為空則alert報錯；點選右側歌單名稱，則進入原歌單表格頁面，顯示歌單歌曲表格

注:第三點有個難點問題:點選歌曲名稱清單後，不知道li或者a标簽能不能添加value屬性，能的話就能把歌單名稱對應的歌單資訊傳回後端進行處理。不能就尴尬。

同時今天也想把留言邏輯修改一下，将留言表添加musicID字段，将留言與歌曲對應起來，播放某一首歌時，留言也相應改變，同時個人中心留言管理處，也要添加表格字段。但這裡遇到了兩個問題:

1.播放和留言繼承到一個頁面了，播放時不會進行頁面重新整理的，而且我的底部播放器也是一個52player開源的，如何保證播放對應歌曲時，産生一個不同的頁面元素儲存不同的musicID，同時使留言闆處能不停的擷取到這個ID進行ajax局部重新整理，怎麼保證這個函數一直運作

2.遊客留言我是通過session存儲的我就算是增加musicID進行篩選後顯示，那又如何保證上述第一點的局部重新整理和持續擷取問題呢

其他解決方案:跟市面播放器一樣，播放器頁面單獨做出來，留言闆去往按鈕這出現在播放器頁面，也隻能通過這個按鈕去往。通過這個按鈕打開一個新标簽頁的留言闆，資料傳送過去後就寫死了，添加留言也隻添加到你打開時播放的那首歌對應的ID，哪怕現在已經換歌了。

12.21

早上

完成了對昨天下午邏輯的初步修改

想對留言頁UI進行修改，同時把使用者名改為a标簽，點選他後根據使用者名查找使用者ID，再根據使用者ID得到他的歌單資訊，最後跳轉至他的歌單頁playlist

這裡就涉及了一個問題，需要根據對傳過來的參進行判斷，方法參數中添加一個username值，判斷它是否為空進行不同的歌單資訊擷取

下午

爬了一下咪咕音樂的歌單頁，把他修改成了成了自己的歌單頁，但是歌單清單處是使用的position:absolute固定，使用padding控制内距，是以沒辦法使它支援響應式布局。下午研究了很久，做不出原來的效果，沒辦法，就隻能保持原樣了。

晚上就把根據下午做好的歌單頁，把使用者名根據ajax擷取session使用vue替換。歌單表單項使用vue的v-for進行加載，更新了playlist表，增加了一個time字段，更新了持久層和業務層。而且又和message一樣，建立了一個vo對象，vo對象比原playlist對象多了個歌曲數屬性，且time屬性變為String類型，歌曲數屬性是對playlistmusic表進行查詢，也更新了對應的持久層和業務層

12.22

早上完成了對歌單頁的p.name值的修改，url綁定歌單表ID，進入歌單歌曲頁（原歌單頁），對歌單歌曲頁的ajax進行修改，通過擷取url綁定的ID，簡介的添加修改删除函數，以及标簽的添加删除函數的修正。已經歌曲表格的vue邏輯修正

下午完成了歌單頁playlist對具體表單的更新歌單名，删除歌單功能的ajax及後端編寫

晚上

有研究了昨天沒有解決的歌單響應式布局，最終解決方法是:

對應增加col-md類，删除padding内距，删除各個div的固定width，根據col-md的配置設定的百分比配置設定position:absolute的left或者right百分值。這之後歌單圖檔會過大，圖檔加上img-responsive類，同時删除對圖檔的固定高度height，保留width，但删除@media screen修飾，這之後圖檔會成為響應式大小，但不垂直居中，父元素添加display:flex和lign-items:center修飾後完成修改

12.24

今天完成了個人中心頁的留言删除和歌單歌曲頁的移除歌曲功能。兩者邏輯相同。思路是:

點選按鈕後，将傳入的this變為jq元素。用一個數組存儲擷取的複選框的val值，然後對這個數組是否為空進行判斷，為空則将this按鈕的id值push進數組，然後将數組由ajax傳至背景；不為空則先定義一個标志bool值為false，在對數組進行周遊比對數組中是否包含this按鈕的ID，若包含則将bool值設為true，最後對bool元素做分支判斷:若為false則重置數組為空，最後彈窗提示點選對應按鈕或勾選該元素；若為true則同上将數組由ajax傳至背景。背景先建立一個id數組長度的bool數組，對id數組進行周遊，boolz數組存儲每次删除函數傳回的bool值。對bool數組進行周遊，若數組中存在一個false則傳回fail字段，反正傳回success字段。前端ajax對字段進行判斷，提示相應資訊。歌單歌曲就比留言需要多傳回一個歌單表ID字段，因為歌單歌曲表沒有主鍵，删除需要全字段。

還完成了曲庫頁的完善:根據使用者session有無，有則将添加進歌單列變為下拉清單，并用vue生成使用者對應歌單清單，内嵌歌單ID屬性；無則變為一個不可點選按鈕，右邊一個a标簽提示登入。

12.25

早上完成了昨天晚上的對曲庫頁的添加功能的ajax和背景的編寫，ajax的邏輯與昨天删除的删除功能很像，背景隻比昨天的删除函數多了一個歌曲是否存在的判斷，就是用一個數組儲存find函數獲得的list中的ID字段，然後雙層for循環周遊查找而已

下午完成了導航欄中搜尋歌曲功能。

思路是:搜尋表單送出給背景，背景重定向至曲庫頁，同時url綁定title值。對曲庫頁的vue v-for邏輯進行修改，url擷取綁定參數，若為空則是執行查找全部歌曲ajax，不為空執行傳回title值的模糊查詢ajax。

這裡就遇到了問題，傳回的title輸出為亂碼，百度搜尋結果為亂碼過濾器，RequestParam之類的沒用的，後來發現把IDEA編碼，idea中tomcat編碼，tomcat安裝檔案設定編碼，chrome編碼，MySQL編碼設定了個遍，重新開機後解決。輸出正常後，對title再次編碼後綁定url，曲庫頁對title解碼，傳回背景。

頁面div上提示文本根據url有無，及後續模糊查詢結果有無設定不同的文本

晚上完善了曲庫頁，會根據是直接點選還是搜尋出現不同的顯示元素和标題，及搜尋無結果時的顯示文本。根據這個思路修改了歌單頁和歌單歌曲頁的标題，使之也動态調整。思路就是根據某一項比對頁面的資料做判斷，建立jQuery入口函數或者在vue.js的mounted（）方法中調整。

在這學到了一個重要知識點:前端中var元素為空判斷使用jQuery的$.isEmptyObject(var)方法判斷。使用''，null及==undefined做判斷，若元素是一個空白元素時會判斷為非空。

12.28

想到了一個新需求，因為登入後會講查詢到的對應使用者資訊存入session，但在個資訊包括了使用者的密碼，不可避免的不安全，是以就想到将使用者密碼剝離使用者表，建立一個密碼表，裡面字段為使用者ID和使用者密碼，ID為主外鍵對應使用者表。這樣登入時根據傳遞的使用者名查詢使用者資訊，并用一個變量儲存，根據資訊中的ID查詢密碼表的密碼，對應比對前端字段，若一緻則登入成功，将使用者資訊變量存入session。注冊頁面邏輯也要修改，将密碼剝離出user塊，單獨拿出，并單獨存儲值密碼表。個人中心頁修改，根據session的ID查原密碼，而不需要使用一個全局變量儲存。

12.29

今天對昨天的想法進行了實施。經過改進後密碼不會傳回至任何前端頁面。登入或修改密碼隻會在背景進行驗證。

1/登入功能和昨天的想法一緻

2.注冊功能遇到了麻煩，在根據昨天想法完善了前端傳回的json格式後，儲存密碼是遇到了錯誤，原來沒有擷取使用者ID。是以現在思路是在儲存了user元組後，使用一個long變量存儲由使用者名查找到的user.getId，使用該變量儲存密碼。

3.修改密碼邏輯為，一個blur事件的入口函數使用ajax驗證原密碼是否正确，正确則設定全局變量flag為true，錯誤則為false。這個全局變量在修改按鈕的點選事件中用來判斷密碼是否正确，正确且新密碼表單完整正确則傳至背景修改。在邏輯上和修改使用者名是一樣的。就是不知道是否存在flag值被篡改的可能性，不過這也不是我能想到的了。這裡還發現了一個重要知識點:blur時間要在jq的入口函數内部才能生效。

4.修改使用者資訊表單存在邏輯錯誤，進行了修改:判斷是否至少一項資訊被修改的邏輯有誤，已修正。

12.30下午和半夜

修改了業務層和持久層的代碼，使查詢所有歌曲和歌名查詢支援分頁:使用limit?,?字段。添加了兩個查詢條數的方法，用于背景系統的總條數和分頁的總頁數。

修改表現層代碼，使查詢所有歌曲和歌名查詢都是傳回一個hashmap轉化為json，map裡有三個字段，musiclist，總條數和總頁數。

前端修改vue代碼，分頁欄使用v-for生成頁碼，總頁數為ajax獲得綁定至data元素中，同時綁定點選事件将頁碼數傳至獲得歌曲資料的ajax函數，使ajax傳至背景的pageNo變化，獲得不同資料生成不同表格。

但因為最後一頁時通常表格不夠十行，再點選其他滿行頁時，class屬性隻能對剛剛最後一頁行數的前幾行生效，變成不可點選按鈕，其他的就還是原來的下拉清單，這個bug是我需要更換邏輯。

原本想法是删除根據session變化的html元素。vue的data中設定兩個bool元素，根據data傳回的是字元串還是json設定flag1，及json是否為空設定playlist為data還是name:無，再設定flag2。然後在html中根據flag1使用:disabled及三元表達式設定下拉清單按鈕禁用，根據根據flag2使用:class及三元表達式設定disabled下拉清單li禁用。但是不知道為什麼三元表達式邏輯不對，還使用pointer-events:none樣式設定也不對，要麼都不可點選，要麼都可以點選，改兩個flag為字元串進行判斷還是不行。弄到了半夜2.3點，我吐了

1.1

上午和下午

使用:class和三元表達式設定頁碼active。

上一頁和下一頁按鈕綁定事件，使用獲得資料方法，并傳入頁碼+1/-1的頁碼，獲得不同資料，并使用:class和三元表達式設定頁面最前或最後是禁用按鈕。

使用vue的computed屬性設定序号:序号元素綁定computed的屬性方法，形參為目前v-for的index，傳回一個方法，該方法中表達式生成序号，因為綁定是一個方法，是以傳回的也要是一個方法。

使用vue的computed屬性設定頁碼清單:v-for循環computed中的變量屬性，變量屬性方法中邏輯為:想要的樣式為'1 ... x x x ... 頁總數'，是以邏輯是:當總頁數＜8時，直接傳回總頁數用于循環生成7個按鈕，否則，如果目前頁碼＞5中:目前頁面＞＝總頁數-4，傳回'1，...，倒數第五頁至倒數第一頁'；否則傳回'1，...，目前頁，目前頁+1，目前頁+2，...，總頁數'。否則，傳回'1，2，3，4，5，...，總頁數'。

解決昨晚問題:

設定一個flag，昨天三種情況設定不同的字元串。html中，使用v-if，v-else-if對flag判斷，生成下拉清單中不同的ul，沒登陸為'點此登入'的a标簽，無歌單為禁用的'無'li，有歌單就是綁定了添加事件的li

1.5

上午按照1.1号的思路把歌單歌曲頁分頁完成了

下午和晚上先把留言頁面的留言欄樣式布局修改了，參考自歌單頁的div，對原css了解更深了:div中垂直居中是依靠line-height和絕對定位的top屬性實作，但行高屬性會是div中隻能一行，是以删除行高屬性，就能實作多行顯示，靠top實作垂直居中。并把留言分頁完成了，包括使用者留言和遊客留言。

使用者留言邏輯與歌單歌曲分頁類似，就是要從持久層開始改，有點煩。遊客留言分頁前端vue邏輯與使用者留言的一樣，後端邏輯為:若session不為null，，總條數為map的size，總頁數也是以可得，也建立一個hashmap，前兩個與使用者留言的一樣，最後的messagelist為:建立一個arraylist用來存儲message的session。根據pageNo使用map.get()擷取三個message的session存入list中，存入前需要判斷後兩個是否為空，為空則不存，最後把這個list存入map的messages鍵中即可。

總頁數還發現一個bug，原本都是總條數/顯示條數+1。但如果剛好整除時頁數就會多1，是以要先判斷是否整除，整除則不加1。

同時使用者的username為a标簽，可以檢視其他使用者的歌單，但功能還沒實習，要明天了

1.6

先是完成了個人中心頁的留言表格分頁，因為昨天順手把後端代碼改過了，今天就根據昨天的邏輯與完成vue的邏輯即可。

然後完成了留言頁點選使用者名跳轉顯示其他使用者的歌單，就是根據url是否綁定id，ajax調用不同的springmvc方法即可，原本12.21的想法是在一個springmvc中根據傳入的id判斷他是否為空來确定使用session還是傳值，但userID屬性不能不傳，因為它是long屬性，不能轉換為null，是以設定了兩個springmvc方法。再要修改标題和使用者名顯示，不能使用原來的session資料，是以在user表現層添加了根據ID查詢使用者的mvc，靠他修改非本使用者的顯示。

然後發現一個bug:非本使用者點選進入歌單和歌曲頁後，也能進行修改和删除，需要對此進行修改。

修改了歌單頁，根據是否有?綁定設定一個flag，根據flag使用v-if控制建立歌單元素和兩個按鈕元素是否顯示。

歌曲頁本來想在url再綁定一個用于判斷的flag，flag根據歌單頁url是否有?綁定設定，然後在歌曲頁根據這個flag判斷進行元素更改。但是這樣存在一個嚴重bug，使用者可以輕易獲得兩個flag，然後修改url即可對他人歌單就行更改。

後來想到的是使用springmvc進行轉發并綁定歌單ID和flag，然後使用Thymeleaf模闆引擎在js中擷取這兩個值，然後就是上述一樣的判斷後處理。但使用了這個模闆引擎，雖然頁面字尾也還是html，但這就不是嚴格的前後端分離了，就沒有采用。

想了很久，本來想要使用session存ID然後擷取查詢，但是springmvc方法隻負責傳資料，還不如使用字尾友善。後來終于想到對傳遞過來的歌單ID進行周遊比較，以此設定一個flag的值，再想到分頁的思路，把資料和flag都放入hashmap中傳回至前端，前端依靠flag的值進行相應的元素處理。（包括vue中的表格資料和頁頭的歌單資訊兩者，是以是兩處修改，兩個flag），明天再實作了，今天又12點了。

1.8

上午

想到了網站還沒使用過轉發功能，現在想起可以用轉發來完善網站的url，使之更完善:

1.曲庫頁可以使用轉發功能，點選導航的為'showmusic/all'的轉發，查詢為'showmusic/search?{title}'的轉發，轉發時不綁定資料，html中根據url再通過ajax查原來的springmvc方法獲得資料。

2.歌單頁也使用轉發功能:導航欄點選的為'playlist/myplaylist'，留言頁點選為'playlist/{userID}'， 轉發時也不綁定資料，html中根據url再通過ajax查原來的springmvc方法獲得資料。

3.歌單歌曲頁也使用轉發功能:url統一為'showplaylist/{playlistID}'，轉發時也不綁定資料，html中根據url再通過ajax查原來的springmvc方法獲得資料，同時要實作前天說的功能。

還發現了一個可以完善的地方:登入功能使用的不是ajax，同步送出每次都要重新整理頁面，這樣錯誤就全要重打，很蠢。改為使用ajax異步送出。

這四個功能加上前天的功能下午完成

下午完成了登入功能的晚上，完成了曲庫頁的轉發功能，發現一個需要完善的地方，路徑屬性，包括:url，href，src都需要使用絕對路徑才能保證在轉發頁中檔案能加載，标簽能跳轉。

還有困擾很久的bug:搜尋欄的空格判斷，進過blur事件，jQuery入口函數的blur事件和普通函數幾經實驗，最後是普通函數+$.tirm(val值對象)判斷終于解決

晚上完成了歌單頁的跳轉，還發現了一個bug，使用者點選自己的留言時，跳轉的頁面不是本身的'playlist/myplaylist'，而是'playlist/userID'。修複:多一個ajax擷取session的ID，判斷即可。但是并沒有生效，換到另一個ajax的js檔案（它引用在head中）也沒用生效，算了。

還完成了歌單歌曲頁的跳轉，同時修改了昨天的思路，建立了一個springmvc的方法，用它比較session的使用者是否包含該歌單ID，回傳一個字元串用于判斷。vue中ajax調用後設定vue中data的flag，根據flag使用v-if設定移除列是否顯示；另一個js中設定一個flag全局變量，根據ajax調用後設定該flag，後續根據它對元素進行禁用或隐藏。

完成了歌單頁的分頁，每頁顯示兩個歌單div。

優化了驗證碼util。設定驗證碼背景為白色，同時調整了文字的y軸，使其不會太靠上而顯示不全。最後調整了随機顔色傳回，不會出現白色文字和幹擾線。

修複了8号留言頁至歌單頁的跳轉問題，當時想法是根據ajax判斷後設定一個flag，然後根據這個flag判斷跳轉，就是這個原因導緻無法跳轉。将href跳轉直接放在ajax判斷後進行跳轉即可。

發現了查詢歌單是否為登入使用者的歌單是有bug，無論是否是都會不顯示移除列，修改vue為onload加載并根據回傳值設定flag為不同bool值解決（原為String類型）。

發現bug:歌單歌曲頁和曲庫頁的添加标簽時空格也會添加。歌單歌曲頁添加/修改簡介空格也會添加/修改。根據8号的思路，将val先.tirm()去空格然後.isEmptyObject()判斷。

優化了曲庫頁标簽功能:沒登入時添加标簽按鈕禁用，同時優化标簽的儲存方式，儲存時再添加一個字段為userID，同時儲存前對session查詢，該使用者的标簽＜10才可添加。顯示時對userID進行比較比對，顯示自己的标簽，以保證頁面顯示的标簽不至于過多。

完成了上述想法，同時發現一個bug，曲庫頁擷取歌單清單的ajax對應springmvc方法已經變為了分頁，建立了一個springmvc方法用于清單擷取。

1.12

昨天晚上躺床上突然想到了一個問題，項目如果部署到伺服器上，多用戶端登入後，請求儲存使用者資訊的session是同名的，會不會發生覆寫問題。畢竟不是像曲庫頁的标簽session一樣，在表現層設定一個map全局變量用于儲存後再儲存至session，是不是使用者的也需要這樣?

後來進過查詢部落格資料知道了，如果我這個項目保證一個用戶端隻允許登入一個使用者就沒有問題，因為服務端儲存session會根據用戶端站點的不同生成一個不同的sessionID，這個可以在浏覽器的控制台application中檢視，生成的session也是不同的，完全不用擔心這個問題。

還完成layui的關于建立歌單的彈出層設計和ajax和後端代碼的編寫。遇到了一個問題:彈出後使用jq的ID選擇器擷取不到元素。解決:在官網的文檔中發現有提示:dom最好存放在body最外層，否則可能被其他相對元素所影響。

還學習完了layui，及大概了解了一下layuimini。想到playlist頁面隻使用了彈出層，就想使用獨立版本的layer，而不全使用layui，但引入怎麼都不成功，404。百度很久發現需要mvn clean指令重新清理打包項目，我吐了。然後發現引用的圓角按鈕失效了，不過我驚奇的發現，隻引入layui.css圓角button也會生效，蕪湖。

1.13/1.14

13号

主要在修改layuimini的頁面，修改完了首頁及使用定時器隔一秒ajax擷取四個總數實作實時。

14号

完成了對使用者管理頁的修改，并完成了ajax對資料的擷取，再進行搜尋後表格重載時，本來以為layui可以對資料表格進行前端的搜尋後重載出來。後來發現必須是要有url通過後端互動獲得，可惜。晚上完成了重載的後端和前端設計，同時對layuimini表格格式要求了解更深:data一定要是list格式

1.15

完成了使用者管理頁的添加，編輯，ID搜尋，使用者名搜尋，删除和批量删除的前端後端代碼，主要對編輯頁的填充有了更深的了解。

完成了歌曲管理頁的表格資料展示，歌名搜尋和歌手名搜尋。

發現了一個bug，分頁功能是開啟了，但是并沒有進行分頁，才發現layui是不負責分頁的，需要添加request屬性傳值至後端進行limit查詢，很晚了，明天再解決。

1.16

完成了昨晚的分頁功能，除了昨天的傳值外，還需要修改mapper方法，多一個參數nums，用于設定每次搜尋條數。

完成了歌曲管理頁的删除，添加，編輯和批量删除功能，根據使用者管理頁來改，還是很簡單的。

完成了留言頁的展示，使用者ID搜尋，留言模糊查詢，删除和批量删除功能，不需要添加和編輯功能。明天的歌單管理也不需要，又12點了。

1.17

上午完成了歌單管理，包括資料顯示，使用者ID搜尋，歌單名模糊查詢，删除和批量删除

下午修改了歌單标簽邏輯，一個歌單最多不超過10個标簽。

晚上完成一下各種報表，先想一下需要那些報表。

使用者:男女餅圖，男女年齡段數量散點圖

歌曲:歌手歌曲數前五柱狀圖，添加時間升序前五柱狀圖

歌單:歌單歌曲數前五柱狀圖，使用者擁有歌單數前五柱狀圖

留言:使用者留言數前五柱狀圖，留言時間升序前五柱狀圖

1.18

昨天晚上11點突然想寫，然後就開始寫報表了，在寫使用者報表的散點圖時，無論如何在layui元件中就是無法加載散點圖，顯示是元件不全，無法加載，嘗試把源碼的是以元件引入，更換加載方式，百度都沒辦法，磨了一個多小時，後來靈光一現，把散點圖函數放在layui函數外，單獨加載，終于成功，然後就是編寫持久層，表現層代碼傳資料就很遲。幹脆就把所有的報表都做完了，其中柱狀圖裡使用了蠻多次的左連接配接查詢，全部弄完已經是4點半了。

中午起床後，把背景的登入和修改密碼及使用者名動态調整完成了，還把歌單标簽儲存優化了，最多儲存10個使用者标簽。

晚上把事務控制完善，然後把前台頁面的攔截及背景頁面攔截做了，還完善了背景頁面資源路徑，全部使用絕對位址。最後把留言過濾做了，本來想使用攔截器的，後來因為是ajax無法實作，就直接在儲存函數裡做字段比對，傳回提示String即可。

到今天，我的畢設項目就隻剩下播放頁面及功能沒有完成了，我相信很快的。

1.21(今天是從學校回家的第1天)

計劃寫完最後的播放功能，但是遇到了阻力，本來想要做成咪咕音樂的播放頁面，但是難度太大，對于我這個沒有系統學習過前端css，js的人很難做出來，就算爬出了css樣式，js的dom操作也做不出來，難頂。

再找了很久的開源h5音樂播放器後，決定基于原有的52player的播放器，再做一個主毛播放的歌詞圖檔界面的頁面就算了，但原播放器沒有删除播放清單歌曲的功能，在想我能不能加上。

還優化了播放器功能，原來的邏輯是拖動或點選進度條是，會強制暫停播放，然後松開或移開後強制播放。這是如果已經是暫停狀态是就會出現bug。解決:利用前面優化播放器的flag布爾值，當正在播放時才會強制暫停，同時删除強制播放，隻有點選播放按鈕時才播放。

1.22

根據一位b站使用者的開源h5播放頁面的靈感，設計完成了播放頁，首頁添加了播放頁的側邊欄按鈕，曲庫頁優化:查詢全部歌曲是禁用播放全部按鈕。完善了原開源播放器，song清單的屬性更符合資料庫表結果，同時設定首頁面的歌名和歌手名随動。

有了播放頁的思路:建立一個播放頁表現層，定義一個全局list變量，點選播放後，根據傳遞的musicID或playlistID值查詢歌曲存儲至list變量後，同時存儲是判斷是否已經存在播放清單，再重定向至播放頁面。播放頁面設定一個ajax擷取這個list，對應表示層也設定發送這個list的方法。删除函數則是根據傳回的musicID，删除list中的歌曲，再重新回傳list至前端。

晚上完成了上面的思路:單獨播放為list.add函數添加，歌單點傳播放為覆寫。播放按鈕均改為a标簽，href中?綁定ID回傳。删除功能為點選後調用函數，獲得新的song後，生成新的audioPlay。

缺陷:每次點選播放都是生成新視窗來生成新的播放頁，有點不人性化，沒有使用原開源播放器的新增歌曲功能。

解決思路:單獨點選播放頁後，點選事件使用ajax傳ID至後端，後端先建立一個全局周遊flag和一個用于新增歌曲的newmap，若flag為true表示第一次打開播放頁，查詢music存儲至全局list，設定flag為false，并回傳success1。若flag為false，則把查詢結果存入newmap，存入前查重，并回傳success2。前端頁面根據若是success1則打開播放頁的新視窗，播放頁由url為findmusics的ajax生成song；若為success2，則提示添加至播放器成功。播放頁則使用ajax擷取這個map，并使用newSong函數生成新歌曲。但目前還不知道該怎麼決定什麼時候使用這個ajax，如果使用定時器是否或生成重複歌曲。目前的想法是設定兩個var，一個存儲之前的，一個存儲定時器ajax擷取的，如果不同就調用newSong方法生成新歌曲。

1.23

昨天晚上的定時器思路沒用，因為清單的生成及新增歌曲是基于入口函數生成的audioPlay中的song，而入口函數隻調用一次，是以要調整思路，對原入口函數改為普通函數，并設定循環定時器調用。

最後的解決方法為:window.onload函數定義變量song接收歌曲清單，audioPlay為生成播放器函數變量及兩個新老新增歌曲變量。首先jq入口函數使用ajax設定song和audioPlay。再入口函數設定循環定時器調用新增歌曲函數。新增歌曲函數使用ajax設定新老新增歌曲，并判斷新老歌曲變量不同則使用audioPlay調用newSong函數新增歌曲，再設定老新增歌曲為新新增歌曲，防止重複添加。

至此，我的畢設項目已經全部完成。

1.24

對伺服器的配置和項目的部署，MySQL的安裝真是難頂，使用了幾篇不同的部落格方法，終于搞定，項目成功部署。

告知同學後發現了搜尋框的bug:由于綁定的是blur事件，若使用者輸入後直接回車，就擷取不了輸入值，而是以預設的''空串回傳造成bug。修複:增加一個keydown事件用于相同功能即可。

還找到了三個其他bug:.字元時回傳為空造成404，對它進行捕獲至err頁面再跳轉。/符号為格外url段，同樣404，同樣方法捕獲。[]這兩個字元被判斷為無效幀，造成400，就不管了。

還優化了遊客留言顯示。

1.26

更新了曲庫頁，歌單頁，播放頁的樣式，是他們在手機端通路是居中且不會出現元素遮擋。

修複了播放頁表示層的bug，由于該表示層統一使用了同一個變量存儲歌曲清單，同一個變量存儲新增歌曲，同一個變量存儲頁面是否打開，多使用者通路是會出現bug，這裡修複改成session存儲。

新增一個表現層方法，設定是否彈出新頁面的bool重新為ture。前端頁面使用window.onbeforeunload方式使用ajax調用。

使用ehcache完成了對前端html頁面的緩存。