一個註冊、登錄系統的實現

時間 2020-08-22

標籤一個註冊登錄系統實現简体版

原文原文鏈接

學習筆記

git源碼連接：https://github.com/littleredhatli/webphp

目標1、使用Git上傳代碼

在任務開始時，我首先進行了用git上傳代碼的相關操做的學習數據庫

1）進入要上傳的倉庫，右鍵git bash here,添加遠程地址

$ git init

$ git remote add origin git@github.com:littleredhatli(git名）/web(版本庫名）.git

git init後文件目錄中出現一個隱藏的.git文件

2）添加文件名和評論

$ git add file

$ git commit -m "上傳的評論"

3）上傳到github

$ git push origin master

git push命令會將本地倉庫推送到遠程服務器。完成文件上傳。

目標2、靜態網頁的製做

實現一個註冊、登錄系統，首先完成註冊、登錄靜態頁面的製做

製做網頁使用的軟件：Hbuilder

1.html製做基本的網頁內容

1.註冊頁面

 1 <body>
 2     <div id="in">  
 3         <h1>註冊</h1>  
 4             <form method="post" action="register.php">  
 5                 <input type="text" required="required" placeholder="用戶名" name="id"/>  
 6                 <input type="text" required="required" placeholder="手機號" name="telephone"/>
 7                 <input type="text" required="required" placeholder="賬號" name="user"/>
 8                 <input type="password" required="required" placeholder="密碼" name="password"/>  
 9                 <button class="submit" type="button" onclick="http://127.0.0.1:8020/hello%20world/index.html">提交</button>
10             </form>  
12     </div> 
13     <img src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJlauzYiIIU3UAFNltyuxFDQAAH9GAKkOzMAU2XP642.jpg" width="1400" height="700">
14 </body>

沒有添加CSS樣式時註冊網頁的界面：

在沒有添加css樣式時，文本框這些版塊顯得很是樸素

2.登陸頁面

 1 <body>  
 2     <div id="login">  
 3         <h1>Login</h1>  
 4         <form method="post" action="register.php">  
 5             <input type="text" required="required" placeholder="用戶名" name="id"/>  
 6             <input type="password" required="required" placeholder="密碼" name="password"/>
 7             <button class="submit" type="submit">登陸</button>  
 8         </form>
 9     </div> 
10     <div id="new">
11         <h3><a href="http://www.baidu.com" style="text-decoration:none">註冊新帳號</a></h3>
12     </div>
13     <img src="http://desk.fd.zol-img.com.cn/t_s960x600c5/g5/M00/0F/09/ChMkJlauzYiIIU3UAFNltyuxFDQAAH9GAKkOzMAU2XP642.jpg" width="1400" height="700">
14 </body>

沒有css樣式的登錄頁面和上圖的註冊頁面形式相似

3.html標籤

在body標籤中輸入網頁上顯示的內容

<div>:<div>標籤的做用至關於一個容器,能夠把一些獨立的邏輯部分(頁面上相互關聯的一組元素)劃分出來

<div id="版塊名字」>···</div>

在div中使用id給一個版塊起一個名字，方便後面對版塊進行css操做

<form>:表單標籤，進行與用戶的交互

<form method="傳送方式(get/post)"  action="瀏覽者輸入的數據被傳送到的地方,好比一個PHP頁面(save.php)">···</form>

添加文本框

<input type="text/password"  name="名稱"/>

當type="text"時，輸入框爲文本輸入框；當type="password"時，輸入框爲密碼輸入框，自動進行加密

用name爲文本框命名，用於後臺操做

required 屬性用於規定必需在提交以前填寫輸入字段

<注> placeholder屬性用於描述可輸入內容的提示信息，提示會在輸入信息爲空時顯示，在字段得到焦點時消失。placeholder使用起來比在文本框前直接添加描述信息好看許多，我以爲很是的實用

<img>:爲網頁插入圖片

 <img src="圖片地址">

width、height可用來根據實際狀況調節圖片大小

<a>:在網頁中插入超連接

<a href="url"   target="_blank"(新建窗口打開）  style="text-decoration:none"(去掉超連接下劃線)>連接顯示的文本</a>

2.在html網頁中添加css樣式

在用html寫完網頁的內容後，爲其添加css樣式改變網頁效果

1.註冊頁面

 1 html{  
 2     width: 100%;   
 3     height: 100%;   
 4     overflow: hidden;   
 5     font-style:sans-serif;   
 6 }   
 7 body{   
 8     width: 100%;   
 9     height: 100%;   
10     font-family: 'Open Sans',sans-serif;   
11     margin: 0;   
12 }   
13 #in{   
14     position: absolute;   
15     top: 40%;   
16     left:50%;   
17     margin: -150px 0 0 -150px;   
18     width: 300px;   
19     height: 300px;   
20 }   
21 #in h1{   
22     color: white;   
23     text-shadow:0 0 20px;   
24     letter-spacing: 1px;   
25     text-align: center;   
26 }   
27 h1{   
28     font-size: 3em;   
29     margin: 0.67em 0;   
30 }   
31 input{   
32     width: 278px;   
33     height: 18px;   
34     margin-bottom: 10px;   
35     outline: none;   
36     padding: 10px;   
37     font-size: 18px;   
38     color: #fff;   
39       
40     border-top: 1px solid #312E3D;   
41     border-left: 1px solid #312E3D;   
42     border-right: 1px solid #312E3D;   
43     border-bottom: 1px solid #56536A;   
44     border-radius: 5px;   
45     background-color: #2D2D3F;   
46 }   
47 .submit{   
48     width: 300px;   
49     min-height: 20px;   
50     display: block;   
51     background-color: #4a77d4;   
52     border: 1px solid #3762bc;   
53     color: #fff;   
54     padding: 9px 14px;   
55     font-size: 20px;   
56     line-height: normal;   
57     border-radius: 5px;   
58     margin: 0;   
59 }  
60 #in a:link{
61     color:#FFFFFF;
62 }
63 #in a:hover{
64     color:#FFFFFF;
65 }
66 #in a:active{
67     color:blue;
68 }

2.登錄頁面（css樣式與註冊頁面相同）

 1 html{  
 2     width: 100%;   
 3     height: 100%;   
 4     overflow: hidden;   
 5     font-style:sans-serif;   
 6 }   
 7 body{   
 8     width: 100%;   
 9     height: 100%;   
10     font-family: 'Open Sans',sans-serif;   
11     margin: 0;   
12     background-color: #4A374A;   
13 }   
14 #login{   
15     position: absolute;   
16     top: 50%;   
17     left:50%;   
18     margin: -150px 0 0 -150px;   
19     width: 300px;   
20     height: 300px;   
21 }   
22 #login h1{   
23     color: white;   
24     text-shadow:0 0 20px;   
25     letter-spacing: 1px;   
26     text-align: center;   
27 }   
28 h1{   
29     font-size: 3em;   
30     margin: 0.67em 0;   
31 }   
32 input{   
33     width: 278px;   
34     height: 18px;   
35     margin-bottom: 10px;   
36     outline: none;   
37     padding: 10px;   
38     font-size: 18px;   
39     color: #fff;   
40       
41     border-top: 1px solid #312E3D;   
42     border-left: 1px solid #312E3D;   
43     border-right: 1px solid #312E3D;   
44     border-bottom: 1px solid #56536A;   
45     border-radius: 5px;   
46     background-color: #2D2D3F;   
47 }   
48 .submit{   
49     width: 300px;   
50     min-height: 20px;   
51     display: block;   
52     background-color: #4a77d4;   
53     border: 1px solid #3762bc;   
54     color: #fff;   
55     padding: 9px 14px;   
56     font-size: 18px;   
57     line-height: normal;   
58     border-radius: 5px;   
59     margin: 0;   
60 }  
61 
62 #new{   
63     position: absolute;   
64     top: 90%;   
65     left:70%;   
66     margin: -150px 0 0 -150px;   
67     width: 300px;   
68     height: 300px;   
69 }  
70 #new  h3{   
71     color: white;   
72     text-shadow:0 0 5px;   
73     letter-spacing: 3px;   
74     text-align: center;   
75 }   
76 h3{   
77     font-size: 0.9em;   
78     margin: 0.2em 0;   
79 }   
80 #new a:link{
81     color:#FFFFFF;
82 }
83 #new a:hover{
84     color:mediumpurple;
85 }
86 #new a:active{
87     color:blue;
88 }

View Code

3.css樣式

因爲作網頁的知識還很是有限，因此在網頁中只用到了一些很是簡單的css樣式，來調節字體效果和版塊位置。在之後的學習中但願本身能更加熟練的運用css來完成更酷炫的網頁效果。下面對我在網頁中用到的和目前掌握的css樣式作一些總結。

字體屬性：(font)

大小     font-size：      單位：px、em等
樣式     font-style：     italic(斜體) normal(正常)等
行間距   line-height:     單位：px、em等
粗細     font-weight:     bold(粗體) lighter(細體) normal(正常)
字間距   letter-spacing:  單位：px等  
對齊     text-align:      justify(兩端對齊) left(左對齊) right(右對齊)center(居中)

邊框屬性：(border)

邊框樣式  border-style: dotted;(點線) dashed;(虛線) solid;(實線）
邊框寬度  border-width: 
邊框顏色  border-color:#;

背景屬性(background)

色彩   background-color: #FFFFFF;

<注>css經常使用代碼

文字：

font-family : 宋體,sans-serif; /*文字字體*/

font-size : 9px; /*文字大小*/

font-style:itelic; /*文字斜體*/

letter-spacing : 1em; /*字間距離*/

line-height : 100%; /*設置行高*/

text-align:right; /*文字右對齊*/

text-align:left; /*文字左對齊*/

text-align:center; /*文字居中對齊*/

邊框留白：(內邊距）

padding-top:10px; /*上邊框留空白*/

padding-right:10px; /*右邊框留空白*/

padding-bottom:10px; /*下邊框留空白*/

padding-left:10px; /*左邊框留空白

設置邊界：（外邊距）

margin-top:10px; /*上邊界*/

margin-right:10px; /*右邊界值*/

margin-bottom:10px; /*下邊界值*/

margin-left:10px; /*左邊界值*/

定位：

Position: absolute; /*定位*/

樣式：

display:block;/*塊*/

overflow:hiden/*隱藏溢出*/

超連接樣式：

a:link /*未被訪問時超連接文字格式*/

a:visited /*瀏覽過的連接文字樣式*/

a:active /*按下連接時超連接的樣式*/

a:hover /*鼠標懸浮在超連接上的樣式*/

目標3、將靜態網頁與後端聯繫

因爲尚未接觸過數據庫及相關的概念和知識，在此次任務中沒有完成將靜態網頁與數據庫相連、輸出註冊用戶信息的功能。由於沒有實現，因此只能說一些我嘗試過程當中的一些挫折和收穫（因爲後端基礎爲零，下面的觀點內容可能會存在一些錯誤，望你們見諒且指出~）。

1.下載mysql

首先打開打開DOS窗口，cd +路徑進入到mysql bin目錄

命令：

1:查看服務器上當前存在什麼數據庫：

mysql> SHOW DATABASES;

2:建立一個數據庫user

mysql> Create DATABASE user;

3:選擇你所建立的數據庫

mysql> USE user; (按回車鍵出現Database changed 時說明操做成功)

4:查看如今的數據庫中存在什麼表

mysql> SHOW TABLES;

5:建立一個數據庫表（與上面的註冊信息聯繫）

mysql> Create TABLE MYTABLE (id INT(15), telephone INT(11),user INT(15),password INT(20));

6:顯示錶的結構：

mysql> DESCRIBE user;

7:往表中加入記錄

mysql> insert into MYTABLE values ("2333","1397063348","001","123456");

8:用文本方式將數據裝入數據庫表中（例如D:/mysql.txt）

mysql> LOAD DATA LOCAL INFILE "D:/mysql.txt" INTO TABLE MYTABLE;

9:導入.sql文件命令（未實現）

2.下載WAMP服務器

嘗試使用WAMP服務器下的phpadmin使Hbuilder中的php文件與mysql聯繫起來

phpadmin中的user數據庫存入了剛剛在mysql中輸入的用戶信息

思路：任務應完成在註冊頁面輸入的用戶信息直接寫入數據庫的功能，我在嘗試過程當中爲了先簡化難度，打算在數據庫中直接存好一位用戶的信息，使這個用戶能夠登陸，但最終因爲後端知識缺少也沒可以實現，停在了上圖所示的步驟···

總結：

雖然最終沒有實現一個完整的用戶註冊、登錄系統，但我在此次任務中收穫頗多···在前端方面，我作出了本身的第一個網頁；在後端方面，我從對後臺處理的一無所知開始慢慢接觸並瞭解。學習令人充實。我但願在之後的學習中我可以掌握作一個完整系統的知識，而後再回來更好更完整的完成這個任務。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。