【正文】 片說明 +日期 位置：輸入到用戶瀏覽器（前臺） 名字：投票信息 描述：博主添加的投票信息與每一項(xiàng)的票數(shù)。 系統(tǒng)體系結(jié)構(gòu) 基于 B/S結(jié)構(gòu)的個人博客網(wǎng)站系統(tǒng)，應(yīng)由終端（用戶主機(jī) /瀏覽器）、 WEB 服務(wù)器、數(shù)據(jù)服務(wù)器構(gòu)成。個人博客網(wǎng)站的總體結(jié)構(gòu)圖如圖 ： 圖 博客網(wǎng)站總體結(jié)構(gòu) 主要功能設(shè)計 主要功能模塊 博客網(wǎng)站分為前臺和后臺。 WEB服務(wù)器(web Server) 數(shù)據(jù)用 服 務(wù) 器 PC 李姜偉：基于 JSP 的個人博客系統(tǒng)設(shè)計與實(shí)現(xiàn) 10 圖 博客系統(tǒng)前臺功能結(jié)構(gòu) 根據(jù)博客網(wǎng)后臺的特點(diǎn)，可以將其分為用戶設(shè)置、公告管理、個人相冊管理、博客文章管理、投票管理、朋友信息管理及博主信息修改 7 部分，其中各個部分及其包括的具體功能模塊如圖 如示。對于不同的角色，其所承擔(dān)的任務(wù)也各自不同，流程圖也不一樣，包括面向用戶的客戶端流程圖和面向系統(tǒng)管理員的流程圖，如圖 和圖 。同時，也可以使系 統(tǒng)的執(zhí)行速度變得很快。所以數(shù)據(jù)庫的設(shè)計是一個系統(tǒng)設(shè)計很重要的步驟。根據(jù)用戶需求和系統(tǒng)分析，本系統(tǒng)采用 SQL Server2021 數(shù)據(jù)庫管理系統(tǒng)。 數(shù)據(jù)庫概念設(shè)計 根據(jù)以上對系 統(tǒng)所做的需求分析和系統(tǒng)設(shè)計，規(guī)劃出本系統(tǒng)中使用的數(shù)據(jù)庫實(shí)體分別為用戶信息實(shí)體、公告信息實(shí)體、個人相冊信息實(shí)體、朋友信息實(shí)體、投票信息實(shí)體、博客文章信息實(shí)體及文章回復(fù)實(shí)體。 圖 實(shí)體關(guān)系 ER 圖 注冊用戶 博主 朋友 投票 文章 公告 文章類型 照片 文章評論 添加 閱讀 發(fā)表 上傳 查看 發(fā)表 從屬 管理 發(fā)表 閱讀 參 與 參與 查看 查看 2021級計算機(jī)科學(xué)與技術(shù)職教師資畢業(yè)設(shè)計 下面介紹各實(shí)體的 ER 圖。用戶信息實(shí)體的 ER 圖如圖 所示： 圖 用戶信息實(shí)體屬性 ER 圖 （ 2）博客文章信息實(shí)體 博客文章信息實(shí)體包括文章題目、文章內(nèi)容、文章發(fā)布時間及文章訪問次數(shù)屬性。文章類型信息實(shí)體的 ER 圖如圖 所示： 用戶信息 用戶名 管理級別 號碼 性別 興趣 密碼 主頁 Email 地址 姓名 文章信息 文章題目 文章內(nèi)容 文章訪問次數(shù) 文章發(fā)布時間 李姜偉：基于 JSP 的個人博客系統(tǒng)設(shè)計與實(shí)現(xiàn) 14 圖 文 章類型信息實(shí)體屬性 ER 圖 （ 4）公告信息實(shí)體 公告信息實(shí)體包括公告標(biāo)題、公告內(nèi)容和公告時間屬性。朋友信息實(shí)體的ER 圖如圖 所示： 圖 朋友信息實(shí)體屬性 ER 圖 （ 6）照片信息實(shí)體 照片信息實(shí)體包括照片路徑、照片描述和照片 上傳時間屬性。文章評論信息實(shí)體的 ER 圖如圖 所示： 圖 文章評論信息實(shí)體屬性 ER 圖 （ 8）投票信息實(shí)體 投票信息實(shí)體包括投票信息名稱和票數(shù)屬性。 照片信息 照片路徑 上傳時間 照片描述 文章評論信息 文章 ID 回復(fù)主題 回復(fù)內(nèi)容 回復(fù)號 投票屬性 投票信息名 票數(shù) 李姜偉：基于 JSP 的個人博客系統(tǒng)設(shè)計與實(shí)現(xiàn) 16 tb_consumer（用戶信息表），主要用來保存用戶基本信息。表結(jié)構(gòu)如表 所示。表結(jié)構(gòu)如表 所示。表結(jié)構(gòu)如表 所示。表結(jié)構(gòu)如表 所示。表結(jié)構(gòu)如表 所示。表結(jié)構(gòu)如表 所示。表結(jié)構(gòu)如表 所示。 圖 數(shù)據(jù)表之間的關(guān)系 2021級計算機(jī)科學(xué)與技術(shù)職教師資畢業(yè)設(shè)計 5 系統(tǒng)詳細(xì)設(shè)計 整個系統(tǒng)設(shè)計主要分為用戶登陸和注冊模塊設(shè)計、前臺設(shè)計和后臺設(shè)計。后臺管理系統(tǒng)只有管理才能訪問，主要是對博客文章、博客公告、投票內(nèi)容、個人相冊和博主朋友信息等進(jìn)行管理。 登陸和注冊界面設(shè)計 （ 1）用戶登錄模塊具有用戶登錄功能。在用戶登錄頁面中，在“用戶名”和“密碼”文本框 中輸入用戶名和密碼后，單擊“登錄”按鈕，系統(tǒng)驗(yàn)證成功后，用戶將以會員的身份進(jìn)入博客網(wǎng)首頁，之后在網(wǎng)站中可以隨意查看博主發(fā)布的文章。用戶登錄模塊的框架如圖 所示，用戶登錄界面如圖 所示。用戶注冊的時候?qū)τ脩糨斎氲男畔⑦M(jìn)行有效性驗(yàn)證，包括基本數(shù)據(jù)格式的有效性，以及邏輯有效性，例如：給出提示、 號碼必須為數(shù)字、 Email地址的正確格式等。用戶注冊模塊的框架如圖 所示，用戶注冊界面如圖 所示。博客網(wǎng)前臺首頁的運(yùn)行結(jié)果如圖 所示。因此，可以將這幾個部分分別保存在單獨(dú)的文件中， 這樣在需要放置相應(yīng)功能時只需包含這些文件即可，如圖 所示。本系統(tǒng)使用的是 jsp:include動作元素，該動作元素用于向當(dāng)前頁面中包含其他的文件，這個文件可以是動態(tài)文件也可以是靜態(tài) 文件。 charset=gb2312 language=java import=.* errorPage= % jsp:include page= flush=true / //應(yīng)用 jsp:include動作元素包含 文件 ，該文件用于顯 示博主的基本信息。 ?? !登錄用戶部分 jsp:include page= flush=true / //應(yīng)用 jsp:include動作元素包含 ，該文件用于顯示登錄用戶信息（如果登錄用戶為博主，則不顯示用戶信息） table width=646 height=20 border=0 tr th scope=col /th 李姜偉：基于 JSP 的個人博客系統(tǒng)設(shè)計與實(shí)現(xiàn) 24 /tr /table ?? /td /tr /table jsp:include page= flush=true / //應(yīng)用 jsp:include動作元素包含 ，該文件用于顯示版權(quán)信息及博主的朋友圈。博客網(wǎng)后臺首頁的運(yùn)行如圖 所示。因此可以將這幾個部分分別保存在單獨(dú)的文件中，這樣在需要放置相應(yīng)功能時只需包含這些文件即可，如圖 所示。 charset=gb2312 language=java import=.* errorPage= % jsp:include page= flush=true / //應(yīng)用 jsp:include動作元素包含 ，該文件用于顯示網(wǎng)站的旗幟。 td width=746 height=622 valign=top background=images/ ?? !— 省略其他代碼 /td /tr /table jsp:include page= flush=true / //應(yīng)用 jsp:include動作元素包含 ，該文件用于顯示網(wǎng)站的版權(quán)信息。 JavaBean 技術(shù)實(shí)現(xiàn)對數(shù)據(jù)李姜偉：基于 JSP 的個人博客系統(tǒng)設(shè)計與實(shí)現(xiàn) 26 庫的操作不需要在 XML 文件中進(jìn)行任何的配置，而正常運(yùn)行 Servlet 程 序還需要進(jìn)行適當(dāng)?shù)呐渲?，配置文件?。 圖 前臺分類顯示文章信息 李姜偉：基于 JSP 的個人博客系統(tǒng)設(shè)計與實(shí)現(xiàn) 28 在該頁面中，首先通過 JavaBean 定義分類操作的類（ MyPagination），之后調(diào)用 ArticleDao 類中的 queryArticle()方法查詢所有的文章信息，最后將查詢的結(jié)果顯示在頁面中。 //設(shè)置文章類型 ID對象 if((typeId)!=null){ typeId=((typeId))。 //獲取當(dāng)前頁碼 int Page=1。 //設(shè)置 List集合對象 if(str==null){ articleList=(typeId)。 //指定每頁顯示的記錄數(shù) articleList=(articleList,Page,pagesize)。 //將獲取的當(dāng)前頁碼數(shù)進(jìn)行賦值 articleList=(Page)。articleI()。 String articleContent=()。 } % table width=616 border=0 align=center tr td width=377 height=22font 2021級計算機(jī)科學(xué)與技術(shù)職教師資畢業(yè)設(shè)計 color=BE9110b%=()%/b/font/td !—顯示文章的題目 /tr tr td valign=topspan class=style7%=articleContent%/span/td !—顯示文章的內(nèi)容 /tr tr td height=17 class=head02a href=?id=%=()% class=head02閱讀全文 /a/td /tr /table table width=616 border=0 align=center tr th scope=coldiv align=right class=style6 hr/div/th /tr /table %} % %=(Page) % !—傳遞分頁 Bean的參數(shù) 相冊上傳的實(shí)現(xiàn) 博主進(jìn)入后臺管理頁面中，單擊左側(cè)功能區(qū)中的“相冊添加”超鏈接，將進(jìn)入相冊上傳頁面，如圖 。代碼如下 ： public void addPhoto(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { photoDao = new PhotoDao()。 //實(shí)例化 PhotoForm類型的對象 su = new ()。 //設(shè)置 Integer類型的對象 if (() != null) { maxID = ()。 //設(shè)置上傳相片的提示信息 String type = null。 //設(shè)置可以上傳文件擴(kuò)展名的數(shù)組 String filedir = file/。 // 設(shè)置每個上傳文件的大小，為 2MB try { ((), request, response)。 //限制上傳文件的大小 ()。 //獲取所有的上傳文件 for (int i = 0。 i++){ //逐個獲取上傳的文件 File singlefile = (i)。 for (int ii = 0。 ii++) { if (imageType[ii].equals(type)) { if (!()) { //如果選擇了文件 String photoTime = ().getParameter( phtoTime)。 //獲取相冊的描述信息 (photoTime)。 //設(shè)置相冊描述信息 filedir = filedir + maxID + . + ()。 //設(shè)置相冊服務(wù)器端地址 if ((添加 , photoForm)) { (filedir, )。 //設(shè)置上傳圖片成功信息 } } } } } } catch (Exception e) { ()。 //將相冊的上傳結(jié)果通過 setAttribute()方法傳遞給 result RequestDispatcher requestDispatcher = request .getRequestDis