【實戰】Spring+Spring MVC+Mybatis實戰專案之雲筆記專案

一、專案簡介

1、專案概述

雲筆記，是tmocc上的一個子專案，用於客戶進行線上學習記錄，分享，收藏筆記，以及參與社群活動。

2.模組劃分

 使用者模組：登入、註冊、修改密碼、退出

筆記本模組:建立、刪除、更新、檢視

筆記模組：建立、刪除、更新、檢視、轉義

分享/收藏模組：分享、收藏、檢視、搜尋

回收模組：檢視、徹底刪除、恢復

活動模組：檢視活動、參加活動

3.設計思想

MVC設計思想

表現層：html+css+Jquery+ajax

控制層：springmvc

業務層;service元件

持久層：Dao元件

4.技術架構

（1）開發環境：windows10+tomcat+mysql

（2）採用技術：java+jquery+ajax+springmvc

IOC+AOP+mybatis

java：開發核心技術

jquery：簡化前端JavaScript（$物件和API）

ajax：局處理頁面，提升使用者體驗度

springmvc：負責接收請求，呼叫業務元件處理，生成json響應

spring(IOC/AOP):管理相關元件

IOC:負責管理Controller/service/dao，維護它們之間的關係

AOP：面向切面程式設計，不修改原有的程式碼，給系統增加新的功能

5.整體規範

-所有的請求ajax方法訪問

-前端頁面採用HTML

-請求結果進行JSON相應

{status:,“msg”:,“data”：}

二、資料庫構建

1.常用命令

show databases;//檢視有哪些資料庫

create database cloud_note;//建立資料庫

drop database cloud_note;刪除資料庫

use 資料庫名 ;連線資料庫

show tables;檢視有哪些表

source ;匯入sql檔案

2.資料表聯絡

三、專案流程

SSM框架：springMVC+spring+Mybatis

（一）建立雲筆記專案環境

1.導包

2.新增配置檔案

+

web.xml

3.劃分包結構

-com.lcz.cloud_note.dao：介面層
-com.lcz.cloud_note.service：服務層
-com.lcz.cloud_note.controller：控制層
-com.lcz.cloud_note.entity:實體層
-com.lcz.cloud_note.util:工具層
-com.lcz.cloud_note.aspect:切面層
 

4.將html目錄下的內容拷貝到webapp下

四、功能實現

（一）、登入功能

1.傳送ajax請求

事件繫結
獲取引數
$.ajax傳送請求

2.伺服器處理

請求
-->DispatcherServlet->HandlerMapping->Controller.execute()->Service->Dao->cn_user->返回資料

3.ajax回撥處理

成功：edit.html
失敗：提示資訊，重新登入

（二）、註冊功能

1.傳送ajax請求

-傳送事件：註冊按鈕的點選
-獲取的引數：使用者名稱   暱稱 密碼
-請求地址： /user/register.do

2.伺服器處理

請求
-->DispatcherServlet->HandlerMapping->
Controller.execute()->
Service(addUser)->
//檢查使用者
user=findByNam(name)
user!=null
result
//新增使用者
處理password
user.set()
save(user)
//設定result
Dao->cn_user(insert)->json響應

3.ajax回撥處理

success:
註冊成功

error(異常):
註冊失敗

知識點：

UUID：是一個生成字串演算法，用於生成資料庫主鍵

生成主鍵有兩種方式：在應用伺服器端生成主鍵；在資料庫端生成主鍵

（三）、筆記本列表顯示功能

1.傳送ajax請求

傳送事件：進入到edit.html傳送請
請求引數：userId
請求地址:/book/loadBooks.do

2.伺服器處理

/book/loadBooks.do
-->LoadBooksController.execute
-->BookService.LoadUserBooks
1.BookService介面 loadUserBooks
2.實現類裡面呼叫dao.findByUserId
3.實現類中構建Result結果
-->BookDao.findByUserId
1.dao介面定義findByUserId
2.配置BookMapper.xml
-->cn_notebook
-->JSON響應

3.ajax回撥處理

解析JSON資料。迴圈生成筆記本列表項（li）

知識點：

事件繫結：

靜態繫結--->   元素.click(function(){})

動態繫結--->   父元素.on("click","li",fn)

（四）、筆記列表顯示

1.傳送ajax請求

-傳送事件：筆記本li的點選
-請求的引數：筆記本的ID
-請求地址：/note/loadnote.do

2.伺服器的處理

/note/loadnote.do
->LoadNoteController.execute
->NoteService.loadBookNotes
//定義介面檔案NoteService->loadBookNotes(bookId)
//實現類中重寫抽象方法
noteDao.findByBookId();
//構建Result-->set方法
setData=List<Map>
->NoteDao.findByBookId(bookId)
//介面檔案定義方法
//配置mapper檔案
//TestNoteDao
->cn_note(select-bookId&cn_note_status_id="1")

3.ajax回撥的處理

success:解析json資料。生成筆記Li,新增到筆記列表中
error：提示alert("筆記載入失敗")

知識點：

Dao介面的傳值特點：mybatis中Dao方法要麼沒有引數，要麼一個引數。

//獲取筆記資訊

var notes=result.data;//(List集合中儲存)

//清除原來的列表資訊

$("#note_ul").empty();

（五）、顯示筆記資料

1、傳送ajax請求

#傳送事件：筆記列表li元素的單擊事件(動態繫結)
#請求引數:筆記ID（noteId）
#請求地址：/note/load.do

2.伺服器處理

-Controller：LoadNoteController.execute(String noteId)
-Service：NoteService.loadNote(String noteId)
-Dao：NoteDao.findByNoteId(Strign noteId)
-cn_note(查詢):
-json響應

3.ajax回撥處理

-succes:
-設定筆記標題(title)
-設定筆記內容(body)
um.setContent(“str”);
um.getContent（“str”）;
-error：alert（“筆記資訊載入失敗”）

知識點：UEdit

用js開發的開源元件

為什麼？

通過js程式碼實現表單功能的增強

如何用？

1.引用指令碼

<!-- Ueditor編輯器JS -->

<script type="text/javascript" charset="utf-8" src="scripts/common/ue/umeditor.config.js"></script>

<script type="text/javascript" charset="utf-8" src="scripts/common/ue/umeditor.min.js"></script>

<script type="text/javascript" 

src="scripts/common/ue/lang/zh-cn.js"></script>

2.例項化

//例項化Ueditor編輯器

var um = UM.getEditor('myEditor');

3.通過script

<!--- 輸入框 --->

<script type="text/plain" id="myEditor" style="width:100%;height:400px;">

</script>

<!--- 輸入框 --->

4.設定

um.setContent(“str”);

um.getContent（“str”）;

六、更新筆記資訊即儲存筆記資訊

1.傳送ajax請求

#傳送事件：“儲存筆記”按鈕點選事件（靜態）
#請求引數：筆記ID（id）、標題（title）、內容（body）
請求地址：/note/update.do

2.伺服器處理

-UpdateNoteController(id,title,body)-->
-NoteService.updateNote(Note)
-NoteDao.uodateNote(Note)
-cn_note(更新處理)

3.ajax回撥處理

success:對被更新的筆記名稱進行更新
<li><a class=”checked”></a></li>
var $li=$(“#note_ul a.checked”).parent

知識點：alert的使用

如何顯示？

-通過load()，載入html

-顯示show()背景

七、建立一個新的筆記本

1.ajax請求

-傳送事件：對話方塊中的“建立”按鈕的單擊（動態）
-請求引數: 使用者ID 筆記本名稱
-請求地址：/book/add.do

2.伺服器處理

-AddBookController.execute
-BookService.addBook(book)
-BookDao.save(Book book)
-cn_notebook(insert)
--json響應

3.ajax回撥處理

success:
-關閉對話方塊
-新增一個筆記本li
-提示建立筆記本的成功
error:
提示建立筆記本失敗

八、建立一個新的筆記

1.ajax請求

-傳送事件：對話方塊中的“建立”按鈕的單擊（動態）

-請求引數:筆記名稱 筆記本ID 使用者ID

-請求地址：/note/add.do

2.伺服器處理

-AddNoteController.execute

-NoteService.addBook(book)

-NoteDao.save(Book book)

-cn_notebook(insert)

--json響應

3.ajax回撥處理

success:

-關閉對話方塊（可以省略）

-解析JSON資料。生成一個li元素新增到筆記列表中

1.獲取title

2.獲取noteId

-提示建立筆記的成功

error:

提示建立筆記失敗

九、顯示筆記下拉選單

1.通過點選“箭頭”按鈕顯示三個選單項

-獲取div物件  slideDown();

2.、下拉選單的分享功能

#傳送請求

-傳送事件：點選“分享”按鈕

-請求引數：noteId

-請求地址:/share/add.do

#伺服器處理

-建立Share類

-Controller

-Service

-Dao-insert

-cn_share

#回撥處理

success:提示分享成功 增加圖示處理<i class=”fa fa-sitemao”>

error:提示分享失敗

3.、下拉選單的刪除功能

//約定1-normal 2-delete

 

note.setCn_note_status_id("1");

//約定1-normal 2-favor 3-share

note.setCn_note_type_id("1");

4.、下拉選單的移動功能

十：模糊查詢分享筆記

功能描述：使用者輸入搜尋關鍵詞，然後點回車，觸發查詢  

可以多行顯示，可以點選，然後顯示具體資訊

1.傳送ajax事件

傳送事件：輸入關鍵詞後，點回車

$(“Input_id”).keydown(function(event){

var code=event.keyCode;

if(code==13){

傳送ajax請求

}

})

2.伺服器處理

-Controller

-Service

-Dao(select)

-cn_share

select * from cn_share like %關鍵詞%

3.ajax回撥處理

success:顯示搜尋筆記結果列表

error：搜尋筆記失敗

十一、修改密碼及退出登入操作

十二、Spring AOP的應用

AuditBean：效能審計用來檢視執行各個業務需要的時間

ExceptionBean：儲存異常資訊到日誌中

LoggerBean：封裝打樁操作邏輯

十三、原始碼地址

最後，給出原始碼地址：csdn地址點選開啟連結   github地址:點選開啟連結