用ASP.NET实现简单的超市管理系统-登录页面

一、  任务描述

1.     使用Asp.NET技术，完成超市商品管理系统

2.     开发工具：VS2010

3.     数据库：SQL Server 2008

4.     功能模块：登录、账户管理、商品类别管理、商品信息管理

 

二、  数据库设计

表结构：（建完表，并插入测试数据）

商品分类表：

表名：CommoditySort 商品分类表
字段名称	数据类型	说明	备注
SortID	int	商品分类ID	主键、自增
SortName	nvarchar(50)	分类名称

商品详细表：

表名：Commodity 商品详细表
字段名称	数据类型	说明	备注
CommodityID	int	商品ID	主键、自增
CommodityName	nvarchar(50)	商品名称
SortID	int	分类ID	外键，关联商品分类表
CommodityPrice	decimal(18,2)	价格
IsDiscount	bit	是否打折
ReducedPrice	decimal(18,2)	打折价格
CreateUserId	int	创建用户ID	关联用户表（创建时，自动获取当前登录用户Id）
CreateDate	datetime	创建时间	默认，当前时间

用户信息表：

表名：User 用户信息表
字段名称	数据类型	说明	备注
UserID	int	用户ID	主键、自增
UserName	nvarchar(50)	登录名
Password	nvarchar(50)	密码

三、模块设计

1、登录页面实现过程

效果图：

要求：设计相关界面，并使用css进行美化；

         点击登录按钮时，使用js判断用户名、密码是否为空，如果为空，则弹出相关提示；

        不为空，则进行后台先验证验证码是否输入正确是则继续判断：用户名和密码是否正确；

否则，弹出提示重新输入验证码！

        以上验证码、用户名和密码都正确，则跳转到商品管理主界面，否则，给出提示信息。

正式开始开发过程：

（1）配置Web.config

由于Web.config文件对于访问站点的用户来说是不可见的，也是不可访问的，所以为了系统

数据的安全和可操作性，可以在该文件中配置一些参数。本此项目主要在该文件中配置连接字符

串。代码如下：

  <connectionStrings>

<add name="MainConn" connectionString="server=.;database=CommoditySort;user=xg;pwd=xionggang123;Max Pool Size = 512;"
        providerName="System.Data.SqlClient" />

</connectionStrings>

注意：server:表示服务器名；database:服务器下的数据库名；user和pwd：登录数据库的登录名和密码；

（2）页面设计（主要部分）

包括一个五行三列的表格，然后在其中放入3个TextBox控件、一个Imge控件、两个按钮

从最简单的“重置按钮”，新建并设置单击事件即可,代码如下：

/// <summary>
        /// 重置
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void btnReset_Click(object sender, EventArgs e)
        {
            this.txtName.Text = "";
            this.txtPwd.Text = "";
        }

登录按钮（先利用js技术来提示输入名和密码不能为空）：

首先新建OnClientClick="return UserLogin()"单击事件方法

然后在<script></script>当中调用并设置单击事件，代码如下：

<script type="text/javascript">
        function UserLogin() {
            if ($("#txtName").val() == "") {
                alert('请输入用户名！');
                return false;
            }
            if ($("#txtPwd").val() == "") {
                alert('请输入密码！');
                return false;
            }
            return true;
        }
    </script>

注意：因为是在头部所以只有当以上方法成立之后才会触发onclick（）事件

用来验证：验证码、输入名和密码是否正确！代码如下：

/// <summary>
        /// 登录
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void btnLogin_Click(object sender, EventArgs e)
        {
            //获取输入名、密码和验证码
            string name = this.txtName.Text;
            string pwd = this.txtPwd.Text;
            string num = this.txtValidateNum.Text;
            //先判断验证码是否正确
            if (Session["ValidateNum"].ToString() == num.ToUpper())
            {
                StringBuilder sql = new StringBuilder();
                sql.AppendLine("SELECT * FROM CommodityUser ");
                sql.AppendLine("WHERE Username=@name and Password =@pwd");
                SqlParameter[] pms ={
                                   new SqlParameter("@name",SqlDbType.VarChar,50),
                                   new SqlParameter("@pwd",SqlDbType.VarChar,50)
                                   };
                pms[0].Value = name;
                pms[1].Value = pwd;
                DataSet ds = DbHelperSQL.Query(sql.ToString(), pms);
                //通过ds中是否包含行来判断用户是否通过验证
                if (ds.Tables[0].Rows.Count > 0)
                {
                    Session["UserID"] = ds.Tables[0].Rows[0]["UserID"];//将该用户的ID存入Session["UserID"]中
                    Response.Redirect("CommodityManage.aspx");//跳转到主页
                }
                else
                {
                    Response.Write("<script>alert('此用户名和密码无效！请重新填写')</script>");
                }
                
            }
            else
            {
                Response.Write("<script>alert('验证码错误！')</script>");
            }
        }