毕设开发日记-总集篇
毕设开发日记-总集篇
总耗时两个月的毕业设计终于完成告一段落了，我也回家后放松了几天。我的毕业设计开发过程中，在每一天结束开发的睡觉前都会在我的手机上记录今天的开发过程，至于为什么要用手机记录而不直接用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页面的缓存。
