畢設開發日記-總集篇
總耗時兩個月的畢業設計終於完成告一段落了，我也回家后放松了幾天。我的畢業設計開發過程中，在每一天結束開發的睡覺前都會在我的手機上記錄今天的開發過程，至於為什么要用手機記錄而不直接用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解決的。
12.20
早上完成了個人中心的留言表格的前端代碼及后端邏輯，並用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，后續根據它對元素進行禁用或隱藏。
1.10
完成了歌單頁的分頁，每頁顯示兩個歌單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
晚上完成了上面的思路:單獨播放為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頁面的緩存。