欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用Boostrap框架写一个登录\注册界面

程序员文章站 2022-05-26 14:59:15
asp.net空项目中,使用Bootstrap框架,使用ashx+ajax方案编写了注册和登录界面。 ......

  bootstrap是一个web前端开发框架,使用它提供的css、js文件可以简单、方便地美化html控件。一般情况下,对控件的美化需要我们自己编写css代码,并通过标签选择器、类选择器、id选择器为指定的控件使用。bootstrap框架为各种控件定义好了很多的类(class),在引入相关文件后,为控件添加相应的类,控件就变成了这个类所规定的样子了。bootstrap现在有两个版本,bootstrap 3和bootstrap 4。关于bootstrap的更多信息,请查看相关文档:,。


bootstrap小例子

  新建一个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。

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

  运行后结果为:使用Boostrap框架写一个登录\注册界面

  为这个button添加所属的类(class)。

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

  结果为:使用Boostrap框架写一个登录\注册界面

  按钮的样子发生了变化,点击这个按钮还会出现浅蓝色的边框。为按钮进行其他类的添加。

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

  结果为:使用Boostrap框架写一个登录\注册界面

  除了btn-primary,还有btn-secondary,btn-success,btn-info,btn-warning,btn-danger,btn-dark,btn-light,btn-link。每一种按钮颜色不同,点击后边框的颜色也不同。

使用Boostrap框架写一个登录\注册界面
 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

  使用Boostrap框架写一个登录\注册界面

  熟悉了bootstrap的基本使用,我们就可以进行登录\注册界面的编写了。自己编写css代码也可以写出好看的界面,但使用bootstrap框架会省去大量的工作,对css的要求也没有那么高。


一、创建一个asp.net空项目并复制数据库到app_data文件夹

  使用Boostrap框架写一个登录\注册界面

  打开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文件的更多信息,请查看:。

 

二、编写html页面

  右键项目,新建login.html,register.html,login.ashx,register.ashx。有关ashx文件(generic handler一般处理程序)和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。

  使用Boostrap框架写一个登录\注册界面

  点击注册按钮将跳转到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文件:  

使用Boostrap框架写一个登录\注册界面
 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 }
register.ashx

  注册的运行结果:  

  使用Boostrap框架写一个登录\注册界面  使用Boostrap框架写一个登录\注册界面

  注册功能编写完成,进行登录功能的编写,在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代码:

使用Boostrap框架写一个登录\注册界面
 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 }
login.ashx

  登录界面运行结果:

使用Boostrap框架写一个登录\注册界面 使用Boostrap框架写一个登录\注册界面

 

这个例子使用的工程文件的链接分享(visual studio 2017):https://pan.baidu.com/s/1wmlgip7iw3ff5_ebhecdvw