主要：
網站搭建
實現登入頁面
分析及改進
1) 在apache安裝目錄下： 【conf\extra\httpd-vhosts.conf】加入網站配置
1 <VirtualHost *:80> 2 #網站根目錄 3 DocumentRoot "D:\htdocs\Demo" 4 #網站綁定的網域名稱 5 ServerName www.test.com 6 #網站別名 7 ServerAlias test.com 8 <Directory "D:\htdocs\Demo"> 9 #允許所有訪問 10 #allow from all 11 Require all granted 12 #允許分布式許可權配置(允許重寫)（.htacess） 13 AllowOverride All 14 #不顯示網站目錄的檔案結構 15 Options -indexes 16 </Directory> 17 </VirtualHost>
2) host檔案添加網域名稱解析。 host檔案位置：【C:\Windows\System32\drivers\etc\hosts】
1 127.0.0.1 www.test.com test.com
3) 重啟apache。 完成網站配置。
1）建立項目目錄blog 【D:\htdocs\Demo\blog】, 初始化git,並提交到碼雲
在項目目錄中右鍵》Git Bash 前提：已經安裝git
1 git init 2 git remote add origin 3 git pull origin master
2）使用者資料表pbg_users
1 CREATE TABLE `pbg_users` ( 2 `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '使用者主鍵', 3 `username` varchar(20) NOT NULL COMMENT '使用者名稱', 4 `pwd` char(32) NOT NULL COMMENT '密碼', 5 `email` varchar(50) NOT NULL DEFAULT '' COMMENT '註冊郵箱', 6 `token_email` varchar(32) NOT NULL DEFAULT '' COMMENT '郵箱驗證', 7 `flag` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '是否是管理員，1-管理員，2-普通使用者', 8 `created_at` datetime DEFAULT NULL COMMENT '註冊時間', 9 `updated_at` datetime DEFAULT NULL COMMENT '最後一次登入時間', 10 `login_ip` varchar(20) NOT NULL DEFAULT '' COMMENT '最後登入的ip地址', 11 `login_times` smallint(6) NOT NULL DEFAULT '0' COMMENT '登入次數', 12 PRIMARY KEY (`id`), 13 UNIQUE KEY `username` (`username`), 14 UNIQUE KEY `email` (`email`) 15 ) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
3) 登入介面【login.html】
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登入</title> 6 <link rel="stylesheet" type="text/css" href="layui/css/layui.css"> 7 <link rel="stylesheet" type="text/css" href="css/style.css"> 8 </head> 9 <body> 10 <p class="container"> 11 <p class="content"> 12 <form action="login.php" class="layui-form" method="post"> 13 <p class="layui-form-item"> 14 <h2>登入</h2> 15 </p><hr> 16 17 <p class="layui-form-item"> 18 <label class="layui-form-label">使用者名稱:</label> 19 <p class="layui-input-block"> 20 <input type="text" name="username" class="layui-input" required lay-verify="required" placeholder="請輸入使用者名稱" autocomplete="off" > 21 </p> 22 </p> 23 24 <p class="layui-form-item"> 25 <label class="layui-form-label">密 碼:</label> 26 <p class="layui-input-block"> 27 <input type="password" name="pwd" required lay-verify="required" placeholder="請輸入密碼" class="layui-input"> 28 </p> 29 </p> 30 31 <p class="layui-form-item"> 32 <p class="layui-input-block"> 33 <button lay-submit class="layui-btn">登入</button> 34 <button type="reset" class="layui-btn layui-btn-primary">重設</button> 35 </p> 36 </p> 37 </form> 38 </p> 39 </p> 40 <script type="text/javascript" src="layui/layui.js"></script> 41 <script> 42 layui.use('form', function(){ 43 var form = layui.form; 44 }); 45 </script> 46 </body> 47 </html>
4) 登入頁面樣式調整【css/style.css】
1 @charset "UTF-8"; 2 3 body { 4 background-color: #1E9FFF; 5 } 6 7 /*登入*/ 8 .container { 9 position: absolute; 10 left: 50%; 11 top:50%; 12 width: 500px; 13 margin-left: -250px; 14 margin-top: -200px;" 15 } 16 .content{ 17 background: #ffffff; 18 padding: 20px; 19 border-radius: 4px; 20 box-shadow: 5px 5px 50px #444444; 21 }
查看樣式表
5）登入操作： 處理登入資訊 【login.php】
1 <?php 2 /** 3 * 登入資料處理 4 * User: young 5 */ 6 header("content-type:text/html;charset=utf-8"); 7 //1-接收登入資訊 8 $data = array(); 9 $data['username'] = trim($_POST['username']); 10 $data['pwd'] = trim($_POST['pwd']); 11 12 //2-串連資料庫 13 $conn = @mysql_connect('localhost','root','root') or die('串連資料庫失敗!'); 14 // mysql_set_charset("utf8"); 15 // mysql_select_db("web"); 16 mysql_query('set names utf8',$conn); 17 mysql_query('use web',$conn); 18 19 //3-查詢資料庫 校正登入資訊 20 $sql = "select username,pwd from pbg_users where username='{$data['username']}'"; 21 $res = mysql_query($sql,$conn); 22 23 //4-登入結果提示資訊 24 if($res != false){ 25 $user = mysql_fetch_array($res); 26 if( $user['pwd'] == md5($data['pwd']) ){ exit('登入成功'); } 27 } 28 echo "使用者名稱或密碼不正確!"; 29 header('refresh:3; url=login.html');
點擊查看
6）登入介面效果
1）準備最佳化
檔案目錄結構，實現MVC結構
訪問形式： 實現單入口檔案訪問
2）提交代碼：
1 git add -A2 git commit -m "第一次提交 && 登入頁"3 git push origin master
查看本項目源碼： https://gitee.com/NewbiesYang/young_blog
小結：本次主要完成：
1. 網站配置
2. 登入資料表和登入頁製作，登入邏輯簡單實現
3. 下一步最佳化改進
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
