主要:
- 站点搭建
- 实现登录页面
- 分析及改进
一,站点搭建
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 all11 ????????Require all granted12 ????????#允许分布式权限配置(允许重写)(.htacess)13 ????????AllowOverride All14 ????????#不显示站点目录的文件结构15 ????????Options -indexes16 ??</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 https://gitee.com/NewbiesYang/young_blog3 ?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 <div class="container">11 ????<div class="content">12 ????????<form action="login.php" class="layui-form" method="post">13 ????????????<div class="layui-form-item">14 ????????????????<h2>登录</h2>15 ????????????</div><hr>16 17 ????????????<div class="layui-form-item">18 ????????????????<label class="layui-form-label">用户名:</label>19 ????????????????<div class="layui-input-block">20 ????????????????????<input type="text" name="username" class="layui-input" required ?lay-verify="required" ?placeholder="请输入用户名" autocomplete="off" >21 ????????????????</div>22 ????????????</div>23 24 ????????????<div class="layui-form-item">25 ????????????????<label class="layui-form-label">密 码:</label>26 ????????????????<div class="layui-input-block">27 ????????????????????<input type="password" name="pwd" required lay-verify="required" placeholder="请输入密码" ?class="layui-input">28 ????????????????</div>29 ????????????</div>30 31 ????????????<div class="layui-form-item">32 ????????????????<div class="layui-input-block">33 ????????????????????<button ?lay-submit class="layui-btn">登录</button>34 ????????????????????<button type="reset" class="layui-btn layui-btn-primary">重置</button>35 ????????????????</div>36 ????????????</div>37 ????????</form>38 ????</div>39 </div>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. 下一步优化改进
php源码建博客1--搭建站点-实现登录页面
原文地址:https://www.cnblogs.com/yangp67/p/9241505.html