机运动态网站-项目作品说明书.doc

“机运动态网站”项目作品说明书 摘要 本项目作品说明书介绍了项目研究的目的意义，项目的，重点介绍了关键字：动态技术、目录1项目简介21.1项目来源及意义21.2项目作品预期目标31.3项目作品拟解决的关键问题31.4项目作品的创新点42项目作品说明42.1项目作品使用环境41项目简介1.1项目来源及意义随着时代的发展，互联网技术的普及，科学的进步。网络逐渐成为人们生活中不可或缺的一部分。腾讯，阿里巴巴的成功以及在2015两会中李克强总理首次提出“互联网+”都说明了未来必然是一个属于互联网的时代，各行各业都必然要将本行业与互联网进行结合，因此在这样的时代下，学生对网络多媒体技术的应用需求便也越来越高。我们机械类学生不仅对自身所在专业的知识非常渴求，我们同样对当前流行的计算机知识、网络知识和多媒体技术非常感兴趣，因此，我们机械类学生中喜欢计算机设计的学生自己成立了机电先锋网站设计工作室，我们成立之初的第一个项目便是为我们机械学院设计一个充满机械色彩的动态网站。在原有的学院网站基础上提出创新，增加校友之间的交流与互动功能，制作更加贴近我们学生和老师的网站。通过该项目作品的制作，可以给大学生提供一个参与自己学院建设，加强师生、同学之间的交流，以及向师长、家长，或者向世人展示自己在大学中丰富的生活及课外收获的知识的平台；使学生能够利用业余时间掌握更多的计算机技术，增强运用计算机技术进行多媒体产品的设计和开发能力以及团队协作能力。有助于提高新一代90后大学生创造，创新，自主创业的新能力。对于传统应试教育下的大学生动手实践能力也有着重要的意义。提升学生对各方面知识的兴趣，从而由被动的接受式学习转为主动积极的自我学习，塑造学生积极向上的学习观，为日后步入社会打下坚实的基础。1.2项目作品预期目标本项目作品是我们机电先锋网站制作工作室的第一个研究项目，内容为机运动态网站。具体内容将实现：1）静态网站的制作和更新；2）动态网站技术的实现（如数据库设计、实现用户的注册登录和信息管理；3）各种格式文件（如：.doc、.jpg、.gif、.pdf、.ppt、.avi等）的上传与下载；4）师生、同学信息的交流。1.3项目作品拟解决的关键问题拟解决的关键问题：（1）动态网站信息发布的平台及后台语言的选择、处理技术；（2）网页动态效果显示技术；（3）数据库设计，如何正确连接，基础sql命令的实际应用；（4）注册和登录功能技术；（5）服务器后台环境的配置；（6）文件的上传及下载；（7）信息的实时更新；（8）文章分页即http请求的利用技术；（9）使用第三方登录技术；（10）师生、同学信息交流。1.4项目作品的创新点（1）实现用户的登录注册，可以使注册后的学生老师具有更高的权限，使用网站中的更多贴心服务；（2）文件的上传和下载，使学生、老师都能够将需要的资料进行下载，并将自己拥有的资源和大家分享；（3）师生、同学交流平台，给师生提供一个共享的、自由的沟通平台；（4）信息的发布整理和更新；（5）在云平台上进行发布，让人们可以通过网络看到网站成果。2项目作品说明2.1项目作品使用环境（1）项目作品网址：（2）项目作品网站观看浏览器： 推荐使用浏览器：百度浏览器，搜狗浏览器 不建议使用浏览器：ie内核浏览器，比如360浏览器、ie11等（因为导航采用了jquery编写，ie内核浏览器不兼容jquery）。2.2网站首页本项目作品的内容是机运动态网站，本网站首页的设计构想是在这一页面中实现在页面中突出我们机械与运载这样专业的特点 ，作品初期设计页面如图2-1所示。a) 首页上半部分 b)首页中间部分 图2-1 学院网站首页在图2-1所示的网站首页中，我们设计了以下四个部分，分别是：网页标识部分，导航部分、登录部分、外部链接部分、新闻部分 。1） 网页标识部分这部分我们设计了网站的名称、透明背景的学院图片、登录和注册栏。其中网站的名称我们通过PS进行了图片处理从而得到具有不同透明度的 。网页中的注册和登录部分我们设计成可以打开登录或注册页面，通过该页面我们可以3在左上角我们设计了登录注册模块，没有帐号可以使用（帐号：99999密码：1）或者点击注册进入注册页面注册帐号。针对懒得注册的用户我们特别开通了腾讯qq登陆服务，提升用户的体验。6.点击QQ登录。进入qq拉取登录页面输入帐号登录7登录完成跳转到主页后就可以看到你的qq空间头像和你的qq昵称啦！ 普通登录就只能显示普通账户的信息了。虽然没有头像显示，但我们特别为普通账户添加了签到功能，点击签到可增加1经验，每20小时可点击一次签到。注销账户请点击退出。8接下来在首页中央可以看到我们的导航菜单导航，一个齿轮状导航，中间采用自动播放幻灯片，自动播放我们学院的一些图片。9在导航菜单里的新闻，教工，师资，党务，学生栏目，我们都采用了同一种模板，来将学院的信息分条显示。10.为了方便用户我们设计了两个可回到上一步页面的位置链接和四个图片超链接11进入上传页面，在齿轮导航栏中点击上传，进入上传页面填写文件名，点击选择文件，然后点击确认上传，就可以将文件上传到服务器了，操作是不是很简单呢！12.上传成功后我们会提示上传成功。然后自动跳转进入下载页面。对已经上传的文件进行下载。13进入贴吧发帖，交流。点击菜单导航贴吧进入界面。我们可以在这里畅所欲言，发表自己的想法，再附上图片。14注意到昵称旁的钻石图标了吗，没错高端大气的vip用户就会显示尊贵钻石图标。15点击贴吧主页面的发帖，发送帖子，为了适应不同的人喜好我们提供三种显示不同的边框，来供用户选择。A消fdhfgjghk16.聊天室点击主页面齿轮导航就可以进入在线聊天室（不支持ie内核的浏览器），支持手机。没有qq就不能聊天吗，不我们还有网页聊天室简洁清爽的界面，给用户完美的交流体验。想要发送表情吗，我们设计了100多种表情代码如 /weixiao为微笑表情代码，快去发掘更多的表情代码吧息发送框3项目作品完成技术1登录模块a：采用session登录，防止用户从客户端伪造cookier信息登录。b：调用腾讯qq登录api接口，方便用户的使用，提升用户的使用的体验。2注册模块A：利用SQL语句a：图片的上传将文件上传至bae服务器，用files系统函数获取上传文件信息，将文件根据时间重命名，（因bae服务器不支持客户端产生的文件存储）。所以后台用curl模拟post将图片上传至bcs。b：帖子的显示根据时间倒序将数据库中的帖子分页显示。c:边框，表情，用户特权图标运用替换函数将从数据库中获取的信息以图片方式呈现。边框用两层表格，外层显示图片，成为边框d：运用get方法给贴吧每层楼的回复内容分层7聊天室模块a：采用ajax异步b：每2秒回调一次c：表情运用替换函数将文字替换为表情。附录：1. sql代码A：sql：插入$sql = insert into zhuce (nicheng,zhanghao,mima) values ($_POSTname,$_POSTid,$_POSTpassword1);mysql_query($sql,$conn);b:sql条数$numq=mysql_query(SELECT * FROM text );$num = mysql_num_rows($numq);C:查询输出$sql=SELECT * FROM zhuce WHERE zhanghao=$_SESSIONname LIMIT 0, 30 ;/如果有帐号等于sessionname$res=mysql_query($sql);$zc=mysql_fetch_array($res);D：更新$sql =update zhuce set exp=$zcexp+1 where zhanghao=$_SESSIONname;mysql_query($sql);e：连接sql F：删除sql $sql=delete from zhuce where zhanghao=11;mysql_query($sql);2：curl代码$file = ./up/.$newpath; /要上传的文件$url = /tbimages/.$newpath.?sign=MBO:d7Q1PwEo2KQ6CanIay4Snl5U:0X2oQaP1Pwn49VHL4jBdmP0GxRw%3D;/target url$fieldsf = .$file;$ch = curl_init();curl_setopt($ch, CURLOPT_URL, $url );curl_setopt($ch, CURLOPT_POST, 1 );curl_setopt($ch, CURLOPT_POSTFIELDS, $fields );curl_exec( $ch );if ($error = curl_error($ch) ) die($error);curl_close($ch); 3：上传文件重命名代码if ($_POSTfatie)if(is_uploaded_file($_FILESsfiletmp_name)$file=$_FILESsfile;$name=$filename;$type=$filetype;$tmp_name=$filetmp_name;$size=$filesize;$error=$fileerror;echo $tmp_name;switch ($type) case image/pjpeg:$oktype=true; break; case image/jpeg:$oktype=true; break; case image/gif:$oktype=true; break; case image/png:$oktype=true; break; echo wo.$oktype.$error;if($oktype)move_uploaded_file($tmp_name,up/.$name); $date=date(Ymdhis);$filetype = pathinfo($name, PATHINFO_EXTENSION);/获取后缀名$newpath=$date.$filetype;$destination=up/.$name; rename($destination,up/.$newpath);/chong mingmin4：js控制输入的注册信息function CheckPost()if (myform.zhuti.value.length5)alert(标题不能少于5个字符);myform.zhuti.focus();return false; if ( myform.nerong.value=)alert(必须要填写留言内容);myform.nerong.focus();return false; 5jquery旋转函数$(.caidan01).rotate( bind: mouseover: function() $(#zhizhen).rotate(animateTo:0);/$(#xiaochic).rotate(animateTo:-45); , mouseout : function() $(#zhizhen).rotate(animateTo:0);/ $(#xiaochic).rotate(animateTo:0); );6jquery幻灯片var rotation22 =setInterval(function () $(#img00).fadeOut(100); $(#img04).fadeIn(1500); $(#img04).fadeOut(2500); setTimeout( function() $(#img03).fadeIn(1500); $(#img03).fadeOut(2500); setTimeout( function() $(#img02).fadeIn(1500); $(#img02).fadeOut(2500); setTimeout( function() $(#img01).fadeIn(1500); $(#img01).fadeOut(2500); ,2000) ,2000) ,2000) ,4000);7：登录代码?phpsession_start();if($_GETout)unset($_SESSIONPHPSESSID);unset($_SESSIONname);unset($_SESSIONpassword);unset($_SESSIONnicheng);unset($_SESSIONlv);unset($_SESSIONvip);unset($_SESSIONjy);echo ;if($_SESSIONPHPSESSID=0)&($_SESSIONsestate!=dl)echo   登 录 注 册 ;elseif ($_SESSIONPHPSESSID=1) echo   .昵称:.$_SESSIONnicheng.  等级:.$_SESSIONlv.VIP:.$_SESSIONvip.  经验:.$_SESSIONjy. ;include(qiandao.php);echo 退出. ; if($_SESSIONsestate=dl) echo   .QQ昵称：.$_SESSIONqqnicheng. ;echo 退出. ; ?7：ajax异步代码$(document).ready(functio