代码改变世界

仿花田:内部相亲网站 意中人(Asp.net MVC,Bootstrap2)

2013-12-02 16:28  stoneniqiu  阅读(8726)  评论(97编辑  收藏  举报

        起因: 那是七月份了,看见单身的同事在上花田网,当时觉得风格比较清新,还没有世纪佳缘等那些网站那么商业化,加上又看到了bootrstrap,于是就想做个demo出来玩玩。中间自己又在做其他的事情,和web没有关系,也想没事的时候也可以练练web,到上个星期,干脆就发布在公司的内网了。没想到同事们mail一传,现在都有200多个人(我的公司是个制造业,这边全部的职工有2w+的人,除了产线上的小妹妹们,有电脑的也有好几千)注册了。同事说她宿舍的都和别人在上面聊到要见面了。我倒是有点高兴,倒是帮上了忙点忙。下面上图:

        首页:  导航就是用的bootstrap,icon也是bootstrap2里面自带的。栏目是仿的网易下面的花田网站,然后下面一个轮播,将图片宽度撑到最大,自己在搜狗壁纸里面找的图,然后诠释一下。chrome下滑动起来还是很有感觉的。

   但因为太刺眼了,有的人反应怕老板看见了不太好,就收起来了。

   登录:  因为当时是在chrome下面自个做的,然后厂区的都是用个ie6 ie8,登录页面直接就苍白了。这里就不show了。

 注册: 这里我要提醒下用mvc viewmodel自动生成create的同学,如果用默认的样式,很容易在ie家族中走样,在ie的安全模式下是注册不了的。

 注册之后,会自动发送mail,系统发送欢迎的私信

 

 推荐页:我先捞出已认证资料和图片的异性资料,然后再过滤掉黑名单,再根据每个人的择偶需求的选出符合的居住地,年龄,身高的人,最后根据恋爱观等算出两个人的匹配

 

 进到 异性 的主页之后会看到匹配度的细则,这个是和花田的样式差不多,但花田做的更好。

对象搜索页:有个奇怪的现象就是 好几个女生要求查看同性 - -~,理由是男生不好看,而且有一个还和我聊个同志的话题...., 然后我就稍微改了下代码。捞出同性。

本来人物出来是可以点一个喜欢,但是在同性面前,我还是屏蔽了。暂不敢支持基情啊。还有,男生的图片一般都不咋地,随随便便整了一张。

 个人主页:主页就包含了基本资料,详细资料,相册,动态。 图片上传就是用的上篇博客自己写的方法:http://www.cnblogs.com/stoneniqiu/p/3432114.html

 但是,这个方法ie不支持!因为我是自动触发file元素click,ie认为是不安全的,网上也有些解决办法,我暂时就用了aspx 服务器控件的办法代替了。试了uploadfy,但是后台方法一直获取不到文件,还不知道为什么。用户热度是和这个人的登录次数,被喜欢,被hi,被访问的次数的一个综合。

 单身部落: 当时因为没有互动环节,觉得用户来没意思就会走了,就看豆瓣的小组有意思,就搞了个简单版的,专门发话题:

恋爱通告是还没做的一个功能,还想加的东西太多了,比如我自己想了个许愿树 用户发布自己的想法(比如想逛街,看电影),然后异性收到,然后发布方选择谁去完成,最后给予评价。因为想两个要建立信任,还是要见面,还是要活动。

 

私信: 这个是个很实在的功能,用的也方便。 就是用的bootstrap的模态框做的。前端统一样式,一个a标签全部地方都可以调用。

  

 

寻芳踪就是记录了一些访问浏览以及私信,系统消息。一起的哥们,昨天有妹子主动搭了他,还激动了一把,但是然后就没有然后了。

后台的话,界面就简单一些,主要是审核用户资料,图片,处理举报,管理管理员,和数据统计。 功能上都需要扩展:

-----------------------------------------------------------我是分割线----------------------------------------------------------------

 

总结:

一、浏览器兼容问题:

     1.ie家族的透明度是用filter调的,其他的浏览器是用的opacity。

     2.jquery1.9.2,未定义的jquery错误,之前学jqueryui的时候用的一个版本,但发现ie老是报错,最后改成jquery1.7.2 稳定的,没有问题。没需要就不要用高版本。本身也没用到jquery ui。

     3.缺少标示符,字符串或者数字的错误。

    这是因为在写jquery的时候在最后的属性加了个逗号,ie认为是错误,脚本直接不能运行。 比如这个。黄色mark的这个逗号就是产生错误的原因。一般在写jquery动画,form ajax提交容易多写那么个逗号。

   var optionrequirement = {
        dataType: 'json',
        success: processJsonRequirement 
    };

   4.子元素浮动ie下父级元素的宽度问题,在chrome中,我们定义子元素浮动,父级元素如果没有设宽度会适应子元素的宽度。但是ie中,父级元素没有设定的话就可能会自动占一行。这个大家要注意下。

   5.form js htmlfile: 拒绝访问。

    原因是图片域文件上传采用了脚本触发file.onclick代替默认的浏览所引起的js安全问题。ie6的时候file中是可以看到全路径的。

    网上有说用 “采用css控制选择文件的样式透明,浮在选择照片的按钮上方就可以了”,但我觉得还是用专业的插件来完成这个活比较好。

  6.低版本的ie 是不支持 form的required的,所以,还是要后台继续验证。

 

二、男同胞们的脱单问题!!!

     先看数据:

     

          虽然不能准确的反应单身男女的正真比例,但也可以说明竞争之激烈。差不多是3:1. 而且注册的很多都是90后。整个是个金字塔结构。咱们结婚吧 中有一句:单身久了都开始排斥异性了。这也是有道理的。所以还单着的同学们,真的要赶紧了。妹子是稀有资源,还有妹子的一定要好好珍惜~

        

 三、我要干嘛

      因为这个东西不是我的本质工作,耽误太多时间也不好,所以也没有打算再扩展什么功能。但是目前,服务器上方了git,日志系统。加上这个,远程已经打不开了。

    

    周六用iis的,perfmon.msc 查看,同时连线的有三四十个人,今天周一,登录的人比较多,但也不会超过最大值。windows server的负载能力,宽带,还有自己的性能处理的不好,前端图片太多,头像没有做缩小的处理,后台的逻辑,缓存,数据库,都有很多可以优化的地方。不知道圆友们有什么建议。对于这整个系统,完全是个人兴趣,做个好人~ ~  其实在此之前,已经撮合了两对。但现在确实没有太多精力弄这个了。

   

    最后,祝天下有情人终成眷属,IT男早日脱单~