使用Boostrap框架寫一個登陸\註冊界面

時間 2019-11-25

原文原文鏈接

　　Bootstrap是一個Web前端開發框架，使用它提供的css、js文件能夠簡單、方便地美化HTML控件。通常狀況下，對控件的美化須要咱們本身編寫css代碼，並經過標籤選擇器、類選擇器、ID選擇器爲指定的控件使用。Bootstrap框架爲各類控件定義好了不少的類（class），在引入相關文件後，爲控件添加相應的類，控件就變成了這個類所規定的樣子了。Bootstrap如今有兩個版本，Bootstrap 3和Bootstrap 4。關於Bootstrap的更多信息，請查看相關文檔：http://www.bootcss.com/，http://www.runoob.com/bootstrap4/bootstrap4-install.html。css

Bootstrap小例子html

　　新建一個HTML頁面，引入在線的Bootstrap CDN。前端

 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title>Bootstrap示例</title>
 5     
 6     <!-- 新 Bootstrap4 核心 CSS 文件 -->
 7     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
 8  
 9     <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
10     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
11  
12     <!-- popper.min.js 用於彈窗、提示、下拉菜單 -->
13     <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
14  
15     <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
16     <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
17     
18 </head>
19 
20 <body>
21 
22 </body>
23 </html>

　　在<body>標籤中添加一個Button。jquery

1 <body>
2     <button>一個button</button>
3 </body>

　　運行後結果爲：ajax

　　爲這個button添加所屬的類（class）。數據庫

1 <body>
2     <button class='btn'>一個button</button>
3 </body>

　　結果爲：bootstrap

　　按鈕的樣子發生了變化，點擊這個按鈕還會出現淺藍色的邊框。爲按鈕進行其餘類的添加。後端

1 <body>
2     <button class='btn btn-primary'>一個button</button>
3 </body>

　　結果爲：瀏覽器

　　除了btn-primary，還有btn-secondary,btn-success,btn-info,btn-warning,btn-danger,btn-dark,btn-light,btn-link。每一種按鈕顏色不一樣，點擊後邊框的顏色也不一樣。框架

 1 <body>
 2     <button class='btn'>基本按鈕</button>
 3     <button class='btn btn-primary'>主要按鈕</button>
 4     <button class='btn btn-secondary'>次要按鈕</button>
 5     <button class='btn btn-success'>成功</button>
 6     <button class='btn btn-info'>信息</button>
 7     <button class='btn btn-warning'>警告</button>
 8     <button class='btn btn-danger'>危險</button>
 9     <button class='btn btn-dark'>黑色</button>
10     <button class='btn btn-light'>淺色</button>
11     <button class='btn btn-link'>連接</button>
12 </body>

各類樣式的button

　　熟悉了Bootstrap的基本使用，咱們就能夠進行登陸\註冊界面的編寫了。本身編寫css代碼也能夠寫出好看的界面，但使用Bootstrap框架會省去大量的工做，對css的要求也沒有那麼高。

1、建立一個asp.net空項目並複製數據庫到App_Data文件夾

　　打開Web.config文件，編寫數據庫鏈接字符串。

1   <!-- 數據庫鏈接-->
2   <connectionStrings>
3     <add name="connectionString" 
4          connectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\data1.mdf;Integrated Security=True" 
5          providerName="System.Data.SqlClient"/>
6   </connectionStrings>

　　有關建立asp.net空項目、新建App_Data文件夾（文件夾的名字不能更改，不然沒法建立數據庫的鏈接）、複製數據庫、更改Web.config文件的更多信息，請查看：兩種方法實現asp.net方案的先後端數據交互（aspx文件、html+ashx+ajax）。

2、編寫HTML頁面

　　右鍵項目，新建login.html，register.html，login.ashx，register.ashx。有關ashx文件（Generic Handler通常處理程序）和ajax的有關內容、數據庫訪問的具體語句，請查看：兩種方法實現asp.net方案的先後端數據交互（aspx文件、html+ashx+ajax）。

　　打開HTML頁面login.html，進行登陸表單的編寫。

 1 <body>
 2     <!-- 登陸表單 -->
 3     <form style="margin-left:500px;margin-top:200px;">
 4         <div class="form-group">
 5             <label for="user" stype="display:inline;">帳戶：</label>
 6             <input type="text" class="form-control" id="user" style="display:inline;width:200px;"autocomplete="off" />
 7         </div>
 8         <div class="form-group">
 9             <label for="password" style="display:inline;">密碼：</label>
10             <input type="text" class="form-control" id="password" style="display:inline;width:200px;"autocomplete="off" />
11         </div>
12         <button type="submit" class="btn btn-primary">登陸</button>
13         <button type="submit" class="btn btn-primary">註冊</button>
14     </form>
15 </body>

　　在最外側寫上<form>標籤，輸入框、標籤、按鈕就寫在<form>裏面。一個標籤對應一個輸入框，把它們放在一個div裏併爲div添加類form-group。在這個div內部，爲input起個ID名字，label中添加屬性for，值就是它對應的input輸入框的ID。這樣設置結構更清晰，也使用了Bootstrap提供的行距、間距等等。若是不這樣寫，也能夠，但可能會遇到一些問題。label和input的display方式都是inline，行內顯示。autocomplete=off清除輸入框的歷史輸入記錄。在form表單最後，添加兩個button。

　　點擊註冊按鈕將跳轉到register.html進行註冊，點擊登陸按鈕，若是用戶名和密碼正確，則跳轉到主界面index.html。

　　爲兩個button添加事件。window.open("跳轉的網址或頁面","打開方式")，這是window.open()的一種寫法，打開方式有4種：_self,_parent,_top,_blank，_blank是打開一個新的窗口，_self是在當前頁面打開目標頁面，但這裏不知道什麼緣由，_self參數用不了（沒有解決）。這裏關於asp.net有個小的提示，當編輯好代碼並保存後，點擊調試或者右鍵解決方案管理器中的文件-用瀏覽器打開，有時候代碼並無更新，須要在瀏覽器中打開源碼進行確認。能夠交換使用不一樣的瀏覽器進行調試。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>登陸界面</title>
 6 
 7     <!-- 新 Bootstrap4 核心 CSS 文件 -->
 8     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
 9 
10     <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
11     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
12 
13     <!-- popper.min.js 用於彈窗、提示、下拉菜單 -->
14     <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
15 
16     <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
17     <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
18 
19     <script>
20         function register() {
21             //跳轉到註冊界面register.html進行註冊
22             window.open("register.html", "_blank");  //_self,_parent,_top,_blank
23         }
24         function login() {
25             //登陸邏輯
26         }
27     </script>
28 </head>
29 <body>
30     <!-- 登陸表單 -->
31     <form style="margin-left:500px;margin-top:200px;">
32         <div class="form-group">
33             <label for="user" stype="display:inline;">帳戶：</label>
34             <input type="text" class="form-control" id="user" style="display:inline;width:200px;"autocomplete="off" />
35         </div>
36         <div class="form-group">
37             <label for="password" style="display:inline;">密碼：</label>
38             <input type="text" class="form-control" id="password" style="display:inline;width:200px;"autocomplete="off" />
39         </div>
40         <button type="submit" class="btn btn-primary" onclick="login()">登陸</button>
41         <button type="submit" class="btn btn-primary" onclick="register()">註冊</button>
42     </form>
43 </body>
44 </html>

　　在login.html頁面中，點擊註冊按鈕將跳轉到register.html頁面進行註冊。下面咱們對register.html頁面進行編輯。

　　編寫register.html頁面，和剛纔的登陸界面大致相同，只是去掉了登陸按鈕。在ajax的編寫裏，要特別注意的是異步async要設置成false,讀者能夠試一下true和false的區別。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>註冊界面</title>
 6 
 7     <!-- 新 Bootstrap4 核心 CSS 文件 -->
 8     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
 9 
10     <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
11     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
12 
13     <!-- popper.min.js 用於彈窗、提示、下拉菜單 -->
14     <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
15 
16     <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
17     <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
18 
19     <script>
20         function register() {
21             //jQuery寫法
22             var user = $('#user').val();
23             var password = $('#password').val();
24             //JavaScript原生寫法
25             //var user = document.getElementById('user').value;
26             //var password = document.getElementById('password').value;
27 
28             $.ajax({
29                 type: "post",  //post put get 等等
30                 url: "register.ashx",
31                 //編寫註冊功能時，要將異步設置爲false（缺省爲true）
32                 //若是async是ture,對於FireFox瀏覽器，會刷新掉alert()彈出框的內容
33                 //對於Chrome瀏覽器，第一次註冊時會執行error的回調函數，輸出「請求在鏈接過程當中出現錯誤..」
34  async:false,  
35                 data: {  //要傳入ashx文件的數據
36                     "user": user,
37                     "password": password
38                 },
39                 success: function (data, textStatus) {
40                     //鏈接至ashx文件成功時，執行函數
41                     //data是從ashx文件返回來的信息，能夠是字符串也能夠是一個對象
42                     //若是data是字符串，則能夠輸出data的值
43                     //若是data是對象，則能夠將這個對象的各屬性值賦給其餘變量
44                     //textStatus是表示狀態的字符串，這裏textStatus的值是"success"
45                     alert(data);
46                 },
47                 error: function (XMLHttpRequest, textStatus, errorThrown) {  //鏈接至ashx文件失敗時，執行函數
48                     //XMLHttpRequest在這個例子裏沒有用到
49                     //textStatus是表示狀態的字符串，這裏textStatus的值是"error"
50                     //errorThrown包含鏈接失敗的信息，能夠輸出查看
51                     alert("請求在鏈接過程當中出現錯誤..\n" + errorThrown);
52                 }
53             });
54         }
55     </script>
56 </head>
57 
58 <body>
59 <!-- 註冊表單 -->
60     <form style="margin-left:500px;margin-top:200px;">
61         <div class="form-group">
62             <label for="user" stype="display:inline;">帳戶：</label>
63             <input type="text" class="form-control" id="user" style="display:inline;width:200px;" autocomplete="off" />
64         </div>
65         <div class="form-group">
66             <label for="password" style="display:inline;">密碼：</label>
67             <input type="text" class="form-control" id="password" style="display:inline;width:200px;" autocomplete="off" />
68         </div>
69         <button type="submit" class="btn btn-primary" onclick="register()">確認註冊</button>
70     </form>
71 </body>
72 </html>

　　註冊功能對應的register.ashx文件：　　

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 
 6 using System.Data;
 7 using System.Data.SqlClient;
 8 
 9 namespace 登陸註冊
10 {
11     /// <summary>
12     /// Summary description for register
13     /// </summary>
14     public class register : IHttpHandler
15     {
16         //數據庫鏈接字符串
17         string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["connectionString"].ToString();
18 
19         public void ProcessRequest(HttpContext context)
20         {
21             context.Response.ContentType = "text/plain";
22             //context.Response.Write("Hello World");
23 
24             string user = context.Request["user"];
25             string password = context.Request["password"];
26 
27             SqlConnection conn = new SqlConnection(connectionString);
28             conn.Open();
29 
30             SqlCommand cmd = new SqlCommand();
31             cmd.Connection = conn;
32             cmd.CommandText = "SELECT * FROM 用戶表 WHERE 用戶名='" + user + "'";
33 
34             try
35             {
36                 if (cmd.ExecuteScalar() != null)
37                 {
38                     context.Response.Write("帳戶已存在！");
39                 }
40                 else
41                 {
42                     cmd.CommandText = "INSERT INTO 用戶表 VALUES('" + user + "','" + password + "')";
43                     if (cmd.ExecuteNonQuery() != 0)
44                     {
45                         context.Response.Write("信息添加成功！\n用戶名=" + user + "\n密碼=" + password);
46                     }
47                     else
48                     {
49                         context.Response.Write("信息添加失敗..");
50                     }
51                 }
52             }
53             catch(Exception e)
54             {
55                 context.Response.Write("命令執行過程當中出現錯誤..\n" + e.Message);
56             }
57 
58             conn.Close();
59         }
60 
61         public bool IsReusable
62         {
63             get
64             {
65                 return false;
66             }
67         }
68     }
69 }

　　註冊的運行結果：

　　註冊功能編寫完成，進行登陸功能的編寫，在function login(){ $.ajax() }中，與註冊界面相同，一樣要注意異步async要設置成false。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>登陸界面</title>
 6 
 7     <!-- 新 Bootstrap4 核心 CSS 文件 -->
 8     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
 9 
10     <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
11     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
12 
13     <!-- popper.min.js 用於彈窗、提示、下拉菜單 -->
14     <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
15 
16     <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
17     <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
18 
19     <script>
20         function register() {
21             //跳轉到註冊界面register.html進行註冊
22             window.open("register.html", "_blank");  //_self,_parent,_top,_blank
23         }
24         function login() {
25             //登陸邏輯
26             //jQuery寫法
27             var user = $('#user').val();
28             var password = $('#password').val();
29             //JavaScript原生寫法
30             //var user = document.getElementById('user').value;
31             //var password = document.getElementById('password').value;
32             $.ajax({
33                 type: "post",  //post put get 等等
34                 url: "login.ashx",
35                 //編寫登陸功能時，要將異步設置爲false（缺省爲true）
36                 //若是async是ture,對於FireFox瀏覽器，會刷新掉alert()彈出框的內容
37                 //對於Chrome瀏覽器，第一次註冊時會執行error的回調函數，輸出「請求在鏈接過程當中出現錯誤..」
38  async:false,
39                 data: {  //要傳入ashx文件的數據
40                     "user": user,
41                     "password": password
42                 },
43                 success: function (data, textStatus) {
44                     //鏈接至ashx文件成功時，執行函數
45                     //data是從ashx文件返回來的信息，能夠是字符串也能夠是一個對象
46                     //若是data是字符串，則能夠輸出data的值
47                     //若是data是對象，則能夠將這個對象的各屬性值賦給其餘變量
48                     //textStatus是表示狀態的字符串，這裏textStatus的值是"success"
49 
50                     if (data == "admin") {
51                         window.open("index.html", "_blank");
52                     }
53                     else {
54                         alert(data);  //這裏data是從ashx文件返回的「帳戶名或密碼不存在..
55                     }
56                 },
57                 error: function (XMLHttpRequest, textStatus, errorThrown) {  //鏈接至ashx文件失敗時，執行函數
58                     //XMLHttpRequest在這個例子裏沒有用到
59                     //textStatus是表示狀態的字符串，這裏textStatus的值是"error"
60                     //errorThrown包含鏈接失敗的信息，能夠輸出查看
61                     alert("請求在鏈接過程當中出現錯誤..\n" + errorThrown);
62                 }
63             });
64         }
65     </script>
66 </head>
67 <body>
68     <!-- 登陸表單 -->
69     <form style="margin-left:500px;margin-top:200px;">
70         <div class="form-group">
71             <label for="user" stype="display:inline;">帳戶：</label>
72             <input type="text" class="form-control" id="user" style="display:inline;width:200px;"autocomplete="off" />
73         </div>
74         <div class="form-group">
75             <label for="password" style="display:inline;">密碼：</label>
76             <input type="text" class="form-control" id="password" style="display:inline;width:200px;"autocomplete="off" />
77         </div>
78         <button type="submit" class="btn btn-primary" onclick="login()">登陸</button>
79         <button type="submit" class="btn btn-primary" onclick="register()">註冊</button>
80     </form>
81 </body>
82 </html>

　　相應login.ashx代碼：

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 
 6 using System.Data;
 7 using System.Data.SqlClient;
 8 
 9 namespace 登陸註冊
10 {
11     /// <summary>
12     /// Summary description for login
13     /// </summary>
14     public class login : IHttpHandler
15     {
16 
17         public void ProcessRequest(HttpContext context)
18         {
19             //數據庫鏈接字符串
20             string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["connectionString"].ToString();
21 
22             context.Response.ContentType = "text/plain";
23             //context.Response.Write("Hello World");
24 
25             string user = context.Request["user"];
26             string password = context.Request["password"];
27 
28             SqlConnection conn = new SqlConnection(connectionString);
29             conn.Open();
30 
31             SqlCommand cmd = new SqlCommand();
32             cmd.Connection = conn;
33             cmd.CommandText="SELECT * FROM 用戶表 WHERE 用戶名='"+user+"' AND 密碼='" + password + "'";
34 
35             try
36             {
37                 if (cmd.ExecuteScalar() != null)
38                 {
39                     context.Response.Write("admin");
40                 }
41                 else
42                 {
43                     context.Response.Write("帳戶名或密碼不存在..");
44                 }
45             }
46             catch(Exception e)
47             {
48                 context.Response.Write("命令執行過程當中出現錯誤..\n" + e.Message);
49             }
50 
51             conn.Close();
52         }
53 
54         public bool IsReusable
55         {
56             get
57             {
58                 return false;
59             }
60         }
61     }
62 }