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