源码下载地址:http://www.yealuo.com/Sccnn/Detail?KeyValue=c891ffae-7441-4afb-9a75-c5fe000e3d1c
会员中心,是我们与用户交互的重要部分,也是用户体验的表现形式,在这里我们需要尽可能的方便用户管理自己的业务信息。
在这个项目的会员中心,主要分为注册、登录、基本信息维护,以及下载充值的日志管理,以及收藏等功能。
在设计页面之前,先下载本项目前台的样式,js文件,解压后并把它放到Content文件下
然后我们需要在表现层Shared文件夹下创建一个的_LayoutMember.cshtml布局页:
@using Bobo.Utilities.Membership @using IA.Business @using IA.Entity <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> <meta name="keywords" content="jQuery特效,网站模板,商城模板,网页特效,手机模板,前端UI,网站源码,网页部落,素材部落,网页素材网,手机素材网" /> <meta name="description" content="页落网,页落素材网!靠谱的前端网页部落网站,主要收集最新、最前沿的前端技术和jQuery网页特效、jQuery网页代码、网站模板、网页模板、企业模板、商城模板、图标、移动手机端UI等素材,为致力于前端艺术开发的UED提供良好的素材平台!" /> <meta name="author" content="页落网" /> <meta name="renderer" content="webkit" /> <meta name="360-site-verification" content="7d7a9207bd598c307b2710a8403ba645" /> <meta name="baidu-site-verification" content="djx4WgYUWt" /> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" media="screen" /> <link href="~/Content/Styles/base.css" rel="stylesheet" /> <link href="~/Content/Web/css/web.css" rel="stylesheet" /> <script src="~/Content/Scripts/datepicker/WdatePicker.js"></script> <script src="~/Content/Scripts/jquery/jquery-1.8.2.min.js"></script> <script src="~/Content/Scripts/jquery.form.js"></script> <script src="~/Content/Scripts/boboui-jshelp.js"></script> <script src="~/Content/Scripts/validator/boboui-validator.js"></script> <script src="~/Content/Scripts/layer/layer.js"></script> <script src="~/Content/Scripts/Juicer/juicer.js"></script> <script src="~/Content/Scripts/m_pager.js"></script> </head> <body> <script> (function () { //360推送 var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?004e54cc11817ced2ae8cd0b01c5d60b" : "https://jspassport.ssl.qhimg.com/11.0.1.js?004e54cc11817ced2ae8cd0b01c5d60b"; document.write('<script src="' + src + '" id="sozz"></script>'); //百度推送 var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <!-- herder S --> <div id="header"> <div class="header-nav"> <div class="header-menu"> <div class="logo"> <a href="/"><img src="~/Content/Web/img/logo.png" style="100px;" /></a> </div> <ul class="header-nav-ul"> <li class="header-nav-li indexKey"> <a class="header-nav-li-a" href="/Sccnn/Index">首页</a> </li> <li class="header-nav-li"> <a class="header-nav-li-a" href="/Sccnn/Index?FileType=WEB">网站模板</a> <div class="header-nav-li-child"> <div class="webPage WEB"> </div> </div> </li> <li class="header-nav-li"> <a class="header-nav-li-a" href="/Sccnn/Index?FileType=WAP">手机端</a> <div class="header-nav-li-child"> <div class="webPage WAP"> </div> </div> </li> <li class="header-nav-li"> <a class="header-nav-li-a" href="/Sccnn/Index?FileType=H5C3">HTML5 CSS3</a> <div class="header-nav-li-child"> <div class="webPage H5C3"> </div> </div> </li> <li class="header-nav-li"> <a class="header-nav-li-a" href="/Sccnn/Index?FileType=WJS">网页特效</a> <div class="header-nav-li-child"> <div class="webPage WJS"> </div> </div> </li> <li class="header-nav-li"> <a class="header-nav-li-a" href="/Sccnn/Index?FileType=FLASH">flash素材</a> <div class="header-nav-li-child"> <div class="webPage FLASH"> </div> </div> </li> <li class="header-nav-li"> <a class="header-nav-li-a" href="/Sccnn/Index?FileType=PIC">网页素材</a> <div class="header-nav-li-child"> <div class="webPage PIC"> </div> </div> </li> <li class="header-nav-li"> <a class="header-nav-li-a" href="/Sccnn/Index?FileType=SYS">网站源码</a> <div class="header-nav-li-child"> <div class="webPage SYS"> </div> </div> </li> <li class="header-nav-li"> <a href="/WebArticle/Index?ArticleType=zw" target="_blank" class="header-nav-li-a">轻博客</a> @*<div class="header-nav-li-child"> <div class="webPage MoreSeach"> </div> </div>*@ </li> </ul> @if (ManageProvider.Provider.IsOverdue()) { <div class="header-tip text-right"> <a href="/MemberCenterModule/MemberSystem/Index">用户中心</a> <a href="javscript:;" onclick="LoginOut()">退出登录</a> </div> } else { <div class="header-tip text-right"> <a href="/MemberCenterModule/MemberLogin/Registered">注册</a> <a href="/MemberCenterModule/MemberLogin/login">登录</a> </div> } </div> </div> </div> <!-- header E --> @RenderBody() <!-- 友情链接 --> @*footer S*@ <div id="footer"> <div class="foot-tip"> <div class="webPage text-center"> 页落素材网是网页特效下载社区,以提高效率、分享经验的理念,提供高品质实用、简单、易懂的Web页面特效。 <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cspan id='cnzz_stat_icon_1274673375'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s22.cnzz.com/z_stat.php%3Fid%3D1274673375%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script> </div> </div> </div> @*footer E*@ <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=470797533&site=qq&menu=yes" style="position:fixed;top:45%;right:10px;"> <img border="0" src="http://wpa.qq.com/pa?p=2:470797533:53" alt="在线咨询" title="在线咨询" /> </a> <script type="text/javascript"> function LoginOut() { AjaxJson("/MemberCenterModule/MemberLogin/LoginOut", {}, function (data) { layer.msg("您已退出登录,欢迎再来哦 ^_^", { icon: 6, shade: [0.3, '#000'] }, function () { location.href = "/Sccnn/Index"; }); }); } $(function () { $(".header-nav-li").hover(function () { $(this).siblings(".header-nav-li").find(".header-nav-li-child").hide(); $(this).addClass("on"); $(this).find(".header-nav-li-child").show(); }, function () { $(this).removeClass("on"); $(this).find(".header-nav-li-child").hide(); }); GetContentKeyByType(); }) //获取导航关键字 function GetContentKeyByType() { $.post("/Sccnn/GetContentKeyByType", {}, function (data) { for (var i = 0; i < data.length; i++) { $("." + data[i].Code).append('<a href="/Sccnn/Index?FileType=' + data[i].Code + '&ContentKey=' + data[i].DataDictionaryTitle + '" title="' + data[i].DataDictionaryTitle + '"> ' + data[i].DataDictionaryTitle + '</a>'); } }, "json") } </script> </body> </html>
接下来,我们需要创建一个名称为MemberCenterModule的区域:
然后,我们需要更改MemberCenterModuleAreaRegistration.cs:
using System.Web.Mvc; namespace IA.WebApp.Areas.MemberCenterModule { public class MemberCenterModuleAreaRegistration : AreaRegistration { public override string AreaName { get { return "MemberCenterModule"; } } public override void RegisterArea(AreaRegistrationContext context) { context.MapRoute( this.AreaName + "_Default", this.AreaName + "/{controller}/{action}/{id}", new { area = this.AreaName, controller = "Sccnn", action = "Index", id = UrlParameter.Optional }, new string[] { "IA.WebApp.Areas." + this.AreaName + ".Controllers" } ); } } }
前面的后台管理区域也改到这个文件,这里简单的解释,AreaRegistration是用来在ASP.NETMVC里面注册多个区域的方式;就是可以将一个大型的MVC站点划分成多个Area区域,然后各自的Area有着自己的Controller、Action、View等元素。
(1)在该区域中创建一个注册登录的控制器MemberRegLoginController.cs:
using Bobo.Utilities; using Bobo.Utilities.Membership; using IA.Business; using IA.Business.SystemBusiness; using IA.Entity; using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging; using System.IO; using System.Linq; using System.Text; using System.Web; using System.Web.Mvc; namespace IA.WebApp.Areas.MemberCenterModule.Controllers { /// <summary> /// 会员注册、登录控制器 /// </summary> public class MemberRegLoginController : Controller { // // GET: /MemberCenterModule/MemberRegLogin/ /// <summary> /// 登录视图 /// </summary> /// <returns></returns> public ActionResult login() { return View(); } /// <summary> /// 注册视图 /// </summary> /// <returns></returns> public ActionResult Registered() { return View(); } /// <summary> /// 注册成功 /// </summary> /// <returns></returns> public ActionResult RegisteredSuccess() { return View(); } /// <summary> ///提交注册信息 /// </summary> /// <returns></returns> public ActionResult SubRegDataForm(Com_Member entity, string Code) { Com_MemberBll bll = new Com_MemberBll(); try { int IsOk = 0; string Message = "提交失败。"; Code = Md5Helper.CreateMd5(Code.ToLower(), 16); string KeyValue = ""; if (Session["session_MemberRegLoginvcode"].ToString() != Code) { return Content(new JsonMessage { Success = false, Code = "-2", Message = "验证码不正确" }.ToString()); } int eCount = bll.Factory.FindCount("Email", entity.Email); int aCount = bll.Factory.FindCount("Account", entity.Account); if (eCount != 0 || aCount != 0) { IsOk = -1; Message = "用户名或邮箱已注册,请重新输入!"; } else { entity.RealName = entity.Account; entity.Password = Md5Helper.CreateMd5(DESEncrypt.Encrypt(entity.Password, BaseFactory.BaseHelper().GetPwodKey()).ToLower(), 32).ToLower(); entity.Create(false); IsOk = bll.Factory.Insert(entity); KeyValue = entity.MemberID; if (IsOk > 0) { Message = "注册成功。"; bll.UpMemberSendEmail(KeyValue);//发送邮箱 } } var json = new { Success = true, Code = IsOk.ToString(), Message = Message, KeyValue = KeyValue }; return Content(json.ToJson()); } catch (Exception ex) { return Content(new JsonMessage { Success = false, Code = "-1", Message = "操作失败:" + ex.Message }.ToString()); } } /// <summary> /// 用户名或邮箱验证 /// </summary> /// <param name="Account"></param> /// <param name="Email"></param> /// <returns></returns> public int GetEACount(string Account, string Email) { Com_MemberBll bll = new Com_MemberBll(); int hasCoun = 0; if (!StringHelper.IsNullOrEmpty(Account)) { int aCount = bll.Factory.FindCount("Account", Account); if (aCount > 0) { hasCoun = 1; } } if (!StringHelper.IsNullOrEmpty(Email)) { int eCount = bll.Factory.FindCount("Email", Email); if (eCount > 0) { hasCoun = 2; } } return hasCoun; } /// <summary> /// 发送邮箱验证 /// </summary> /// <returns></returns> public ActionResult SendEmail(string KeyValue) { Com_MemberBll bll = new Com_MemberBll(); StringBuilder strHtml = new StringBuilder(); int IsOk = 0; string Message = "邮箱发送失败。"; bool Success = false; try { Message = bll.UpMemberSendEmail(KeyValue); if (Message.IndexOf("成功") > 0) { IsOk = 1; } return Content(new JsonMessage { Success = Success, Code = IsOk.ToString(), Message = Message }.ToString()); } catch (Exception ex) { return Content(new JsonMessage { Success = false, Code = "-1", Message = "操作失败:" + ex.Message }.ToString()); } } /// <summary> /// 会员激活 /// </summary> /// <param name="KeyValue"></param> /// <returns></returns> public ActionResult SetMemberState(string KeyValue, string VerCode) { Com_MemberBll bll = new Com_MemberBll(); int IsOk = 0; string Message = "激活失败。"; try { if (!StringHelper.IsNullOrEmpty(KeyValue)) { Com_Member enity = bll.Factory.FindEntity(KeyValue); if (enity.State != 1 && enity.VerCode == VerCode) { enity.State = 1; enity.Modify(KeyValue, false); IsOk = bll.Factory.Update(enity); if (IsOk > 0) { Message = "激活成功!"; } } else { IsOk = -1; Message = "验证链接已失效!"; } } else { IsOk = -1; Message = "激活失败。"; } } catch (Exception ex) { IsOk = -1; Message = "激活失败:" + ex.Message; } ViewBag.IsOk = IsOk; ViewBag.KeyValue = KeyValue; ViewBag.Message = Message; return View(); } /// <summary> /// 登录 /// </summary> /// <param name="Account"></param> /// <param name="Password"></param> /// <param name="Code"></param> /// <returns></returns> public ActionResult SubmitLogin(string Account, string Password, string Code) { try { Code = Md5Helper.CreateMd5(Code.ToLower(), 16); if (Session["session_MemberRegLoginvcode"].ToString() != Code) { return Content(new JsonMessage { Success = false, Code = "-2", Message = "验证码不正确" }.ToString()); } if (string.IsNullOrEmpty(Account) || string.IsNullOrEmpty(Password)) { return Content(new JsonMessage { Success = false, Code = "-1", Message = "用户名或密码错误!" }.ToString()); } IPScanerHelper objScan = new IPScanerHelper(); string IPAddress = NetHelper.LANIP; objScan.IP = IPAddress; objScan.DataPath = Server.MapPath("~/Resource/IPScaner/QQWry.Dat"); string IPAddressName = objScan.IPLocation(); int IsOk = new Com_MemberBll().MemberRegLogin(Account, Password, IPAddressName, IPAddress); string strCode = "-1"; string Message = ""; string czMsg = ""; bool Success = false; switch (IsOk) { case 1: strCode = "1"; Message = "登录成功!"; czMsg = "登录成功!"; Success = true; break; case 2: strCode = "-1"; Message = "登录失败,用户名或密码错误!"; czMsg = "密码错误!"; Success = false; break; case -1: strCode = "-1"; Message = "该账户邮箱未激活,请激活邮箱后登录!"; czMsg = "邮箱未激活!"; Success = false; break; case 3: strCode = "-1"; Message = "登录失败,用户名或密码错误!"; czMsg = "账号不存在!"; Success = false; break; } Base_SysLogBll.Instance.WriteLog(Account, OperationType.Login, strCode, czMsg + "、IP所在城市:" + IPAddressName); return Content(new JsonMessage { Success = Success, Code = strCode, Message = Message }.ToString()); } catch (Exception ex) { return Content(new JsonMessage { Success = false, Code = "-1", Message = "操作失败:" + ex.Message }.ToString()); } } /// <summary> /// 邮箱验证修改账户信息 /// </summary> /// <param name="Type"></param> /// <param name="Email"></param> /// <returns></returns> public ActionResult PostEmail(string Type, string Email) { Com_MemberBll bll = new Com_MemberBll(); string EmailCode = BaseFactory.BaseHelper().GetRandomCode(6); int IsOk = 0; string Message = "邮箱发送失败。"; bool Success = false; try { string emailTit = "页落素材网帐户:邮箱验证码(请勿回复)"; string emailBody = "您当前修改信息的邮箱验证码为:" + EmailCode; NetHelper.SendMailByWeb(Email, ConfigHelper.ReadAppConfig("FromEmail"), emailTit, emailBody, ConfigHelper.ReadAppConfig("EmailPwd"), ConfigHelper.ReadAppConfig("SmtpServer")); if (Message.IndexOf("成功") > 0) { //写入Session、验证码加密 Session[Type] = Md5Helper.CreateMd5(EmailCode.ToLower(), 16); IsOk = 1; } return Content(new JsonMessage { Success = Success, Code = IsOk.ToString(), Message = Message }.ToString()); } catch (Exception ex) { return Content(new JsonMessage { Success = false, Code = "-1", Message = "操作失败:" + ex.Message }.ToString()); } } /// <summary> /// 验证码 /// </summary> /// <returns></returns> public ActionResult VerifyCode() { int codeW = 80; int codeH = 22; int fontSize = 16; string chkCode = string.Empty; //颜色列表,用于验证码、噪线、噪点 Color[] color = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Orange, Color.Brown, Color.Brown, Color.DarkBlue }; //字体列表,用于验证码 string[] font = { "Times New Roman", "Verdana", "Arial", "Gungsuh", "Impact" }; //验证码的字符集,去掉了一些容易混淆的字符 char[] character = { '2', '3', '4', '5', '6', '8', '9', 'a', 'b', 'd', 'e', 'f', 'h', 'k', 'm', 'n', 'r', 'x', 'y', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'W', 'X', 'Y' }; Random rnd = new Random(); //生成验证码字符串 for (int i = 0; i < 4; i++) { chkCode += character[rnd.Next(character.Length)]; } //写入Session、验证码加密 Session["session_MemberRegLoginvcode"] = Md5Helper.CreateMd5(chkCode.ToLower(), 16); //创建画布 Bitmap bmp = new Bitmap(codeW, codeH); Graphics g = Graphics.FromImage(bmp); g.Clear(Color.White); //画噪线 for (int i = 0; i < 1; i++) { int x1 = rnd.Next(codeW); int y1 = rnd.Next(codeH); int x2 = rnd.Next(codeW); int y2 = rnd.Next(codeH); Color clr = color[rnd.Next(color.Length)]; g.DrawLine(new Pen(clr), x1, y1, x2, y2); } //画验证码字符串 for (int i = 0; i < chkCode.Length; i++) { string fnt = font[rnd.Next(font.Length)]; Font ft = new Font(fnt, fontSize); Color clr = color[rnd.Next(color.Length)]; g.DrawString(chkCode[i].ToString(), ft, new SolidBrush(clr), (float)i * 18 + 2, (float)0); } //将验证码图片写入内存流,并将其以 "image/Png" 格式输出 MemoryStream ms = new MemoryStream(); try { bmp.Save(ms, ImageFormat.Png); return File(ms.ToArray(), @"image/Gif"); } catch (Exception) { return null; } finally { g.Dispose(); bmp.Dispose(); } } /// <summary> /// 修改密码 /// </summary> /// <param name="Password"></param> /// <param name="EmailPwdCode"></param> /// <param name="Email"></param> /// <returns></returns> public ActionResult SubPwdInfo(string Password, string EmailCode, string Email) { Com_MemberBll bll = new Com_MemberBll(); int IsOk = 0; string Message = "操作失败。"; bool Success = false; try { Com_Member entity = bll.Factory.FindEntity("Email", Email); if (Session["EmailPwdCode"].ToString() != Md5Helper.CreateMd5(EmailCode.ToLower(), 16)) { return Content(new JsonMessage { Success = false, Code = "-2", Message = "邮箱验证码不正确" }.ToString()); } entity.Password = Md5Helper.CreateMd5(DESEncrypt.Encrypt(Password, BaseFactory.BaseHelper().GetPwodKey()).ToLower(), 32).ToLower(); entity.Modify(entity.MemberID, false); IsOk = bll.Factory.Update(entity); if (IsOk > 0) { Message = "密码修改成功,前往登录!"; Success = true; } return Content(new JsonMessage { Success = Success, Code = IsOk.ToString(), Message = Message }.ToString()); } catch (Exception ex) { return Content(new JsonMessage { Success = false, Code = "-1", Message = "操作失败:" + ex.Message }.ToString()); } } /// <summary> /// 退出当前登录,清空所有用户cookie /// </summary> /// <returns></returns> public ActionResult LoginOut() { /***************************************** * 采用双cookie登录,则需要释放双cookie * 标准cookie记录用户主要信息,附加cookie用于前台 * 附加cookie可记录自定义的任何信息 * ***************************************/ //清空当前登录用户信息 ManageProvider.Provider.EmptyCurrent(); ManageProvider.Provider.EmptyCurrent<Com_Member>(); Session.Abandon(); //取消当前会话 Session.Clear(); //清除当前浏览器所以Session return Content("1"); } } }
然后我们需要在业务层中创建对应的业务方法Com_MemberBll.cs:
using Bobo.DataAccess.DebugLog; using Bobo.Repository; using Bobo.Utilities; using Bobo.Utilities.Membership; using IA.Entity; using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Web.Mail; namespace IA.Business { // <summary> /// 会员信息表 /// <author> /// <name>YHB</name> /// <date>2018.10.18</date> /// </author> /// </summary> public class Com_MemberBll : RepositoryFactory<Com_Member> { /// <summary> /// 用户登录 /// </summary> /// <param name="Account"></param> /// <param name="Password"></param> /// <param name="IPAddressName"></param> /// <param name="IPAddress"></param> /// <returns></returns> public int MemberRegLogin(string Account, string Password, string IPAddressName, string IPAddress) { if (!this.IsLinkServer()) { throw new Exception("服务器连接不上," + DbResultMsg.ReturnMsg); } else { Com_Member entity = Factory.FindEntity("Account", Account); entity = !StringHelper.IsNullOrEmpty(entity.MemberID) ? entity : Factory.FindEntity("Email", Account); if (!StringHelper.IsNullOrEmpty(entity) && !StringHelper.IsNullOrEmpty(entity.MemberID)) { if (entity.Password == Md5Helper.CreateMd5(DESEncrypt.Encrypt(Password, BaseFactory.BaseHelper().GetPwodKey()).ToLower(), 32).ToLower()) { if (entity.State == 1) { IManageUser imanageuser = new IManageUser(); imanageuser.UserId = entity.MemberID; imanageuser.Account = entity.Account; imanageuser.UserName = entity.RealName; imanageuser.Gender = Convert.ToString(entity.Sex); imanageuser.Code = "会员"; imanageuser.LogTime = DateTime.Now; imanageuser.CompanyId = entity.MemberID; imanageuser.DepartmentId = ""; imanageuser.IPAddress = IPAddress; imanageuser.IPAddressName = IPAddressName; imanageuser.IsSystem = true; imanageuser.Password = Md5Helper.CreateMd5(DESEncrypt.Encrypt(Password, BaseFactory.BaseHelper().GetPwodKey()).ToLower(), 32).ToLower(); ManageProvider.Provider.AddCurrent(imanageuser, false); return 1;//登录成功 } else { return -1;//账户未激活 } } else { return 3;//密码错误 } } else { return 2;//账户不存在 } } } /// <summary> /// 发送邮箱 /// </summary> /// <param name="KeyValue"></param> /// <returns></returns> public string UpMemberSendEmail(string KeyValue) { int num = 0; try { if (!StringHelper.IsNullOrEmpty(KeyValue)) { StringBuilder strHtml = new StringBuilder(); Com_Member enity = Factory.FindEntity(KeyValue); if (enity.State == 0) { enity.VerCode = BaseFactory.BaseHelper().GetRandomCode(6); enity.Modify(KeyValue, false); num = Factory.Update(enity); if (num > 0) { var Wstr = "http://www.yealuo.com/MemberCenterModule/MemberRegLogin/SetMemberState"; strHtml.Append(@"<h2>尊敬的" + enity.RealName + ",您好:</h2>"); strHtml.Append(@"<div>欢迎您注册页落素材网,成为网页部落会员用户,请点击以下网址进行激活您的账户:</div>"); strHtml.Append(@"<div style='border-bottom:1px solid #ccc;padding-bottom:10px;'>" + Wstr + "?KeyValue=" + KeyValue + "&VerCode=" + enity.VerCode + "</div>"); strHtml.Append(@"<div>如果您从未注册过本站会员,请忽略本邮件;此邮件为系统自动发出,请勿回复,谢谢您的支持!</div>"); return NetHelper.SendMailByWeb(enity.Email, ConfigHelper.ReadAppConfig("FromEmail"), "您的页落素材网帐户:邮箱激活验证(请勿回复)", strHtml.ToString(), ConfigHelper.ReadAppConfig("EmailPwd"), ConfigHelper.ReadAppConfig("SmtpServer"));//发送邮件 } } else { num = -1; } } if (num > 0) { return "邮件发送成功!"; } else { return "邮件发送失败!"; } } catch (Exception ex) { return ex.Message; } } /// <summary> /// 判断是否连接服务器 /// </summary> /// <returns></returns> public bool IsLinkServer() { StringBuilder strSql = new StringBuilder(); strSql.Append("SELECT GETDATE()"); DataTable dt = Repository().FindTableBySql(strSql.ToString()); if (dt != null && dt.Rows.Count > 0) { return true; } else { return false; } } } }
(2)注册视图Registered.cshtml
@{ ViewBag.Title = "注册成为页落网会员"; Layout = "~/Views/Shared/_LayoutMember.cshtml"; } <script src="~/Content/Scripts/jQuery.md5.js"></script> <script src="~/Content/Scripts/layer/layer.js"></script> <div id="center" style="padding-top:130px;"> <div class="pay" id="regForm"> <div class="pageTitle">用户注册</div> <div class="pay-item"> <span class="pay-tit">用户名:</span> <input type="text" class="pay-text" id="Account" name="Account" onblur="GetAECount($(this),1)" datacol="yes" err="用户名" checkexpession="NotNull" /> </div> <div class="pay-item"> <span class="pay-tit">邮箱:</span> <input type="text" class="pay-text" id="Email" name="Email" onblur="GetAECount($(this),0)" datacol="yes" err="邮箱" checkexpession="Email" /> </div> <div class="pay-item"> <span class="pay-tit">密码:</span> <input type="password" class="pay-text" id="Password" name="Password" datacol="yes" err="密码" checkexpession="NotNull" /> </div> <div class="pay-item"> <span class="pay-tit">确认密码:</span> <input type="password" class="pay-text" id="truePassword" name="truePassword" datacol="yes" err="密码" checkexpession="NotNull" /> </div> <div class="pay-item"> <span class="pay-tit">验证码:</span> <input type="text" class="pay-text" id="Code" name="Code" datacol="yes" err="验证码" checkexpession="NotNull" /> <img id="codeImg" src="/MemberCenterModule/MemberRegLogin/VerifyCode" data-url="/MemberCenterModule/MemberRegLogin/VerifyCode" alt="点击切换验证码" onclick="switchCode($(this))" /> </div> <div class="detail-czbtn" style="200px;"> <a href="javascript:;" onclick="SubRegData()" class="detail-btn detail-btn1">提交注册</a> </div> <div class="clear"></div> </div> </div> <script type="text/javascript"> var Email = new hcMailCompletion('#Email'); Email.run(); //提交支付凭证 function SubRegData() { if (!CheckDataValid('#regForm', true)) { return false; } if ($(".no").length > 0) { layer.tips('该信息已被注册,请重新输入!', $(".no").siblings("input")); $(".no").siblings("input").focus(); return false; } if ($("#Password").val() != $("#truePassword").val()) { layer.tips('两次输入的秘密不一致!', $("#truePassword")); $("#truePassword").focus(); return false; } var postData = GetWebControls("#regForm"); postData.Password = escape($.md5(postData.Password)); $.post("/MemberCenterModule/MemberRegLogin/SubRegDataForm?Code=" + $("#Code").val(), postData, function (data) { if (data.Code > 0) { layer.msg(data.Message, { icon: 1, time: 1000 }, function () { window.location.href = "/MemberCenterModule/MemberRegLogin/RegisteredSuccess?KeyValue=" + data.KeyValue; }); } else { layer.alert(data.Message, { icon: data.Code }); } }, 'json' ); } //账户邮箱验证 function GetAECount(elem, num) { var Account = ""; var Email = ""; if (num > 0) { Account = elem.val(); } else { Email = elem.val(); } $.post("/MemberCenterModule/MemberRegLogin/GetEACount", { Account: Account, Email: Email }, function (data) { elem.siblings(".no").remove(); if (data > 0) { elem.after('<a class="no" title="该信息已被注册请重新输入"><img src="/Content/Web/img/optionIcoX.png" /></a>'); } }) } //切换验证码 function switchCode(obj) { var url = obj.attr("data-url"); url += "?date=" + new Date().toString(); obj.attr("src", url); } </script>
(3)注册成功发送邮箱视图RegisteredSuccess.cshtml
@{ ViewBag.Title = "注册成功_页落素材网欢迎您!"; Layout = "~/Views/Shared/_LayoutMember.cshtml"; } <script src="~/Content/Scripts/layer/layer.js"></script> <div id="center" style="padding-top:130px;"> <div class="pay" id="regForm"> <div class="tr_rechtext otherretxt"> <div style="margin:0 auto;400px;font-size:16px;"> <p class="te_retit"><i class="img layui-layer-ico layui-layer-ico1"></i>注册成功</p> <h2><b>注册成功,但需要邮箱验证后方可使用!</b></h2> <div>欢迎您成为网页部落会员,您的账户目前处于未验证状态,请尽快登录您的注册邮箱激活该会员账户。系统已经自动为您发送了一封验证邮件,如果您长时间未收到邮件,请点击这里<a href="javascript:;" id="SendEmail" onclick="SendEmail()">重新发送邮件!</a></div> </div> </div> </div> </div> <script type="text/javascript"> var KeyValue = GetQuery('KeyValue').replace("null", ""); //发送邮箱验证 function SendEmail() { $.post("/MemberCenterModule/MemberRegLogin/SendEmail", { KeyValue: KeyValue }, function (data) { layer.alert(data.Message, { icon: data.Code }); }, "json") } </script>
(4)邮箱激活状态视图SetMemberState.cshtml
@{ ViewBag.Title = ViewBag.Message; Layout = "~/Views/Shared/_LayoutMember.cshtml"; } <script src="~/Content/Scripts/layer/layer.js"></script> <div id="center" style="padding-top:130px;"> <div class="pay" id="regForm"> <div class="tr_rechtext otherretxt"> @if (ViewBag.IsOk > 0) { <p class="te_retit"><i class="img layui-layer-ico layui-layer-ico1"></i>@ViewBag.Message 请前往<a href="/MemberCenterModule/MemberRegLogin/login">登录</a>!</p> } else { <p class="te_retit"><i class="img layui-layer-ico layui-layer-ico2"></i>@ViewBag.Message 返回<a href="/MemberCenterModule/MemberRegLogin/RegisteredSuccess?KeyValue=@ViewBag.KeyValue">上一步</a>!</p> } </div> </div> </div> <script type="text/javascript"> var KeyValue = GetQuery('KeyValue').replace("null", ""); $(function () { $("#SendEmail").click(function () { SendEmail(KeyValue); }); }) //发送邮箱验证 function SendEmail(KeyValue) { $.post("/MemberCenterModule/MemberRegLogin/SendEmail", { KeyValue: KeyValue }, function (data) { layer.alert(data.Message, { icon: data.Code }); }, "json") } </script>
(5)会员登录视图login.cshtml:
@{ ViewBag.Title = "会员登录_页落网欢迎您"; Layout = "~/Views/Shared/_LayoutMember.cshtml"; } <script src="~/Content/Scripts/layer/layer.js"></script> <script src="~/Content/Scripts/jQuery.md5.js"></script> <div id="center" style="padding-top:130px;"> <form id="form1" action="/MemberCenterModule/MemberRegLogin/SubmitLogin" method="post" enctype="multipart/form-data" style="margin: 1px"> <div class="pay" id="regForm"> <div class="pageTitle">会员登录</div> <div class="pay-item"> <span class="pay-tit">用户名/邮箱:</span> <input type="text" class="pay-text" id="Account" name="Account" datacol="yes" err="用户名/邮箱" checkexpession="NotNull" /> </div> <div class="pay-item"> <span class="pay-tit">密码:</span> <input type="password" class="pay-text" id="Password" name="Password" datacol="yes" err="密码" checkexpession="NotNull" /> <a href="javascript:;" onclick="AddEditBtn()">忘记密码</a> </div> <div class="pay-item"> <span class="pay-tit">验证码:</span> <input type="text" class="pay-text" id="Code" name="Code" datacol="yes" err="验证码" checkexpession="NotNull" /> <img id="codeImg" src="/MemberCenterModule/MemberRegLogin/VerifyCode" data-url="/MemberCenterModule/MemberRegLogin/VerifyCode" alt="点击切换验证码" onclick="switchCode($(this))" /> </div> <div class="detail-czbtn" style="400px;"> <a href="javascript:;" onclick="AcceptClick()" class="detail-btn detail-btn1 L">确认登录</a> <a href="/MemberCenterModule/MemberRegLogin/Registered" class="detail-btn R" style="background-color:initial;color:#0094ff;">注册</a> </div> <div class="clear"></div> </div> </form> </div> @*隐藏弹窗模版*@ <script id="PwdEdit" type="text/template"> <div style="margin:20px 20px;"> <form id="PwdForm" action="/MemberCenterModule/MemberSystem/SubAccountInfo" method="post" enctype="multipart/form-data" style="margin: 1px"> <input type="hidden" id="KeyValue" name="KeyValue" /> <table class="layer-table-form"> <tr> <td> <span class="layer-form-tit">邮箱:</span><input type="text" name="Email" class="layer-form-txt SetEmail" id="Email" datacol="yes" err="邮箱" checkexpession="NotNull" /> <a href="javascript:;" class="PostEmail" onclick="PostEmail($(this), $('.SetEmail').val(), 'EmailPwdCode')">发送邮箱验证</a> </td> </tr> <tr> <td> <span class="layer-form-tit">邮箱验证码:</span><input type="text" name="EmailCode" class="layer-form-txt" id="EmailCode" datacol="yes" err="邮箱验证码" checkexpession="NotNull" /> </td> </tr> <tr> <td><span class="layer-form-tit">新密码:</span><input type="password" name="Password" class="layer-form-txt SetPassword" id="Password" datacol="yes" err="新密码" checkexpession="NotNull" /></td> </tr> <tr> <td><span class="layer-form-tit">确认新密码:</span><input type="password" name="truePassword" class="layer-form-txt" id="truePassword" datacol="yes" err="确认密码" checkexpession="NotNull" /></td> </tr> </table> </form> </div> </script> <script type="text/javascript"> //提交表单 function AcceptClick() { if (!CheckDataValid('#form1', true)) { return false; } var postData = GetWebControls("#form1"); postData.Password = escape($.md5(postData.Password)); $.post("/MemberCenterModule/MemberRegLogin/SubmitLogin?Code=" + $("#Code").val(), postData, function (data) { layer.msg(data.Message, { icon: data.Code, time: 1000 }, function () { if (data.Code > 0) { selfClose(); var ReturnUrl = GetQuery('ReturnUrl').replace("null", ""); if (!ReturnUrl) { ReturnUrl = "/MemberCenterModule/MemberSystem/Index" } var search = window.location.href; var arr = search.split("ReturnUrl="); location.href = arr[1]; } else if (data.Code == -2) { $("#Code").val("").focus(); switchCode($("#codeImg")); } }); }, "json"); } //编辑弹窗 function AddEditBtn() { var tem = $("#PwdEdit").html(); layer.open({ title: "重置密码", type: 1, skin: 'layui-layer-rim', //加上边框 area: ['600px', '350px'], //宽高 content: tem, btn: ['保存', '取消'], //只是为了演示 yes: function () { SubAccountInfo(); } }); var Email = new hcMailCompletion('#Email'); Email.run(); } //忘记密码修改 function SubAccountInfo() { if (!CheckDataValid('#PwdForm', true)) { return false; } var postData = GetWebControls("#PwdForm"); if ($(".SetPassword").val() != $("#truePassword").val()) { layer.tips('两次输入的秘密不一致!', $("#truePassword")); $("#truePassword").focus(); return false; } postData.Password = escape($.md5(postData.Password)); $.post("/MemberCenterModule/MemberRegLogin/SubPwdInfo?EmailCode=" + $("#EmailCode").val(), postData, function (data) { if (data.Code > 0) { layer.msg(data.Message, { icon: 1, time: 1000 }, function () { location.reload(); }); } else { layer.alert(data.Message, { icon: data.Code }); } }, "json"); } //邮箱验证 function PostEmail(elem, Email, Type) { if (elem.hasClass("PostEmailActive")) { return false; } if (!isEmail(Email)) { layer.tips('请输入正确的邮箱!', $("#Email")); $("#Email").focus(); return false; } AjaxJson("/MemberCenterModule/MemberRegLogin/PostEmail?Type=" + Type + "&Email=" + Email, {}, function (data) { if (data.Code > 0) { layer.msg(data.Message, { icon: 1, time: 1000 }, function () { elem.addClass("PostEmailActive"); SetPostTime(elem, Type); }); } else { layer.alert(data.Message, { icon: data.Code }); } } ); } //回车键 document.onkeydown = function (e) { if (!e) e = window.event; //火狐中是 window.event if ((e.keyCode || e.which) == 13) { AcceptClick(); } } //自定义关闭窗口 function selfClose() { var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); } //切换验证码 function switchCode(obj) { var url = obj.attr("data-url"); url += "?date=" + new Date().toString(); obj.attr("src", url); } </script> @*发送倒计时*@ <script type="text/javascript"> function writeCookie(name, value, timeNum) {//把当前发送的时间写入cookie var expire = ""; if (timeNum != null) { expire = new Date((new Date()).getTime() + timeNum);//设置有效时间段(当前时间+设置的有效时间长度) expire = "; expires=" + expire.toGMTString();//这里分号是为与前面的拼接需要"name=xxx;expires=yyy" } document.cookie = name + "=" + escape(value) + expire + ";path=/"; } function readCookie(name) {//读取cookie中名称等于name的值 var cookieValue = ""; var search = name + "="; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search); if (offset != -1) { offset += search.length; end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; cookieValue = (document.cookie.substring(offset, end)) } } return cookieValue; } var tipId; var TypeCode; var _elem; function SetPostTime(elem, Type) { TypeCode = Type; _elem = elem; writeCookie(TypeCode, (new Date()).getTime(), 60000) tipId = window.setInterval("startTiem()", 1000); } function startTiem() { var tt = parseInt(((new Date()).getTime() - readCookie(TypeCode)) / 1000); if (tt < 60) { var vv = "(" + parseInt(60 - tt) + ")秒后重新发送"; _elem.text(vv); } else { _elem.text("发送邮箱验证"); _elem.removeClass("PostEmailActive"); window.clearInterval(tipId); } } </script>
(6)效果图预览