基于bs的校园网信息交流平台.docx

基于bs的校园网信息交流平台.docx

《基于bs的校园网信息交流平台.docx》由会员分享，可在线阅读，更多相关《基于bs的校园网信息交流平台.docx（32页珍藏版）》请在冰点文库上搜索。

基于bs的校园网信息交流平台

基于B/S的校园网信息交流平台

的设计与实现

摘要

建立具有创新性，互动性，友好性的校园网信息网站，为同学们提供一个综合性的校园网交流平台，以方便同学们全方位了解校内各学院的新闻资讯，自主建立生活讨论圈子，共同参与话题的讨论，促进同学们互动交流的兴趣；同时，支持自由发布校内交易信息，可对交易信息发表评价或留言，采用记录IP来确保信息的有效性、文明性；另外，无限制人数的在线聊天室，可提供一个很好的在线交流平台。

最终实现校园网内“信息共享、互动交流”的目的。

关键词：

信息共享；互动交流；JS+CSS+DIV；ASP+SQL

ThedesignandimplementationofCampusnetcommunicationplatformbasedonB/S

ABSTRACT

stablishaCampus-WideinformationNetworkwithinnovation,interactionandamitysoastoprovideancommunicationflatofcomprehensiveCampus-WideinformationNetwork.thisnetworkisconvenienttomakestudentstoknowthenewsaboutallacademies.studentsareself-movingtoestablishthecirclesoflifediscussion.joinintogethertodiscusstopics,promotetheinterestingforinteractivecommunicationamongthem;atthesametime,itgivessupporttothefreecampus-widetradingmessages.couldpublishcommentsandleavewordstotradingmessages.useregisteredIDtoensurethevalidity,civilizationofmessages;inaddition,chatroomonlinewithoutlimitaboutmembernumber,couldofferawonderfulflatthatusetocommunicateonline.achievingthegoalof"shareinformation,interactivecommunication"withinCampus-WideinformationNetworkfinally.

Keywords:

Informationsharing；Interactiveexchange；JS+CSS+DIV；ASP+SQL

毕业论文（设计）原创性声明

本人所呈交的毕业论文（设计）是我在导师的指导下进行的研究工作及取得的研究成果。

据我所知，除文中已经注明引用的内容外，本论文（设计）不包含其他个人已经发表或撰写过的研究成果。

对本论文（设计）的研究做出重要贡献的个人和集体，均已在文中作了明确说明并表示谢意。

作者签名：

日期：

毕业论文（设计）授权使用说明

本论文（设计）作者完全了解**学院有关保留、使用毕业论文（设计）的规定，学校有权保留论文（设计）并向相关部门送交论文（设计）的电子版和纸质版。

有权将论文（设计）用于非赢利目的的少量复制并允许论文（设计）进入学校图书馆被查阅。

学校可以公布论文（设计）的全部或部分内容。

保密的论文（设计）在解密后适用本规定。

作者签名：

指导教师签名：

日期：

日期：

注意事项

1.设计（论文）的内容包括：

1）封面（按教务处制定的标准封面格式制作）

2）原创性声明

3）中文摘要（300字左右）、关键词

4）外文摘要、关键词

5）目次页（附件不统一编入）

6）论文主体部分：

引言（或绪论）、正文、结论

7）参考文献

8）致谢

9）附录（对论文支持必要时）

2.论文字数要求：

理工类设计（论文）正文字数不少于1万字（不包括图纸、程序清单等），文科类论文正文字数不少于1.2万字。

3.附件包括：

任务书、开题报告、外文译文、译文原文（复印件）。

4.文字、图表要求：

1）文字通顺，语言流畅，书写字迹工整，打印字体及大小符合要求，无错别字，不准请他人代写

2）工程设计类题目的图纸，要求部分用尺规绘制，部分用计算机绘制，所有图纸应符合国家技术标准规范。

图表整洁，布局合理，文字注释必须使用工程字书写，不准用徒手画

3）毕业论文须用A4单面打印，论文50页以上的双面打印

4）图表应绘制于无格子的页面上

5）软件工程类课题应有程序清单，并提供电子文档

5.装订顺序

1）设计（论文）

2）附件：

按照任务书、开题报告、外文译文、译文原文（复印件）次序装订

3）其它

1概述

1.1项目背景

从交互性看，WEB1.0是网站对用户为主；WEB2.0是以P2P为主。

与Web1.0最大的不同就是Web2.0所提倡的个性化，在其中，个人不是作为被动的客体而是作为一种主体参与到了互联网中，个人在作为互联网的使用者之外，还同时成为了互联网主动的传播者、作者和生产者。

WEB2.0的任务是，将这些知识，通过每个用户的浏览求知的力量，协作工作，把知识有机的组织起来，在这个过程中继续将知识深化，并产生新的思想火花。

如果说web1.0是以数据（信息）为核心，那web2.0是以人为核心，旨在为用户提供更人性化的服务，是一次从核心内容到外部应用的革命。

“Web1.0到Web2.0的转变，具体的说，从模式上是单纯的‘读’向‘写’、‘共同建设’发展；由被动地接收互联网信息向主动创造互联网信息迈进；从基本构成单元上，是由‘网页’向‘发表/记录的信息’发展；从工具上，是由互联网浏览器向各类浏览器、RSS阅读器等内容发展；运行机制上，由‘ClientServer’向‘WebServices’转变；作者由程序员等专业人士向全部普通用户发展…”

web2.0中用户可读写。

在web1.0阶段，大多数用户只是信息的读者，而不是作者，一个普通的用户只能浏览新浪网的信息而不能进行编辑；在web2.0阶段人人都可以成为信息的提供者，每个人都可以在自己的BLOG上发表言论而无须经过审核，从而完成了从单纯阅读者到信息提供者角色的转变。

Web2.0实现人的互联。

在web1.0中实质上是数据（信息）的互联，是以数据（信息）为中心的；而web2.0中最终联接的是用户，如以用户为核心来组织内容的Blog就是个典型代表，每个人在网络上都可以是一个节点，Blog的互联本质上是人的互联，通过人的互联会形成一个一个的群体，即学习共同体。

1.2项目分析

1.2.1校园网同类网站对比分析

目前，学校的新闻（包括学校及各二级学院的新闻）分布都比较分散，暂时没有一个校内新闻信息网将其很好的汇聚起来。

这样，同学们在浏览学校相关新闻资讯时，只能登录到一个一个学院主页去看，这无疑要花费大量的时间，同时也使得浏览的信息面变小。

同时，现在的大学生都比较喜欢一些互动性强的网站，比如发布一些校内交易信息、兼职招聘信息、或想组织一次活动、查找有共同爱好的人或话题。

虽然校园网有BBS这样的讨论平台，但显然也没有做到详细的分类，且其信息的真实性缺乏有效的监督。

很显然，现在校园网还没有出现一个很好的信息共享、互动交流的平台。

1.2.2项目可行性分析

现在很多的学校和社会其他部门都已经建立了网站，通过计算机网络实现宣传、交流及资源的整合。

建立学校网站的意义：

学校网站是实现教育资源分配的桥梁网络有巨大的教育资源库，它使每一位教师和学生都能均等的得到培训和受教育的机会。

极大的提高教学效率。

学校网站能提供教学互动的全新方式学校网站使得教师与教师、教师与学生、学生与学生之间的交流有了全新的方式，它不再受到传统课堂的制约。

它可以使不同的学校同处一室，共同讨论，共同共享。

地理上的界限在这里模糊和消失了，学校网站是真正没有围墙的学校。

就这样，我们的目标是要建设一个用于面向校园网用户，达到信息共享、互动交流的平台WEB2.0网站，整合了学校各学院的新闻版块、校园生活讨论圈子、校内交易信息、会员控制板面中心、仿Q群在线聊天系统。

1.3研究的目的及意义

校园网共享信息资源建设是院校进行现代化教学、科研和管理活动的重要基础，是校园网信息资源建设的主体内容。

把握网络信息资源建设中的关键要点，采取必要的可行措施，以此加强校园网信息资源建设，特别是加强校园网共享信息资源建设，对于推进院校教育观念的转变、优化教学、改善教与学的环境，加快教育现代化步伐，培养更多的高素质创新型人才有着十分重要的作用。

2项目策划

2.1站点规划

建立具有创新性，互动性，友好性的校园网信息网站，为同学们提供一个综合性的校园网交流平台，以方便同学们全方位了解校内各学院的新闻资讯，自主建立生活讨论圈子，共同参与话题的讨论，促进同学们互动交流的兴趣；同时，支持自由发布校内交易信息，可对交易信息发表评价或留言，采用记录IP来确保信息的有效性、文明性；另外，无限制人数的在线聊天室，可提供一个很好的在线交流平台。

最终实现校园网内“信息共享、互动交流”的目的。

2.2网站界面设计

网站在设计风格上力求整体形象保持一致，在色彩搭配、图片动画的应用及版面规划上保持网页的整体一致性，符合大多数人的审美习惯，给浏览者带来良好的视觉享受和精神愉悦感。

在新技术的运用上充分考虑目标访问群体的年龄阶层、网络速度、阅读习惯。

网站UI（用户界面）设计不仅包括网站的平面设计，还包括整个网站的框架设计，让浏览者花最少的时间找到自己需要的东西，同时还要注重用户的使用习惯，保证资料的排列有序。

网站色彩和Logo、Gif、Flash动画制作；图片制作；Banner横幅制作；Button按钮制作。

根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配构成和谐美观的页面。

2.3网站亮点

●IP地址自动获取

由于校园网用户每台PC机都有固定的IP地址，网站系统能够自动获取注册会员的IP地址，以监督其在发布交易信息或进行圈内话题讨论时，语言的文明性和信息的安全性。

●栏目自定义设计

后台管理操作中，所有二级栏目都可以进行增加、修改及删除，如：

新闻版块中，我要增加一个二级学院的名称，“计科”，然后可以在发布新闻时选择对应的二级学院名称发布该学院的新闻。

此功能在圈子和交易系统管理中同样应用到，大大方便了网站的版块增删及管理。

●信息管理系统

后台操作中，可以对圈子话题及其回复、交易信息及其回复进行管理，以确保信息的可操作性和安全性。

同时增加了信息“推荐”功能，使有价值的信息方便快速地被浏览者所获取。

●验证码及MD5加密技术

在生成验证码图片的时候，同时生成了一个Session，其值就是验证码图片中的数字值。

同时，提供输入框让用户输入，提交输入值后，与已有的Session值进行比较，根据判断结果做相应判断。

MD5加密则应用于对密码的加密，不以明码在数据库中显视，确保会员及管理者密码的安全性。

●JS滑动门技术

以新闻这一块来说，由于考虑到学校目前有十四个二级学院，而又要将各学院的最新新闻分类地在网站首页中显视，以方便广大师生快速阅读浏览，如果按照传统的设计理念将会使得版面过于繁重，且和严重影响整个信息平台的排版布置，于是采用了当前比较流行的JS滑动门技术，这样很好地解决了这一问题。

●ASP+FLASH聊天群系统

结合了传统聊天室的技术和当前新兴的QQ群聊设计理念，在线聊天系统采用无数据保留，为广大师生提供在线即时交流的平台。

尽管只有简单的输入发送等常规的聊天模式，不过已经可以满足在线聊天的目的。

●“圈子”概念的应用

让有共同兴趣爱好、同一集体等人群，在网络虚拟的空间里，聚集在一起，组织成为一个校园生活圈子，共同讨论圈内的话题，达到互动交流的目的。

注册会员可以创建新的圈子，或加入自己感兴趣的圈子，结识圈内朋友，讨论圈内的话题。

2.4设计目标

页面实现技术目标/网站的设计原则

1）系统栏目易于增加、修改、删除和维护；

2）确保资源的安全，能够有效地防止资源外部流失；

3）确保相关数据在网上的应用速度；

4）系统具有充分灵活的扩展能力，以满足不断发展的需要：

美工目标：

1）整体设计风格能体现当代大学生的时代元素，以蓝色调为主线，各子栏目页面可根据不同功能的特点，并结合网站整体的设计理念；

2）色彩饱和、线条流畅和充分的空间留白；

3）对页面进行优化，保证浏览者能快速地查找到目标信息；

4）优化页面代码，极大减少页面的无效、沉余代码；

5）页面采用开放式结构设计，具有较大的可扩展性。

2.5技术指标

●采用校园网网内的数据库服务器、WEB服务器、应用程序服务器。

●采用浏览器/服务器（B/S）体系结构，使用方便；

●网页开发语言：

ASP；数据库使用SQLServer2000

●充分考虑网站功能、开发过程、系统运行效率、稳定性和安全性。

●分析在系统设计和实施过程中，对于应用程序开发、网页设计、数据库设计、技术难点提供可行的解决办。

●适合在多种常用的软硬件平台环境中运行，并具备强大的技术升级能力。

●具备全面严格的安全机制，确保网上商务活动的安全进行。

3网站架构及栏目说明

3.1首页界面

在内容上，首页以图片及文字为主，主要以平面图和FLASH的形式来给网站浏览者以第一视觉冲击力，并且管理员在后台可以动态更新首页的内容，使整个网站时时充满生机和活力。

在设计上，注重协调各区域的主次关系，以营造高易用性与视觉舒适性的人机交互界面为终极目标。

充分体现网站首页的导航功能，对于网站的各部分内容展现又有侧重点。

3.2栏目说明

面向校园网用户，达到信息共享、互动交流的平台，整合了学校各学院的新闻版块、校园生活讨论圈子、校内交易信息、会员控制板面中心、仿Q群在线聊天系统。

1、新闻

各二级学院的新闻，由后台管理员从各学院主面新闻中转载，使之前较为分散的学校新闻能够汇集在一起，方便校内学生浏览。

功能：

以新闻分类（以二级学院名称分类，如：

计科）等一些常见的新闻发布系统的功能为主，后台支持在线增加、修改、删除新闻。

同时，图片新闻以当今流行的动态图片FLASH演示为表现形式在网站首页展示，可以在后台更新，方便管理。

2、圈子

受当今流行的博客圈子文化的启发，让有共同爱好或不同班级专业的同学具有一个很好的交流平台，本网站特别建立一个校园生活讨论圈子，下设十多种分类属性：

班级讨论、社团协会、广师同乡、兼职就业、兴趣爱好、郊游活动、我型我秀、人在广师、原创文学等。

举个例子：

IT圈（爱好电脑的同学可以进来该圈子发表言论或看法）；04计本网本圈（本班的同学进来，用于班内交流，或班务通知、调查讨论等）；K歌之王圈（喜欢唱K的同学，周末可以一起组织去唱K）；NBA圈（喜欢篮球的同学，可以加入该圈子一起交谈）……

功能：

圈子界面比较人性化，自定义LOGO、圈子描述、圈内会员、圈子讨论的话题及相册等，圈内成员能够发表话题贴子和相片，对应的管理操作由圈主管理。

3、交易

校内交易，出售、求购、转让、二手...学生/老师可以发布需求信息

举个例子：

需要买卖二手电脑硬件、转让演唱会门票、手机充值卡优惠活动的都可以将信息发布在这一版块上。

功能：

注册会员可以浏览、发布校内交易信息，信息可以自行设定有效期，会员具有参与评价及询问等权限，所有的信息发布及回复操作者，系统都会获取其IP地址，这样就可以保证信息的有效性，及追究其责任的证据。

4、会员

包含会员的控制面板，一个很完整的会员操作中心

功能：

会员注册资料及密码修改，交易信息发布及管理，自己所建或加入的圈子管理。

5、聊天

界面仿QQ群，可在线即时聊天asp+flash。

功能：

不限人数，只需输入名称就可以在线聊天，以最简单的群聊形式表现，聊天数据不被保存在数据库，减少数据库的容量压力。

3.3网站架构

4网站管理系统说明

4.1新闻发布系统

Ø前台页面：

Ø后台管理：

◆图片新闻管理

1、发布网站首页图片新闻相关信息及上传图片；

2、后台管理操作支持修改及删除操作；

3、增加成功后，需管理员审核并发布后，图片新闻才能在网站首页显视，这增强了网站信息的安全性；

4、“撤消”则图片不在前台显视，图片需在审核通过后才能“发布”到前台。

◆新闻管理

1、后台可以增加新闻信息：

填写新闻标题、选择新闻所属学院及填写新闻内容；

2、支持新闻信息的修改及删除操作，管理方便。

采用eWebSoft开发的多功能信息编辑器：

1、可以对新闻文字内容进行常规的字体字号、段落对齐、复制粘贴等操作；

2、支持在新闻内容中插入图片、视频或FLASH，提供本地上传及网址引用方式；

3、可以在编辑器中插入表格、链接或表情等；

4、其它功能在此不再详细说明，详见编辑器中“？

”帮助文件。

◆公告信息管理

1、后台可添加公告信息，选择是否在首页公告栏中，显视为红色标题；

2、支持对公告信息的删除操作。

4.2分类管理系统

Ø前台页面：

Ø后台操作界面：

本网站的“新闻”、“圈子”、“交易”的子栏目全部采用方便的分类管理系统控制，大大提高了网站自主管理的快捷性。

全部栏目实现可控性，如：

添加一个二级学院的新闻栏目，则在栏目管理界面的操作面板上，添加“计科”，则在新闻的编辑器的“新闻所属类别”上，系统自动加入“计科”。

并且本系统支持对栏目的名称及排序进行修改和删除操作，管理方便。

4.3会员中心管理

Ø会员注册：

输入会员的注册用户名、密码，其中邮箱用于在会员忘记密码时，取回注册密码。

Ø会员控制面板：

1、修改会员基本资料

填写真实姓名或昵称，所在的学院和班级，QQ号码或手机等联系方式。

2、密码修改

用于修改会员登录密码。

3、建立图子

支持会员自主建立新的校园生活讨论圈子，输入圈子名称、所属分类、及圈子的简要介绍和圈子的LOGO图标，用于更好地进行交流。

举个例子：

IT圈（爱好电脑的同学可以进来该圈子发表言论或看法）；04计本网本圈（本班的同学进来，用于班内交流，或班务通知、调查讨论等）；NBA圈（喜欢篮球的同学，可以加入该圈子一起交谈）

4、圈子管理

会员可以查看自己所加入的圈子及其简要信息。

5、发布交易信息

填写交易信息的名称、选择是类别（出售、求购等），选择交易信息的有效期，输入交易的简要描述，如有需要，可上传相关图片。

6、管理交易信息

发布者可以对所发布的交易信息进行修改和删除信息操作。

4.4信息管理系统

Ø交易信息管理

系统管理员可以在网站后台对网站会员所发布的校内交易信息进行信息推荐或无效信息的删除操作。

Ø圈子话题管理

系统管理员可以在网站后台对网站会员所发布的圈子话题信息进行信息推荐或无效信息的删除操作。

Ø信息回复管理

网站注册会员在前台对校内交易信息和圈子话题进行回复，系统自动记录会员的IP地址，同时，网站管理员可在后台对回复内容进行管理。

4.5在线调查管理系统

网站提供在线调查功能，管理员可在网站后台设置调查的主题，选项的内容，同时，后台可修改调查的得票数。

4.6系统管理员设置

增加网站管理员，并可修改管理员的密码及删除管理员帐号。

5相关技术说明

5.1JS滑动门技术

考虑到网站的排版及栏目内容过多的问题，采用了目前最为流行的JS滑动门技术，很好地解决了这问题，用最小的板块展示更多的内容。

关键代码如下：

--

functiong（o）{returndocument.getElementById（o）;}

functionHoverLi（n）

{

//如果有N个标签,就将i<=N;CSS中的滑动门技术

for（vari=1;i<=4;i++）{g（'tbb_'+i）.className='normaltab';g（'tbcc_0'+i）.className='undis';}

g（'tbcc_0'+n）.className='dis';g（'tbb_'+n）.className='hovertab';

}

//-->

5.2图片翻页效果

本图片翻页效果的展示（图片新闻）也是目前较为流行的技术，我们知道，如果直接将上传的图片从服务器中调用，将加重浏览的缓冲时间，本翻页效果展示直接将图片转成二进制数值，图片直接从数据库中调用，大大加快了图片的调用速度。

核心代码：

<%ifi=1then%>

imgUrl1="admin/picturenews/showimg0.asp?

imgid=<%=rst（"imgid"）%>";

imgtext1="<%=rst（"biaoti"）%>";

imgLink1=escape（"view.asp?

id=<%=rst（"id"）%>"）;

……

src="pixviewer.swf"FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'"menu="false"bgcolor="#F0F0F0"quality="high"width="'+focus_width+'"height="'+focus_height+'"

5.3手机模拟上网说明

我们知道，用普通的IE浏览器是访问不了WAP网站的，但由于在浏览器上要实现访问WAP网站有极大的难度，而且需要有专门的服务器作支持，所以本网站的手机模拟上网只是借用3G的服务器，并没有真正意义上实现手机模拟上网的功能，只是作为一个页面设计的创意版块。

5.4Sub语句应用

在相关页面调用CONFIG.ASP中的代码，使页面代码大大节省，加快页面的运行速动，真正的做到了SEO的优化处理：

<%callnewht（）%>

CONFIG.ASP中的“最新圈内话题”代码：

<%

subnewht（）

……

endsub

%>

5.5计算剩余时间

在网站会员发布校内交易信息时，我们将对交易信息有效期作出限制，如果信息过了有效期，将作相应的提示。

其核心代码如下：

i=pxrs（"fbsj"）'取出发布时间

j=pxrs（"yxq"）'取出有效天数

dqsj=dateadd（"d",j,i）'得出到期时间

m=datediff（"n",now（）,dqsj）

t=int（m/60/24）

h=int（（m-t*24*60）/60）

f=m-t*24*60-h*60

ift<0then

str="信息已经过期!