【B/S】系统登录

前言

下载了一个登录页面，特别好看，不过它的用户名、密码文本框和登录按钮不是asp控件，而是input标签。如果是asp控件的话，很容易从界面获取到输入的用户名和密码，并在button控件点击事件下写连接数据库的操作。但是都是input标签的话就麻烦一点了。我们需要JavaScript的配合来完成前台到后台的传值。工具：VS、SQL Server、C#。

具体操作

（1）新建一个网站。步骤：打开VS——文件——新建——网站——ASP.NET空网站——确定。
（2）在新建的空网站项目上右击——新建——Web窗体——确定。
（3）下载一个登录页面，链接1、链接2。
（4）具体放置的位置就不多提了，把index里面的代码复制到新建的Default.aspx中，把相应的资源文件放置到新建的文件夹下，具体效果如下图所示。

（5）在body标签内添加一段JS代码，在js文件夹下添加一个jquery文件（链接）并拖到head标签中，在Default.aspx.cs写一个方法。

<script type="text/javascript">
        function test() {
            var a = document.getElementById("u").value;
            var b = document.getElementById("p").value;
            $.ajax({
                type: "POST",
                url: "Default.aspx/hite",

                data: "{a:'" + a + "',b:'" + b + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    alert(result.d);
                }
            });
        }
</script>

[WebMethod]
public static string hite(string a, string b)
{
    string connStr = ConfigurationManager.ConnectionStrings["connStr"].ConnectionString;
    SqlConnection conn = new SqlConnection(connStr);
    string sql = "select userName,userPassword from UserManager where userName = @uid And userPassword = @pwd";
    SqlCommand cmd = new SqlCommand(sql, conn);
    SqlParameter[] spa = new SqlParameter[] { 
        new SqlParameter("@uid",a),
        new SqlParameter("@pwd",b)
    };
    cmd.Parameters.AddRange(spa);
    conn.Open();
    using (SqlDataReader dr = cmd.ExecuteReader())
    {
        if (dr.HasRows)
        {
            return "登录成功！";
        }
        else
        {
            return "登录失败！";
        }
    }
}

（6）最后一步，将Default.aspx中登录的input中type属性改为button，添加一个onclieck属性，并赋值test()，即如下所示。

input type="button" value="登 录" style="width:150px;" class="button_blue" onclick="test()"/></div>

（7）界面展示

总结

其中，后台连接数据库的配置文件我没写，大家根据自己情况添加。（源代码，VS打开网站，选择文件夹，配置一下连接数据库的信息即可使用）