【文章內(nèi)容簡(jiǎn)介】 5，即使數(shù)據(jù)庫(kù)被非法使用者盜取，想要反編譯出MD5加密的信息也是相當(dāng)困難的，有一定的安全性。用戶ID是通過(guò)UUID的方式自動(dòng)生成的ID，比系統(tǒng)自己編號(hào)要方便安全的多。在數(shù)據(jù)處理的過(guò)程中，()方法，查詢?cè)撚脩裘袥](méi)有被使用，如果被使用了則返回false，提示用戶該用戶名已存在，如果沒(méi)有被使用，()方法，該方法可以說(shuō)是MyBatis的關(guān)鍵方法，*.xml，當(dāng)找到userDao對(duì)應(yīng)的save方法字段時(shí)，=“save”的SQL語(yǔ)句，即：! 向_user中插入新用戶 insert id=save parameterType= insert into _user (_user_id,_user_name,_user_password,_user_desc,_user_pwd) values({_user_id},{_user_name},{_user_password},{_user_desc},{_user_pwd}) /insert此時(shí)將把用戶信息插入到數(shù)據(jù)庫(kù)表中，這樣一個(gè)新的用戶就注冊(cè)完成了！但此時(shí)注冊(cè)成功僅限于后臺(tái)方面，還需要將注冊(cè)成功的效果展現(xiàn)在前端。我們把NoteResult類型封裝成json串的形式，將其作為結(jié)果返回到html前端，NoteResult有三個(gè)字段，分別是private int status。//狀態(tài) 等于0時(shí)成功，非0時(shí)失敗 private String msg。//消息private Object data。//所要傳輸數(shù)據(jù)前端接收數(shù)據(jù)，判斷回調(diào)函數(shù)是否成功，若成功，則將成功的結(jié)果顯示到頁(yè)面上。$.ajax({ url::8080/graduation_program/user/, type:post, data:{username:regist_username,pwd:regist_password,nickname: nickname}, dataType:json, success:function(result){//成功回調(diào)函數(shù) if(==0){ alert()。 $(back).click()。//觸發(fā)返回按鈕的單擊事件 }else if(==1){ $(regist_username_msg).html()。 } }})。 用戶登錄 登錄模塊的關(guān)鍵信息是用戶名和密碼。當(dāng)用戶輸入用戶名和密碼，并點(diǎn)擊登錄時(shí)，出發(fā)“登錄”按鈕的單擊事件，首先檢測(cè)用戶名密碼是否合法，不合法的話給予相應(yīng)的提示，合法的話，則瀏覽器發(fā)送ajax請(qǐng)求到服務(wù)器，查詢數(shù)據(jù)庫(kù)中沒(méi)有沒(méi)相應(yīng)的用戶名和密碼，若用戶名密碼不正確，則給予提示用戶名密碼不相符，給予阻攔；若用戶名密碼對(duì)應(yīng)，則服務(wù)器給予回應(yīng)，并且在用戶登錄的同時(shí)，我們加以安全保護(hù)，將用戶的ID寫入cookie，并保留兩個(gè)小時(shí)，若瀏覽器被關(guān)閉，當(dāng)用戶再次訪問(wèn)云筆記系統(tǒng)時(shí)，需要重新輸入用戶名和密碼，讓用戶兩個(gè)小時(shí)沒(méi)有任何操作時(shí)，同樣也會(huì)自動(dòng)注銷，必須重新登錄。同時(shí)cookie里面所綁定的用戶id也是區(qū)分不同用戶的關(guān)鍵所在。同樣的，我們從網(wǎng)頁(yè)發(fā)送數(shù)據(jù)格式仍為json類型。 修改密碼修改密碼的流程類似于用戶注冊(cè)，在網(wǎng)頁(yè)上獲取用戶輸入的數(shù)據(jù)，首先進(jìn)行合法化檢查，檢查不通過(guò)直接在網(wǎng)頁(yè)端進(jìn)行攔截；檢查通過(guò)后，將數(shù)據(jù)發(fā)送到服務(wù)器，服務(wù)器將比對(duì)原密碼是否與該用戶的密碼一致，若一致則將密碼改成新密碼；若比對(duì)不一致，則返回msg，“原密碼錯(cuò)誤”的消息提示。 退出登錄退出登錄操作相對(duì)簡(jiǎn)單，只需將綁定在cookie中的user_id釋放就可以了。將cookie中的user_id釋放的方法有很多，比如調(diào)用destory方法。這里用的方法是將uid的保留時(shí)間設(shè)置成為0，相當(dāng)于直接銷毀了，然后將頁(yè)面直接連接到登錄界面，此時(shí)沒(méi)有cookie中綁定的uid，直接想進(jìn)入主界面是不可能的。 筆記本模塊 加載筆記本列表 筆記本列表應(yīng)該是用戶登錄的同時(shí)，隨網(wǎng)頁(yè)一起加載進(jìn)來(lái)的，即用戶登錄后，就能看到已經(jīng)加載好的筆記本列表。這時(shí)，應(yīng)把加載筆記本列表的代碼寫在onload()方法中。當(dāng)把代碼寫在$()。中，頁(yè)面加載時(shí)將會(huì)自動(dòng)運(yùn)行。這時(shí)網(wǎng)頁(yè)不用獲取用戶輸入的數(shù)據(jù)，直接請(qǐng)求cookie中的uid，然后將數(shù)據(jù)發(fā)送到服務(wù)器就可以了，服務(wù)器將以u(píng)id為依據(jù)，在數(shù)據(jù)庫(kù)中查詢?cè)撚脩舻墓P記本信息，將其返回到html端，網(wǎng)頁(yè)端再將其顯示出來(lái)。 筆記本重命名 對(duì)于筆記本的重命名，使用這樣的觸發(fā)事件：當(dāng)光標(biāo)停留在筆記本的名字上面時(shí)，提示“雙擊修改筆記本名稱”，此時(shí)只需要將筆記本的li的title屬性設(shè)置為“雙擊修改筆記本名稱”就可以了，然后給筆記本的li添加dblclick()的觸發(fā)事件，當(dāng)雙擊筆記本的名字時(shí)，彈出修改筆記本的html，然后將除了此html外的內(nèi)容設(shè)置為黑色半透明的狀態(tài)。重命名的同時(shí)，同樣設(shè)置了合法性檢查的過(guò)濾器。當(dāng)筆記本名字輸入為空時(shí)，提示筆記本名字不能為空，這時(shí)，為了使該提示更加的醒目，所做的不是一個(gè)簡(jiǎn)單的頁(yè)面提示，將這個(gè)提示轉(zhuǎn)換到新的一個(gè)頁(yè)面，然后使用定時(shí)器setTimeout()。這樣大大減少了用戶的非法操作的可能性。 新建筆記本 用戶點(diǎn)擊筆記本列表右上角的“+”時(shí)，將會(huì)彈出“新建筆記本”的html，此時(shí)將給“+”添加一個(gè)單擊事件click()，當(dāng)用戶點(diǎn)擊時(shí)觸發(fā)，同樣的也設(shè)置了合法性檢查，當(dāng)用戶輸入不合法時(shí)，將彈出相應(yīng)的提示框，利用setTimeout定時(shí)器，；當(dāng)用戶輸入的數(shù)據(jù)合法時(shí)，瀏覽器將發(fā)送ajax請(qǐng)求到服務(wù)器，服務(wù)器響應(yīng)事件，獲取到用戶數(shù)據(jù)的數(shù)據(jù)，將其插入到數(shù)據(jù)庫(kù)中，返回新建成功的提示，并將用戶新建的筆記本直接顯示到筆記本列表當(dāng)中，而非刷新整個(gè)網(wǎng)頁(yè)。Ajax的好處就在于此，局部刷新就可以獲得我們想要的結(jié)果。 刪除筆記本 刪除筆記本就是在筆記本列表的右端加入了一個(gè)刪除按鈕，當(dāng)用戶點(diǎn)擊時(shí)，觸發(fā)該按鈕的單擊事件click()， 由于不確定用戶是想要?jiǎng)h除該筆記本，還是因?yàn)槭终`點(diǎn)到了刪除按鈕，若此時(shí)直接刪除該筆記本是不合理的，如果用戶手誤點(diǎn)到了刪除按鈕直接把筆記本刪除，則會(huì)造成相當(dāng)壞的用戶體驗(yàn)，這樣不利于產(chǎn)品的發(fā)展。所以應(yīng)設(shè)置一個(gè)提示“確定要?jiǎng)h除該筆記本嗎？”，若此時(shí)用戶再次點(diǎn)擊確定，則證明用戶是真的想刪除該筆記本了，所以此時(shí)只需要將數(shù)據(jù)庫(kù)中的該條記錄刪除掉即可。 筆記模塊 加載筆記列表 加載筆記列表的功能類似于加載筆記本列表，同樣在$()中寫入請(qǐng)求與加載列表的代碼即可，但應(yīng)該注意的是，加載筆記列表的時(shí)候，應(yīng)該加載所選中的筆記本當(dāng)中的筆記信息，所以，如何獲取選中的筆記本的ID是加載筆記列表的關(guān)鍵。因此加載筆記本列表的時(shí)候，應(yīng)當(dāng)從數(shù)據(jù)庫(kù)里面獲取當(dāng)前筆記本的id，綁定在筆記本li當(dāng)中，當(dāng)加載筆記列表的時(shí)候，只需將選中的筆記本li中的id讀出來(lái)，再以這個(gè)id為查詢條件，將筆記列表顯示出來(lái)即可。 新建筆記 當(dāng)用戶點(diǎn)擊筆記列表右上角的“+”時(shí)，彈出新建筆記的html，該過(guò)程類似于新建筆記本。但需要注意的是，筆記應(yīng)該有的信息綁定在選中筆記本li的id中，將id讀取后，以id為條件，將新建的筆記存放在該筆記本里。 修改及加載筆記信息 點(diǎn)擊筆記本的li時(shí)，將筆記信息加載到右側(cè)的顯示框中。根據(jù)所點(diǎn)擊的筆記id查詢數(shù)據(jù)庫(kù)中筆記的信息，將筆記的標(biāo)題顯示到標(biāo)題框中，將筆記的內(nèi)容顯示到umeditor編輯框中。修改筆記本信息則只需要在右側(cè)的編輯框中，將筆記修改成用戶所需要的形式，點(diǎn)擊右上方的保存筆記按鈕即可。當(dāng)點(diǎn)擊“保存筆記”按鈕時(shí)，瀏覽器會(huì)發(fā)送請(qǐng)求，請(qǐng)求服務(wù)器修改筆記內(nèi)容，同時(shí)瀏覽器傳遞筆記id，服務(wù)器接收傳遞過(guò)來(lái)的參數(shù)，將_note表里面的數(shù)據(jù)改為用戶所保存的筆記信息。 筆記的刪除、移動(dòng)與分享 在筆記列表的右側(cè)有一個(gè)按鈕，點(diǎn)擊之后會(huì)出現(xiàn)下拉框，下拉框里面包含三個(gè)小按鈕，當(dāng)然點(diǎn)擊這個(gè)按鈕也需要單擊的事件的出發(fā)。這三個(gè)按鈕分別是“移動(dòng)”、“分享”、“刪除”。 移動(dòng)筆記本就是將當(dāng)前筆記移動(dòng)到任何你想要的筆記本的目錄下，核心技術(shù)是將當(dāng)前筆記的筆記本id改為想要移動(dòng)到的筆記本的筆記id即可。當(dāng)點(diǎn)擊移動(dòng)時(shí)，會(huì)彈出一個(gè)移動(dòng)筆記的html，然后將該用戶的所有筆記本以下拉框的形式顯示到當(dāng)前頁(yè)面，用戶通過(guò)選擇不同的筆記本來(lái)實(shí)現(xiàn)移動(dòng)效果。分享則是將用戶喜歡的筆記分享到所有用戶都能看得到的地方，即公有化。當(dāng)用戶點(diǎn)擊分享按鈕時(shí)，后臺(tái)需要進(jìn)行兩個(gè)操作：第一，通過(guò)用戶傳遞過(guò)來(lái)的筆記的id查詢出_note中的筆記信息；第二，將查詢出來(lái)的筆記信息插入_share表中。不同用戶可以通過(guò)右上角的“放大鏡”搜索自己想要的筆記資源。當(dāng)用戶輸入關(guān)鍵字時(shí)，則會(huì)以關(guān)鍵字為基準(zhǔn)，在_share表中進(jìn)行模糊查詢，并將查詢的的結(jié)果以li的形式顯示在分享列表中；當(dāng)用戶什么都沒(méi)有輸入直接點(diǎn)擊回車時(shí)，服務(wù)器則會(huì)將所有用戶的分享的筆記都查詢出來(lái)，顯示到分享列表。 筆記的刪除不同于筆記本的刪除，筆記的刪除分為硬刪除和軟刪除，硬刪除直接將筆記信息從數(shù)據(jù)庫(kù)中刪除，軟刪除則是將_note里面的標(biāo)志位_status_id改為1，相當(dāng)于將筆記從筆記列表移動(dòng)到了回收站，筆記列表顯示的時(shí)候，同樣有兩個(gè)條件，第一，筆記屬于該用戶的筆記，第二，標(biāo)志位為0。這樣回收站的筆記就不會(huì)被顯示到筆記列表中。 筆記的收藏 收藏的功能是基于分享的功能之上的，用戶通過(guò)模糊搜索到其他用戶分享的筆記，加載大分享筆記列表，分享筆記列表的右端有一個(gè)收藏按鈕，當(dāng)用戶的光標(biāo)停留在“收藏”按鈕上是，會(huì)有提示“收藏”信息，只需要將收藏的li中的title屬性設(shè)置為“收藏”即可實(shí)現(xiàn)。當(dāng)用戶點(diǎn)擊收藏時(shí)，瀏覽器發(fā)送請(qǐng)求，傳遞用戶的id以及該用戶所點(diǎn)擊的收藏筆記的id，服務(wù)器接收瀏覽器發(fā)過(guò)來(lái)的請(qǐng)求，通過(guò)筆記的id將該條筆記信息從_share表中查出，然后將該條筆記信息以_user_id為關(guān)鍵字插入到_collect表中，成為該用戶的收藏筆記。當(dāng)用戶點(diǎn)擊收藏夾時(shí)，再以列表的形式將用戶收藏的每一條筆記顯示出來(lái)。顯示的方式類似于筆記和筆記本列表的加載，其排序方式根據(jù)收藏的前后順序排序。 音樂(lè)播放器模塊 播放器功能 音樂(lè)播放器功能是為了是用戶在記筆記的同時(shí)，加以消遣的功能模塊。播放器的主體部分是由audio標(biāo)簽來(lái)構(gòu)成的，該標(biāo)簽包括音樂(lè)的暫停、播放、進(jìn)度的控制、音量的調(diào)節(jié)。所以當(dāng)我們src所連接的音樂(lè)路徑正確時(shí)，我們只需要調(diào)用該標(biāo)簽的相應(yīng)方法就可以實(shí)現(xiàn)。 上一曲、下一曲的實(shí)現(xiàn) 對(duì)于音樂(lè)的上一曲和下一曲，需要加以判斷：當(dāng)音樂(lè)播放的為第一首歌，如果用戶點(diǎn)擊的是下一曲，則播放下一首歌，當(dāng)時(shí)最后一首歌的時(shí)候，用戶仍然點(diǎn)擊下一曲，則提醒用戶已經(jīng)是最后一首歌了，將為您播放器一首歌。如果用戶在第一首歌的時(shí)候點(diǎn)擊上一曲，則提示用戶已經(jīng)是第一首歌了，將播放最后一首歌。各區(qū)間的切換則需要我們讀取用戶當(dāng)前正在播放的音樂(lè)的id，但此時(shí)我們并沒(méi)有音樂(lè)的id，所以，將讀取音樂(lè)的id改變?yōu)樽x取音樂(lè)的路徑，這樣就可以區(qū)分當(dāng)前用戶播放的是哪一首歌，也就可以進(jìn)行對(duì)應(yīng)的切換功能。結(jié) 論 本系統(tǒng)的后臺(tái)設(shè)計(jì)采用如今比較流行的JAVA語(yǔ)言的Spring MVC模式進(jìn)行設(shè)計(jì)，并整合了Mybatis框架，使數(shù)據(jù)庫(kù)的訪問(wèn)更加方便快捷。而前端則采用HTML5作為理論體系，CSS3作為“裝飾”，同時(shí)使用js并結(jié)合JQuery控制前端的一些簡(jiǎn)單的邏輯處理。前端加后臺(tái)綜合實(shí)現(xiàn)了登錄模塊：包括用戶登錄、用戶注冊(cè)、修改密碼、退出登錄；筆記本模塊：包括筆記本的創(chuàng)建、重命名、刪除；筆記模塊：包括筆記本的創(chuàng)建、修改、重命名、刪除、回收站、移動(dòng)、分享、收藏；音樂(lè)播放器模塊：包括音樂(lè)的播放、暫停、進(jìn)度的控制、音量大小的調(diào)節(jié)、上一曲、下一曲。同時(shí)，云筆記也實(shí)現(xiàn)了兩個(gè)版本局域網(wǎng)版和互聯(lián)網(wǎng)版，可供選擇。 本系統(tǒng)在運(yùn)行調(diào)試測(cè)試階段，運(yùn)行測(cè)試表明了該系統(tǒng)有一定可擴(kuò)充性。并且該系統(tǒng)還暴露出一些不是很好的地方，如界面的美觀程度，服務(wù)器的反應(yīng)速度還是不夠流暢，點(diǎn)擊時(shí)的反應(yīng)不夠迅速，可以將其更加完善一些。 通過(guò)這次系統(tǒng)的設(shè)計(jì)，使我更加熟練運(yùn)行Java編寫程序，運(yùn)用Spring MVC編寫后臺(tái)服務(wù)器程序。更加深刻的了解與運(yùn)用ajax和json數(shù)據(jù)類型，MySQL數(shù)據(jù)庫(kù)與Myeclipse的連接。即數(shù)據(jù)庫(kù)連接池的運(yùn)用。，對(duì)于前端的一些知識(shí)，如div的布局，各種樣式的設(shè)置也熟練的運(yùn)用了很多。思想也得到了很大進(jìn)步，以后若是遇到問(wèn)題時(shí)首先要思考，查資料，盡自己的全力解決這個(gè)問(wèn)題，當(dāng)自己實(shí)在解決不了的時(shí)候再去請(qǐng)教同學(xué)，請(qǐng)求他們的幫助。本次項(xiàng)目通過(guò)同學(xué)們的幫助，以及老師細(xì)心耐心指導(dǎo)，使自己的能力得到了提高，項(xiàng)目也實(shí)現(xiàn)的比較完整。致 謝 隨著時(shí)間的流逝，畢業(yè)季也已經(jīng)到來(lái)，而我們的大學(xué)生活也將在這6月的夏天畫上一個(gè)完美的句號(hào)。心中有很多感慨，舍不得我們大學(xué)的生活，大學(xué)的同學(xué)們、老師們。大學(xué)四年的酸甜苦辣也都?xì)v歷在目，大一時(shí)期的懵懂，大二時(shí)期的“初生牛犢不怕虎”，大三時(shí)期的成熟感，以及現(xiàn)在即將步入社會(huì)的迷茫。此時(shí)此刻的心情由于五味陳雜，百感交集，但更多的還是感激之情。 經(jīng)過(guò)幾個(gè)月的不懈努力，畢業(yè)設(shè)計(jì)終于完成了，在這里，我首先要感謝我的老師們，謝謝你們?cè)谖易霎厴I(yè)設(shè)計(jì)的時(shí)候給予我的各種幫助，其中要特別感謝耿炎老師，耿炎老師總會(huì)定期的對(duì)我的畢業(yè)設(shè)計(jì)進(jìn)行輔導(dǎo)督促，而且教會(huì)了我寫畢業(yè)論的一些方式方法，而且在畢業(yè)設(shè)計(jì)方面，老師淵博的學(xué)識(shí)給予了我很大的幫助，有些問(wèn)題讓我百思不得其解的時(shí)候，是老師的一句話讓猶如在黑夜中找到了一盞明燈，一語(yǔ)驚醒夢(mèng)中人的感覺(jué)！老師有很好的耐心，非常謝謝耿炎老師，無(wú)論我犯了多么低級(jí)的錯(cuò)誤，老師仍然會(huì)耐心的為我指導(dǎo)，有時(shí)候鉆牛角尖，老師也會(huì)耐心的提示我，讓我走出歧途，再次真心的感謝老師！然后我要感謝我親愛(ài)的同學(xué)們，在我有困難的時(shí)候，他們無(wú)論多忙，無(wú)論是在忙著學(xué)習(xí)還是在忙著做畢業(yè)設(shè)計(jì)，都會(huì)抽出時(shí)間