仿花田:內部相親網站 意中人(Asp.net MVC,Bootstrap2)


        起因: 那是七月份了,看見單身的同事在上花田網,當時覺得風格比較清新,還沒有世紀佳緣等那些網站那么商業化,加上又看到了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男早日脫單~ 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM