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