論文 摘要

目前，隨著互聯(lián)網，手機移動的發(fā)展，人們的交流方式多種多樣。不再僅限于電腦上網，QQ聊天、博客、空間留言等交流很常見，社交網絡 FaceBook等國外用的很多。2010年剛興起的微博。這種隨時隨地都能交流的工具深受大家的喜愛， 特別是不受時間空間隨時隨地的開放式交流。讓人與人之間的交流變得更加人性化。更加的受到人們的

追捧。

基于這種思考。這次畢業(yè)設計開發(fā)了這個交友平臺，來實現(xiàn)你我他 /她之間的交流。同過能分享成長中的照片、Flash視頻。發(fā)表心情、交友，留言等。從此生活因它而精彩。

設計的交友平臺主要目的就是記錄校園生活中學生的成長過程。 讓大家分享青春的腳步。成長交流，同時我們能夠認識和了解更多朋友。也能現(xiàn)實生活中進行交流對話。讓我們的生活因你的出現(xiàn)而變得與眾不同。

交友平臺在JAVA平臺上使用JSP技術開發(fā)，SQL200數(shù)據(jù)庫。具有操作簡便，界面簡約、友好大方的特點。論文詳細闡述了交友平臺的開發(fā)背景、研究意義，開發(fā)環(huán)境以及系統(tǒng)的需求分析，詳細說明了數(shù)據(jù)庫的設計，以及系統(tǒng)各功能的實現(xiàn)。

關鍵詞：交友平臺 交流JSP技術SQL2005數(shù)據(jù)庫

目 錄

論文摘要 1

一、系統(tǒng)概述 4

(一) 引言 4

(二) 課題背景 4

(三) 開發(fā)現(xiàn)狀分析 5

(四) 課題開發(fā)意義 5

二、開發(fā)環(huán)境 5

三、可行性分析與需求分析 5

（一）可行性分析 5

（二）性能分析 6

（三）需求分析 7

四、概要設計 8

(一) 交友平臺功能體系圖設計 8

(二) 系統(tǒng)設計的基本原則 9

(三) 系統(tǒng)用例圖 10

五、數(shù)據(jù)庫設計 11

(一) 處理流程 11

(二) E-R圖 12

六、詳細設計 12

(一) 用戶數(shù)據(jù)表 12

七、主要功能模塊、界面和編碼 16

2

(一) 登陸界面及編碼 16

(二) 上傳文件界面及編碼 17

(三) 下載文件界面及編碼 19

(四) 瀏覽圖片界面及編碼 20

(五) 其他功能模塊 22

八、系統(tǒng)調試與運行 25

九、總結 25

結束語 25

致謝 26

參考文獻 26

3

新視角交友平臺的設計與實現(xiàn)

QQ:291063528

（清華大學計算機系08級應用五班）

一、系統(tǒng)概述

(一) 引言

近年來,隨著移動互聯(lián)網的發(fā)展，人們的交流方式變得更加的開放。上網不在局限于電腦，手機的普及，讓通信從電腦上迅速轉移到手機上已是不爭的事實。信息化是當今世界經濟和社會發(fā)展的大趨勢，以網絡和多媒體為核心的信息技術已經成為拓展人類能力的創(chuàng)造性工具。在網上不在局限于時間地點，那里有我們最新觀點，最具創(chuàng)意的Idea，最新的消息等。當然還有我們最美好的回憶。

在大學期間，我們每個人都有很多留戀的記憶。有游玩的風景，有采風的快樂。有寂寞無聊的時間，還有單獨宅的時光。學習、成長、伴隨我們走過這風風雨雨的三年。

真的是風霜雨雪踏歌行。我們用各種形式來記住青春的童話。在快要告別大學的時光里，當我們回憶其這些，既是一筆財富，也是一份美好而簡單的記憶。出于這個理由，我設

計開發(fā)了這個交友平臺。來分享你我他 /她的喜怒憂傷。隨著互聯(lián)網，微博，博客等的

興起，交流變得隨時隨地，更加的人性化和自由。

新視角交友平臺是一個社交平臺，注冊的用戶可以分享自己的照片，F(xiàn)lash視頻，心情，交友等?？梢圆檎液糜?，添加好友，向好友留言。好友也能同步的看到你的心情，查看你的個人資料。當然也可以進行電話交流。都為交友提供一個很好的平臺。這就新

視角交友平臺開發(fā)的目的 交流分享，共同成長。這也是“新視角交友平臺”的特

點所在。

(二) 課題背景

為了留一份美好回憶，為了更大范圍的交友，不受時間和空間的限制。為了讓我們共同成長。讓我們在大學的校園中成長更加自由，分享我們成長的經歷，交流進步。

4

(三) 開發(fā)現(xiàn)狀分析

新視角交友平臺是一個針對學生開發(fā)的交友的平臺系統(tǒng)。在校園中，我們都渴望成長，渴望交流、渴望進步、渴望被關注。為了在這個純潔的環(huán)境中實現(xiàn)更安靜的交流，讓我們的生活變得更加的豐富多彩。交流變得更加有意義。

這次的設計通過好友的添加來實現(xiàn)組建交友的圈子。 這樣就可以針對特定的人群進行交流。實現(xiàn)情感，生活，學習等的交流，學習和指導。并且，交友平臺功能豐富，界面非常的簡潔大方，操作簡單。容易上手。

(四) 課題開發(fā)意義

通過互聯(lián)網這個平臺實現(xiàn)交流成長，分享快樂，互動生活。在大學的校園里，通過手機這個終端實現(xiàn)互動交友，不僅打破了跨年級的同學交流。而且也克服了現(xiàn)實條件，時間等的限制。學習，成長，情感各個方面都是交流的話題。通過交友，分享各自的生活體驗，也讓交友成為校園生活中另外一道風景線。

二、開發(fā)環(huán)境

交友平臺設計采用MyEclipse編寫環(huán)境，Java，JSP語言，Tomcat輕量級服務器部署發(fā)布。后臺采用安全可靠的SQL2005數(shù)據(jù)庫。在Window7操作系統(tǒng)平臺運行。

三、可行性分析與需求分析

（一）可行性分析

技術可行性：交友平臺的開發(fā)采用成熟的 JSP技術，輕量級服務器Tomcat。利用MicrosoftSQLServer2005 作為交友平臺的數(shù)據(jù)庫，是一個支持多用戶的新型數(shù)據(jù)庫，適應于中小型規(guī)模的數(shù)據(jù)量需求。 因此，交友平臺的設計與開發(fā)在技術上和配備上的條件都是滿足的。所以，它在技術上是可行的。

經濟可行性：由于設計的要求比較底，所以單獨的服務器來運行這個系統(tǒng)可以滿足。又考慮到所有計算機硬件軟件都是存在出錯可能的，因此整個系統(tǒng)應該考慮使用兩臺服務器熱備份技術。使用兩臺服務器同時運行，一個為主一個作備份，這樣可以避免服務器故障對整個系統(tǒng)的影響。另外，現(xiàn)在計算機的價格比較便宜，因此經濟上市允

5

許的。

操作可行性：交友平臺設計界面簡潔大方，操作流程方便。用戶很輕松都能上

手。

（二）性能分析

系統(tǒng)性能要求

①實用性：為方便交友平臺，根據(jù)用戶實際的需求，設計出功能齊全、操作簡單、實用性強、充分滿足用戶的需求。

②操作簡單：交友平臺適應于不同程度的用戶，同時系統(tǒng)界面簡約大方，不會出現(xiàn)審美疲勞，因此對系統(tǒng)的操作要求是盡可能簡單易行。

③安裝使用簡便：服務器端的安裝簡潔明了，客戶機無需再裝任何軟件，通過瀏覽器就可以直接訪問，可以直接接入 Internet ，無論您身在何處，只要您可以訪問Internet 都可以使用交友平臺。

④適應性：交友平臺應用廣泛，可以在 Windows、Linux系統(tǒng)上安裝使用。用戶可以根據(jù)自己的實際情況自行組合，是系統(tǒng)在不同的操作系統(tǒng)下都能得以應用。

⑤代碼可讀性好：編寫代碼的要求是簡潔，易懂。

主要功能要求

①主要功能：基本的用戶注冊、登陸、修改個人資料。文件的上傳下載，瀏覽上傳文件、查找好友、瀏覽好友資料、留言、關注等

②安全性與保密要求：客戶端要求提供身份驗證，并且對數(shù)據(jù)庫信息采用加密，只允許通過身份驗證的用戶使用交友平臺。

③意外情況：要求在發(fā)生意外（如掉電）的情況下，保證不丟失數(shù)據(jù)。

6

PAGE

8

交友平臺的數(shù)據(jù)流圖

圖1：交友平臺數(shù)據(jù)流圖

設計交友平臺中采用成熟的MVC框架，前臺用戶對數(shù)據(jù)進行處理，包括登陸注冊，搜索，下載等。服務器對請求行進動態(tài)處理，與后臺數(shù)據(jù)庫進行交互處理。處理的結果

返還給用戶。管理員實現(xiàn)對其管理，維護和更新。其詳細功能說明流程圖如上面圖 1所

示。

（三）需求分析

設計目標

設計交友平臺，功能上實現(xiàn)用戶的交友功能，用戶圖片、Flash視頻的上傳和下載。讓用戶分享自己的照片，視頻等信息。添加對方為好友，給對方留言，搜索等目標。實

用在不同的操作平臺運行，要求系統(tǒng)簡潔大方，操作方便。另外數(shù)據(jù)庫對用戶信息進行

統(tǒng)一管理和存儲，管理員管理用戶和數(shù)據(jù)庫的備份維護。最后經濟上盡可能的縮減成本。

開發(fā)意圖

交友更便捷，讓用戶分享網絡互聯(lián)帶來的終極體驗。有圖片放映和視頻點播的功能，讓交友變得更加的豐富。同時也是分享成長的大舞臺。

功能需求分析

交友平臺主要完成以下功能：

①基本功能：提供用戶的注冊，登陸、修改個人信息、添加好友，瀏覽網站信息、搜索好友，下載/上傳視頻等。

②用戶管理：對用戶賬號的管理。

③數(shù)據(jù)庫管理：密碼管理、數(shù)據(jù)管理、數(shù)據(jù)備份等。

④系統(tǒng)維護：對整個系統(tǒng)要有管理員進行管理，對某些需要及時更新的信息進行修改，添加或者刪除。

⑤操作管理：整個系統(tǒng)要求操作簡捷，方便用戶使用。

總結

從經濟方面，設計所帶來的長遠利益遠遠大于其開發(fā)成本，說明具有經濟價值；從

技術方面，項目開發(fā)所使用的工具載體都能夠實現(xiàn)系統(tǒng)所需要的功能，因此，項目是能夠實現(xiàn)的；從用戶方面，在不掌握任何專業(yè)知識的前提下，可以方便快速的上手，表明項目是具有廣泛使用人群的。綜上分析：從可行性分析來看項目是可行的。

四、概要設計

(一) 交友平臺功能體系圖設計

圖2：功能體系圖

設計開發(fā)的交友平臺，主要分為普通用戶功能（通用功能） ，用戶功能，管理員功能三個模塊。

普通用戶功能：注冊用戶，登陸、查看信息、查找好友、查看圖片、圖片下載、幻燈片播放、視頻點播、視頻下載。

用戶功能：具備通用功能，可以登陸，更改密碼、更新個人資料、查看好友、發(fā)表心情、上傳/下載圖片、上傳/下載頻等。

管理員功能：管理用戶信息、網站的管理和維護，網站的更新和信息發(fā)布。具體功能體系結構如上面圖2所示。

(二) 系統(tǒng)設計的基本原則

設計交友平臺的目標是通過互聯(lián)網來實現(xiàn)網上交友，留言，發(fā)表心情，查看好友資

料。用戶上傳自己的寫真， Flash 視頻等。系統(tǒng)采用了模塊化的設計方法 :易于擴展的JSP編程語言環(huán)境使用SQLServer2005作為數(shù)據(jù)庫平臺。交友平臺整體上可劃分為若干個功能。設計系統(tǒng)的安全可靠。交友平臺的配置是采用 Windows7作為網絡操作系統(tǒng),SQLServer2005作為數(shù)據(jù)庫服務器。所以操作系統(tǒng) Windows7的安全防護機制及數(shù)據(jù)庫SQLServer2005的安全機制是交友平臺采用的安全防護方式。

系統(tǒng)主要功能模塊具體描述如下：

通用功能：瀏覽信息，注冊、登陸、退出、觀看幻燈片、視頻點播、下載等功能。具體功能用例圖如圖3所示。

用戶模塊功能：包含了通用模塊的功能，另外，具有上傳照片和上傳視頻的功能，修改個人信息，加好友，發(fā)表心情，留言、查看好友資料等。具體功能用例圖如圖4所示。

管理員模塊功能：管理系統(tǒng)平臺的安全可靠的運行、系統(tǒng)的維護和更新。具體功能用例圖如圖5所示。

9

PAGE

16

(三) 系統(tǒng)用例圖

下載

瀏覽

注冊

按昵稱搜索

搜索用戶

用戶

登陸

按用戶名搜索

退出

圖3：用戶通用功能用例圖

修改個人資料

上傳文件

發(fā)表心情

登陸用戶

查看資料

留言

下載

加好友

播放文件

圖4：用戶功能用例圖

管理員

信息發(fā)布

系統(tǒng)的維護與更新

管理用戶

圖5：管理員功能用例圖

五、數(shù)據(jù)庫設計

(一)

處理流程

實現(xiàn)數(shù)據(jù)庫的處理功能，處理流程如圖

6所示。

圖6：處理流程圖

(二) E-R圖

圖7：E-R圖

E-R圖是直觀的表示概念模型。E-R圖由實體、屬性、聯(lián)系三部分組成。根據(jù)系統(tǒng)數(shù)據(jù)庫的需求分析，實體的數(shù)據(jù)項和數(shù)據(jù)結構，得到系統(tǒng)全局 E-R圖(實體-關系圖)。如上面圖7所示：

六、詳細設計

在完成系統(tǒng)的E-R圖（實體關系圖）之后，需要將 E-R模型轉化為關系模型，設計出數(shù)據(jù)庫需要的表格。關系數(shù)據(jù)庫中的二維表格可以很清楚地描述數(shù)據(jù)之間的聯(lián)

系，下面是數(shù)據(jù)庫的邏輯實現(xiàn)。二維表的形式顯示。

(一) 用戶數(shù)據(jù)表

匯總出數(shù)據(jù)庫的所有表的介紹如表 1所示。

表1： 數(shù)據(jù)庫表-匯總表

表名 功能說明

user 用戶表

userinfo 用戶的基本信息表

friend 好友信息表

photo 寫真信息表

video 視頻信息表

typelist 類別管理表

用戶登陸信息表如表圖 2所示：

表2：

用戶表

表名

user

列名

數(shù)據(jù)類型

空/非空

約束條件

含義

uid

Varchar(50)

主鍵

唯一標識用戶的編號

uname

unick

Varchar(50)

varChar(50)

外鍵

用戶名

昵稱

upassword

registerdate

Varchar(50)

Varchar(50)

密碼

注冊日期

ubz

VarChar(MAX)

yes

備注

用戶的基本信息情況如表3所示：

表3： 用戶信息表

表名 userinfo

空/非

列名 數(shù)據(jù)類型

約束條件 含義

空

uid Varchar(50) 外鍵 唯一標識用戶的編號

truename Varchar(50) 用戶真實姓名

usex varChar(50) 性別

birthday Varchar(50) 生日

age

Int

系統(tǒng)自動生成

年齡

qqtelemail

introduce

VarChar(13)Varchar(50)Varchar(50)

Varchar(MAX)

QQ號碼電話號碼郵箱

用戶簡介

declaration

Varchar(MAX)

個人宣言

professionimgurl

userinfobz

Varchar(50)Varchar(50)

Varchar(MAX)

yes

職業(yè)

頭像地址

用戶個人信息備注

好友信息的基本資料如圖4所示：

表4： 好友信息表

表名 friend

列名

數(shù)據(jù)類型

空/非空

約束條件

含義

fid

Varchar(50)

主鍵

唯一標識好友的編號

youid

Varchar(50)

好友ID編號

myid

varChar(50)

自己ID編號

fgroup

Varchar(50)

yes

好友分組

addtime

Varchar(50)

yes

添加好友日期

fbz

VarChar(MAX)

yes

備注

用戶上傳的圖片信息如表5所示：

表5：

寫真圖片信息表

表名

photo

列名

數(shù)據(jù)類型 空/非空

約束條件

含義

pid

Varchar(50)

主鍵

唯一標識圖片的編號

uid

Varchar(50)

外鍵

用戶ID編號

pname

photourl

varChar(50) yes

Varchar(50)

圖片名稱

圖片地址

uptime Varchar(50)

上傳照片時間

tid Varchar(50) yes

圖片分類編號

point Int

默認值1

點擊率

pbz VarChar(MAX) yes

圖片備注

用戶上傳的Flash視頻信息如表6所示：

表6： 視頻信息表

表名

video

列名 數(shù)據(jù)類型 空/非空

約束條件

含義

vid Varchar(50)

主鍵

唯一標識視頻的編號

uid Varchar(50)

外鍵

用戶ID編號

vname varChar(50) yes

視頻名稱

videourl Varchar(50)

視頻存儲地址

uptime Varchar(50)

上傳視頻時間

tid Varchar(50) yes

視頻分類編號

point Int

默認值1

點擊率

vbz VarChar(MAX) yes

視頻備注

用戶上傳文件的分類信息表如圖7所示：

表7：

類別信息表

表名 typelist

列名

數(shù)據(jù)類型

空/非空

約束條件

含義

tid

Varchar(50)

主鍵

唯一標識圖片類別編號

uid

Varchar(50)

外鍵

用戶ID編號

tname

VarChar(50)

分類名稱

pid

Varchar(50)

yes

圖片編號

vid

Varchar(50)

yes

視頻編號

tbz

Varchar(50)

yes

類別備注

七、主要功能模塊、界面和編碼

(一) 登陸界面及編碼

登陸的界面顯示如圖8所示：實現(xiàn)用戶登陸的驗證，包括用戶名，密碼不能為空的驗證。成功鏈接到主頁，失敗，提示重新驗證。另外實現(xiàn)的還有注冊和修改密碼的鏈接。

圖8：用戶登陸界面圖

登陸主要編碼實現(xiàn)：

登陸的主要代碼中，通過Servlet 中doPost()方法來實現(xiàn)登陸的請求處理。如下面代碼所示：

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException,IOException{

//doPost 方法處理登陸信息

Stringu_name=request.getParameter( "username" ); // 獲取用戶名

Stringu_password=request.getParameter( "password" ); // 獲取密碼

u_password=MD5. getMD5ofStr (u_password); // 采用MD5解密進行核對密碼

// 創(chuàng)建實體類對象

User_enu= newUser_en();u.setUname(u_name);u.setUpassword(u_password);UserDaoud= newUserDao();

ResultSetrs=ud.userLogin(u);

if

(rs!=

null

){

//

查詢結果不為空

try

{

HttpSessionsession=request.getSession( true ); // 創(chuàng)建session 對象

// 通過session 保存用戶id

session.setAttribute( "userid" ,rs.getString( "uid" ));

// 通過session 保存昵稱

session.setAttribute( "usernick" ,rs.getString( "unick" ));

// 通過session 保存用戶名

session.setAttribute( "username" ,rs.getString( "uname" ));

// 登陸成功后重定向到主頁

response.sendRedirect( "index.jsp" );

} catch (SQLExceptione){response.setContentType( "text/html" );PrintWriterout=response.getWriter();

out.println( "<!DOCTYPEHTMLPUBLIC\"-//W3C//DTDHTML4.01

Transitional//EN\">" );

out.println( "<HTML>" );

out.println(

"<HEAD><TITLE>

登錄失敗！</TITLE></HEAD>"

);

out.println(

"<BODY>" );

out.print( "<center> 您登錄失敗,請檢查用戶名和密碼！ 返回請點

擊這里</center><br>" );

out.print( "<center><fontsize='4px'><ahref='login.jsp'> 返

回登錄</a><font><center>" );

out.println( "</BODY>" );

out.println( "</HTML>" );out.flush();

// 關閉輸出

// 打印異常

}

}

out.close();

e.printStackTrace();

}

(二) 上傳文件界面及編碼

上傳文件的實現(xiàn)如圖9所示：實現(xiàn)Flash文件的上傳，允許格式為flv、swf格式的文件，文件的大小不超過100M。實現(xiàn)表格中文件的點播、下載及點擊率的自動刷新。

17

PAGE

19

圖9：用戶實現(xiàn)上傳文件的界面截圖

上傳文件代碼中通過inserVideo(VideoInfovif) 方法實現(xiàn)上傳Flash文件處理。上傳文件的主要編碼實現(xiàn)：

//Flash 文件上傳方法

public boolean inserVideo(VideoInfovif){ conn=DBUtil. getConnection (); //

獲取連接

sql ="insertinto[video](vid,uid,uptime,videourl)values(?,?,?,?)" ;

//sql 語句

try { // 異常捕獲

pstm=conn.prepareStatement(

sql ); //

對sql

語句進行預編譯

pstm.setString(1,vif.getVid());

pstm.setString(2,vif.getUid());

pstm.setString(3,vif.getUptime());

pstm.setString(4,vif.getVideourl());

int ex= pstm.executeUpdate();

//

執(zhí)行sql

語句并返回結果

if (ex>0){ // 添加Flash 成功

flag =true ;

}

pstm.close(); // 關閉資源

DBUtil. getClose (conn);

// 關閉連接

}catch (SQLExceptione){

e.printStackTrace(); // 捕獲并輸出異常

}

return flag ;

}

(三) 下載文件界面及編碼

實現(xiàn)文件下載功能的界面如圖10所示：允許用戶打開和保存。

圖10：用戶下載界面截圖

通過在JSP頁面中添加下面代碼，采用文件流輸出的方式下載文件。實現(xiàn)對下載的請求處理、包括路徑和文件名的顯示。

下載文件的主要編碼實現(xiàn)：

<%

// 用戶未登錄或session 失效的跳轉設置

if (session.getAttribute( "usernick" )== null ){out.println( "<scriptlanguage=javascript>" );out.println( "window.open('index.jsp','_top')" );out.println( "</script>" );

}

%>

<%

if (request.getParameter( "downurl" )!= null ){

response.setContentType( "application/x-download" ); // 設置為下載

application/x-download

Stringfiledownload= "/" +request.getParameter( "downurl" ); // 即將下載的文件的相對路徑

Stringfiledisplay= "2011.flv" ;// 下載文件時顯示的文件保存名稱

URLEncoder.encode(filedisplay, "GB2312" );

response.addHeader( "Content-Disposition" ,"attachment;filename=" +filedisplay);

try // 下載文件時異常的捕獲。

{

RequestDispatcherdis=application.getRequestDispatcher(filedownload);

// 下載時進行文件的重定向

if (dis!= null )

{

dis.forward(request,response);

}

response.flushBuffer(); // 文件緩存的清空

}

catch (Exceptione)

{ // 捕獲到異常，文件數(shù)據(jù)流，緩存的清空及關閉

response.getOutputStream().flush();response.getOutputStream().close();response.flushBuffer();out.clearBuffer();

out.clear();

out.close();e.printStackTrace();

}

finally

{ // 文件數(shù)據(jù)流，緩存的清空及關閉

response.getOutputStream().flush();response.getOutputStream().close();response.flushBuffer();out.clearBuffer();

out.clear();

out.close();

}

}

%>

(四)瀏覽圖片界面及編碼

20

PAGE

24

實現(xiàn)用戶圖片的上傳、及上傳文件的要求。圖片的幻燈片的播放，實現(xiàn)自動播放，上一張，下一張，及下載的功能。顯示效果如圖 11界面截圖所示：

圖11：用戶下載界面截圖

瀏覽圖片的主要編碼實現(xiàn)：圖片的顯示及瀏覽功能的設置。

<!--start 圖片的設置-->

<ul class ="thumbsnoscript" >

<%

Stringu_id=(String)session.getAttribute( "userid" );ResultSetrs= newPhotoInfoDao().SeleAllPhotoDown(u_id);

try {

while (rs.next()){

%>

<li >

<a class ="thumb" href ="<%=rs.getString( "photourl" ) %>"

title ="<%=rs.getString( "pname" ) %>">

<img src ="<%=rs.getString( "photourl" ) %>" alt ="<%=rs.getString( "pname" ) %>"height ="75" width ="75" />

</a>

<div class ="caption" >

<div class ="download" >

<a href ="<%=rs.getString( "photourl" ) %>">下載</a>

</div >

<div class ="image-title" ><%=rs.getString( "pname" ) %></div >

<div class ="image-desc" ><%=rs.getString( "pbz" ) %></div >

</div >

</li >

<%}rs.close();}

catch (Exceptione){rs.close();

out.println( "<p>您未添加過照片，返回請點擊 <br><a

href='person.jsp'> 返回</a></p>" ); }

%> </ul>

</div >

<!--end 圖片的設置-->

<div style ="clear:left;float:left;padding-top:10px;" >

</div > </div >

<div style ="clear:both;" >上傳圖片像素在 500*500 以內最好！大小不超過 4M<br>

<form name="myform" action ="UpImg" method ="post"enctype ="multipart/form-data" onsubmit ="returncheck()" >

<input

<input

type

type

="file"

="submit"

name="myfile"

name="submit"

><br/>

value

="上傳圖片">

</

form

> </div

></div >

(五) 其他功能模塊

用戶的注冊界面如圖12所示：實現(xiàn)用戶名，昵稱，密碼的填寫及驗證：

圖12注冊界面圖

用戶注冊完成之后的個人資料的完善截圖：如圖 13所示：包括上傳頭像，基本信息的填寫，填寫信息的驗證等功能。

圖13：個人資料完善圖

用戶修改密碼及找回密碼的功能實現(xiàn)如圖

14所示：

圖14：修改密碼圖