起因:那是七月份了,看见单身的同事在上花田网,当时觉得风格比较清新,还没有世纪佳缘等那些网站那么商业化,加上又看到了bootrstrap,于是就想做个demo出来玩玩。中间自己又在做其他的事情,和web没有关系,也想没事的时候也可以练练web,到上个星期,干脆就发布在公司的内网了。没想到同事们mail一传,现在都有200多个人(我的公司是个制造业,这边全部的职工有2w+的人,除了产线上的小妹妹们,有电脑的也有好几千)注册了。同事说她宿舍的都和别人在上面聊到要见面了。我倒是有点高兴,倒是帮上了忙点忙。下面上图:
首页:导航就是用的bootstrap,icon也是bootstrap2里面自带的。栏目是仿的网易下面的花田网站,然后下面一个轮播,将图片宽度撑到最大,自己在搜狗壁纸里面找的图,然后诠释一下。chrome下滑动起来还是很有感觉的。
但因为太刺眼了,有的人反应怕老板看见了不太好,就收起来了。
注册:这里我要提醒下用mvcviewmodel自动生成create的同学,如果用默认的样式,很容易在ie家族中走样,在ie的安全模式下是注册不了的。
注册之后,会自动发送mail,系统发送欢迎的私信
推荐页:我先捞出已认证资料和图片的异性资料,然后再过滤掉黑名单,再根据每个人的择偶需求的选出符合的居住地,年龄,身高的人,最后根据恋爱观等算出两个人的匹配
进到异性的主页之后会看到匹配度的细则,这个是和花田的样式差不多,但花田做的更好。
对象搜索页:有个奇怪的现象就是好几个女生要求查看同性--~,理由是男生不好看,而且有一个还和我聊个同志的话题....,然后我就稍微改了下代码。捞出同性。
本来人物出来是可以点一个喜欢,但是在同性面前,我还是屏蔽了。暂不敢支持基情啊。还有,男生的图片一般都不咋地,随随便便整了一张。
单身部落:当时因为没有互动环节,觉得用户来没意思就会走了,就看豆瓣的小组有意思,就搞了个简单版的,专门发话题:
恋爱通告是还没做的一个功能,还想加的东西太多了,比如我自己想了个许愿树用户发布自己的想法(比如想逛街,看电影),然后异性收到,然后发布方选择谁去完成,最后给予评价。因为想两个要建立信任,还是要见面,还是要活动。
私信:这个是个很实在的功能,用的也方便。就是用的bootstrap的模态框做的。前端统一样式,一个a标签全部地方都可以调用。
寻芳踪就是记录了一些访问浏览以及私信,系统消息。一起的哥们,昨天有妹子主动搭了他,还激动了一把,但是然后就没有然后了。
后台的话,界面就简单一些,主要是审核用户资料,图片,处理举报,管理管理员,和数据统计。功能上都需要扩展:
-----------------------------------------------------------我是分割线----------------------------------------------------------------
总结:
一、浏览器兼容问题:
1.ie家族的透明度是用filter调的,其他的浏览器是用的opacity。
2.jquery1.9.2,未定义的jquery错误,之前学jqueryui的时候用的一个版本,但发现ie老是报错,最后改成jquery1.7.2稳定的,没有问题。没需要就不要用高版本。本身也没用到jqueryui。
3.缺少标示符,字符串或者数字的错误。
这是因为在写jquery的时候在最后的属性加了个逗号,ie认为是错误,脚本直接不能运行。比如这个。黄色mark的这个逗号就是产生错误的原因。一般在写jquery动画,formajax提交容易多写那么个逗号。
varoptionrequirement={dataType:'json',success:processJsonRequirement,};4.子元素浮动ie下父级元素的宽度问题,在chrome中,我们定义子元素浮动,父级元素如果没有设宽度会适应子元素的宽度。但是ie中,父级元素没有设定的话就可能会自动占一行。这个大家要注意下。
5.formjshtmlfile:拒绝访问。
原因是图片域文件上传采用了脚本触发file.onclick代替默认的浏览所引起的js安全问题。ie6的时候file中是可以看到全路径的。
网上有说用“采用css控制选择文件的样式透明,浮在选择照片的按钮上方就可以了”,但我觉得还是用专业的插件来完成这个活比较好。
6.低版本的ie是不支持form的required的,所以,还是要后台继续验证。
二、男同胞们的脱单问题!!!
先看数据:
虽然不能准确的反应单身男女的正真比例,但也可以说明竞争之激烈。差不多是3:1.而且注册的很多都是90后。整个是个金字塔结构。咱们结婚吧中有一句:单身久了都开始排斥异性了。这也是有道理的。所以还单着的同学们,真的要赶紧了。妹子是稀有资源,还有妹子的一定要好好珍惜~