文章分类 » 学生作品

微博创新应用大赛参赛作品:围脖贴

项目背景及概述

围脖贴是我们参与新浪微博创新应用大赛的作品。其主要设计目标是将微博上的杂乱的信息进行有序化,用户可以以贴贴纸的方式很好的整理自己的微博。

现在新浪微博上的信息量比较大,每日都会有大量的针对某一话题的微博信息发出,但是这些微博在首页显示的相对分散,用户浏览起来也不是非常方便;而新浪的收藏功能也是没有分类,依然是将各种类型的微博都混杂在一起,同时也不够直观。

围脖贴可很好的解决这类的问题,用户可针对某一话题或某类型的微博在围脖贴上建立一个画布,再将这类的微博张贴到画布上进行保存,很好的将相对杂乱无章的信息进行了整理。

围脖贴的使用介绍

登录

首先就是登录了,该项目属于新浪微博应用,直接用新浪帐号进行链接后就可使用了。

查看最新画布

登录后进入首页,该页面会列出最近刚刚更新过的公开画布。可点击画布图标查看画布内容。进入画布后可以拖动画布背景来浏览整个画布的所有贴纸。也可以通过点击左下角的画布预览框定位窗口的位置。

创建自己的画布

点击画布右上角的首页就可回到首页,页面右侧可新建画布。填写并设置名称描述等相关内容后点击新建就创建属于自己的画布了。

查看属于自己所有的画布

创建新画布后就会自动跳转到自己的画布列表。在这里可以对画布进行查看,贴贴纸,编辑个性化设置和删除。

用画布管理自己的微博

在自己的画布列表中,点击贴贴纸操作即可对画布进行设计。进入画布页面后,其右侧会列出用户在新浪上的微博,可以选择罗列首页微博,个人微博或收藏微博等。拖拽右侧列表中的微博到画布上就会将其贴到画布上,之后还可以用鼠标点击拖动贴纸改变其位置或大小。

编写新的贴纸

除了可以管理已有的微博意外,画布页面左侧的工具条的最下面还有有张贴文字便签和图片便签的功能。点击后就可编写内容或上传图片来 张贴新贴纸。同时还可以将新编辑的贴纸的内容以微博的形式发布到新浪上。

个性化自己的画布

左侧工具条当中提供了设置画布信息和背景图片等功能。可以点击设置画布的背景图片,颜色和其他的一些属性,可以设计出自己喜欢的画布样式。

将画布分享到微博上

在查看和编辑画布的页面右上角有分享到微博按钮,单击后就可将该画布的链接分享到微博上,让你的朋友也能看到这个画布。

项目开发过程

遇到过的问题:

  • 之前从来没写过文件上传功能,是现到网上学的,写起来稍微费点事儿。
  • 对git不是很熟悉,起初经常pull或push失败也不知道为什么,还有次把所有文件的权限都给改成777了。
  • 对整体的框架不是很熟悉,开始的时候只是简单的知道增加一个功能就是大概那么个步骤但并不知道为什么,所以也因此出现了很多特别纠结问题。

一点收获:

  • 假期仔细阅读了整个项目的代码,了解了框架的运行流程,学习了.htaccess文件的功能。试着去学习其他一些主流的php框架
  • 一个应用如果想要有用户,用户体验是那么的重要。
  • 多人合作开发时,git的确是个非常好的工具。

HIT ACM Group新版网站上线

概述

HIT ACM Group的新版网站已经上线,欢迎大家积极使用,帮助开发组发现和解决bug,让我们的HOJ更加好用,更加强大。

尽管开发组的同学们付出了很大的努力,但是因为全面改版的工作量很大,依然有很多细节之处没有做好,如果给大家带来了使用上的不便,希望大家能够多多理解。

主要改进

新版网站主要做了如下改进:
  • 全面改写网站前端,使用DIV+CSS布局,替换掉原来的Table布局
  • 在保持网站基本风格不变的前提下,对一些样式细节做了调整,包括字体、顶部导航、侧边栏等
  • 新增了相册模块
  • 新增了资源下载模块
  • 新增了队伍Profile模块(该模块给每个队伍建立一个页面,记录该队伍的参赛记录、照片、荣誉等信息,目前正在进行数据的整理和录入,录入完毕后会开放)
  • 新增了Wiki模块(使用PmWiki搭建)
  • 重写了论坛模块(简化了论坛的功能,去掉了之前Joomla Fireboard中的很多花哨的功能,针对贴代码进行了优化,具体可参考怎样在论坛中贴代码)
  • 优化了Online Judge的大量页面,着重改进了界面样式和用户体验
  • 对侧边栏做了全面的优化,将不常用的链接完全移除出Online Judge的侧边栏,添加了大量常用功能链接
  • 对Online Judge后台题目的存储做了重新设计
  • 新增了管理员界面,方便管理员进行对比赛、题目的管理操作
  • 针对IE6做了优化,使得IE6下的体验基本不受影响

Bug提交

如果你在使用新版网站的过程中发现了bug,可以通过以下两种方式把bug提交给我们
  • 快速提交:在Online Judge模块中,右上角有一个”Report Bug…”的链接,直接在出现bug的页面上点击该链接,在弹出的窗口中输入bug的详细信息,然后点击”Submit”即可
  • 论坛提交:如果希望就某些bug或者功能需求进行讨论,可以到论坛的OJ Development 版块发贴

关于HOJ开发组

过去,对HOJ的开发都是由HOJ的管理员来负责,由于管理员有很多日常事务要处理,而且有些管理员本身也有参赛任务,因此,在时间和人力上都不是很充足。考虑到这种情况,我们从参与了 程序设计与实践 II – Web 开发 课程 的同学中挑选出了一批,组成了HOJ开发组,专门负责HOJ网站部分的开发和维护。一方面让OJ管理员从繁杂的开发任务中脱离出来,另一方面也让OJ有了一个长期稳定的开发团队。这对我们HIT ACM Group的长期发展是大有裨益的。

参与了此次网站升级工作的同学有

  • 付建宇
  • 田大龙
  • 刘一佳
  • 王洋
  • 张雄
  • 张志桐
,感谢他们的辛苦工作。

参与开发

目前HOJ开发组由 段志岩 主持,如果你想参与HOJ网站的开发,可发送邮件到 dzy0451@gmail.com

参与开发工作需要你具备一定的web开发技能,如果熟悉以下技术的一项或几项,那么对开发工作是很有帮助的

  • HTML & CSS
  • Javascript
  • PHP
  • Mysql
  • Apache
  • Linux系统管理

访问旧版

考虑到刚刚切换到新版本,有些同学可能使用起来不太习惯,这些同学可以访问旧版,在首页侧边栏中,点击 Online Judge(Old) 即可进入旧版的OJ。

请大家注意,旧版OJ仅是在网站新改版的这段之间中帮助大家过渡,不久后就将停止支持并下线。因此,我们鼓励大家使用新版。当在网络上分享指向HOJ的链接时,请使用新版的链接。

使用不定个数的参数构造查询条件

通过get方法传过来0-3个参数,参数的个数不定,并通过这些参数构造出mysql查询语句.

下面是具体例子:

  • case1_url: www.***.com?id=1&name=2&gender=3/
  • case2_url: www.***.com?id=1&gender=3/
  • case3_url: www.***.com/

  • 在case1中我们传递了全部3个参数,这个很容易实现.

  • 在case3中我们没有传递参数,这个也很容易实现.
  • 但case2中只传递了部分参数应该怎么做呢?这个以前也纠结了不少时间,虽然实现了但方法都是很水的,这次请教了老段之后深深体会到了数据结构的强大之处.

解决方法

建立数据结构

建立2个数组,一个用来存储get中的变量名,另一个存储要构造mysql查询语句中的参数名;

$get_arrays = array(
        'id',
        'name',
        'gender',
);
//与前一个数组中的键值相对应,不过上面存的是get中的参数,这里是数据库中的名称.
$db_arrays = array(
        'user_id',
        'user_name',
        'user_gender',
);

构造查询串

利用循环将传递过来的参数存到新的数组中. 这里我们要新建一个数组query_array,用来存储查询语句 用到了两个函数:

//检查给定的键名或索引是否在数组中
bool array_key_exists(mixed $key , array $search)
//使用字符串$glue,将数组$pieces的所有元素连接起来
string implode ( string $glue , array $pieces )
join()// implode的别名
foreach($get_arrays as $key => $value)
{
        //判断参数是否通过get方法传了过来
        $judge = array_key_exists($value, $_GET);
        if($judge)
        {
                $array[$key] = "`{$db_arrays[$key]}`= '{$_GET[$get_array[$key]]}'";
                //将要查询的变量及值用"="连接,写入数组中,此时array数组形如:$array=('id=1', 'gender=3');
        }
        $condition = join(" and ", $array);     // 使用"and"将各项条件连接起来
}?>

注:本文中的示例代码中未对输入进行转义,请勿应用在生产环境中。

Mysql错误号#1062解决办法

最近做新的HOJ的后台管理功能,实现一个简单的交互界面,能够让管理员方便地添加比赛。但是实际编码的时候发现一些数据库的问题:

  1. 存储比赛的表中,比赛的编号不是连续的。
  2. 比赛的编号不是自动增加的。
  3. 想要添加比赛,就要手动设置比赛的编号。

手动设置比赛的编号显然十分麻烦,不符合方便添加比赛的设计需求。那么就要把比赛编号字段设置成自动增加的。于是,输入了一条命令:

ALTER TABLE Contests CHANGE Contestid Contestid INT(11) NOT NULL AUTO_INCREMENT;

结果,我还是异想天开了——Mysql抛出了 #1062号错误:

ALTER TABLE causes auto_increment resequencing, resulting in duplicate entry '1' for key 'PRIMARY'

仔细分析以后发现了出错原因。比赛的表(Contests)中原本是有数据的,比赛的编号是从0起递增的。修改Contestid字段到AUTO_INCREMENT时,Mysql尝试将Contestid=0的这行的Contestid修改成1,但是原表中已经存在了Contestid=1的项目,而对于主键Contestid来说,值应该是唯一的,所以会报错说出现重复值‘1’。那这样一来,该如何修改Contestid字段,使其变成自动增加的呢?

方法一:

找出了这么一个愚钝的方法,步骤如下:

  1. 导出Contests表中的数据到temp.sql文件。
  2. 删除Contests表中的所有数据。
  3. 修改Contestid字段为AUTO_INCREMENT。
  4. 导入temp.sql,完成。

方法二:

上面的方法显然很麻烦,而且如果数据量特别大的话,将会十分耗时。后来我又尝试了另一个方法:

  1. 修改Contestid为0的一行,使其Contestid为大于0的整数。当然不能和表中其他行的Contestid重复。
  2. 修改Contestid字段为AUTO_INCREMENT。
  3. 将步骤1中的那一行的Contestid改回0,完成。事后可能需要修改AUTO_INCREMENT记录。

这里假设Contests表和其他表没有关联。如果和其他表有关联,那么只要依照关联关系,利用上面的方法适当修改即可。

Ajax简介 – 异步交互

主讲人朱玺
题目Ajax简介 – 异步交互
时间2011-5-8
 相关下载

简单介绍

Ajax——“Asynchronous JavaScript and XML”(异步JavaScript和XML)…看上去很抽象吧。 还是再介绍介绍JavaScript和XML吧。

  • JavaScript:是一种脚本语言,结构简单,使用方便,其代码可以直接放入HTML文档中,可以直接在支持JavaScript的浏览器中运行.——总而言之就是一种在客户端运行的语言。
  • XML:可扩展标记语言,Xml是Internet环境中跨平台的,依赖于内容的技术,是当前处理结构化文档信息的有力工具。——原来是处理信息用的。

Ajax是干什么的?

通过 AJAX,您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象,您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。即实现网页与服务器的异步通信功能。

而传统网页同步处理请求的方法是用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端——用户每次都要浪费时间和带宽去重新读取整个页面。造成的结果是在网速较低或需要传输的页面较大的情况下原页面会锁死。大大降低用户的浏览体验。

对比传统网页交换数据的方法使Ajax技术拥有两大优点:

  • 可以像桌面应用程序只同服务器进行数据层面的交换,减轻服务器负担,缩短了用户等候时间。
  • 加快了页面的相应速度,大大提高了页面的交互性。使因特网应用程序更小、更快,更友好。

原理图解

传统网页交互方式

页面直接与服务器交换数据,两次user activity之间的世界就是用户页面锁死的时间。

Sync Request

通过Ajax技术的交互方式

Ajax技术在用户页面和服务器之间加入了一个中间层(Ajax engine),用户提出的请求先提交到中间层,中间层再分析用户提交的请求后确定向服务器提交的请求。最后根据服务器返回的数据通过JavaScript实时将结果显示到用户页面上。——以上的数据交换都是在中间层上完成的,所以不会造成整个页面的锁死。加强了用户体验。

Async Request

Ajax小应用

Ajax Demo Show

具体实现

  • 文件组成:有3个文件index.htm ajax.js 和 telltimeXML.php 组成。
  • 核心部件:其中的关键就在于ajax.js文件里的XMLHttpRequest 对象。

XMLHttpRequest对象的属性和方法见文末的附录

我们来重点分析一下ajax.js文件中 getServerTime() 和 useHttpResponse()两个函数。

最前面的getXMLHTTPRequest()函数是针对不同浏览器来建立 XMLHttpRequest 对象,有兴趣的童鞋可以自行google其中的奥妙。

先来看 getServerTime()

var myurl = “telltimeXML.php”; var myRand = parseInt(Math.random() * 999999999); var modurl = myurl + “?rand=” + myRand;

这里构造了一个open函数里的url参数,即Ajax需要发出的服务器请求。这里使用了一Math.random()具体作用后面会再做介绍。

http.open(“GET”, modurl, true);

设定对服务器请求的一些参数:请求类型GET, url:为前面生成,true:异步传输数据。

http.onreadystatechange = useHttpResponse;

设定当readyState 属性改变时,就调用 useHttpResponse() 函数。这里作一下说明,readyState 属性是根据XMLHttpRequest 对服务器请求的不同状态而自动发生变化。具体可参见对readyState 属性的介绍。

http.send(null);

最后发送请求就可以了。

然后来看 useHttpResponse() 函数对readyState 属性改变时所做出的相应。

我的代码是对readyState == 4 和 status == 200 同时成立时(即一般情况下Ajax对服务器请求完成,且服务器返回相应已就绪)对服务器返回的responseXML(包含服务器时间信息)进行处理,并利用javascript对网页进行修改,做到无刷新的数据交换。

在其他情况下就显示一个Loading…表示网页正在后台与服务器交换信息。

Ajax的几个缺陷

缓存

由于 XMLHttpRequest 对象是通过url来对服务器进行请求的,这就不可避免的与浏览器的缓存机制产生了冲突。简单的说,由于服务器端的信息可能是时刻改变的,浏览器缓存则是以url为标准记录缓存。当通过同一url访问服务器时,可能服务器端的数据已经改变,而浏览器却只是读取了本地缓存,而使在网页上显示的信息和在服务器上的信息不一致。造成问题。所以在getServerTime() 函数中我使用了一个Math.random()函数来使每次请求的url不一致,来欺骗浏览器,使其不读取缓存。在讨论中段哥也提到了这个问题,并指出这个方法并不科学,因为random()函数也有小概率产生同样的url同样可能造成问题。现在正确的做法是先读取服务器端返回的状态,若为304则表明服务器端数据未修改,则可以直接读取缓存,否则需从服务器端重新读取信息。

历史

由于Ajax对网页进行的是实时改变,并不改变网页的url,所以会导致浏览器没有办法记录访问地址,并且无法与好友分享网页上的信息。

谢谢大家耐心阅读。

相关下载

附录

参考文章:Ajax初步

在此摘录XMLHttpRequest对象的一些属性和方法。

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

open(method,url,async)   method:请求的类型;GET 或 POST
                    url:文件在服务器上的位置
                    async:true(异步)或 false(同步)
send(string)            string:post请求中所要传输的数据。
onreadystatechange      存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState          存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                    0: 请求未初始化
                    1: 服务器连接已建立
                    2: 请求已接收
                    3: 请求处理中
                    4: 请求已完成,且响应已就绪
status              返回的服务器状态,一般正常的话为200。
responseText            获得字符串形式的响应数据。
responseXML         获得 XML 形式的响应数据。

PHP数组:遍历过程中的改值操作

问题描述

前段时间写代码,需要在遍历数组的时候对数组中某些元素做修改。如果数组元素的键是顺序的整数,很简单,只要用for循环就可以了。如果是关联数组呢?首先想到的是foreach遍历数组。但是foreach虽然用来输出感觉很爽,但是修改数组内元素的时候,还多少是有那么点麻烦。和老段讨论后,老段提出了一种修改值的方法,我自己也想了几个办法。下面具体说一下:

引用操作符&

看下面这段代码中的$array数组,在foreach循环时对$value使用引用操作符,这样在循环中修改$value的值的时候,便将$array中对应的元素值修改了。

1, “B”=>1, “C”=>1, “D”=>1); foreach($array as &$value) $value = 2; print_r($array); ?>

上段代码的输出如下:

Array ( [A] => 2 [B] => 2 [C] => 2 [D] => 2 ) 

可以看到,$array中各个键对应的值都被修改成了2。看来这种方法确实奏效。

利用键值操作数组的元素

有的时候,数组中表示的可能是一些互相关联的元素,如果遇到了这些相互关联的元素中的一个,就将其他元素做一个标记的话,上面的引用肯定就不管用了。这时候修改这些关联元素的时候,就要使用其对应的键值了。先试试看管用不:

<?php $array = array(“A”=>1, “B”=>1, “C”=>1, “D”=>1); foreach($array as $key => $value){ if($key == “B”){ $array[“A”] = “CHANGE”; $array[“D”] = “CHANGE”; print_r($array); echo ‘
‘; }

if($value === "CHANGE")
    echo $value.'<br />';

} print_r($array); ?>

别着急看输出,我们想象中的应该是什么样呢?打印修改后的数组,打印一个“CHANGE”,再打印一遍修改后的数组。对吗?来看一下输出吧!

Array ( [A] => CHANGE [B] => 1 [C] => 1 [D] => CHANGE )
Array ( [A] => CHANGE [B] => 1 [C] => 1 [D] => CHANGE ) 

咦?怎么个情况?我们的CHANGE哪去了?

按照我们的想法,既然$array已经改变了,那么当遍历到键值为“D”的元素时,应当输出它的新值“CHANGE”才对!可是事实并不是我们想的那样。PHP在这里做了什么手脚呢?把上面的代码稍微修改一下。既然打印数组的时候,“D”=>CHANGE没错,那我们修改第二个if语句的判断条件:

<?php $array = array(“A”=>1, “B”=>1, “C”=>1, “D”=>1); foreach($array as $key => $value){ if($key == “B”){ $array[“A”] = “CHANGE”; $array[“D”] = “CHANGE”; print_r($array); echo ‘
‘; }

if($array[$key] === "CHANGE")
    echo $value.'<br />';

} print_r($array); ?>

猜猜它会输出什么?$value肯定不会等于“CHANGE”啦!难道等于1么?

Array ( [A] => CHANGE [B] => 1 [C] => 1 [D] => CHANGE )
1
Array ( [A] => CHANGE [B] => 1 [C] => 1 [D] => CHANGE ) 

那么,它确实就是1了。

这究竟是神马原因呢?翻到PHP文档的foreach那页,恍然:

Note: 除非数组是被引用,foreach 所操作的是指定数组的一个拷贝,而不是该数组本身。foreach对数组指针有些副作用。除非对其重置,在 foreach 循环中或循环后都不要依赖数组指针的值。

原来foreach所操作的是指定数组的一个拷贝。怪不得,取$value不管用了呢!理解到这里,上面的问题就解决了。只要在foreach中,直接按照键取$array中的元素进行各种判断赋值操作就可以了。

结语

好好看文档。

好好看文档。

好好看文档。

Cybery Reader v1.0 Released

主界面全部操作采用Ajax技术,具体内容:

  1. 点击订阅列表中的链接,就可以在中央区域看到订阅源中的文章。
  2. 未读文章数量实时显示:点击一篇未读过的文章,该订阅源在列表中的未读文章数会自减1。
  3. 可以向文章添加评论了:打开一篇文章,会在右侧边栏中看到本站其他用户对该篇文章做出的评论。用户也可以自由地向文章添加评论。注意:不会评论到原文章。评论只供站内用户查看。
  4. 可以为文章添加收藏标记了:每篇文章前面都有一颗五角星,点击以后五角星会点亮,系统会记录下这是用户喜欢的文章。
  5. 同一个订阅源内,同时只展开一篇文章供用户查看。
  6. 将添加订阅的功能移动到了主界面中,在主界面即可完成新订阅源的订阅工作。点击“添加订阅”会弹出文本框要求用户输入订阅地址。如果用户添加订阅时提交了一个含有订阅点的页面的链接,系统会发现该页面中的订阅点,并给出用户提示让用户选择需要订阅的RSS。
  7. 用户成功添加订阅源后,自动刷新Feed列表。

体验新版的Cybery Reader

PureWeber Goo Shortener – 学生作品

简介

这里是 bearzx(张雄) 和 7lemon(付建宇) 同学共同开发的 PureWeber Goo Shortener :http://goo.gl/a92Yc

欢迎大家参观、拍砖。

该程序是一个Goo.gl的包装,通过调用Goo.gl服务将长网址变换为短网址。

Goo.gl的API库由7lemon同学开发,界面设计由dzy0451同学山寨,界面实现和主程序由bearzx开发。

下载源代码

下载