美文网首页
网站设计与开发

网站设计与开发

作者: 我瞌睡来忙了 | 来源:发表于2018-06-22 17:26 被阅读0次
    • HTML(Hyper Text Mark-up Language 超文本标记语言)的缩写,标记:就是用来描述网页内容的一些特定符号。
    • HTML不是编程语言,而是一种描述性的标记语言,用于描述网页中内容的显示方式,比如文字以什么颜色、什么大小来显示,这些都是利用HTML标记来实现的。
    • HTML文档的创建方式:
      用HTML语言创建的文档手工直接编写(例如记事本)
      通过图形化的HTML开发软件自动生成代码,如VS2012, Dreamweaver
      由Web服务器上的动态网页程序生成

    HTML语法

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

    双标记语法的两种形式:

    1. <标记符>内容</标记符>
      如:
      <p>登录</p>
      <div>…</div>

    2. <标记符 属性=“属性值”>内容</标记符>
      如:
      <p align=“center”>登录</p>
      <body bgcolor=“red”>…</body>

    单标记语法的两种形式:

    1. <标记符 />
      如:
      <br />
    2. <标记符 属性=“属性值”/>
      如:
      <hr width=“80%”/>

    HTML文档基本结构:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>
    <body>
        正文
    </body>
    </html>
    

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

    修改登录界面布局

    • 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→<input type=“text”/>。

    服务器控件不是新的控件,在浏览器端仍然是生成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("<script>alert('注册成功');window.location='login.aspx';</script>");
                    }
                    else
                    {
                        this.Response.Write("<script>alert('注册失败');</script>");
                    }
                }
                catch (InvalidOperationException exp)
                {
                    this.Response.Write("<script>alert('无法连接到数据库');</script>");
                }
                catch (SqlException exp)
                {
                    this.Response.Write("<script>alert('数据库操作失败。已存在该用户?');</script>");
                }
                catch (Exception exp)
                {
                    this.Response.Write("<script>alert('未知错误');</script>");
                }
                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("<script>alert('用户名或密码错误');</script>");
                    }
                }
                catch (InvalidOperationException exp)
                {
                    this.Response.Write("<script>alert('无法连接到数据库');</script>");
                }
                catch (SqlException exp)
                { 
                    this.Response.Write("<script>alert('数据库操作失败。不存在该用户?');</script>");
                }
                catch (Exception exp)
                {
                    this.Response.Write("<script>alert('未知错误');</script>");
                }
                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("<script>alert('更新成功');window.location='login.aspx';</script>");
                    }
                    else
                    {
                        this.Response.Write("<script>alert('更新失败');</script>");
                    }
                }
                catch (InvalidOperationException exp)
                {
                    this.Response.Write("<script>alert('无法连接到数据库');</script>");
                }
                catch (SqlException exp)
                {
                    this.Response.Write("<script>alert('数据库操作失败');</script>");
                }
                catch (Exception exp)
                {
                    this.Response.Write("<script>alert('未知错误');</script>");
                }
    
    更改密码.gif

    相关文章

      网友评论

          本文标题:网站设计与开发

          本文链接:https://www.haomeiwen.com/subject/kknkyftx.html