用户注册与登录功能实现 - (第七讲)
视频讲解如下：
工程源码下载：GPS定位系统系列教程源码下载
用户注册与登录主要涉及到前后端的数据交互、用户数据如何保存到数据库中，等一些常规操作。
修改流程如下：
1、添加HttpContext支持
用户登录功能为了确保每个网页能够独立记录当前的登录用户，我们需要添加HttpContext支持，用于保存当前登录的用户信息。在.net6.0中，修改Program.cs文件
添加builder代码，这段代码可以直接加到“builder.Services.AddRazorPages();”的后面。
// 添加分布式缓存
builder.Services.AddDistributedMemoryCache();
// 添加应用程序会话状态所需的服务。在web访问时，确保变量信息不丢失
builder.Services.AddSession();
添加app代码，这段代码可以直接加到“app.MapRazorPages();”的后面。
app.UseCookiePolicy();
app.UseSession();
2、修改Login控制器
主要是需要在LoginController.cs控制器中添加注册、登录、退出三个功能，添加内容如下：
using DbEntity.Tables;
using Microsoft.AspNetCore.Mvc;
using WebApplicationGPS.comm;
namespace WebApplicationGPS.Controllers
{
public class LoginController : Controller
{
public IActionResult Index()
{
return View();
}
/// <summary>
/// 登录
/// </summary>
/// <param name="userName"></param>
/// <param name="password"></param>
/// <returns></returns>
public ActionResult SubmitLogin(string userName, string password)
{
AjaxResult res = new AjaxResult() { Success = false };
try
{
// 确保登录信息不能为空
if (string.IsNullOrEmpty(userName) || string.IsNullOrEmpty(password))
throw new Exception($"用户名或密码不能为空");
// 确保登录的用户存在
User list = Res.MyDb.Tb_User.FirstOrDefault(x => x.Account == userName);
if (list == null) throw new Exception($"该用户不存在");
// 确保登录的用户密码正确
if (list.Password != password) throw new Exception($"密码输入错误");
// 确保登录的用户未被注销，注销时我们不删除用户信息，确保该信息不会被二次注册
if (list.DeleteFlag == 1) throw new Exception($"该账号已被注销");
else
{
// 将登录的用户信息保存在缓存，供全局调用
HttpContext.Session.Remove("user");
HttpContext.Session.SetString("user", list.ToJson());
res.Success = true;
}
Res.MyDb.SaveChanges();
}
catch (Exception e)
{
res.ErrorCode = e.Message;
}
return Content(res.ToJson());
}
/// <summary>
/// 注册
/// </summary>
/// <param name="userName"></param>
/// <param name="password"></param>
/// <returns></returns>
public ActionResult NewUser(string userName, string userText, string password)
{
AjaxResult res = new AjaxResult() { Success = false };
try
{
// 注册信息检测，确保信息符合注册要求
if (userName == null) userName = "";
if (userText == null) userText = "";
if (password == null) password = "";
userName = userName.Trim();
userText = userText.Trim();
password = password.Trim();
if (userName == "" || string.IsNullOrEmpty(userName.Trim())) throw new Exception("用户名不能为空");
if (userText == "" || string.IsNullOrEmpty(userText.Trim())) throw new Exception("昵称不能为空");
if (password == "" || string.IsNullOrEmpty(password.Trim())) throw new Exception("密码不能为空");
// 将用户名全部设置成小写进行检测，确保注册信息的唯一性
User u1 = Res.MyDb.Tb_User.FirstOrDefault(x => x.Account.Trim().ToLower() == userName.ToLower());
if (u1 != null) throw new Exception("用户名已存在");
if (userName.Length > 20) throw new Exception("用户名太长了");
User u2 = Res.MyDb.Tb_User.FirstOrDefault(x => x.NickName.Trim().ToLower() == userText.ToLower());
if (u2 != null) throw new Exception("昵称已存在");
if (userText.Length > 8) throw new Exception("昵称太长了");
// 将注册信息保存到数据库
User NewUser = new User()
{
CreateTime = DateTime.Now,
UpdateTime = DateTime.Now,
UserId = Guid.NewGuid().ToString(),
Account = userName,
Password = password,
NickName = userText,
Level = 1,
};
Res.MyDb.Tb_User.Add(NewUser);
Res.MyDb.SaveChanges();
res.Success = true;
}
catch (Exception e)
{
res.ErrorCode = e.Message;
}
return Content(res.ToJson());
}
/// <summary>
/// 退出
/// </summary>
/// <returns></returns>
public ActionResult OutUser()
{
AjaxResult res = new AjaxResult() { Success = false };
try
{
// 退出数据库，删除缓存中的登录信息
HttpContext.Session.Remove("user");
res.Success = true;
}
catch { }
return Content(res.ToJson());
}
}
}
LoginController.cs控制器中需要用到两个类文件（具体内容请参考工程源代码）：
comm/AjaxResult.cs：js进行请求时，返回的数据结构
comm/module.cs：一些用到的数据转换方法都放这里，目前只有个对象转Json的功能。
3、添加POST请求
最后是在login.js中，实现我们的post请求，请求控制器中的注册和登录接口，代码如下：
$('#logincheck').click(function () {
var u = $("#username");
var t = $("#usertext");
var p1 = $("#userpwd1");
var p2 = $("#userpwd2");
if (p1.val() == p2.val()) {
$.post('Login/NewUser', { userName: u.val(), userText: t.val(), password: p1.val() }, function (resJson) {
var res = JSON.parse(resJson);
if (!res.Success) {
layer.alert(res.ErrorCode, { title: '注册失败', icon: 5 });
}
else {
layer.alert('注册成功！', {
title: '成功',
icon: 1,
yes: function () {
window.location = '/Login';
}
});
}
});
}
else {
var index = layer.alert('密码不一致', {
title: '注册失败',
icon: 5,
yes: function () {
layer.close(index);
return;
}
});
}
});
$('#logincheck2').click(function () {
var u = $("#user_name");
var p = $("#userpwd");
$.post('Login/SubmitLogin', { userName: u.val(), password: p.val() }, function (resJson) {
var res = JSON.parse(resJson);
if (!res.Success) {
layer.alert(res.ErrorCode, { title: '登录失败', icon: 5 });
}
else {
window.location = 'Home';
}
});
});
注意：前面注册页面有个邮箱一栏，我这里删除了，简化一下注册信息。
3、运行测试
到这里，我们的修改就完成了，运行我们的程序进行注册和登录：
注册信息如下：
