九宮格日記是一種全新的日記方式。它由9個方方正正的格子組成,9個格子9個主題,使用者只需要在每個格子中填寫或選擇相應的內容就能完成一篇日記,整個過程不過幾分鐘。九宮格日記因其便捷、省時等優點在網上迅速流行開來,備受學生、年輕上班族的青睞,很多公司白領也在寫九宮格日記。本章將介紹如何應用Java Web+Ajax+jQuery+ MySQL實現九宮格記憶網。
本專案利用Java Web+Ajax+jQuery+MySQL實現,通過本專案,可以學習到:
-
了解如何應用DIV+CSS進行網站布局
-
掌握如何實現Ajax重構
-
掌握圖片的展開和收縮的方法
-
掌握如何進行圖片的左轉和右轉
-
掌握如何根據指定內容生成PNG圖片
-
掌握生成圖片縮圖的技術
-
掌握如何彈出灰色半透明背景的無邊框視窗
開發背景
隨著工作和生活節奏的不斷加快,屬於自己的私人時間也越來越少,日記這種傳統的傾訴方式也逐漸被人們淡忘,取而代之的是各種各樣的網路紀錄檔。九宮格日記是一種全新的日記方式,它由9個方方正正的格子組成,讓使用者可以像做填空題那樣對號入座,填寫相應的內容,從而完成一篇日記,整個過程不過幾分鐘,非常適合在快節奏的生活中留下自己的心靈足跡。
需求分析
通過實際調查,要求九宮格記憶網具有以下功能。
? 為了更好地體現九宮格日記的特點,需要以圖片的形式儲存每篇日記,並且日記的內容寫在九宮格中。
? 為了便於瀏覽,預設情況下,只顯示日記的縮圖。
? 對於每篇日記需要提供檢視原圖、左轉和右轉功能。
? 需要提供分頁瀏覽日記列表功能。
? 寫日記時,需要提供預覽功能。
? 在儲存日記時,需要生成日記圖片和對應的縮圖。
系統目標
根據需求分析的描述及與使用者的溝通,制定網站實現目標如下。
? 介面友好、美觀。
? 日記內容靈活多變,既可以做選擇題,也可以做填空題。
? 採用Ajax實現無重新整理資料驗證。
? 網站執行穩定可靠。
? 具有多瀏覽器相容性,既要保證在Google Chrome瀏覽器上正常執行,又要保證在IE瀏覽器上正常執行。
功能結構
九宮格記憶網的功能結構如圖所示。