福州大學時期時光機留念網站建設網站功能模塊設計

  • 福州大學時期時光機留念網站建設網站功能模塊設計已關閉評論
  • A+

福州大學時期時光機留念網站建設網站功能模塊設計福州嘉藝網絡的燕狂徒是福建農林大學畢業的,雖然念的是園林專業,和現在做的網站建設關系不大,也還是很懷念當時的校園時光,今天就來說下大學時候的記憶怎么保存作為一個網站。

1 背景

四年時光匆匆流逝, 眨眼就過去。待到畢業后回憶時, 發現好像什么都不記得了, 大學就這樣了無痕跡地劃過了, 非常遺憾!針對這個問題, 提出了建設“大學印跡”網站, 以保存大學四年珍貴的記憶。通過查找類似已有網站, 結合當前流行的QQ空間、博客、網盤等的使用體驗, 文中建設的“大學印跡”網站具有記錄心情、上傳和下載圖片、視頻、音頻、文章等資料的功能, 同時也具有分享功能。目標是用網站記錄大學生活中的點點滴滴的變化, 讓大學不再留有遺憾。

2 網站需求分析

通過調研、學生交流和查找文獻及相關網站資源, 確定該網站需要有記錄大學四年的點點滴滴, 書寫文章和心情, 并且還能隨時查看和修改的已記錄的信息;網站基本需要是能上傳文件、視頻、圖片, 并且能夠隨時查找上傳的內容和下載相關文件;能夠分享記錄下來的點滴?!按髮W印跡”網站的建設目的是開發一個具有開放體系結構的、易擴充的、易維護的、具有良好人機交互界面的個人空間網站, 為用戶提供方便管理自己個人空間的平臺。

3 網站設計

3.1 網站體系結構設計

網站采用MVC (model-view-controller, 簡稱MVC) 三層架構的設計模式。模型層用于應用程序對數據庫中的數據進行處理。視圖層通過前端界面將數據庫中的數據顯示出來??刂茖訉⑶岸隧撁嫣峤坏臄祿鹘o模型層, 進一步與數據庫進行交互。模型層返回結果到控制層, 控制層處理重定向或轉發到相應的頁面, 視圖層將數據呈現。MVC分層設計有利于管理復雜程序, 可以讓程序人員在一段時間內只關心某個層面, 有利于網站的調試與管理。

該網站是基于jdk1.8+mysql5.5+eclipse+Tomcat9環境下實現的。首先, 在主機上搭建jdk1.8環境并在環境變量中進行配置, 然后安裝mysql5.5, 選擇server模式進行安裝, 設置字符字符集為UTF-8, 設置root用戶密碼, 并下載sqlyog數據庫管理軟件, 與數據庫進行相連接。第二步是搭建Tomcat服務器, 首先在http://211.85.197.33:80/rwt/02/http/PSYX4Z5BPRYGC6DBMNVGKLUQPJUB/網站下載tomcat包, 然后解壓到C盤根目錄下并在環境變量中配置, 運行startup打開服務器, 并在瀏覽器中測試服務器。最后部署Tomcat服務器, 下載eclipse, 并解壓到合適的磁盤中。打開eclipse, 將所有的字符集都設置為UTF-8, 并集成jdk1.8環境, 選擇合適的工作目錄。然后在eclipse中集成Tomcat服務器, 并選擇Tomcat服務器中的webapp路徑為Delay Path。最后用eclipse啟動服務器, 并在瀏覽器中輸入:http://211.85.197.33:80/rwt/02/http/NSYXGZLMNBYYG7B4HAZDRMA/測試服務器是否正常。網站開發環境搭建成功。

3.2 網站功能模塊設計

通過需求分析, “大學印跡”網站的主要功能模塊包括:首先是用戶的登錄和注冊模塊, 當用戶登錄成功后會自動跳轉到網站主頁。主頁功能主要是呈現不同特色的個人空間, 界面保持簡潔美觀, 突出重點。在個人空間中設置大學四年印記模塊, 該模塊按照年級分類, 分別記錄大學四年的心情和隨想。四年的珍藏模塊中可分類上傳珍貴的圖片、文檔、音頻和視頻等, 也提供了將上傳的資料隨時下載的功能。同時, 根據個人的需要, 網站還提供的分享功能。

3.3 網站數據庫設計

數據庫中建立了多個表, 下面以article和Blog表為例, article表中存儲文章, blogid記錄這篇文章屬于哪個用戶sortid表示文章屬于哪些類型id是主鍵, title是文章標題, pubtime是文章發布時間。

Blog表用來存儲用戶信息username和password分別用來存儲用戶的賬戶名和密碼id用來唯一標識用戶信息是主鍵。Subject是用戶空間主題, email是用戶郵箱。

4“大學印跡”網站的實現

4.1 登錄與注冊界面

基于Java Web的“大學印跡”網站的登錄和注冊界面, 用戶可以通過網站的登錄界面輸入用戶名和密碼并輸入隨機的驗證碼, 進入到個人空間。對于未注冊用戶, 可以通過點擊登錄界面的注冊選項卡進入到注冊界面, 需要填寫用戶名和密碼, 并附加一個郵箱就可以完成注冊。

4.2 個人空間主界面

網站主頁面是一個網站的門臉, 界面的整體設計, 板塊的分類有創新, 才可以讓用戶接受。主界面主要由用戶的拾光臺歷、四年印跡、四年的珍藏、內容的顯示部分組成。拾光臺歷顯示用戶名和頭像;四年印跡包括“印”心情和“跡”回憶;四年的珍藏由“時光機”功能模塊組成, 具體是上傳和下載功能;用戶的書寫的文字是內容的顯示部分。

4.3 四年的印跡

主頁面中點擊四年的印跡窗口, 四年的印跡中的“印”心情窗口如圖5所示, 該窗口中可以記錄生活中的方方面面, 可以分享生活的感悟, 學習的收獲, 對未來的打算, 對最愛的Ta想說的話等等。如果以后想查找回憶, 就可以點擊“印”心情窗口, 那時候書寫的內容都會在窗口中顯示, 書寫的文章也會保存在數據庫以及云端, 這樣保證的數據的安全性和查找的方便性。

4.4四年的珍藏

在主界面點擊四年的珍藏模塊中的“時光機”, 進入網盤空間, 網站采用apache的開源工具common-fileupload這個文件上傳組件 (上傳文件應該放在外界無法直接訪問的目錄下, 放于WEB-INF目錄下) 。將Web中的文件資源提供給用戶進行下載, 首先有一個頁面列出上傳文件目錄下的所有文件, 當用戶點擊文件下載超鏈接時就進行下載操作, 編寫一個File Servlet (列出web應用中用戶上傳的所有文件) 。common-fileupload是依賴于common-io這個包的, 所有要導入這兩個jar包。

進入界面, 就可以跟著“時光機”回憶起大學生活的點點滴滴。此外, 網站還可以實現上傳下載文件、圖片、視頻等功能, 如圖7所示。該功能提供足夠的私密空間和個性化服務。如果以后需要查找以前上傳的文件、圖片、視頻等珍貴資料, 可以通過點擊下載界面進入下載窗口, 這里保存了上傳的所有內容, 只要點擊下載就可以了。

5 結束語

基于Java Web開發的“大學印跡”網站更具有針對性, 通過部分同學測試使用, 學生普遍反映該網站能較好地保存大學四年的點點滴滴;同時還可以上傳、下載個人資料。隨著網站的使用, 根據用戶的反饋, 下一步會增加個性化界面、增加時間軸等功能。此外, 還會進一步增加界面中的版塊, 并且完善分享功能。