asp.net完善注册登录+sqlite数据库

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

结合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"]的形式接收，提示结果显示在

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"]中，成功跳转主页后用于显示登录人的信息。