网站设计与开发

  • 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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,193评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,306评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,130评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,110评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,118评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,085评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,007评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,844评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,283评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,508评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,395评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,985评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,630评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,797评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,653评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,553评论 2 352

推荐阅读更多精彩内容