asp.net 完善注册登录+sqlite数据库
结合sqlite数据库,完善asp.net制作的web网页中的注册和登录操作。
1. Account-Register.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> <title>注册页面</title> <script src="../../Scripts/Common/JScript.js" type="text/javascript"></script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 用 户:<input id="name" type="text"/><br /><br /> 密 码:<input id="pwd1" type="text"/><br /><br /> 确认密码:<input id="pwd2" type="text"/><br /><br /> 验 证 码:<input id="code" type="text"/><br /><br /> <img id="vimg" src="/Common/Image" onclick="changeImage()" /> <input type="button" onclick="Register()" value="注册"/> <label id="showRegister" style="color:Red"></label> </asp:Content>
这里的页面采用了微软新建项目自带的母版格式。注册页有用户、密码、确认密码、图片验证码和注册按钮。
2. 点击注册按钮 onclick="Register()" 事件,保存在Scripts-Common-JScript.js中
function Register() {
var name = $("#name").val();
var pwd1 = $("#pwd1").val();
var pwd2 = $("#pwd2").val();
var code = $("#code").val();
//前台校验过滤
if (name != "") {
$.post("/Account/DoRegister", { name: name, pwd1: pwd1, pwd2: pwd2, code: code },
function (data) {
if (data == "0") {
$("#showRegister").html("注册成功");
window.location.href = "/account/login";
}
else if (data == "-1") {
$("#showRegister").html("用户名或密码为空");
}
else if (data == "-2") {
$("#showRegister").html("密码输入错误");
}
else if (data == "-3") {
$("#showRegister").html("用户名已存在");
}
else if (data == "-4") {
$("#showRegister").html("验证码错误");
}
});
}
else {
$("#showRegister").html("用户名为空");
}
}
function changeImage() {
var imgNode = document.getElementById("vimg");
imgNode.src = "/Common/Image/" + (new Date()).valueOf(); //加上时间的参数防止浏览器缓存
}
function Register()是前后台逻辑判断,前台通过$("#id").val()的方式获取id的值,后台利用request.form["name"]的形式接收,提示结果显示在id="showRegister"的<lable>上。jQuery通过ajax异步传输post,将值对交给后台判断"/Account/DoRegister"
function changeImage()是为了点击图片验证码,自变换的点击事件。通过对验证码vimg,加上时间参数来改变src的方式进行改变。
3. 后台逻辑判断 AccountController.cs
public ActionResult DoRegister() { string name = Request.Form["name"]; string pwd1 = Request.Form["pwd1"]; string pwd2 = Request.Form["pwd2"]; string code = Request.Form["code"]; //验证码 //后台验证 int res = 0; string checkCode = Session["Code"].ToString(); if (string.IsNullOrEmpty(name) || string.IsNullOrEmpty(pwd1)) { res = -1; } else if (pwd1 != pwd2) { res = -2; } else if (code.ToLower() != checkCode.ToLower()) //验证码全部转为小写 { res = -4; } else { //判断用户是否已经存在 List<MVCStudy.Model.User> userList = userBll.GetModelList("name= '" + name + "' and pwd= '" + pwd1 + "'"); if (userList.Count != 0) { res = -3; } else { //插入数据"" MVCStudy.Model.User userModel = new Model.User(); userModel.Name = name; userModel.Pwd = pwd1; userModel.AddTime = DateTime.Now.ToString(); userBll.Add(userModel); } } return Content(res.ToString()); }
前提已经建好User的sqlite数据库表,里面存放了name和pwd,用户名和密码。再次确认密码和密码做比较,图片验证码存放在session["Code"]中,与输入的code做比较,且比较时全部转为小写字母,不区分大小写。将注册输入符合规范且图片验证码输入正确的,先判断是否已经在数据库中存在,若存在则提示“该用户已存在,请直接登录”,否则,则添加到数据库中,并提示用户添加成功,并跳转到登录页面。
4. Account-Login.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> <title>登录页面</title> <script src="../../Scripts/Common/JScript.js" type="text/javascript"></script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 用 户:<input id="name" type="text"/><br /><br /> 密 码:<input id="pwd1" type="text"/><br /><br /> <%--<img id="vimg" src="/Common/Image" onclick="changeImage()" />--%> <input type="button" onclick="Login()" value="登录"/> <label id="showLogin" style="color:Red"></label> </asp:Content>
登录页面比较简单,只有用户、密码和登录按钮。(利用刚刚注册的用户c登录成功)
5. 登录按钮 onclick="Login()" 事件:
function Login() {
var name = $("#name").val();
var pwd1 = $("#pwd1").val();
$.post("/Account/DoLogin", { name: name, pwd1: pwd1 },
function (data) {
if (data == "0") {
$("#showLogin").html("登录成功");
window.location.href = "/home/index";
}
else if (data == "-1") {
$("#showLogin").html("用户名或密码为空");
}
else if (data == "-2") {
$("#showLogin").html("用户名或密码错误");
}
});
}
6. AccountController.cs-DoLogin函数:
MVCStudy.Business.User userBll = new Business.User(); public ActionResult DoLogin() { //后台c#获取前台js提交过来的数据 string name = Request.Form["name"]; string pwd1 = Request.Form["pwd1"]; int res = 0; if (string.IsNullOrEmpty(name)||string.IsNullOrEmpty(pwd1)) { res = -1; } else { List<MVCStudy.Model.User> userList = userBll.GetModelList("name= '"+name+"' and pwd= '"+pwd1+"'"); if (userList.Count == 0) { res = -2; } else { Session["user"] = userList[0].Name; } } return Content(res.ToString()); }
登录前,先新建一个MVCStudy.Business.User的userBll,利用GetModelList(“查找条件”)找出与输入的name和pwd相同的user,返回的是List<Model>的格式,取出userList[0],即为一条用户的信息,将userList[0].Name存放在Session["user"]中,成功跳转主页后用于显示登录人的信息。