网络社区的设计与实现论文
毕业设计说明书
学生姓名
学院 学 号 计算机科学与技术学院
计算机科学与技术
网络社区的设计与实现 专 业 题 目
指导教师
(姓 名) (专业技术职称/学位)
年
月
摘 要:随着互联网技术的发展,互联网已经成为一个更加具有交互性的媒体。社区网站已经成为网民网络生活的重要部分,它为用户提供了一个在网上展示自己、与老朋友联络、结识新朋友的平台。本文在分析现有社区网站开发技术的基础上,实现了以VS.NET 2005为开发平台的基于B/S构架的网络社区系统。该系统主要具备:用户资料管理、用户日志管理、用户评论管理和好友在线聊天等功能模块。
关键词:
VS.NET 2005,B/S,Ajax 网络社区,
Abstract: Along with the development of Internet technology, it becomes a more interactive media. The social network sites have become an important part of our life and provide a platform to show selves, contact with old friends, and make new friends. This paper analyses the structure and key technology of the current sites. On the basis of that, it works out a solution of my site which is based on the mode of B/S and developed in the environment of Visual Studio 2005 integration development kit. The system has different function modules: user-information management, user-log management, user-comment management and online chatting etc.
Keywords: social network site, visual studio. net 2005, browser/server, ajax
目 录
1 绪论 . ......................................................... 3
1.1 开发背景 . ................................................... 3
1.2 开发意义 . ................................................... 3
1.3 本文组织结构 . ............................................... 4
2 系统解决方案 . ................................................. 4
2.1 开发应用技术介绍 ............................................ 4
2.2 开发及运行环境 . ............................................. 8
3 需求分析 . ..................................................... 8
3.1 面向的用户人群 . ............................................. 8
3.2 主要功能模块分析 ............................................ 8
3.3 项目开发要求 . .............................................. 11
3.4 特别说明 . .................................................. 11
4 数据库设计 . .................................................. 12
4.1 E-R 模型 ................................................... 12
4.2 逻辑设计 . .................................................. 13
5 系统详细设计 . ................................................ 15
5.1 配置Web.config ............................................ 15
5.2 配置安装Ajax .............................................. 15
5.3 关键技术详细说明 ........................................... 16
结 论 . ......................................................... 35
参 考 文 献 . .................................................... 36
致 谢 . ......................................................... 37
2
1 绪论
1.1 开发背景
SNS ,全称Social Networking Services,即社会性网络服务,专指旨在帮助人们建立社会性网络的互联网应用服务。也指社会现有已成熟普及的信息载体,如短信SMS 服务。SNS 的另一种常用解释:全称Social Network Site,即“社交网站”或“社交网”。
早期在互联网上多维持着很多提供用户互动支持的服务,例如BBS ,新闻组等。早期社交网络的服务网站呈现为在线社区的形式。用户多通过聊天室进行交流。随着Blog 等新的网上交际工具的出现,用户可以通过网站上建立的个人主页来分享喜爱的信息。2002年至2004年间,世界上三大最受欢迎的社交网络服务类网站是Friendster 、MySpace 、Bebo 。在2005年之际MySpace 成为了世上最巨大的社交网络服务类网站。传闻当时其页面访问量超越了作为著名搜索引擎的Google 。2006年第三方被允许开发基于Facebook 的网站API 的应用,使得Facebook 随后一跃成为全球用户量增长最快的网站。
社交服务网站的发展验证了“六度分隔理论”(Six Degrees of Separation ),即“人际关系脉络方面你必然可以通过不超出六位中间人间接与世上任意先生女士相识”。个体的社交圈会不断地扩大和重叠并在最终形成大的社交网络。在此类通过对“朋友的朋友是朋友”原则的实现而得到发展的线上社交网络中,Friendster 具备一定的代表性。
社交服务类网站最早出现商业盈利目的是在2005年3月雅虎对雅虎360°的推出。在2005年6月新闻集团成功收购MySpace 。随后在2005年12月,英国ITV 购得Friends Reunited 。此后在世界的各地涌现出各种不同语言的社交网络服务类网站。
目前国内知名的社区网站:协助网、品品米、开心网、人人网、海内网等。
1.2 开发意义
这是—个以网络为核心的信息时代。随着互联网的不断发展以及全球经济一体化的逐步深入,形成一种新型的网络虚拟社区和人际交往方式,以web 方式显示和发布的,充分利用超链接,借助于互联网,人们之间可以分享经验,想法,感受等。社交类网站的优势是显而易见的:
● 通过社交服务网站我们与朋友保持了更加直接的联系,建立大交际圈,其提供的寻
找用户的工具帮助用户寻到失去了联络的朋友们。
● 加快信息传播、意见交流的速度, 从而能够集思广益。
● 网站通常有很多志趣相同并互相熟悉的用户群组。相对于网络上其他广告而言,商
家在社交服务网站上针对特定用户群组打广告更有针对性。
但是,凡事都有两面性,社交类网站的劣势也是值得我们去思考的:
● 随着社交服务类网站的出现,浏览这些网站占用了人们的学习工作时间。
● 无法通过增长在网络上所进行的社交活动来实现真实生活中社会交往技巧的增长。 ● 个人信息安全保障措施还需要改善。
1.3 本文组织结构
本系统将以课本和一些课外书籍为参考,按照带课老师的作业要求,从系统开发背景→需求分析→概要设计→逻辑设计→具体开发→测试一步步对系统进行分析和设计,当然测试是贯穿整个流程的。各个章节安排如下:
第一章为绪论,简单介绍了项目的开发背景和意义;
第二章详细介绍了项目开发的应用技术,比如ASP.NET ,数据库访问技术和Ajax 等;
第三章是需求分析,介绍了系统的设计目标和系统的主要功能模块。
第四章是数据库设计,在E-R 模型的基础上,再设计出相应的逻辑模型。
第五章根据系统功能模块详细介绍了各模块的设计过程并给出部分实现代码。
2 系统解决方案
2.1 开发应用技术介绍
2.1.1 ASP.NET
ASP.NET 是.NTE 框架层之一,负责处理对特定类型文件的Web 请求,这些文件主要包括扩展名为.aspx ,.ascx 以及.asmx 的文件以及其他一些文件。ASP.NET 引擎为创建动态内容提供了强健的对象模型, 同时松散地集成在.NET 框架中。这种集成有利于把.NET 框架移植到非Windows 平台。
ASP.NET 是Microsoft.net 的一部分,作为战略产品,不仅仅是 Active Server Page (ASP) 的下一个版本,它还提供了一个统一的 Web 开发模型,其中包括开发人员生成企业级 Web 应用程序所需的各种服务。ASP.NET 的语法在很大程度上与 ASP 兼容,同时它还提供一种新的编程模型和结构,可生成伸缩性和稳定性更好的应用程序,并提供更好的安全保护。可以通过在现有 ASP 应用程序中逐渐添加 ASP.NET 功能,随时增强 ASP 应用程序的功能。
ASP.NET 可以用已编译的基于.NET 环境的可以用任何与.NET 兼容的语言(包括 Visual Basic .NET、C# 和 JScript .NET.)创作应用程序。另外,任何 ASP.NET 应用程序都可以使用整个.NET Framework,开发人员可以方便地获得这些技术,其中包括托管的公共语言运行库环境、类型安全、继承等等。
ASP.NET 可以无缝地与 WYSIWYG HTML 编辑器和其他编程工具(包括 Microsoft
Visual Studio .NET)一起工作。这不仅使得 Web 开发更加方便,而且还能提供这些工具必须提供的所有优点,包括开发人员可以用来将服务器控件拖放到 Web 页的 GUI 和完全集成的调试支持[1]。
因此,对于程序员来说,可以更方便地开发Web 应用程序,这些是跟微软为ASP. NET 设计的以下策略分不开的:易于写出结构清晰的代码、代码易于重用和共享、可用编译类语言编写等等。
2.1.2 C#
在过去的20年中,C/C++已经成为广泛应用于商业软件开发中的高级语言。但是C 和C++都包含了一些容易使开发者产生错误的特性,通常我们可以认为,C/C++的灵活性是以牺牲开发效率为代价的。
在基于C 语言的所有衍生语言中,C#是最近的演变结果。C#相对于C++而言,更现代、简单、完全面向对象和类型安全。最重要的是,它简化和现代化了C++在类、名字空间、方法重载和异常处理等领域的处理方法,摒弃了C++的复杂性,使它更易用、更少出错。
在增强易用性的同时,C#也减少了C++的一些特性,如不再有宏、模板和多重继承等。事实上,特别是对企业开发者来说,上述功能只会产生更多的麻烦而不是效益。
C#使编程更方便的新功能有严格的类型安全、版本控制、垃圾收集(garbage collection )等功能,所有这些功能的目标都瞄准了开发面向组件的软件。
2.1.3 SQL Server 2005
SQL Server 2005 是Microsoft 公司2005年发布的数据库软件的有又一个新版本,与Microsoft Visual Studio、Microsoft Office System以及新的开发工具包紧密集成,该产品不仅可以有效地执行大规模联机事务、而且可以完成数据仓库和电子商务应用等许多具有挑战性的工作。它不仅继承了微软产品的一贯特点,而且在性能、可靠性、可用性、可编程性、易用性等方面都远远胜过了SQL Server 2000 。该产品提供了六个不同的版本:企业版(Enterprise Edition)、标准版(Standard Edition)、开发人员版(Developer Edition )、工作组版(Workgroup Edition)、精简版(Express Edition)和企业评估版。与Microsoft SQL Server 2000相比,其新特性更具诱惑力: 增强的数据引擎,增强的数据复制服务,增强的通知服务,增强的集成服务,增强的分析服务,增强的报表服务,新增Service Broker技术,改进的开发工具,增强的数据访问接口等。
2.1.4 ADO.NET
ADO.NET 是由.NET framework为与数据库中的数据进行交互而提供的一组对象类的名
称。我们知道,面向对象编程的有关主要优点是可以把各种复杂的功能封装在一个自包含的单元中,接着要处理的就是—个定义好的接口中,它由一些方法和属性组成。
在ADO.NET 中,我们将处理断开连接的数据集,在网站的访问者请求数据时,首先建立连接,传送数据,之后关闭连接;接着,访问者就可以修改数据,但这些修改不会在数据源中立即更新(如果需要对访问者所做的修改更新到数据库,必须重新打开连接)。这种断开连接进行访问数据库的最大优点是效率高、可伸缩性好。在以往的数据库访问中必须为用户一直保持连接,直到该用户的会话结束为止,而Web 中可能同时处理上千个并行用户,可想而知,如果为每个用户同时保持连接在需要的系统资源是非常昂贵的。因此,使用断开式连接数据可以提高应用程序的执行效率,并能处理更多的工作负载(即它们的伸缩性更好)。
2.1.5 AJAX
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript 和XML ),AJAX 并非缩写词,而是由Jesse James Gaiiett创造的名词,是指一种创建交互式网页应用的网页开发技术。AJAX 技术是目前在浏览器中通过JavaScript 脚本可以使用的所有技术的集合。包括:HTML 和CSS ,使用文档对象模型DOM 作动态显示和交互,使用XML 做数据交互和操作,使用XMLHttpRequest 进行异步数据接收,使用JAVAScript 将它们绑定在一起。Web 应用的交互如Flickr, Backpack和Google 在这方面已经有质的飞跃[2]。
这个术语源自描述从基于网页的Web 应用到基于数据的应用的转换。在基于数据的应用中,用户需求的数据如联系人列表,可以从独立于实际网页的服务端取得并且可以被动态地写入网页中,给缓慢的Web 应用体验着色使之像桌面应用一样。
许多重要的技术和AJAX 开发模式可以从现有的知识中获取。例如,在一个发送请求到服务端的应用中,必须包含请求顺序、优先级、超时响应、错误处理及回调,其中许多元素已经在Web 服务中包含了,就像现在的SOA 。AJAX 开发人员拥有一个完整的系统架构知识。同时,随着技术的成熟还会有许多地方需要改进,特别是UI 部分的易用性。
AJAX 开发与传统的CS 开发有很大的不同。这些不同引入了新的编程问题,最大的问题在于易用性。由于AJAX 依赖浏览器的JavaScript 和XML ,浏览器的兼容性和支持的标准也变得和JavaScript 的运行时性能一样重要了。这些问题中的大部分来源于浏览器、服务器和技术的组合,因此必须理解如何才能最好的使用这些技术[3]。
综合各种变化的技术和强耦合的客户服务端环境,AJAX 提出了一种新的开发方式。AJAX 开发人员必须理解传统的MVC 架构,这限制了应用层次之间的边界。同时,开发人员还需要考虑CS 环境的外部和使用AJAX 技术来重定型MVC 边界。最重要的是,AJAX 开发人
员必须禁止以页面集合的方式来考虑Web 应用而需要将其认为是单个页面。一旦UI 设计与服务架构之间的范围被严格区分开来后,开发人员就需要更新和变化的技术集合了。
AJAX 主要包含了一下几种技术:
● 基于web 标准(standards-based presentation)XHTML+CSS的表示;
● 使用 DOM(Document Object Model)进行动态显示及交互;
● 使用 XML 和 XSLT 进行数据交换及相关操作;
● 使用 XMLHttpRequest 进行异步数据查询、检索;
● 使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax 的提出者Jesse James
Garrett 的原文[4]。
AJAX 技术之中,核心的技术就是XMLHttpRequest ,它最初的名称叫做XMLHTTP ,是微软公司为了满足开发者的需要,1999年在IE5.0浏览器中率先推出的。后来这个技术被上述的规范命名为XMLHttpRequest 。它正是Ajax 技术之所以与众不同的地方。简而言之,XMLHttpRequest 为运行于浏览器中的JavaScript 脚本提供了一种在页面之内与服务器通信的手段。页面内的JAVAScript 可以在不刷新页面的情况下从服务器获取数据,或者向服务器提交数据。XMLHttpRequest 的出现为Web 开发提供了一种全新的可能性,甚至整个改变了人们对于Web 应用由什么来组成的看法。它可以使我们以一种全新的方式来做Web 开发,为用户提供更好的交互体验[5]。
类似于DHTML 或LAMP ,AJAX 不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX 的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX ”。
2.1.6 Web API
Web 技术突飞猛进,Web 设计与开发者们可以选择的工具越来越多,Web 开发者的技巧不再只限于 HTML 和 服务器端编程,还需要精通各种第三方资源,这些第三方资源有时候比你的项目更复杂,更专业,你无法自己实现一切,借助一些 Web API,你可以很方便地将大量优秀的第三方资源集成到自己的站点。在此主要介绍在开发中用到FCKeditor 。
FCKeditor 是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。它可和PHP 、JavaScript 、ASP 、ASP.NET 、ColdFusion 、Java 、以及ABAP 等不同的编程语言相结合。“FCKeditor ”名称中的“FCK ” 是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。
FCKeditor 相容于绝大部分的网页浏览器,比如: Internet Explorer 5.5+ (Windows)、Mozilla Firefox 1.0+、Mozilla 1.3+ 和 Netscape 7+。在未来的版本也将会加入对Opera
的支援。
FCKEditor 官方下载地址:[url]http://www.fckeditor.net/download[/url]。
2.2 开发及运行环境
● 硬件平台
CPU :P4 1.8GHz
内存:512MB 以上
● 软件平台
操作系统:Windows 2000/Windows XP/Windows Vista
数据库:SQL Server 2005
开发环境:Microsoft.NET Framework SDK v2.0
开发工具:Microsoft Visual Studio 2005
开发语言:C#语言
浏览器:IE 6.0
Web 服务器:IIS 5.0
分辨率:最佳效果为1440*900像素
3 需求分析
本项目的需求分析主要从系统的使用人群和系统的功能模块入手分析,并提出了项目的开发要求,并对系统的性能方面又作了简要的说明。
3.1 面向的用户人群
1) 在校高校大学生:作为系统的使用者,注册登陆网站后,可以发布修改浏览日志,
上传更新浏览照片,查询添加好友,并可以浏览好友页面,在好友页面发表自己的评论等。
2) 管理员:作为系统的管理员和维护者,对用户,日志,照片等模块进行数据的管理,
并对网站的更新作出及时的响应,使得网站更好地与用户交流。
3.2 主要功能模块分析
该系统“笨笨网”主要实现如下主要目标:
1) 建立一个拥有丰富的资源、良好交互性、操作简单易用的SNS 网站。
2) 网站运行要高效,费用尽量低,注重实用性。
3) 网站实现及时获取相关最新动态信息,如通知请求等。
4) 支持站内信箱,在线信件交流。
5) 最终为更多的用户拓展人际关系。
本系统最终实现后各个部分的关系图如图3-1所示。
图3-1 功能模块图
3.2.1 普通用户模块
普通用户使用流程如图3-2所示。 1) 注册
首先填写真实的用户名和密码,因为真实的姓名可以使你的朋友容易找到你。当填完用户名和密码后填写相关信息时用户,用户根据提示将所填信息填完后,按“注册”按钮,若信息无误将注册成功,否则需要重新注册(如:两次输入的密码不同,邮箱错误等)。注册成功的用户,系统会为用户选择默认的头像。
2) 登陆
登陆界面包括账号和密码两个文本框,只要注册成功的用户就会转到自己相关的一个页面,否则将会提示账号密码错误。
3) 个人资料管理
注册用户可以修改和完善自己之前注册的资料,系统将显示之前填写的信息,用户可以在此之上进行修改(如修改头像等)。
4) 好友
注册用户可以管理已经建立关系的好友,并可按姓名查询好友,系统将会给出界面显示出相应的查询结果,用户可以选择,并申请加其为好友,如果没有搜索到系统将会提示没有相关信息。
图3-2 用户使用流程图
5) 日志、相册
系统提供管理日志相册功能,使用户可以随时编辑,删除相应的日志与照片。注册用户可以写新日志和上传最新照片。
6) 留言评论
注册用户可以管理好友在自己页面写下的留言和评论,系统提供回复删除功能。用户当然也可以在浏览的同时给对方留言和评论。
7) 浏览站内基本信息
站内的基本信息指在网站内注册用户的基本信息,包括站内注册信息、个人基本信息、联系方式、发表的日志、上传的照片、留言等。
3.2.2 管理员模块
为了保证系统的安全性,管理员进入系统后台前必须输入有效的密码,系统根据密码
确认决定是否进入,而不知道密码的操作人员是无权进入本系统的。后台用户名是“admin ”,后台密码是“admin ”。管理员模块功能包括:管理站内的用户、日志、相册、留言评论等。管理员的功能模块比较简单,故本文省略了它的功能模块图。
1) 管理用户信息
管理员对用户管理操作即为删除。对一些“恶意”用户执行删除操作,即将该用户的注册信息、基本信息、联系方式等完全从数据库删除。
2) 管理日志、相册、留言和评论
管理员对日志、相册、留言和评论的管理操作为删除。管理操作一旦执行,该文章所对应相关信息就从数据库里删除。一般情况下管理员不得任意删除普通用户的相关日志等,除非日志等涉及违法内容。
3) 其他功能
该功能主要是体现网站的可扩展性,用于完善网站,增加网站模块。
3.3 项目开发要求
开发出一个功能实用, 有效的优秀网站,为我广大高校朋友提供相互交流的平台, “笨笨网”的设计应遵循以下四点。
1) 项目开发规范统一:模块划分,代码编写均遵照规范文档。 2) 程序优化、安全并要有良好的可扩展性。 3) 用户界面简洁明了、操作简单实用。
4) 与用户保持良好的沟通,及时根据用户新的需求改善系统功能。 这四点对于一个项目是十分重要的。
3.4 特别说明
1.网站的安全性
1) 系统应设置访问用户的标识以鉴别是否是合法用户,并要求合法用户设置其密码,
保证用户身份不被盗用;
2) 管理员应具有一定的网络安全及防黑知识。 2. 网站可维护性
网站管理者需懂得一定的服务器应用、SQL 数据库应用、硬件维护等方面的技能。 3. 网站的灵活性
系统应该具有良好的功能可扩充性,以应对未来用户的更高的要求。与用户保持良好的沟通,及时根据用户新的需求改善系统功能。
4. 用户界面
人性化、交互性强的网页形式,简单易用,充分合理安排用户功能。 5. 数据管理能力要求
本系统使用MS SQL,可利用其自带的各种功能进行管理。 6. 故障处理
系统运行中难免出现一些故障,对此提出以下建议和要求:
1) 对用户提交的重要资料及时备份。(如:当用户修改注册资料时要及时更新系统资料备份,以便于系统崩溃后资料的正确恢复。)
2) 当系痛数据库发生故障时,及时向用户返回相关故障原因。 3) 公开管理员电子邮箱,联系电话等,以便用户和管理员及时联系。
4 数据库设计 4.1 E-R 模型
E-R 模型是数据进行第一层抽象的表示方法。它的主要成分包括:实体、联系和属性。使用这三种成分,我们可以建立许多数据库应用系统的E-R 模型。E-R 模型的“联系”用于刻画实体之间的关联。一种完整的方式是对局部结构中任意两个实体类型,依据需求分析的结果,考察局部结构中任意两个实体类型之间是否存在联系。若有联系,进一步确定是1:N,M:N,还是1:1等。还要考察一个实体类型内部是否存在联系,两个实体类型之间是否存在联系,多个实体类型之间是否存在联系等等。
对于本网站中使用到的实体和属性可以定义如下(其中带下划线的属性为主属性): 用户信息表(用户编号,用户名,密码,邮箱,电话,家乡,兴趣爱好,头像,生日,注册日期);
朋友关系表(关系编号,用户1,用户2);
日志表(日志编号,日志标题,日志摘要,日志内容,创建日期,作者编号); 日志评论表(评论编号,评论内容,评论日期,日志编号,作者编号) 相册表(相册编号,相册名称,创建日期,作者编号);
照片表(照片编号,照片标题,照片路径,照片描述,上传日期,相册编号,作者编号) ;
留言表(留言编号,留言内容,作者编号,被留用户编号,留言日期); 通知消息表(通知编号,通知内容,申请用户编号,接收用户编号)。 本系统的部分实体与联系的E-R 模型如图4-1所示:
图4-1 E-R模型
4.2 逻辑设计
根据4.1中分析得出的E-R 图,本系统采用SQL Server 2005数据库管理系统,在SQL Server 2005数据库管理系统中新建名称为MyWeb 的数据库,系统使用的所有数据信息将存储于该数据库中。
在设计过程中考虑数据完整性约束。数据库上的完整性的约束条件一般有以下两类: (1)属性值的约束
这类约束是对属性取值的类型、范围、精度等的限制,和属性的语义有关。 (2)数据之间联系的约束
这类约束反映了数据之间存在的联系,在关系数据模型中指多个属性或多个元组之间联系的约束。比如,属性之间的函数依赖、多值依赖。在许多数据模型中都是表明了数据之间的某些依赖关系的,或者是隐式或者是显式的。
以下列举部分数据表: 1. 用户表users
表4-1用户表users
2. 朋友关系表friends
表4-2朋友关系表friends 3. 日志表articles
表4-3日志表articles
4. 日志评论表articleComments
表4-4日志评论表articleComments
5. 相册表photoCategory
表4-5相册表photoCategory
6. 照片表photo
表4-6照片表photo
7. 留言表message
表4-7留言表message
8. 通知消息表notices
表4-8通知消息表notices
以上就是MyWeb 的部分数据表。
5 系统详细设计 5.1 配置Web.config
在此文件中添加一个节,定义了数据库连接的设置,在其他应用程序的后台程序中可以直接设置,程序代码如下:
Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\MyWeb.mdf;Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient"/>
在需要连接数据库的后台程序中要定义命名空间,添加using System.Data.SqlClient; using System.Configuration; 命名空间是新定义的,分别定义了使用了SQL Server 数据源和引用Web.config 中的内容。
5.2 配置安装Ajax
在VS 下使用Ajax :
下载ASPAJAXExtSetup.msi ,安装结束后就可以在VS2005下使用Ajax 了。 使用微软开发好的Ajax 控件: 1. 下载AjaxControlToolkit 。
2. 将AjaxControlToolkit 解压到:C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025\AjaxContronlToolkit\下。
3. 双击运行AjaxControlToolkit.sln, 将C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\SampleWebSite\Bin下面生成的AjaxControlToolkit.dll 和AjaxControlToolkit.pdb 复制到 C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX
Extensions\v1.0.61025\AjaxControlToolkit\Binaries文件夹下面。
4. 将复制过的Dll 添加到工具栏。
至此,我就可以开始Ajax 开发之旅了。值得注意的是在新建网站是必须选择ASP.NET AJAX-Enabled Web Site,保证Web.config 中的配置引用到Ajax 相关内容,否则Ajax 的控件则会出错。
5.3 关键技术详细说明 5.3.1 公共类编写
在对数据库操作的过程中,为了使用户对数据库的访问更快,将对数据库的操作方法封装在DataBase 公共类中,此类是对数据库操作的核心类。
public class DataBase {
public DataBase() { //
// TODO: 在此处添加构造函数逻辑 // }
public SqlConnection GetConnection() {
SqlConnection myconn = new
SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ToString());
return myconn; }
public bool ExecNonQuery(SqlCommand myCmd) {
bool flag = false; try {
if (myCmd.Connection.State != ConnectionState.Open) {
myCmd.Connection.Open(); }
myCmd.ExecuteNonQuery(); flag = true; }
catch (Exception ex) {
flag = false;
throw new Exception(ex.Message, ex); } finally {
if (myCmd.Connection.State == ConnectionState.Open) {
myCmd.Connection.Close(); } }
return flag; } }
5.3.2 登陆、注册模块
1) 登陆模块
在asp.net 中,传统意义上可供你开发的控件实际上有两种:Custom Control 和 User Control 。Custom Control 是纵向的,是对系统本身控件的继承和扩充,在程序中以DLL 文件形式存在,User Control 则是横向的,是对系统本身控件的组合,在系统中以.ascx 为后缀名。这两种控件功能相同,都可以为开发人员提供可复用的可视化UI 组件,相比之下前者具有更大的灵活性,同时开发起来比较复杂,而后者容易开发,但可重用性就比较差。一般来说用户会先用User Control来开发,只有当其不堪重用的时候才转而使用Custom Control[6]。
而我对登陆和注册两个模块则过了一把User Control 的瘾。再也不要因为更改登陆和注册的界面而改动整个网页,只需编辑控件就可以了。真的很方便,前台页面设计如图5-1所示即为登陆的控件,在系统开发其他地方如找回密码,上传照片等都相应用到了User Control 的方法,暂不一一列举。
图5-1 登陆登陆设计视图
登陆模块的后台功能主要是通过数据库的存储过程实现用户验证[7]。存储过程定义如下。
ALTER PROCEDURE dbo.UserLogin AS
--用户名密码匹配
IF EXISTS
@email VARCHAR(50), @password VARCHAR(50), @status bit
(
)
BEGIN
--更改用户状态
UPDATE users
SET status = @status, logintime = getdate()
WHERE email=@email AND password = @password
--成功返回
RETURN 1
END
--登录失败
RETURN 0
当用户点击“登陆”按钮后则会触发事件 login_btn_Click()。其中最突出的部分就是存储过程的参数传递,大家可以借鉴下。
protected void login_btn_Click(object sender, ImageClickEventArgs e)
{
int iRet = 0;
SqlConnection conn = db.GetConnection();
SqlCommand cmd = new SqlCommand("UserLogin", conn);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add("@email", SqlDbType.VarChar).Value =
tb_name.Text;
cmd.Parameters.Add("@password", SqlDbType.VarChar).Value =
tb_key.Text;
cmd.Parameters.Add("@status", SqlDbType.Bit).Value = 1;
cmd.Parameters.Add(
new SqlParameter("ReturnValue", SqlDbType.Int, 4,
ParameterDirection.ReturnValue, false, 0, 0,
string.Empty, DataRowVersion.Default, null));//增加存储过SELECT * FROM users WHERE email = @email AND password = @password
程的返回值参数
try
{
conn.Open();
cmd.ExecuteNonQuery();
iRet =
Convert.ToInt32(cmd.Parameters["ReturnValue"].Value.ToString());
}
catch (SqlException)
{
}
finally
{
conn.Close();
}
if (iRet == 1)//登录成功
{
Session["userPass"] = tb_name.Text;
Response.Redirect("~/personal/pDefault.aspx");
}
else
{
message.Text = "登录失败,请检查账号和密码的输入是否正确!"; }
}
2) 注册模块
在注册控件中我主要应用了Ajax 的验证控件ValidateCalloutExtender ,它与Asp.net 的验证控件如RequiredFieldValidator 等有效的结合,实现了比较绚丽的效果。界面部分源代码:
。
如图5-2即为注册模块的设计,实现的部分效果如图5-3。
图5-2 注册模块设计视图
在注册界面中,我也相应加入的验证码的功能,验证码的实现有很多方法,我是新建一个ValidateImage.aspx 部分代码如下。
private string GenerateCheckCode()
{
string checkCode;
Random rd = new Random(DateTime.Now.Millisecond);//使用当前时间的毫秒为随机种子可避免生成相同的随机数
checkCode = rd.Next(10000, 99999).ToString();
Session["checkCode"] = checkCode;
Response.Cookies.Add(new HttpCookie("checkCode", checkCode));
return checkCode;
}
图5-3 注册模块效果图
在此基础上,在注册的后台代码页面加载函数中加入对该网页的引用, 即 :
protected void Page_Load(object sender, EventArgs e)
{
ImageButton1.ImageUrl = "../ValidateImage.aspx";
}
并只要判断输入的验证码是否与Session["checkCode"]相匹配就可以了。匹配代码如下:tbValidate.Text.CompareTo(Session["checkCode"].ToString())==0。
5.3.2 用户资料模块
用户成功登陆后,将会进入属于自己的一个主页,可以编辑自己的资料等。为了使用户体验无刷新的桌面编辑模式,又采用了Ajax 的UpdatePanel 控件。以更改头像为例,实现的效果图如图5-4。
图
5-4 资料编辑
protected void DataList1_ItemCommand(object source,
DataListCommandEventArgs e)
{
DataList1.SelectedIndex = e.Item.ItemIndex;
DataBind();
Image2.ImageUrl =
((Image)DataList1.SelectedItem.FindControl("Image1")).ImageUrl;
}
protected void savebtn_Click(object sender, EventArgs e)
{
Image2.ImageUrl = ((Image)DataList1.SelectedItem.FindControl("Image1")).ImageUrl;
string updateface = string.Format("update users set facephoto ='{0}' where userId='{1}'", Image2.ImageUrl, Session["userid"]);
SqlConnection conn = db.GetConnection();
SqlCommand updatecmd = new SqlCommand(updateface, conn);
if (db.ExecNonQuery(updatecmd))
{
Label2.Text = "头像更新成功!";
}
}
5.3.3 好友模块
在“笨笨网”注册登陆后,即可添加好友,查询好友,并且浏览好友的个人主页。自动完成功能也还是通过Ajax 来实现。
1. 自动完成功能
首先在查询好友的自定义控件中添加Ajax 的AutoCompleteExtender 控件。
TargetControlID="searchTextBox"
ServiceMethod="GetCompletionList" ServicePath="AutoComplete.asmx"
MinimumPrefixLength="1"
CompletionInterval="100">
从上面代码中即可得知接下来要添加一个Web 服务AutoComplete.asmx ,同时在AppCode 里会生成AutoComplete.cs 代码文档。
///
/// AutoComplete 的摘要说明
///
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class AutoComplete : System.Web.Services.WebService
{
[WebMethod]
public string[] GetCompletionList(string prefixText, int count)
{
if (!String.IsNullOrEmpty(prefixText))
{
DataBase db = new DataBase();
SqlConnection conn = db.GetConnection();
string selectsql = "select username from users where username like '" + prefixText + "%'";
SqlCommand cmd = new SqlCommand(selectsql, conn);
SqlDataAdapter adapter = new SqlDataAdapter(selectsql, conn); DataSet ds = new DataSet();
conn.Open();
adapter.Fill(ds);
List items = new List();
for (int i = 0; i
{
items.Add(Convert.ToString(ds.Tables[0].Rows[i].ItemArray.GetValue(0))); }
conn.Close();
return items.ToArray();
}
return new String[0];
}
}
2. 浏览好友页面
访问好友页面主要是使用Request.QueryString. 每次接受到参数后,它都会做UrlEncode ,并且按照UTF-8编码做的UrlEncode 。这在大多数情况下没有任何问题。但是在设计的不断进行中我也发现了一些问题,有时候会带来麻烦,这个有待去解决和优化。在本网站的其他好多地方都用到了Request.QueryString ,比如进入相册,浏览日志等。主要实现方式如下,注意其中的PostBackUrl 属性。
Eval("username") %>' ImageUrl='' PostBackUrl='' Height="50px" Width="25px" />
5.3.4 日志、相册模块
1) 日志模块
日志模块中我要提及的就Web API:FCKeditor 了,它的意义我已经在第二章节中简要的介绍了一下,现在详细说一下它的配置过程。
FCKEditor 目前的最新版本是2.6,但支持.NET 的DLL 版本还是2.5,现在介绍
FCKEditor2.6在ASP.NET 中的配置方法。
一、在官方网站上下载 下载地址:
[url]http://sourceforge.net/project/downloading.php?group_id=75348&filename=FCKeditor_2.6.zip[/url]
解压。
二、删除不必要的文件
从官方下载下来的FCKEditor2.6大小有3.61M(解压后) ,其实有很多文件对于只用ASP.NET 的来讲是不需要的,我们可以删除不必要的文件:
1.根目录下除editor 目录、fckconfig.js 、fckeditor.js 、fckstyles.xml
fcktemplates.xml 这几个保留,其余的全部删除。
2.editor\filemanager\connectors目录中除aspx 目录外全部删除。
3.editor\lang目录中除en.js 、zh.js 、zh-cn.js 外全部删除。
4.删除_samples目录,当然如果你想看示例,就不要删除这个目录了。
三、FCKEditor2.6的详细设置
1. fckconfig.js 中修改
FCKConfig.ToolbarSets["Default"] = [
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'], ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'], ['FitWindow','ShowBlocks','-','About'] // No comma for the last row. ] ;
//上面一段我去掉了一些不常用的功能,可以根据实际需要增加。
FCKConfig.DefaultLanguage = 'zh-cn' ; //原来是en var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py 改成aspx var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
2. 在Bin 中加入DLL 文件 DLL 文件下载地址:[url]http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=137125[/url]
3. 在工具栏中加入DLL 文件 4. 配置上传路径 编辑FCKeditor\editor\filemanager\connectors\aspx\config.aspx 中修改 private bool CheckAuthentication() { // WARNING : DO NOT simply return "true". By doing so, you are allowing // "anyone" to upload and list the files in your server. You must implemen // some kind of session validation here. Even something very simple as... // return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true ); // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the // user logs in your system.
return true; //原来这里是 false;不过还是建议看看上面的警告 }
在SetConfig 方法中设置UserFilesPath = "/userfiles/";//我这里设置在了网站根目录下的userfiles/,根据实际情况和个人喜好而定。实现之后的效果如图5-5。
2) 相册模块
用户可以在相册中上传照片,并且可以浏览照片,而照片的浏览使用了Ajax 的
SliderExtender ,实现了动态播放效果。
图5-5 发布日志模块
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] GetSlides()
{
//如果使用设计的组件,请取消注释以下行
//InitializeComponent();
DataBase db = new DataBase();
SqlConnection conn = db.GetConnection();
DataSet ds = new DataSet();
string query = string.Format("select
photo_path,photo_title,photo_description from photo where
photo_category_id='{0}'", cateId);//Request.QueryString["CategoryName"]
SqlDataAdapter adapter = new SqlDataAdapter(query, conn); string path = null;
string name = null;
string description = null;
AjaxControlToolkit.Slide[] sl = null;
try
{
conn.Open();
adapter.Fill(ds);
int i = 0;
int size = ds.Tables[0].Rows.Count;
sl = new AjaxControlToolkit.Slide[size];
for (i = 0; i
{
path = ds.Tables[0].Rows[i].ItemArray[0].ToString();
name = ds.Tables[0].Rows[i].ItemArray[1].ToString();
description =
ds.Tables[0].Rows[i].ItemArray[2].ToString();
sl[i] = new AjaxControlToolkit.Slide(path, name,
description);
}
}
catch (SqlException)
{ }
finally
{
conn.Close();
}
return sl;
}
5.3.5 留言、评论模块
用户在浏览好友网页时可以留言,对好友的日志等可以发表自己的意见和看法。这就是留言、评论模块。这两个模块的实现的方式大致相同,我主要分析说明两大点:asp.net ajax 焦点定位和DataList 的运用。
1.焦点定位, 当点击“回复”时,光标便定位到文本编辑框了,如图5-6所示。
通过编辑DataList 的事件ItemCommad 来实现这个效果,代码参考如下:
protected void DataList5_ItemCommand(object source,
DataListCommandEventArgs e)
{
if (e.CommandName == "select")
{
this.ScriptManager1.SetFocus(this.replyTBox);//光标焦点
DataList5.SelectedIndex = e.Item.ItemIndex;
ListBind();
targetIDLabel.Text =
((Label)DataList5.SelectedItem.FindControl("senderidLabel")).Text;
replyTBox.Text=“回复" +
((HyperLink)DataList5.SelectedItem.FindControl("friendname")).Text + ":
"; 图5-6 定位焦点效果图
flag = true;
}
}
2.Datalist 的应用
Datalist 很灵活,它的自定义应用也很多,我就只是简单地介绍一下它的分页。
众所周知,ASP.Net 中给我们提供了三个数据控件--DataGrid ,Repeater ,DataList 。在这三个控件中,DataGrid 控件的功能最强大,Repeater 控件最忠实于模版原样,DataList 控件则兼而有之。
GridView 控件太有名了,所以以前用的讲的也很多,Repeater 功能太少,没有什么好讲的。这里主要是讲一讲DataList 控件。
DataList 控件其实功能也很强大,他支持选择、编辑,实现的方法也很简单,不过最令人头疼的就是它不像DataGrid 控件一样内置了分页的功能,这么好的一个控件竟然不能分页。
确实是一个很让人头疼的事情。
不过,只是DataList 没有提供内置的分页功能,但是并不表示,我们不能使用DataList 控件来实现分页,既然它不给我分页功能,那只好自己动手了。具体代码仅供参考,期待有更好的设计方案。
int PageSize, RecordCount, PageCount, CurrentPage;
public void Page_Load(Object src, EventArgs e)
{
if (Session["user"] == null)
{
Response.Redirect("~/Login.aspx");
}
else
{
Image1.ImageUrl = Session["facephoto"].ToString();
targetIDLabel.Text = Session["userid"].ToString();
//设定PageSize
PageSize = 10;
„„
//连接语句
conn = db.GetConnection();
conn.Open();
//第一次请求执行
if (!Page.IsPostBack)
{
ListBind();
CurrentPage = 0;
ViewState["PageIndex"] = 0;
//计算总共有多少记录
RecordCount = CalculateRecord();
lblRecordCount.Text = RecordCount.ToString();
//计算总共有多少页
PageCount = (RecordCount + PageSize - 1) / PageSize;
lblPageCount.Text = PageCount.ToString();
ViewState["PageCount"] = PageCount;
}
}
}
//计算总共有多少条记录
public int CalculateRecord()
{
int intCount;
string strCount = string.Format("select count(*) as co from message where receiverid={0}or (senderid={0} and isreply='true')", Session["userid"]);
SqlCommand MyComm = new SqlCommand(strCount, conn);
SqlDataReader dr = MyComm.ExecuteReader();
if (dr.Read())
{
intCount = Int32.Parse(dr["co"].ToString());
}
else
{
intCount = 0;
}
dr.Close();
return intCount;
}
ICollection CreateSource()
{
int StartIndex;
//设定导入的起终地址
StartIndex = CurrentPage * PageSize;
string strSel = string .Format("select
users.username,users.facephoto,message.senderid ,message.msg_id,message.senderid,message.receiverid,message.msg_content from users,message where
(users.userid=message.senderid and message.receiverid={0})or
(users.userid=message.senderid and message.senderid={0} and
message.isreply='true') order by sendtime desc",Session["userid"]);
DataSet ds = new DataSet();
SqlDataAdapter MyAdapter = new SqlDataAdapter(strSel, conn);
MyAdapter.Fill(ds, StartIndex, PageSize, "message");
return ds.Tables["message"].DefaultView;
}
public void ListBind()
{
DataList5.DataSource = CreateSource();
DataList5.DataBind();
RecordCount = CalculateRecord();
PageCount = (RecordCount + PageSize - 1) / PageSize;//上模
lbnNextPage.Enabled = true;
lbnPrevPage.Enabled = true;
if (CurrentPage == (PageCount - 1)) lbnNextPage.Enabled = false; if (CurrentPage == 0) lbnPrevPage.Enabled = false;
lblCurrentPage.Text = (CurrentPage + 1).ToString();
}
public void Page_OnClick(Object sender, CommandEventArgs e)
{
CurrentPage = (int)ViewState["PageIndex"];
PageCount = (int)ViewState["PageCount"];
string cmd = e.CommandName;
//判断cmd ,以判定翻页方向
switch (cmd)
{
case "next":
if (CurrentPage
break;
case "prev":
if (CurrentPage > 0) CurrentPage--;
break;
}
ViewState["PageIndex"] = CurrentPage;
ListBind();
}
结 论
由于毕业设计时间较短,所以该系统还有许多不尽人意的地方,比如功能较少,用户界面不够美观,出错处理不够等多方面问题。软件开发是一个不断完善的过程,只有在实际的使用过程中才能不断的发现问题,从而再加以改进。而在系统的设计过程中,难免会出现一些预测不到的异常,这些异常甚至在系统测试阶段都检查不出来,只有在用户的使用过程中才能检查出来,很多地方未能考虑周全已至系统存在着很多不足之处,这些不足主要是由于时间不足造成的。在代码设计上也存在不足,容易造成系统运行效率的降低,这就需要在以后系统维护过程中逐步发现,并不断进行升级,都有待进一步改善。
通过本次毕业设计,很好地培养了对问题的分析、解决能力,对即将走上工作岗位的我们,其中的作用是非常明显的。由于时间比较仓促,本系统不可避免地存在一些不足之处,例如本系统在代码重用性方面还有待提高,这将会在以后的工作中逐渐完善。
参 考 文 献
[1] 许宾, 胡勇辉, 凌志勇. ASP.NET 2.0(C#)应用开发技术与典型实例[M]. 北京-清华大学出版社,2008.
[2] 施伟伟, 张蓓编. 征服Ajax web 2.0快速入门与项目实践(.net)[M]. 北京-人民邮电出版社,2006.
[3] 叶苑华. AJAX技术在ASP.NET 中的应用[J]. 电脑知识与技术,2009,(21).
[4] Jesse James Garrett. Ajax: A New Approach to Web Applications[J]. 2005.
[5] 叶苑华. AJAX技术在ASP.NET 中的应用[J]. 电脑知识与技术, 2009,(21).
[6] 谷洪彬. AJAX辅助下的ASP.NET 用户验证[J]. 电脑学习,2009,(01)
[7] 杨中科. 程序员的SQL 金典[M]. 北京-电子工业出版社,2008.
致 谢
在本论文写作过程中,得到了很多人的帮助,在此我要感谢所有支持我的老师,同学、朋友和所有关心我和帮助过我的人。
首先衷心地感谢翁小兰老师,在3个多月的论文写作过程中,翁老师在选题和深入分析上给予我很多帮助和启示,在整个毕业设计过程中提供了大量的宝贵资料,在设计过程中又花费了许多时间和我一起讨论、比较各个方案并在内容上指导,提出了许多有用的意见和建议。如果没有翁老师的帮助和热心的关怀,论文的进度和质量都难以达到要求。
感谢四年来我所有的任课老师,和06级计算机科学与技术学院与我一起走完这条路的同学们。
感谢我的父亲、母亲和所有的家人,是他们殷切的期望和无私的关怀激励着我不断进取!
最后,也感谢学校的所有老师和领导,正是你们的辛勤耕耘,使我们的基础知识又一次得到了巩固,使理论能与实践相结合,不仅完成了学业,充实了自己,也更有利于我今后工作的发展。