网站设计与开发

• HTML(Hyper Text Mark-up Language 超文本标记语言）的缩写，标记：就是用来描述网页内容的一些特定符号。
• HTML不是编程语言，而是一种描述性的标记语言，用于描述网页中内容的显示方式，比如文字以什么颜色、什么大小来显示，这些都是利用HTML标记来实现的。
• HTML文档的创建方式：
  用HTML语言创建的文档手工直接编写（例如记事本）
  通过图形化的HTML开发软件自动生成代码，如VS2012, Dreamweaver
  由Web服务器上的动态网页程序生成

HTML语法

HTML最基本的语法是双标记语法：
<标记符>内容
标记符通常都是成对使用的，有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠”/”。
当浏览器打开HTML文件后，就会理解里面的标记符，然后把标记符对应的功能表达出来。如：

这是一个新的段落

表示一个新的正文段落

双标记语法的两种形式：

1. <标记符>内容
   如：
   

   登录

   
   
   …

2. <标记符 属性=“属性值”>内容
   如：
   

   登录

   
   …

单标记语法的两种形式：

1. <标记符 />
   如：
   
   
2. <标记符 属性=“属性值”/>
   如：
   

   ---

HTML文档基本结构：

    
    


    正文

……标识网页文件的开始与结束，所有的html元素都要放在这对标记中
……标识网页文件的头部信息，如编码、标题、CSS文件等
标识网页文件的标题
……标识网页文件的主体部分

修改登录界面布局

• CSS的全称是Cascading Style Sheet，中文翻译“层叠样式表”。实用CSS可以改变HTML的基本特性，从而控制传统网页上的元素，诸如精确的空白、段落缩进、文本的外观和链接的状态等等。这样，你就可以实现对网页元素的格式控制。 CSS不仅允许你指定单个网页的外观，还可以被用来为网站提供一致的界面。

• Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的，用于快速开发 Web 应用程序和网站的前端框架。
  Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的前端框架。

未成功登录界面.png

成功登录界面.png

ASP.NET是什么？

ASP.Net是一种动态网页技术，在服务器端运行.Net代码，动态生成HTML。

很多工作无法在浏览器端完成，比如存储数据、访问数据库、复杂的业务逻辑运算、安全性要求高的逻辑运算等。

服务端控件和HTML控件的生成关系：�在aspx页面中可以使用服务端控件，简化开发。但浏览器只认html，因此在包含服务端控件的页面被请求时,页面中的服务器端控件会组装成对应的HTML控件代码字符串，如：TextBox→。

服务器控件不是新的控件，在浏览器端仍然是生成html标签。服务端控件虽然好用，但是也有缺点，并不是什么地方用服务器端控件都好。

向系统中增加注册功能

 string connStr = ConfigurationManager.ConnectionStrings["Agriculture"].ConnectionString;
            SqlConnection sqlConn = new SqlConnection(connStr);
            try
            {
                // 连接数据库
                sqlConn.Open();

                // 构造命令发送给数据库
                String sqlStr = "insert into Users (email, password, name, type) values(@email, @pwd, @name, '操作员')";
                SqlCommand cmd = new SqlCommand(sqlStr, sqlConn);

                // 注意是用用户ID登录，而不是用户名，用户名可能会重复
                cmd.Parameters.Add(new SqlParameter("@email", this.email.Value.ToString()));
                cmd.Parameters.Add(new SqlParameter("@pwd", this.password.Value.ToString()));
                cmd.Parameters.Add(new SqlParameter("@name", this.name.Value.ToString()));

                // 将命令发送给数据库
                int res = cmd.ExecuteNonQuery();

                // 根据返回值判断是否插入成功
                if (res != 0)
                {
                    this.Response.Write("");
                }
                else
                {
                    this.Response.Write("");
                }
            }
            catch (InvalidOperationException exp)
            {
                this.Response.Write("");
            }
            catch (SqlException exp)
            {
                this.Response.Write("");
            }
            catch (Exception exp)
            {
                this.Response.Write("");
            }
            finally
            {
                sqlConn.Close();
            }
        }
    }

这是实现注册成功的编程重要代码

注册成功过程.gif

我们可以看到数据库里成功注册了一个用户

数据库里成功注册.PNG

实现登录过程

 string connStr = ConfigurationManager.ConnectionStrings["Agriculture"].ConnectionString;
            SqlConnection sqlConn = new SqlConnection(connStr);
            try
            {
                // 连接数据库
                sqlConn.Open();

                // 构造命令发送给数据库
                String sqlStr = "select * from Users where email=@email and password=@pwd";
                SqlCommand cmd = new SqlCommand(sqlStr, sqlConn);

                // 注意是用用户ID登录，而不是用户名，用户名可能会重复
                cmd.Parameters.Add(new SqlParameter("@email", this.email.Value.ToString()));
                cmd.Parameters.Add(new SqlParameter("@pwd", this.password.Value.ToString()));

                SqlDataReader dr = cmd.ExecuteReader();

                // 如果从数据库中查询到记录，则表示可以登录
                if (dr.HasRows)
                {
                    Session["LoginUser"] = this.email.Value.ToString();
                    FormsAuthentication.RedirectFromLoginPage(this.email.Value.ToString(), this.remember.Checked);
                }
                else
                {
                    this.Response.Write("");
                }
            }
            catch (InvalidOperationException exp)
            {
                this.Response.Write("");
            }
            catch (SqlException exp)
            { 
                this.Response.Write("");
            }
            catch (Exception exp)
            {
                this.Response.Write("");
            }
            finally
            {
                sqlConn.Close();
            }
        }
    }

登录.gif

更改密码实现过程

 public partial class reset : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void bt_Reset_Click(object sender, EventArgs e)
        {
            string connStr = ConfigurationManager.ConnectionStrings["Agriculture"].ConnectionString;
            SqlConnection sqlConn = new SqlConnection(connStr);
            try
            {
                // 连接数据库
                sqlConn.Open();

                // 构造命令发送给数据库
                String sqlStr = "update Users set password=@pwd where email=@email";
                SqlCommand cmd = new SqlCommand(sqlStr, sqlConn);

                // 注意是用用户ID登录，而不是用户名，用户名可能会重复
                cmd.Parameters.Add(new SqlParameter("@pwd", this.new_password.Value.ToString()));
                cmd.Parameters.Add(new SqlParameter("@email", Context.User.Identity.Name));

                // 将命令发送给数据库
                int res = cmd.ExecuteNonQuery();

                // 根据返回值判断是否更新成功
                if (res != 0)
                {
                    this.Response.Write("");
                }
                else
                {
                    this.Response.Write("");
                }
            }
            catch (InvalidOperationException exp)
            {
                this.Response.Write("");
            }
            catch (SqlException exp)
            {
                this.Response.Write("");
            }
            catch (Exception exp)
            {
                this.Response.Write("");
            }

更改密码.gif