MVC+Bootstrap设计

MVC+Bootstrap) 二 框架设计

文章目录:

一、前言

二、结构图

三、项目搭建

四、代码生成

五、实现接口

六、依赖倒置

七、登录实现

八、最后

一、前言

    这个框架是从最近几年做过的项目中剥离出来,适合中小型项目开发,整体结构比较简单明了。在我的权限设计实现这边文章中有过初步的讲解,本篇文章将以代码的形式从无到有的讲解一下,以希望得到园里大牛的指点,指出不足之处,以求共同进步。

二、结构图:

MVC+Bootstrap设计_第1张图片

结构说明请参考我的权限设计实现这边文章,在这里将不再重复说明。

三、项目搭建

1、方法返回值

对于一个业务操作功能(例如创建、编辑、删除),都需要一个返回值。因此我们要先明确到底需要一个什么样的业务操作结果?

  1)  能表示操作的成功失败

  2)  能返回自定义的文字描述信息

  3)  能在操作成功或失败后跳转到指定的页面

  4)  能返回附加的返回信息

综上所述,简单类型的返回值满足不了这个需求,那就需要定义一个专门用来封装返回值信息的返回值类,这里定义如下: 

复制代码
 1 namespace Murphy.Entity
 2 {
 3     /// <summary>
 4     ///  统一的 Ajax格式类
 5     /// </summary>
 6     public class AjaxMsg
 7     {
 8         /// <summary>
 9         /// 消息
10         /// </summary>
11         public string Msg { get; set; }
12         /// <summary>
13         /// 状态
14         /// </summary>
15         public string Status { get; set; }
16         /// <summary>
17         /// 地址
18         /// </summary>
19         public string BackUrl { get; set; }
20         /// <summary>
21         /// 数据
22         /// </summary>
23         public object Data { get; set; }
24     }
25 }
复制代码

2、数据库访问接口层

在很多情况下,很多页面的操作都是简单的单表增删改查。如果每开发一个页面都写一次增删改查的代码,不仅增加工作量,而且还增加维护代码的难度。例如在系统设计初期,没有考虑到模块增加操作日志的功能。随着系统的运行,领导发现在模块上加入操作日志可以很明确的看到哪些人在哪个时间段操作了哪些模块并且操作了模块中的什么内容,可有效的防治恶意操作。领导发话了,给每个模块加上操作日志。如果没有基类的话,基本上每个模块的代码都要做改动。综上所述,设计基类不仅可以减少工作量,减低维护代码的难度,更重要的一点是约束了代码的规范性和统一性

IBaseDal,在这个接口中我们封装了常用的操作数据库的方法,代码如下:

复制代码
 1     /// <summary>
 2     /// 数据层父接口
 3     /// </summary>
 4     /// <typeparam name="T"></typeparam>
 5     public interface IBaseDal<T> where T : class
 6     {
 7         /// <summary>
 8         /// 创建
 9         /// </summary>
10         /// <param name="entity"></param>
11         /// <returns></returns>
12         bool Create(T entity);
13 
14         /// <summary>
15         /// 创建 无Log
16         /// </summary>
17         /// <param name="entity"></param>
18         /// <returns></returns>
19         bool CreateNoLog(T entity);
20 
21         /// <summary>
22         /// 编辑
23         /// </summary>
24         /// <param name="entity"></param>
25         /// <returns></returns>
26         int Update(T entity);
27 
28         /// <summary>
29         /// 编辑 无Log
30         /// </summary>
31         /// <param name="entity"></param>
32         /// <returns></returns>
33         int UpdateNoLog(T entity);
34 
35         /// <summary>
36         /// 删除
37         /// </summary>
38         /// <param name="keyValue"></param>
39         /// <returns></returns>
40         int Delete(string keyValue);
41 
42         /// <summary>
43         /// 删除 无Log
44         /// </summary>
45         /// <param name="keyValue"></param>
46         /// <returns></returns>
47         int DeleteNoLog(string keyValue);
48 
49         /// <summary>
50         /// 查询单条记录
51         /// </summary>
52         /// <param name="keyValue"></param>
53         /// <returns></returns>
54         T GetEntity(string keyValue);
55 
56         /// <summary>
57         /// 查询所有记录
58         /// </summary>
59         /// <param name="where"></param>
60         /// <param name="orderBy"></param>
61         /// <returns></returns>
62         List<T> GetListWhere(string where, string orderBy);
63 
64         /// <summary>
65         /// 得到一页数据
66         /// </summary>
67         /// <param name="pager"></param>
68         /// <param name="pageNumber"></param>
69         /// <param name="pageSize"></param>
70         /// <param name="where"></param>
71         /// <param name="query"></param>
72         /// <param name="orderBy"></param>
73         /// <returns></returns>
74         Page<T> GetPageListWhere(out string pager, int pageNumber, int pageSize, string where, string query,string orderBy);
75     }
复制代码

3、数据访问层基类

BaseDAL,在这个类中实现了IBaseDal接口,代码如下:

复制代码
  1    public abstract class BaseDAL<T> : IBaseDal<T> where T : class
  2     {
  3         protected Database db = new Database("SQLConnectionString");
  4 
  5         /// <summary>
  6         /// 创建公共方法SQL
  7         /// </summary>
  8         /// <param name="where"></param>
  9         /// <param name="orderBy"></param>
 10         /// <returns></returns>
 11         protected abstract string CreateSQL(string where, string orderBy);
 12 
 13         /// <summary>
 14         /// 创建
 15         /// </summary>
 16         /// <param name="entity"></param>
 17         /// <returns></returns>
 18         public bool Create(T entity)
 19         {
 20             lock (db)
 21             {
 22                 object obj = db.Insert(entity);
 23                 if (obj.ToString() == "True")
 24                 {
 25                     if (RequestCache.GetCacheSystem().OpenLog == "Open")
 26                     {
 27                         BaseLogDal.Instance.AddCreateLog<T>(entity);
 28                     }
 29                     return true;
 30                 }
 31                 else
 32                 {
 33                     return false;
 34                 }
 35             }
 36         }
 37 
 38         /// <summary>
 39         /// 创建 无Log
 40         /// </summary>
 41         /// <param name="entity"></param>
 42         /// <returns></returns>
 43         public bool CreateNoLog(T entity)
 44         {
 45             lock (db)
 46             {
 47                 object obj = db.Insert(entity);
 48                 if (obj.ToString() == "True")
 49                 {
 50                     return true;
 51                 }
 52                 else
 53                 {
 54                     return false;
 55                 }
 56             }
 57         }
 58 
 59         /// <summary>
 60         /// 编辑
 61         /// </summary>
 62         /// <param name="entity"></param>
 63         /// <returns></returns>
 64         public int Update(T entity)
 65         {
 66             //获取KeyValue值
 67             string primaryKeyValue = PublicMethod.GetKeyFieldValue<T>(entity).ToString();
 68             var oldEntity = GetEntity(primaryKeyValue);
 69             lock (db)
 70             {
 71                 var count = db.Update(entity);
 72                 if (count > 0)
 73                 {
 74                     if (RequestCache.GetCacheSystem().OpenLog == "Open")
 75                     {
 76                         BaseLogDal.Instance.AddUpdateLog<T>(oldEntity, entity);
 77                     }
 78                 }
 79                 return count;
 80             }
 81         }
 82 
 83         /// <summary>
 84         /// 编辑 无Log
 85         /// </summary>
 86         /// <param name="entity"></param>
 87         /// <returns></returns>
 88         public int UpdateNoLog(T entity)
 89         {
 90             lock (db)
 91             {
 92                 return db.Update(entity);
 93             }
 94         }
 95 
 96         /// <summary>
 97         /// 删除
 98         /// </summary>
 99         /// <param name="keyValue"></param>
100         /// <returns></returns>
101         public int Delete(string keyValue)
102         {
103             var pd = Database.PocoData.ForType(typeof(T));
104             string tableName = pd.TableInfo.TableName;
105             string primaryKey = pd.TableInfo.PrimaryKey;
106             lock (db)
107             {
108                 int count = db.Delete(tableName, primaryKey, null, keyValue);
109                 if (count > 0)
110                 {
111                     if (RequestCache.GetCacheSystem().OpenLog == "Open")
112                     {
113                         BaseLogDal.Instance.AddDeleteLog<T>(GetEntity(keyValue));
114                     }
115                 }
116                 return count;
117             }
118         }
119 
120         /// <summary>
121         /// 删除 无Log
122         /// </summary>
123         /// <param name="keyValue"></param>
124         /// <returns></returns>
125         public int DeleteNoLog(string keyValue)
126         {
127             var pd = Database.PocoData.ForType(typeof(T));
128             //得到表名
129             string tableName = pd.TableInfo.TableName;
130             //得到主键
131             string primaryKey = pd.TableInfo.PrimaryKey;
132             lock (db)
133             {
134                 return db.Delete(tableName, primaryKey, null, keyValue);
135             }
136         }
137 
138         /// <summary>
139         /// 查询单条记录
140         /// </summary>
141         /// <param name="keyValue"></param>
142         /// <returns></returns>
143         public virtual T GetEntity(string keyValue)
144         {
145             var pd = Database.PocoData.ForType(typeof(T));
146             //得到主键
147             string primaryKey = pd.TableInfo.PrimaryKey;
148             lock (db)
149             {
150                 StringBuilder sbStr = new StringBuilder();
151                 sbStr.Append(CreateSQL("" + primaryKey + "='" + keyValue + "'", null));
152                 return db.SingleOrDefault<T>(sbStr.ToString());
153             }
154         }
155 
156         /// <summary>
157         /// 查询所有记录
158         /// </summary>
159         /// <param name="where"></param>
160         /// <param name="orderBy"></param>
161         /// <returns></returns>
162         public virtual List<T> GetListWhere(string where, string orderBy)
163         {
164             lock (db)
165             {
166                 StringBuilder sbStr = new StringBuilder();
167                 sbStr.Append(CreateSQL(where, orderBy));
168                 return db.Fetch<T>(sbStr.ToString());
169             }
170         }
171 
172         /// <summary>
173         /// 得到一页数据
174         /// </summary>
175         /// <param name="pager"></param>
176         /// <param name="pageNumber"></param>
177         /// <param name="pageSize"></param>
178         /// <param name="where"></param>
179         /// <param name="query"></param>
180         /// <param name="orderBy"></param>
181         /// <returns></returns>
182         public virtual Page<T> GetPageListWhere(out string pager, int pageNumber, int pageSize, string where, string query, string orderBy)
183         {
184             lock (db)
185             {
186                 StringBuilder sbStr = new StringBuilder();
187                 sbStr.Append(CreateSQL(where, orderBy));
188                 var pageResult = db.Page<T>(pageNumber, pageSize, sbStr.ToString());
189                 pager = PageHelper.GetPageHtml(pageResult.TotalItems, pageNumber, pageSize, query);
190                 return pageResult;
191             }
192         }
193     }
复制代码

4、业务逻辑层基类

BaseBll,代码如下:

复制代码
  1     public abstract class BaseBll<T> where T : class
  2     {
  3         /// <summary>
  4         /// 数据接口层对象 等待被实例化
  5         /// </summary>
  6         protected IBaseDal<T> idal = null;
  7 
  8         /// <summary>
  9         /// 创建
 10         /// </summary>
 11         /// <param name="entity"></param>
 12         /// <returns></returns>
 13         public bool Create(T entity)
 14         {
 15             return idal.Create(entity);
 16         }
 17 
 18         /// <summary>
 19         /// 创建 无Log
 20         /// </summary>
 21         /// <param name="entity"></param>
 22         /// <returns></returns>
 23         public bool CreateNoLog(T entity)
 24         {
 25             return idal.CreateNoLog(entity);
 26         }
 27 
 28         /// <summary>
 29         /// 编辑
 30         /// </summary>
 31         /// <param name="entity"></param>
 32         /// <returns></returns>
 33         public int Update(T entity)
 34         {
 35             return idal.Update(entity);
 36         }
 37 
 38         /// <summary>
 39         /// 编辑 无Log
 40         /// </summary>
 41         /// <param name="entity"></param>
 42         /// <returns></returns>
 43         public int UpdateNoLog(T entity)
 44         {
 45             return idal.UpdateNoLog(entity);
 46         }
 47 
 48         /// <summary>
 49         /// 删除
 50         /// </summary>
 51         /// <param name="keyValue"></param>
 52         /// <returns></returns>
 53         public int Delete(string keyValue)
 54         {
 55             return idal.Delete(keyValue);
 56         }
 57 
 58         /// <summary>
 59         /// 删除 无Log
 60         /// </summary>
 61         /// <param name="keyValue"></param>
 62         /// <returns></returns>
 63         public int DeleteNoLog(string keyValue)
 64         {
 65             return idal.DeleteNoLog(keyValue);
 66         }
 67 
 68         /// <summary>
 69         /// 查询单条记录
 70         /// </summary>
 71         /// <param name="keyValue"></param>
 72         /// <returns></returns>
 73         public T GetEntity(string keyValue)
 74         {
 75             return idal.GetEntity(keyValue);
 76         }
 77 
 78         /// <summary>
 79         /// 查询所有记录
 80         /// </summary>
 81         /// <param name="where"></param>
 82         /// <param name="orderBy"></param>
 83         /// <returns></returns>
 84         public List<T> GetListWhere(string where, string orderBy)
 85         {
 86             return idal.GetListWhere(where, orderBy);
 87         }
 88 
 89         /// <summary>
 90         /// 得到一页数据
 91         /// </summary>
 92         /// <param name="pager"></param>
 93         /// <param name="pageNumber"></param>
 94         /// <param name="pageSize"></param>
 95         /// <param name="where"></param>
 96         /// <param name="query"></param>
 97         /// <param name="orderBy"></param>
 98         /// <returns></returns>
 99         public Page<T> GetPageListWhere(out string pager, string where,string query, string orderBy)
100         {
101 
102             return idal.GetPageListWhere(out pager, PublicMethod.GetPageNumber(), PublicMethod.GetPageSize(), where, query, orderBy);
103         }
104     }
复制代码

四、代码生成

主要是用来生成实体类、业务逻辑层、数据库访问层、数据接口访问层,减少不必要的工作,保证代码的统一性和约束性。在系统中的操作如下,代码生成器的实现原理后续文章将介绍到。

MVC+Bootstrap设计_第2张图片

生成的BaseUser实体类:

复制代码
  1     [Serializable]
  2     [TableName("Base_User")]
  3     [PrimaryKey("Id")]
  4     [Description("用户管理")]
  5     [Key("Id")]
  6     public class BaseUser
  7     {
  8         /// <summary>
  9         /// 用户主键
 10         /// </summary>
 11         [Description("用户主键")]
 12         public string Id { get; set; }
 13         /// <summary>
 14         /// 登陆账号
 15         /// </summary>
 16         [Description("登陆账号")]
 17         public string UserName { get; set; }
 18         /// <summary>
 19         /// 用户编码
 20         /// </summary>
 21         [Description("用户编码")]
 22         public string Code { get; set; }
 23         /// <summary>
 24         /// 姓名
 25         /// </summary>
 26         [Description("姓名")]
 27         public string RealName { get; set; }
 28         /// <summary>
 29         /// 密码
 30         /// </summary>
 31         [Description("密码")]
 32         public string UserPassword { get; set; }
 33         /// <summary>
 34         /// 单位主键
 35         /// </summary>
 36         [Description("单位主键")]
 37         public string CompanyId { get; set; }
 38         /// <summary>
 39         /// 分部主键
 40         /// </summary>
 41         [Description("分部主键")]
 42         public string SubCompanyId { get; set; }
 43         /// <summary>
 44         /// 部门主键
 45         /// </summary>
 46         [Description("部门主键")]
 47         public string DepartmentId { get; set; }
 48         /// <summary>
 49         /// 工作组主键
 50         /// </summary>
 51         [Description("工作组主键")]
 52         public string WorkGroupId { get; set; }
 53         /// <summary>
 54         /// 直接上级
 55         /// </summary>
 56         [Description("直接上级")]
 57         public string ManagerId { get; set; }
 58         /// <summary>
 59         /// 角色主键
 60         /// </summary>
 61         [Description("角色主键")]
 62         public string RoleId { get; set; }
 63         /// <summary>
 64         /// 岗位主键
 65         /// </summary>
 66         [Description("岗位主键")]
 67         public string JobTitle { get; set; }
 68         /// <summary>
 69         /// 是否是超级管理员
 70         /// </summary>
 71         [Description("是否是超级管理员")]
 72         public int IsSuper { get; set; }
 73         /// <summary>
 74         /// 性别
 75         /// </summary>
 76         [Description("性别")]
 77         public int Gender { get; set; }
 78         /// <summary>
 79         /// 移动电话
 80         /// </summary>
 81         [Description("移动电话")]
 82         public string MobilePhone { get; set; }
 83         /// <summary>
 84         /// 电子邮箱
 85         /// </summary>
 86         [Description("电子邮箱")]
 87         public string Email { get; set; }
 88         /// <summary>
 89         /// 登陆次数
 90         /// </summary>
 91         [Description("登陆次数")]
 92         public int LoginTimes { get; set; }
 93         /// <summary>
 94         /// 最后登陆时间
 95         /// </summary>
 96         [Description("最后登陆时间")]
 97         public string LastLoginDate { get; set; }
 98         /// <summary>
 99         /// 安全级别
100         /// </summary>
101         [Description("安全级别")]
102         public int SecLevel { get; set; }
103         /// <summary>
104         /// 是否启用
105         /// </summary>
106         [Description("是否启用")]
107         public int Enabled { get; set; }
108         /// <summary>
109         /// 描述
110         /// </summary>
111         [Description("描述")]
112         public string Description { get; set; }
113         /// <summary>
114         /// 创建人主键
115         /// </summary>
116         [Description("创建人主键")]
117         public string CreateUserId { get; set; }
118         /// <summary>
119         /// 创建日期
120         /// </summary>
121         [Description("创建日期")]
122         public string CreateDate { get; set; }
123         /// <summary>
124         /// 修改人主键
125         /// </summary>
126         [Description("修改人主键")]
127         public string ModifyUserId { get; set; }
128         /// <summary>
129         /// 修改时间
130         /// </summary>
131         [Description("修改时间")]
132         public string ModifyDate { get; set; }
133      }
复制代码

五、实现接口

在定义了数据访问接口层,数据访问层基类,业务逻辑层基类之后,进行开发时需要对应的实现接口和继承基类。这里以BaseUserDal、BaseUserBll为例子讲解。

BaseUserDal继承BaseDAL<T>基类并实现IBaseUserDal接口,用户数据访问层:

复制代码
 1     public class BaseUserDal : BaseDAL<BaseUser>, IBaseUserDal
 2     {
 3         protected override string CreateSQL(string where, string orderBy)
 4         {
 5             where = where.IsNullOrEmpty() ? " 1=1 " : where;
 6             orderBy = orderBy.IsNullOrEmpty() ? " order by UserName" : " order by " + orderBy + "";
 7             return string.Format(@"select * from VM_GetUserList where {0} {1}", where, orderBy);
 8         }
 9 
10 
11         /// <summary>
12         /// 用户登陆
13         /// </summary>
14         /// <param name="userName"></param>
15         /// <param name="userPassword"></param>
16         /// <returns></returns>
17         public BaseUser LoginUser(string userName, string userPassword)
18         {
19             string where = " UserName='" + userName + "' ";
20             lock (db)
21             {
22                 return db.SingleOrDefault<BaseUser>(CreateSQL(where, null));
23             }
24         }
25 }
复制代码

BaseUserBll继承BaseBll<T>基类,用户业务逻辑层:

复制代码
 1 public class BaseUserBll : BaseBll<BaseUser>
 2 {
 3         protected IBaseUserDal baseUserDal = null;
 4         AjaxMsg msg = new AjaxMsg();
 5 
 6         public BaseUserBll()
 7         {
 8             IApplicationContext springContext = ContextRegistry.GetContext();
 9             baseUserDal = springContext.GetObject("BaseUserDal") as IBaseUserDal;
10             base.idal = baseUserDal;
11         }
12        /// <summary>
13         /// 用户登陆
14         /// </summary>
15         /// <param name="userName"></param>
16         /// <param name="userPassword"></param>
17         /// <param name="isAlways"></param>
18         /// <returns></returns>
19         public AjaxMsg LoginUser(string userName, string userPassword, string isAlways)
20         {
21                //对应的业务操作
22         }
23 }
复制代码

六、依赖倒置

这里我们将配置Spring.NET以实现不同数据库的注入功能,具体配置请参考上边文章细说IOC演化之路,这里将不再详细说明。

Objects.Xml

复制代码
 1 <?xml version="1.0" encoding="utf-8" ?>
 2 <objects xmlns="http://www.springframework.net">
 3   <object id="BaseAccessDal" type="Murphy.Data.SQLServer.BaseAccessDal, Murphy.Data.SQLServer" />
 4   <object id="BaseLogDal" type="Murphy.Data.SQLServer.BaseLogDal, Murphy.Data.SQLServer" />
 5   <object id="BaseOrganizeDal" type="Murphy.Data.SQLServer.BaseOrganizeDal, Murphy.Data.SQLServer" />
 6   <object id="BaseParameterDal" type="Murphy.Data.SQLServer.BaseParameterDal, Murphy.Data.SQLServer" />
 7   <object id="BaseStorageDal" type="Murphy.Data.SQLServer.BaseStorageDal, Murphy.Data.SQLServer" />
 8   <object id="BaseUserDal" type="Murphy.Data.SQLServer.BaseUserDal, Murphy.Data.SQLServer" />
 9   <object id="BaseRoleDal" type="Murphy.Data.SQLServer.BaseRoleDal, Murphy.Data.SQLServer" />
10   <object id="BaseJobTitleDal" type="Murphy.Data.SQLServer.BaseJobTitleDal, Murphy.Data.SQLServer" />
11   <object id="BaseModuleDal" type="Murphy.Data.SQLServer.BaseModuleDal, Murphy.Data.SQLServer" />
12   <object id="BasePermissionItemDal" type="Murphy.Data.SQLServer.BasePermissionItemDal, Murphy.Data.SQLServer" />
13   <object id="BaseItemDetailDal" type="Murphy.Data.SQLServer.BaseItemDetailDal, Murphy.Data.SQLServer" />
14   <object id="BaseItemDal" type="Murphy.Data.SQLServer.BaseItemDal, Murphy.Data.SQLServer" />
15   <object id="DataBaseDal" type="Murphy.Data.SQLServer.DataBaseDal, Murphy.Data.SQLServer" />
16 </objects>
复制代码

七、登录实现

当数据访问层和业务逻辑层的工作都准备完成之后,我们在开发简单的功能模块时就无需关注底层的实现逻辑,这里以一个登陆功能作为实例演示。

登陆视图代码如下:

复制代码
 1 <body class="login">
 2    
 3     <div class="header">
 4         <div class="logo" style="background: url(''); background-repeat: no-repeat; background-position: 25px 60px;"></div>
 5     </div>
 6     <div class="main" id="main">
 7         <div class="content">
 8             <h3 class="form-title">登录到帐户</h3>
 9             <form action="#" method="post" enctype="application/x-www-form-urlencoded" name="loginForm" target="_self" class="login-form" id="loginForm">
10 
11                 <div class="control-group">
12                     <div class="alert  alert-error hide">
13                         <button type="button" class="close" data-dismiss="alert">&times;</button>
14                         <span id="alert-txt"></span>
15                     </div>
16                 </div>
17                 <div class="control-group">
18                     <label class="control-label">用户名</label>
19                     <div class="controls">
20                         <div class="input-icon left">
21                             <i class="icon-user"></i>
22                             <input name="UserName" type="text" class="input-large" id="UserName" placeholder="用户名" value="super" />
23                         </div>
24                     </div>
25                 </div>
26                 <div class="control-group">
27                     <label class="control-label">密码</label>
28                     <div class="controls">
29                         <div class="input-icon left">
30                             <i class="icon-lock"></i>
31                             <input name="UserPassword" type="password" class="input-large" id="UserPassword" placeholder="密码" value="super" />
32                         </div>
33                     </div>
34                 </div>
35                 <div class="control-group">
36                     <label class="control-label">验证码</label>
37                     <div class="controls">
38                         <div class="input-icon left">
39                             <i class="icon-ok-circle"></i>
40                             <input name="vcode" type="text" class="input-small" id="vcode" placeholder="验证码" value="" />
41                             <img src="/Home/[email protected]" name="captcha" id="captcha" />
42                         </div>
43                     </div>
44                 </div>
45                 <div class="control-group" id="btn-login">
46                     <div class="controls">
47                         <button type="submit" class="btn btn-success"> <i class="icon-ok"></i> 立即登录</button>
48 
49                     </div>
50                 </div>
51                 <div class="control-group">
52                     <label for="IsAlways" class="checkbox">
53                         <input type="checkbox" name="IsAlways" id="IsAlways" value="1" />
54                         在这台计算机上记住我 (2周时间)
55                     </label>
56                 </div>
57                 <div class="control-group">
58                     <label>使用第三方帐号登录:</label>
59                     <ul id="third-login" class="unstyled inline">
60                         <li><a href="javascript:void(0)" class="third-tsina" title="新浪微博"></a></li>
61                         <li><a href="javascript:void(0)" class="third-qq" title="腾讯QQ"></a></li>
62                         <li><a href="javascript:void(0)" class="third-baidu" title="百度"></a></li>
63                         <li><a href="javascript:void(0)" class="third-renren" title="人人"></a></li>
64                         <li><a href="javascript:void(0)" class="third-taobao" title="淘宝"></a></li>
65                         <li><a href="javascript:void(0)" class="third-tsohu" title="搜狐微博"></a></li>
66                         <li><a href="javascript:void(0)" class="third-tqq" title="腾讯微博"></a></li>
67                         <li><a href="javascript:void(0)" class="third-kaixin001" title="开心网"></a></li>
68                         <li><a href="javascript:void(0)" class="third-douban" title="豆瓣"></a></li>
69                     </ul>
70                 </div>
71             </form>
72             <div class="forget-password">
73                 <p> <a href="javascript:void(0)" id="forget-password">我忘记了登录密码?</a></p>
74             </div>
75         </div>
76     </div>
77     <div class="footer">
78     </div>
79 </body>
复制代码

JavaScript代码如下:

这里使用了jquery.form.js作为表单提交插件。

复制代码
 1 $(document).ready(function () {
 2     $("#captcha").click(function () {
 3         resetCaptcha();
 4     });
 5     $("#loginForm").submit(function () {
 6         var options = {
 7             url: "/Home/LoginUser",
 8             dataType: "json",
 9             cache: false,
10             success: function (data) {
11                 if (data.Status === "+OK") {
12                     location.replace(data.BackUrl);
13                 }
14                 else {
15                     resetCaptcha();
16                     $('#alert-txt').text(data.Msg)
17                     $('.alert').show();
18                 }
19             }
20         };
21         $(this).ajaxSubmit(options);
22         return false;
23     });
24 
25     $(document).bind("contextmenu", function () { return false; });
26     $(document).bind("selectstart", function () { return false; });
27   
28    
29 })
30 
31 function resetCaptcha() {
32     if ($('#captcha').length > 0) {
33         $("#captcha").attr('src', '/Home/ValidateCode?' + Math.round(Math.random() * 10000));
34     }
35 }
复制代码

控制器代码如下:

复制代码
 1      /// <summary>
 2         /// 登陆
 3         /// </summary>
 4         /// <returns></returns>
 5         public ActionResult LoginUser()
 6         {
 7           
 8             return View();
 9         }
10 
11         /// <summary>
12         /// 验证登陆
13         /// </summary>
14         /// <param name="collection"></param>
15         /// <returns></returns>
16         [HttpPost]
17         public string LoginUser(FormCollection collection)
18         {
19             NameValueCollection frmCol = Request.Form;
20             LoginUser loginUser = new LoginUser();
21             loginUser.UserName = frmCol["UserName"];
22             loginUser.UserPassword = frmCol["UserPassword"];
23             loginUser.IsAlways = frmCol["IsAlways"];
24             return JsonConvert.SerializeObject(userBll.LoginUser(loginUser.UserName,loginUser.UserPassword,loginUser.IsAlways));
25         }
复制代码

到此基本上完成一个功能。核心代码全部贴出,只要人品不出问题,对着做都可以实现。

八、最后

如果大家感兴趣,就在右下角帮我【推荐】一下吧,在这里谢谢大家了。我接下来就按照模块列表一篇一篇的来写。最后我创建了一个技术交流群:263169088,欢迎大家来交流。

你可能感兴趣的:(bootstrap)