前言
Hi,
大家好，还是星期五，还是Rector，又在图享网准时和大家见面了。
今天给大家带来系列教程《一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar]》的第八期了，不知道你有没有按照教程将前七期的都实际练习一篇呢？如果是，你在练习的时候有没有遇到什么问题呢？
反正Rector是有收到部分童鞋发来他们练习过程中的问题反馈的哦。
如果你仔细阅读并实际练习了前面七期的教程，我相信，作为刚入门或者经验尚浅的你一定会有收获的。
加油吧，骚年！！！ 人生苦短，就怕努力！！！
Rector这是要成为心理导师的节奏啊，一来就给大家灌饱心灵鸡汤。。。
**本文篇幅有点长，请作好心里准备！！！
同时，也吐个槽，本文看似内容简单的一B，但也花了笔者几个小时来准备示例以及写作，写技术文章真心伤不起
珍爱生命，远离程序！！！
**
还是回到我们的正题，开始我们今天的系列教程：《一步一步创建ASP.NET MVC5程序Repository+Autofac+Automapper+SqlSugar》
本文知识要点
- 用户注册/登录功能设计与实现
设计用户表
这个表呢，Rector已经为大家准备好了，MySQL表结构如下：
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for ts_user
-- ----------------------------
DROP TABLE IF EXISTS `tb_user`;
CREATE TABLE `tb_user` (
`Id` int(10) NOT NULL AUTO_INCREMENT,
`LoginName` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '' COMMENT '登录名',
`Password` varchar(150) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL DEFAULT '' COMMENT '密码',
`DisplayName` varchar(50) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '' COMMENT '显示名称',
`RealName` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '' COMMENT '真实姓名',
`EmailAddress` varchar(120) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '' COMMENT '电子邮箱',
`Avatar` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '' COMMENT '用户头像',
`Status` int(2) NOT NULL DEFAULT 1 COMMENT '用户的状态,0:禁用,1:正常',
`Telephone` varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '' COMMENT '手机号码',
`Qq` varchar(15) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '',
`WebsiteUrl` varchar(200) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '',
`CreatedOn` datetime(0) NULL DEFAULT NULL COMMENT '用户创建时间',
`CreatedIp` varchar(24) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '' COMMENT '创建用户时的IP地址',
`LoginCount` int(8) NULL DEFAULT 0 COMMENT '登录次数累加器',
`LatestLoginDate` datetime(0) NULL DEFAULT NULL COMMENT '最近一次登录时间',
`LatestLoginIp` varchar(24) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '' COMMENT '最近一次登录时的IP地址',
`ModifiedOn` datetime(0) NULL DEFAULT NULL COMMENT '最近修改时间',
`Type` int(2) NULL DEFAULT 0 COMMENT '用户类型[-1:超级管理员,0:一般用户]',
PRIMARY KEY (`Id`) USING BTREE,
UNIQUE INDEX `IX_LoginName`(`LoginName`) USING BTREE,
UNIQUE INDEX `IX_EmailAddress`(`EmailAddress`) USING BTREE,
INDEX `IX_CreatedOn`(`CreatedOn`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 0 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
SET FOREIGN_KEY_CHECKS = 1;请直接复制以上MySQL脚本，然后到对应数据执行即可，当然你也可以在这个版本的源码里面找到。
这个表就不准备提前写入示例数据了，一会我们用注册功能来写入数据。
创建领域实体和视图实体
在项目 【TsBlog.Domain】中的Entities文件夹中创建 User.cs 实体类：
using SqlSugar;
using System;
namespace TsBlog.Domain.Entities
{
[SugarTable("tb_user")]
public class User
{
[SugarColumn(IsIdentity = true, IsPrimaryKey = true)]
public int Id { get; set; }
public string LoginName { get; set; }
public string Password { get; set; }
public string RealName { get; set; }
public string EmailAddress { get; set; }
public string Avatar { get; set; }
public int Status { get; set; }
public string Telephone { get; set; }
public string Qq { get; set; }
public string WebsiteUrl { get; set; }
public DateTime CreatedOn { get; set; }
public string CreatedIp { get; set; }
public int LoginCount { get; set; }
public DateTime? LatestLoginDate { get; set; }
public string LatestLoginIp { get; set; }
public DateTime? ModifiedOn { get; set; }
public int Type { get; set; }
}
}再在项目【TsBlog.ViewModel】中创建 User 的文件夹，并创建以下几个视图实体类
LoginViewModel.cs
using System.ComponentModel.DataAnnotations;
namespace TsBlog.ViewModel.User
{
///
/// 用户登录视图实体
///
public class LoginViewModel
{
[Required(ErrorMessage = "请输入用户")]
[Display(Name = "用户名")]
public string UserName { get; set; }
[Required(ErrorMessage = "请输入密码")]
[Display(Name = "密码")]
[DataType(DataType.Password)]
public string Password { get; set; }
}
}RegisterViewModel.cs
using System.ComponentModel.DataAnnotations;
namespace TsBlog.ViewModel.User
{
///
/// 用户注册视图实体
///
public class RegisterViewModel
{
[Required(ErrorMessage = "请输入用户名")]
[Display(Name = "用户名")]
public string UserName { get; set; }
[Required(ErrorMessage = "请输入密码")]
[Display(Name = "密码")]
[DataType(DataType.Password), MaxLength(20, ErrorMessage = "密码最大长度为20个字符"), MinLength(6, ErrorMessage = "密码最小长度为6个字符")]
public string Password { get; set; }
[Required(ErrorMessage = "请输入确认密码")]
[Display(Name = "确认密码")]
[DataType(DataType.Password), Compare("Password", ErrorMessage = "两次密码不一致")]
public string ConfirmPassword { get; set; }
}
}UserViewModel.cs:
using System;
namespace TsBlog.ViewModel.User
{
///
/// 与领域用户实体对应的用户视图实体
///
public class UserViewModel
{
public int Id { get; set; }
public string LoginName { get; set; }
public string Password { get; set; }
public string RealName { get; set; }
public string EmailAddress { get; set; }
public string Avatar { get; set; }
public int Status { get; set; }
public string Telephone { get; set; }
public string Qq { get; set; }
public string WebsiteUrl { get; set; }
public DateTime CreatedOn { get; set; }
public string CreatedIp { get; set; }
public int LoginCount { get; set; }
public DateTime? LatestLoginDate { get; set; }
public string LatestLoginIp { get; set; }
public DateTime? ModifiedOn { get; set; }
public int Type { get; set; }
}
}仓储层
在项目【TsBlog.Repositories】中创建 IUserRepository.cs 以及其实现类 UserRepository.cs。
IUserRepository.cs：
using TsBlog.Domain.Entities;
namespace TsBlog.Repositories
{
public interface IUserRepository : IRepository
{
}
} UserRepository.cs：
using TsBlog.Domain.Entities;
namespace TsBlog.Repositories
{
public class UserRepository : GenericRepository, IUserRepository
{
}
} 服务层
在项目【TsBlog.Services】中创建 IUserService.cs 以及其实现类 UserService.cs。
IUserService.cs：
using TsBlog.Domain.Entities;
namespace TsBlog.Services
{
public interface IUserService : IService
{
User FindByLoginName(string loginName);
}
} UserService.cs:
using TsBlog.Domain.Entities;
using TsBlog.Repositories;
namespace TsBlog.Services
{
public class UserService : GenericService, IUserService
{
private readonly IUserRepository _repository;
public UserService(IUserRepository repository) : base(repository)
{
_repository = repository;
}
public User FindByLoginName(string loginName)
{
return _repository.FindByClause(x => x.LoginName == loginName);
}
}
} 创建加密类
在解决方案文件夹【1.Libraries】中创建一个新的项目，取名为【TsBlog.Core】，在此项目中先创建一个名为 Security的文件夹，再创建一个加密类 Encryptor.cs：
using System.Security.Cryptography;
using System.Text;
namespace TsBlog.Core.Security
{
///
/// 加密静态类
///
public static class Encryptor
{
//MD5加密一个字符串
public static string Md5Hash(string text)
{
MD5 md5 = new MD5CryptoServiceProvider();
md5.ComputeHash(Encoding.ASCII.GetBytes(text));
var result = md5.Hash;
var strBuilder = new StringBuilder();
foreach (var t in result)
{
strBuilder.Append(t.ToString("x2"));
}
return strBuilder.ToString();
}
}
}在用户注册或者登录时，我们将使用这个MD5加密用户的密码，并将其保存到数据库中（数据库中保存明文的密码是非常危险的，特别是在重要的安全级别很高的项目中，千(不)万(信)别(你)这(试)样(一)做(下)！！！）。
创建控制器
在项目【TsBlog.Frontend】中创建控制器 AccountController.cs，并添加如下代码：
AccountController.cs
using System;
using System.Web.Mvc;
using TsBlog.Core.Security;
using TsBlog.Domain.Entities;
using TsBlog.Services;
using TsBlog.ViewModel.User;
namespace TsBlog.Frontend.Controllers
{
///
/// 用户中心控制器
///
public class AccountController : Controller
{
///
/// 用户服务接口
///
private readonly IUserService _userService;
public AccountController(IUserService userService)
{
_userService = userService;
}
///
/// 登录页面
///
///
/// 提交登录请求
///
///
///
/// 注册页面
///
///
/// 提交注册请求
///
///
/// 添加必要JS库
由于之前我们将项目中的多余的JS库全部移除掉了，所以现在我们重新安装一下我们项目中将要到的一些JS库，包括：jQuery,Bootstrap等，都使用Nuget来安装，方便统一管理和升级。
安装jQuery：
安装Bootstrap:
安装jquery.validate.bootstrap:
安装完成后的JS库文件夹：
完成注册页面
在 [Views/Account]文件夹中创建注册页面视图 register.cshtml：
@model TsBlog.ViewModel.User.RegisterViewModel
@{
Layout = null;
}
用户注册
用户注册
@using (Html.BeginForm("register", "account", FormMethod.Post, new { @class = "account-form", role = "form" }))
{
@Html.ValidationMessage("error_message", new { @class = "error" })
@Html.AntiForgeryToken()
}
再在当前文件夹下创建 login.cshtml 视图文件用作登录页面：
@model TsBlog.ViewModel.User.LoginViewModel
@{
Layout = null;
}
用户登录
用户登录
@using (Html.BeginForm("login", "account", FormMethod.Post, new { @class = "account-form", role = "form" }))
{
@Html.ValidationMessage("error_message", new { @class = "error" })
@Html.AntiForgeryToken()
}
这两个页面均是响应式的布局，可适应不同设备。
好了，关于注册和登录的逻辑以及页面都完成了，那么运行项目，打开注册页面：http://localhost:54739/account/register,具体的注册请自行体验：
注册成功后，系统将带你到登录页面：
具体功能也请自行体验。
以上，我们只完成了注册和登录的基本功能，接下来我们来体验一下简单的权限访问，在本期教程之前，我们的: http://localhost:54739/home/index 以及 http://localhost:54739/home/post 是可以直接访问的，现在我们给这两个页面添加访问权限，即只有登录后才能访问，修改 HomeController.cs 如下：
using System.Web.Mvc;
using TsBlog.AutoMapperConfig;
using TsBlog.Services;
namespace TsBlog.Frontend.Controllers
{
public class HomeController : Controller
{
private readonly IPostService _postService;
public HomeController(IPostService postService)
{
_postService = postService;
}
public ActionResult Index()
{
//如果未登录，则跳转到登录页面
if (Session["user_account"] == null)
{
return RedirectToAction("login", "account");
}
return View();
}
public ActionResult Post()
{
//如果未登录，则跳转到登录页面
if (Session["user_account"] == null)
{
return RedirectToAction("login", "account");
}
var post = _postService.FindById(1).ToModel();
return View(post);
}
}
}重新编译项目，按F5运行，再打开地址：http://localhost:54739/home/index ,发生了什么情况？
是不是被重定向到了登录页面，要求你登录？
这就对了，输入你刚才注册的用户名和密码，登录后，系统会重新带你到：http://localhost:54739/home/index 页面。
OK，今天这期的关于用户注册和登录功能就介绍到这里，本期只实现了简单的功能，在后续的教程中将重构和封装相应的功能代码，敬请期待。。。
本期源码托管地址：https://github.com/lampo1024/...
数据库脚本文件请到目录下找：TsBlogdocumentscriptsmysqlv1.8\
如果你喜欢Rector的本系列文章，请为我点个大大的赞。
看完教程如果觉得还不过瘾的，遇到问题的，想“勾对”的，欢迎加入图享网官方QQ群：483350228。有什么，你懂的。。。
谢谢你的耐心阅读，未完待续，我们下期再见……
本文来源自 码友网 《一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](八)》