【《基于ASP-NET的穿搭交流网站设计与实现》13000字】

第[11]有Application、Session、Request、Respose、ServerPage5大内置对象Connection、Command、DataAdapter、DataSet、DataReader5大数据对象。ASP.NET经历许多年的更新发展，已经发展到今天的优秀，稳健的产品，被广大使用者所选择。NET可以在绝大多数的编程工具使用。这样做不但使Web开发更方便，而且提供了这些工具必须提供的所有好处，包括开发人员可以使用GUI将服务器控件拖放到Web页面上，以及完全集成的调试支持。在创建ASP.NET应用程序时，开发人员可以使用Web表单、XMLWebservices或其他适合的方法完成组合。目前来说，ASP.NET的验证方式有以下几种:首先是Windows的身份验证，通过ASP.NET展开验证，其次是Passpotr身份验证，Passport是Microsoft所提供的一项身份验证服务。它支持Hotmail、MSN和.NETMessenger。最后是forms窗体身份验证，通过HTML窗体收集用户凭据，若网站项目需要对身份进行验证时，系统会发出一个内部包含获得标识的凭据或秘钥的Cookie进行验证。总而言之，ASP.NET技术是本网站达到便捷且方便后期维护的最优选择，即使在同等技术的条件下，ASP.NET最终的实现效果也不输于一些中等规模的企业应用程序。3需求分析3.1功能需求分析3.1.1网站基本功能需求站点的功能性需求是一个关键因素。想象一下，网站建好后，不可能只有一个页面，内容才是用户最关心的。因此，如何显示这些内容？怎样才能把网站想要展示的东西都展示出来呢？这一设计的指导原则是满足用户需求。所以用户登录和注册等基本功能是必需的，当用户未登录时是以游客身份浏览信息和搜索帖子，但是没有权限进行穿衣收集、发布穿衣信息等操作的，网站会提醒用户注册账号以获取权限。有了新用户注册，就可以发布穿搭贴文，查看我的收藏，我的分享，改变个人信息等功能。站点可以通过网络将需要显示的信息显示给用户查看或使用。站点有几个关注点，说说发布功能是否支持图片上传，是否支持错误提示，等一些小细节的功能设置，可以实现更方便、更人性化的用户交互和体验。3.1.2功能模块需求功能需求结构图如下图3-2所示：图3-SEQ图3-\*ARABIC2功能模块需求1、登录注册模块：登录和注册模块是网站交互必不可少的功能。登入登记模组包括验证使用者名称及密码的格式是否符合规定。如果用户已经注册，则会通过后台界面拉出数据来检测用户名是否已经注册，因为本网站只能通过用户名来确定用户，所以不能重复用户名。2、发表共享模块：这是一个穿搭社交网站，就像小红书一样，发布状态图片是必不可少的。该特性包括：SQL注入验证、发布内容格式检测、发布图片大小格式过滤等。3、账户设置模块：账户基本信息设置包括三个分模块，分别是修改资料模块、修改头像模块、修改密码模块。首先默认账户信息是邮箱和密码，其他基本信息如昵称，性别，联系方式，QQ需要用户自己填写。其次头像修改，头像修改支持在线上传图片，图片上传有格式和大小的限制，会动态监测图片时候合格的图片，会提示用户。上传头像成功可以在线裁剪图片，然后保存裁剪后的图片。最后，修改密码模块，用户需要输入之前的密码和修改的密码并完成二次确认与提交即可更改密码。4、搜索分享模块：此模块主要用来用户搜索心仪的穿搭分享，后台可以实现与数据库的匹配把相应的分享帖列出来。搜索模块看似简单，其实集成了验证输入，提示输入，结果动态展示等功能。5、收藏与点赞模块：用户收藏和点赞心仪的穿搭分享是该网站的必备功能，可以提高整个网站的活跃度。3.2用户体验需求分析使用者所反馈体验感的好与坏很大程度取决于界面和使用者的交互是否符合用户心中的标准。由于人们在初期对于交互的重视程度不够，导致在进行相关设计时的页面开发也是一笔带过，甚至直接忽略。但近些年人机交互的思想传入国内，使得人们得知界面的开发是一个独立模块且不可缺失，这也就缓解了初期不够重视导致极大地限制了人机交互设计，其结果具有较大的风险。也避免了类似于由于设计尾声对核心内容修改导致的巨大时间和精力的耗费，这类确定需求并且有把握的开发就很容易得满意的用户体验。产品本身的设计不能脱离用户体验本身。使用者更多地关注于应用程序的功能是否完美，但很多时候用户体验超越了功能性设计，或者说它成就了功能性设计。把用户体验放在首位成了如今项目搭建的一大宗旨。即在开发刚起个头时，就要将用户体验感作为中心思想在整个过程中。这样做能够确保在刚开始的时候就对用户体验有一个正确的估计，了解用户的真正想要的是什么，在后期修改相关重要功能时也能降低修改的时间精力，确保功能与界面的工作能够同步顺畅，减少不必要的漏洞。这一设计，目前考虑的用户体验大部分来源于界面的美观、排版的人性化、提示式交互。我觉得，用户体验是个大问题，而且需要不断挖掘的方面，不可能一夜成名。因此本设计涉及的用户体验设计未必是最好的，但却是目前自己能做到的最佳设计。用户体验本设计要做到下面这几点：整体风格：要结合受众群体的需求对网站进行合适编排。页面色调：颜色作为一个网站首先吸引眼球的视觉要素，因而主要选择暖色调作为页面背景色，可以降低与用户的距离感，使用户的心情达到放松轻快并且保持愉悦，避免让人产生疲劳感。图案：因为本网站为穿搭分享主要分享形式就是图片，因此穿搭类型图片都不必要做过多的修改，也能带来相对美好的视觉体验。REF_Ref71879116\r\h[12]4总体设计4.1业务流程分析对于网站的业务流程进行分析，是理解其运作方式的第一步，对于业务流程分析的方式众多，其中利用业务流程图（TFD）进行分析，利用图片形式直观反映事项的执行过程或流程是更加为大众容易理解的方式，因此作出网站业务流程图如图4-1所示：图4-SEQ图4-\*ARABIC1业务流程图4.2具体流程分析4.2.1登录注册流程用户打开网站，点击注册时需要录入邮箱（即用户名）、密码和二次重复密码并提交注册按钮。JavaScript获取用户填写信息，以此分析合法性。比如验证邮箱的注册与否，邮箱如果在数据库存在注册消息则窗口提示该邮箱已被注册并返回失败提示。若验证通过，则将所有数据打包给后台，并跳转到个人中心页面。具体流程图如图4-2所示：图4-SEQ图4-\*ARABIC2登录注册流程图4.2.2发表分享流程用户在登录成功后，进入个人中心，点击“分享穿搭”，显示分享文章的框架，用户只需根据需求填写文章标题、选择封面图片、编写内容最后点击提交即可。提交时系统会自动检测内容、图片以及标题是否符合规范，合格则会将内容保存提交数据库并在前端主页面显示，不合格也会有相应提示。具体流程图如图4-3所示：图4-SEQ图4-\*ARABIC3发表分享流程图4.3数据库设计数据库在整个系统中是至关重要的一环它关系到整个系统的相适度，计算机信息系统以数据库为核心，只有在数据库的管理支持下，才能进行一些基本的如前台信息的录入、储存、整合、优化、合计等操作。因此数据库设计的好坏直接影响到整个系统的质量和效率。数据库的设计一般经过需求分析、概念结构设计、逻辑结构设计三个步骤。4.3.1数据库需求分析根据需求分析以及相关功能的详解，可以对表得出如下详细解析：1、用户表：包括id(每个用户唯一)、Email、密码、昵称、性别、头像、手机号码、QQ号码、邮箱验证、注册日期。2、分享表：分享帖子的id（每个帖子唯一）、包括发表此分享的用户（id）、分享帖创建日期、分享帖标题、分享内容、发表的分享帖的图片路径（唯一指向一张图片的相对路径）。3、收藏表：被收藏帖子的id、收藏的人（id）、发表的人（id）以及收藏时间。4、管理员表：包括id(每个管理员唯一)、Email、密码、使用者名称、昵称。5、点赞表：点赞表id编号（每个帖子一个）、喜欢者、分享者以及点赞时间。4.3.2数据概念结构设计数据库的概念结构就是依据之前的数据分析从点到面搭根据使用者的需求建出全部数据库所需的表单、视图，接着把搭建的小模块汇总，最终将汇总排错并通过层层精炼所得的就是最终成果。此处数据库的概念结构设计采用实体—联系（E-R）模型设计方法。如下为整套系统的综合概念结构设计图，图4-3所示：图4-SEQ图4-\*ARABIC4数据库E-R图4.3.3逻辑结构设计由于数据库概念模型独立于任何特定的数据库管理系统，因此，需要根据具体使用的数据库管理系统的特点进行转换。即转化为按计算机观点处理的逻辑关系模型,E-R模型向关系数据库模型转换应遵循下列原则：1.每一个实体要转换成一个关系2.所有的主键必须定义非空（NOTNULL）3.对于二元联系应按照一对多、弱对实、一对一、多对多等联系来定义外键。根据E-R模型，每日穿搭社交网站建立了以下逻辑数据结构，下面是各数据表的详细说明：用户表(user)：保存用户基本信息，在用户注册的时候插入新数据，在登录的时候查询数据验证，在个人中心修改数据的时候更新。此表有md5加密的密码和用户名和其他基本信息字段。用户表是最重要的表，其他表都会基于这个表查询。数据结构如下表4-1所示：表4-SEQ表4-\*ARABIC1用户表属性数据类型长度主外键说明允许Null值idint4主键否Emailnvarchar50无否Pwdnvarchar50无否NickNamenvarchar50无是Sexnvarchar50无是FacePathnvarchar100无是Phonenvarchar50无是QQnvarchar50无是EmailVerificationnvarchar50无是RegTimedatetime8无否分享表(Share)：分享表用于保存用户发表的说说，和发表的图片路径。数据结构如下表4-2所示：表4-SEQ表4-\*ARABIC2分享表属性数据类型长度主外键说明允许Null值idint4主键否UploaderIDint4无否Titlenvarchar20无否Covernvarchar200无否Contentstext16无否Datedatetime8无否收藏表(Favorite)：收藏表主要记录用户收藏喜欢的穿搭内容，用户点击文章收藏按钮在个人中心即可查看，用以记录用户关注的穿搭情况。数据结构如下表4-3所示：表4-SEQ表4-\*ARABIC3收藏表属性数据类型长度主外键说明允许Null值idint4主键否UserIDint4外键否ShareIDint4外键否Datedatetime8无否5详细设计5.1网站界面布局设计5.1.1用户登录注册设计在登录面板中添加输入框组和按钮组控件，用户名输入框和密码输入框构成了输入框组，登录按钮和记住用户名组成按钮组。效果如下图5-1所示：图5-SEQ图5-\*ARABIC1登录页面在注册面板中添加输入框组和按钮组控件，用户名输入框、密码输入框和密码重复框构成了输入框组，注册按钮是按钮组。效果如下图5-2所示：图5-SEQ图5-\*ARABIC2注册页面5.1.2用户管理界面布局设计用户管理界面（即个人中心）主要由两部分组成，信息管理部分和账户管理部分，其中信息管理部分又包括穿搭分享、我的收藏、我的分享。账户管理部分包括账户设置和用户退出。效果如图5-3所示：图5-SEQ图5-\*ARABIC3个人中心其中账户设置页面又包括修改资料、修改头像、修改密码三部分。修改资料部分包括可更改项和不可更改项，不可更改项为ID号和邮箱号，可更改项目包括用户的昵称、性别、联系方式、QQ，用户可根据自身需求更改之后点击提交即可完成更改，效果图如图5-4所示：图5-SEQ图5-\*ARABIC4修改资料修改头像部分包括上传本地照和摄像头拍照，上传本地照需点击按钮选择图片，但需选择JPG、JPEG、GIF、PNG格式图片文件且图片文件大小不大于2MB，摄像头拍照点击允许即可使用进行摄像头拍摄头像，效果图如图5-5所示：图5-SEQ图5-\*ARABIC5修改头像修改密码部分包括三个输入框分别是原密码、新密码、重复新密码，用户可根据自身需求更改之后点击提交即可完成更改，效果图如图5-6所示：图5-SEQ图5-\*ARABIC6修改密码5.1.3通用界面布局设计通用界面布局适用于搜索帖子、查看分享、点赞分享、收藏分享以及查看最近发布的帖子内容的基本操作，效果如下图5-7所示：图5-SEQ图5-\*ARABIC7通用界面布局通用界面布局采用瀑布流形式呈现，既符合简约美观又适合网站穿搭分享的主旨，现如今不少穿搭分享类平台采用该布局形式，其中典型代表如“小红书”等。关键代码如下：//瀑布流、lazyload效果$(function(){ f_masonry(); $("img").lazyload({ effect:"fadeIn", failurelimit:40, load:f_masonry, });});functionf_masonry(){ $('.masonry').masonry({ gutterWidth:20, itemSelector:'.item', isAnimated:true, });}5.2系统后端数据处理5.2.1穿搭搜索功能穿搭搜索模块，显示是在通用界面头部，有一个固定输入框。用户只需输入（关键字字符串为‘q’）想要寻找的穿搭分享点击搜索或是直接点击回车（使用JS框架，jQuery），会将输入传入BLL层（业务逻辑层）并将传入数据填充在dt，判断dt内是否存在输入关键字，若存在则显示出搜索结果，若不存在显示“什么都没有找到”。其中部分关键代码如下：//接收关键字并传入判断页面$(document).ready(function(){$("#input-search").keydown(function(e){//回车键跳转varcurKey=e.which;if(curKey==13){$("#btn-search").click();returnfalse;}});});$("#btn-search").click(function(){varq=$("#input-search").val();q=q.replace("<","").replace(">","");//过滤<>非法字符window.location.href="Search.aspx?q="+q;//判断页面if(Request.QueryString["q"]!=null){string[]keywords=Request.QueryString["q"].Split('');ShareBLLshareBLL=newShareBLL();UserBLLuserBLL=newUserBLL();DataTabledt=shareBLL.Search(keywords);if(dt.Rows.Count==0)//判断dt中是否存在关键字内容{this.masonryDiv.InnerHtml="<h2align=\"center\">什么都没有找到</h2>";}for(inti=0;i<dt.Rows.Count;i++){Useruser=userBLL.QueryInfoByID(dt.Rows[i][1].ToString());stringfacePath="";if(user!=null&&user.FacePath!=""){facePath="Static/Image/Face/face_avatar2_"+user.FacePath;}else{facePath="Static/Image/face_avatar_default.png";}stringshareTitle=dt.Rows[i]["Title"].ToString();if(Encoding.Default.GetByteCount(shareTitle)>100){shareTitle=shareTitle.Substring(0,99)+"…";}stringshareUrl="Shares.aspx?id="+dt.Rows[i]["ID"];5.2.2发表穿搭功能 用户在登录后进入个人中心后，拥有发表穿搭的权限，点击“分享穿搭”，就会弹出相关弹窗，用户输入标题、选择封面并写好内容后点击提交按钮便可提交到Index.aspx页面。部分关键代码如下：//读取POST进来的图片HttpPostedFilefile=Request.Files[Request.Files.AllKeys[0]];stringfileName=DateTime.Now.ToString("yyyyMMddhhmmssff")+CreateRandomCode(8);intpos=file.FileName.LastIndexOf(".");stringextName=file.FileName.Substring(pos,file.FileName.Length-pos);stringvirtualPath=string.Format("~/Static/Image/Cover/cover_{0}{1}",fileName,extName);file.SaveAs(Server.MapPath(virtualPath));share.Cover=fileName+extName;//插入一条记录publicboolInsertOneRecord(Sharedayshare){//设置Sql语句stringsqlStr="INSERTINTO[Share]([UploaderID],[Title],[Cover],[Contents])"+"VALUES(@UploaderID,@Title,@Cover,@Contents)";//设置Sql参数数组SqlParameter[]SqlParam=newSqlParameter[4];SqlParam[0]=newSqlParameter("@UploaderID",share.UploaderID);SqlParam[1]=newSqlParameter("@Title",share.Title);SqlParam[2]=newSqlParameter("@Cover",share.Cover);SqlParam[3]=newSqlParameter("@Contents",share.Contents);//执行SQL语句，并返回受影响的记录intresult=ExecuteNonQuery(sqlStr,SqlParam);if(result==1){returntrue;}else{returnfalse;}}5.2.3点赞与收藏功能当用户阅读到感兴趣的内容时，可点击点赞或收藏将收藏的帖子放入个人中心，可方便下次查看。但此功能仅对注册过账号的用户开放，游客游览帖子时会提示注册后才可收藏与点赞。部分关键代码如下：//收藏publicboolFarvoriteFromUser(stringuserID,stringshareID){Farvoritefarvorite=farvoriteDAL.QueryOneRecord(userID,shareID);if(farvorite==null){returnfarvoriteDAL.InsertOneRecord(userID,shareID);}else{returnfalse;}}//插入一条收藏记录publicboolInsertOneRecord(stringuid,stringshareID){//设置Sql语句stringsqlStr="INSERTINTO[Favorite]([UserID],[ShareID])"+"VALUES(@UserID,@ShareID)";//设置Sql参数数组SqlParameter[]SqlParam=newSqlParameter[2];SqlParam[0]=newSqlParameter("@UserID",uid);SqlParam[1]=newSqlParameter("@ShareID",shareID);//执行SQL语句，并返回受影响的记录intresult=ExecuteNonQuery(sqlStr,SqlParam);if(result==1){returntrue;}else{returnfalse;}}//点赞publicboolLikeFromAny(stringliker,stringshareID){if(!likeDAL.IsLikeToday(liker,shareID)){returnlikeDAL.InsertOneRecord(liker,shareID);}else{returnfalse;}}5.3安全性增强MD5加密算法全名为Message-DigestAlgorithm5，其中Message-Digest指Message的哈希变换。MD5是一个大整数，它用一个任意长度的信息变来代替一个任意长度的128bit，具体的描述如下：当输入一个字符串时，用512位来处理这个字符串，然后用16个32位小组经过一系列算法来把它分成4个32位分组数据，最后用128比特的散列值来表示4个32位的数据。MD5算法是一种不可逆变换法，这就意味着即使观察源程序和算法，也没有方法可以把MD5值转换回原来的信息。因此，MD5算法具有较高的安全性，这也是该算法广泛应用的原因所在。REF_Ref71879793\r\h[13]本网站对数据库用户密码就使用了MD5加密算法对信息加密，代码如下：//注册新用户时密码代码user.Pwd=FormsAuthentication.HashPasswordForStoringInConfigFile(txtPassword.Text,"MD5");//修改密码时代码publicboolUpdateOneRecordPwd(stringemail,stringnewPwd){//设置sql语句stringsqlStr="UPDATE[User]SETPwd=@PwdWHERE[Email]=@Email";//设置Sql参数数组SqlParameter[]SqlParam=newSqlParameter[2];SqlParam[0]=newSqlParameter("@Pwd",FormsAuthentication.HashPasswordForStoringInConfigFile(newPwd,"MD5"));SqlParam[1]=newSqlParameter("@Email",email);//执行SQL语句，并返回受影响的记录intresult=ExecuteNonQuery(sqlStr,SqlParam);if(result==1){returntrue;}elseif(result==0){returnfalse;}}6系统测试6.1系统测试简述6.1.1测试目的和意义本章主要讲述网站系统的测试。系统测试是网站设计中的重要一环，可以发现并改正错误提高网站的可靠性。测试过程中需要设计一些测试用例方便发现迄今为止暂未发现的漏洞。想要得到一个完美且功能齐全的网站，就应尽可能的发现更多的问题并解决，避免由于不关心系统缺陷造成更多损失。6.1.2测试方法白盒测试和黑盒测试是系统检测的两种常规方法，本系统需要在测试时同时运用黑盒测试和白盒测试，黑盒测试针对系统外部功能这些表层功能进行测试，白盒测则试旨在通过系统的逻辑构成进行测试。（1）白盒测试：测试人员可以看到软件系统的内部结构，并且使用软件的内部知识来指导测试数据及方法的选择。目前大多数的测试人员都是做黑盒测试，很少有做白盒测试的。因为白盒测试对软件测试人员的要求非常高，需要有很多编程经验。做ASP.NET项目的白盒测试要能看得懂ASP.NET的代码，并且对内部层与层之间的构造和联系有足够精准的把握。（2）黑盒测试：把网站系统当作一个“黑箱”，无法了解或使用系统的内部结构及知识。从网站的行为，而不是内部结构出发来设计测试。经过白盒测试后，没有原则性的问题，或者有些难以发现的问题没有发现，然后就可以开始黑盒测试，本人觉得黑盒测试更偏向于“感性”而白盒测试跟偏向于“理性”，但是两者都必不可少的。补充：单元测试单元测试是一种针对组成系统的基本单元进行测试的方法，单元测试我们主要对软件的模块进行测试，将代码完成编译之后再开始的步骤。通过验证各个单元的性能，得出最后结果。在上文完成的财务管理系统设计测试中准备几个实用价值不高的测试数据，待系统可以使用后再把无效数据去除然后输入一些符合要求的能够反映真实错误和实际情况的数据进行下一步测试。通过进一步的测试能够发现更多问题。进一步考虑系统的完善性是将上面工作基本完成后，再一次输入还有正确用户名密码的测试用例并观察是否有效进一步筛查。6.2功能模块测试 以下是对几个具有代表性模块进行测试。6.2.1对客户端登录模块测试 用户登录测试用例。从账号密码错误与否发的角度区分测试。 详细测试如表6-1所示：表6-SEQ表6-\*ARABIC1用户登录测试编号执行操作预期结果测试结果11.输入账号错误2.输入密码错误页面提示“用户名或密码错误”测试正确21.输入账号正确2.输入密码正确登录成功，跳转至用户界面测试正确31.输入账号错误2.输入密码正确页面提示“用户名或密码错误”测试正确41.输入账号正确2.输入密码错误页面提示“用户名或密码错误”测试正确6.2.2对客户端穿搭分享模块测试用户穿搭分享模块测试用例。从发表内容为空与否、封面是否为空以及发表穿搭分享是否带图片3个方面进行测试。详细测试如表6-2所示：表6-SEQ表6-\*ARABIC2用户穿搭分享测试编号执行操作预期结果测试结果1发表说说标题、内容为空，无封面页面提示“你必须选择最少

1

文件来上传.请重新上传!”测试正确2发表说说无标题但有内容和封面页面提示“标题长度必须为4~30个字符”测试正确3发表说说无内容但有标题和封面页面提示“穿搭分享成功”测试正确4发表说说无封面但有标题和内容页面提示“