YQBlog .NET MVC3博客系統之用戶系統實戰
在上一篇文章中,已經對該博客系統的架構,功能設計做了一些介紹。點擊查看:YQBlog - 基于Asp.Net MVC3的個人博客系統分享【開源】
這里對新增的部分做一些分享。
后臺預覽(屏蔽了增刪改)
源碼下載(請下載最新版YQBlog1.1)
【注:分類信息跟網站配置信息都涉及文件修改,如果修改失敗證明目錄權限不夠,需要添加下網站文件夾目錄(至少是content目錄)的net service用戶組控制權限】
新增功能:
1.用戶中心。
2.用戶在頁面中對于所發評論/留言的修改,刪除。
3.系統郵件發送(留言、回復email通知提醒)
4.簡單的ubb編輯器
主要知識點:
1.jquery選項卡
2.membership profile對于用戶信息的擴充
3.flash頭像上傳
4.email在線發送(異步)
5.html,ubb代碼在c#以及js中的互相轉換
1.jquery 選項卡
基本上所有的選項卡菜單原理都一樣,首先把所有的內容列出來,切換也就是顯示一個,其它的隱藏起來。一些看起來比較炫的效果無非就是通過到位的backgournd,border等樣式定義來實現。Jquery讓一切變得華麗且簡單:
- $(function () {
- $("#ucenter .tabbtn").click(function () {
- var index = $("#ucenter .tabbtn").index($(this));
- $(this).addClass("u_current").siblings("li").removeClass("u_current");
- $($("#ucenter .tabitem").get(index)).show().siblings(".tabitem").hide();
- });
- });
html文檔:
- <div class="uoperation">
- <ul>
- <li class="u_index tabbtn u_current">@res.BasicInformation</li>
- <li class="u_avatar tabbtn">@res.UploadAvatar</li>
- <li class="u_profile tabbtn">@res.ModifyInformation</li>
- <li class="u_comment tabbtn">@res.MyComments</li>
- <li class="u_note tabbtn">@res.MyMessages</li>
- </ul>
- </div>
- <div class="ucontent">
- <div class="tabitem" style="display:block;">
- <div class="uitem">@res.BasicInformation</div>
- <!--content-->
- </div>
- <div class="tabitem">
- <div class="uitem">@res.UploadAvatar</div>
- <!--content-->
- </div>
- <div class="tabitem">
- <div class="uitem">@res.ModifyInformation</div>
- <!--content>
- </div>
- <div class="tabitem">
- <div class="uitem">@res.MyComments</div>
- <!--content-->
- </div>
- <div class="tabitem">
- <div class="uitem">@res.MyMessages</div>
- <!--content-->
- </div>
- </div>
效果圖:
#p#
2.membership profile對于用戶信息的擴充
YQBlog的用戶系統采用了微軟自帶的membership,在上一個版本中,并沒有涉及多少用戶的操作。所以這次主要是新增了一些用戶的功能。這里,我們需要對用戶信息進行擴展,包括用戶頭像上傳,詳細資料填寫,比如所在地,生日,qq,微博,facebook等。
基于membership的用戶系統需要擴展用戶信息,通常有兩種方式:
1,創建新的用戶擴展信息表,通過用戶主表的自增id關聯。結構類似membership中的 aspnet_Users(主表) 與 aspnet_Membership
2.使用membership自帶的Profile機制。
我們采用方法2,利用membership的Profile機制擴展用戶信息。
(1)web.config中配置SqlProfileProvider以及自定義屬性元素。system.web節點下添加:
- <profile>
- <providers>
- <clear />
- <add name="AspNetSqlProfileProvider"
- type="System.Web.Profile.SqlProfileProvider"
- connectionStringName="ApplicationServices"
- applicationName="/" />
- </providers>
- <properties>
- <add name="nickname" type="String"/>
- <add name="signature" type="String"/>
- <add name="intro" type="String"/>
- <add name="gender" type="String"/>
- <add name="birth" type="String"/>
- <add name="location" type="String"/>
- <add name="website" type="String"/>
- <add name="qq" type="String"/>
- <add name="sina" type="String"/>
- <add name="facebook" type="String"/>
- <add name="twitter" type="String"/>
- <add name="medals" type="String"/>
- <add name="phone" type="String"/>
- <add name="email" type="String"/>
- <add name="isSendEmail" type="String"/>
- </properties>
- </profile>
(2)處理程序。注意區分“當前用戶”與“指定用戶”
- //獲取當前用戶Profile信息
- public ActionResult Index() {
- ViewBag.nickname = HttpContext.Profile.GetPropertyValue(nickname);
- ......
- return View();
- }
- //獲取指定用戶Profile信息
- public ActionResult Index(string user) {
- ProfileBase objProfile = System.Web.Profile.ProfileBase.Create(user);
- ViewBag.nickname = objProfile.GetPropertyValue("nickname");
- ......
- return View();
- }
- //更新當前用戶
- [HttpPost]
- public ViewResult Index(string nickname) {
- HttpContext.Profile["nickname"] = nickname;
- ......
- return View();
- }
(完整代碼見程序源碼 Controllers/AccountController.cs)
假如我們錄入nickname屬性的內容為test。數據庫中查看aspnet_Profile表,PropertyNames字段中為nickname:S:0:4,nickname表示屬性名,S表示String類型,0:4表示PropertyValuesString字段中的從第0到第4位的內容即為nickname屬性值,這里是test。可見membership profile是把所有屬性作為一個字符串,所有屬性值作為一個字符串來存儲的。再通過屬性部分的特定格式數據來存儲其數據格式信息以及匹配對應的屬性值。
小結:membership profile對于擴展一些用戶基礎信息還是很靈活的。但如果是一些讀寫頻繁或者會涉及到檢索,排序之類的操作,還是會選擇用擴展表的方式。
#p#
3.flash頭像上傳
用的是Discuz!NT的會員頭像上傳功能。遷移到了MVC中。相關程序:
- flash文件及上傳目錄:/Content/Avatar
- 調用程序: /Account/UCenter (/Views/Account/UCenter.cshtml)
- 上傳程序:/AjaxAvatar.ashx
Global.asax中添加:
- routes.IgnoreRoute("ajaxAvatar.ashx");
#p#
4.email在線發送(異步)
介紹兩種方式,WebMail 和 SmtpClient。程序中采用了SmtpClient
(1)WebMail
- /// <summary>
- /// WebMail發送電子郵件
- /// </summary>
- public static void SendWebMail(string emailTo, string emailTitle, string emailContent,string[] filePath = null, string[] additionalHeaders = null)
- {
- WebMail.SmtpServer = configinfo.SmtpServer;//獲取或設置要用于發送電子郵件的 SMTP 中繼郵件服務器的名稱。
- WebMail.SmtpPort = configinfo.SmtpPort;//發送端口
- WebMail.UserName = configinfo.SmtpUser;//賬號名
- WebMail.From = configinfo.AdminEmail;//郵箱名
- WebMail.Password = configinfo.SmtpPass;//密碼
- WebMail.EnableSsl = true;//是否啟用 SSL GMAIL 需要 而其他都不需要 具體看你在郵箱中的配置
- WebMail.SmtpUseDefaultCredentials = true;//是否使用默認配置
- try
- {
- WebMail.Send(to: emailTo, subject: emailTitle, body: emailContent, isBodyHtml: true, filesToAttach: filePath, additionalHeaders: additionalHeaders);
- }
- catch{}
- }
(2)SmtpClient
- /// <summary>
- /// SmtpClient發送電子郵件
- /// </summary>
- public static void SendSysMail(string to, string subject, string body)
- {
- string from = configinfo.AdminEmail;
- string host = configinfo.SmtpServer;
- string userName = configinfo.SmtpUser;
- string password = configinfo.SmtpPass;
- int port = configinfo.SmtpPort;
- SendMail(from, to, subject, body, host, port, userName, password);
- }
- /// <summary>
- /// SmtpClient發送電子郵件
- /// </summary>
- /// <param name="from">發件人</param>
- /// <param name="to">收件人</param>
- /// <param name="subject">郵件主題</param>
- /// <param name="body">郵件內容</param>
- /// <param name="host">發送服務地址(smtp.gmail.com)</param>
- /// <param name="port">發送郵件服務器端口</param>
- /// <param name="userName">用戶名</param>
- /// <param name="password">密碼</param>
- public static void SendMail(string from, string to, string subject, string body, string host, int port, string userName, string password)
- {
- MailMessage message = new MailMessage(from, to, subject, body);
- message.IsBodyHtml = true;
- message.BodyEncoding = Encoding.UTF8;
- SmtpClient client = new SmtpClient(host);
- client.Credentials = new NetworkCredential(userName, password);
- client.DeliveryMethod = SmtpDeliveryMethod.Network;
- client.EnableSsl = true;
- client.Port = port;
- client.Send(message);
- }
實現異步發送
用戶提交評論/留言的同時,會判斷他@了哪些用戶需要發送email提醒信并且發送,email發送是比較耗時的,如果等這個操作完成才返回,就會很容易卡在發評論/回復的位置。所以我們應用委托異步來實現。
- //定義委托
- delegate void sendDelegate(string paras);
- //發送email
- private void SendEmails(string paras)
- {
- //email發送代碼
- }
- //調用
- new sendDelegate(SendEmails).BeginInvoke(paras, null, null);
這里是把郵件的相關設置項寫到了我們自定義的網站配置文件中(general.config),你也可以硬編碼在函數里,或者在webconfig的appSettings中去定義。
后臺郵件發送相關配置截圖:
#p#
5.UBB編輯器,html,ubb代碼在c#以及js中的互相轉換
- js部分位于Content\js\blog.js中
- c#部分位于General\WebUtils.cs中
主要也就是各種正則轉換。
#p#
6.用戶在頁面中對于所發評論/留言的修改,刪除
主要是一些ajax異步操作
一個小技巧。異步加載的對象事件執行需要用live.直接click是不行的。
例如:
- //評論修改
- $(".reply-update").live("click", function () {
- //your code
- });
小分享一下我的學習心得:
1.百度知道
百度知道什么都知道,不乏小白問題,比如,你可以去百度知道搜索mvc是什么,怎么學mvc,要看哪些書等等。你想問的,不管有多小白,基本上都會有人問過。這個過程主要是為了讓你對即將涉足的領域能有個大體輪廓。往往它能夠讓你在后面少走一些彎路。當你覺得已經看出個大概的時候,該轉戰博客園了。
2.博客園
(1)如果博客園制作了這個部分的專題。去看看專題里的文章。
(2)不妨看看所謂“速成”的文章,雖然沒有真正速成這回事,但基本上他能給你講了重點。“入門”的快感對初學者來說也很重要的。
(3)用你能想到的想關聯關鍵字去搜索,好的博文不吝收藏,好的博客不吝關注。
(4)挑選一兩個不錯的系列(博客園寫各種系列文章的博主很多),專注的去學習。
3.源碼
下載一些源碼來學習。不要一開始就去下源碼,一頭霧水的次數多了也會打擊積極性。還是得先看一些文章,有一些基礎知識儲備。你可以集中一個時間去搜集源碼。然后泛泛的過一遍,最后還是挑選一兩個覺得不錯的去深入學習。
4.實踐
比如學習MVC,MVC是什么?它是微軟繼webform后新的web開發框架。對,它是用來做網站的,那我們現在正在學習MVC,不,你在學習做網站。MVC只是我們做網站的一個解決方案,我們學習MVC,那我們就一定要去做網站。在實踐的過程中,發現問題,解決問題。也通過實踐,讓我們學習的各種知識能有所積累,沉淀。翻看我前面幾篇博文可以看出,現在的這個YQBlog其實就是幾個月前我開始學習MVC3時的那個demo.
5.搜索
不懂就問,切記自己跟自己鉆牛角尖,也切記閉門造車。閉門造車就是有時候我們要解決一個問題,自己在那折騰來折騰去,好不容易搞定了,回頭一看,微軟都給你封裝好了,一個方法就ok了。
搜索的方法:“先博客園站內搜索再google搜索”。博客園的專注度更高,且搜索結果博客里的其它文章往往也會讓我們有意外收獲。google在于它的精準,特別是多關鍵字的模糊搜索時,忘了百度吧。如果還是搜索不到結果,試著把關鍵字換成英文的。這個時候,基本上stackoverflow就會出來告訴你答案。
原文鏈接:http://www.cnblogs.com/yqhome/archive/2012/07/11/2585584.html
【編輯推薦】