仿花田:内部相亲网站 意中人(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男早日脱单~
你的关注和支持是我写作的最大动力~
书山有路群:452450927