reg.php
<?php include 'inc/header.php' ?>
<div class="container">
<div class="row">
<form class="form-horizontal" role="form" action="add.php" method="post">
<div class="col-md-6 col-md-offset-3 control-label" style="border: 1px solid #6666BB;border-radius: 4px; margin-bottom: 20px">
<h3 class="text-center">用户注册</h3>
<div class="form-group">
<label for="" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-7">
<input type="text" class="form-control" name="username" id="username">
</div>
<div class="col-sm-3 control-label" id="Info" style="text-align: left"></div >
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-7">
<input type="email" class="form-control" name="email" id="email">
</div>
<div class="col-md-3 control-label text-left" id="emailInfo" style="text-align: left"></div >
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">密码</label>
<div class="col-sm-7">
<input type="password" class="form-control" name="password1">
</div>
<div class="col-md-3 control-label text-left" id="password1Info" style="color: #0000cc"></div >
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-7">
<input type="password" class="form-control" name="password2">
</div>
<div class="col-md-3 control-label text-left" id="password1Info" style="color: #0000cc"></div >
</div>
<div class="form-group">
<div class="text-center">
<button type="submit" class="btn btn-default">注册</button>
</div>
</div>
</div>
</form>
</div>
</div>
<script>
$("#username").blur(function(){
$.post("nameCheck.php",{username:$("#username").val()},function(nameResult){
$("#Info").html(nameResult);
})
});
$('#email').blur(function () {
$.post("emailCheck.php",{email:$("#email").val()},function (emailResult) {
console.log(emailResult);
$("#emailInfo").html(emailResult)
})
})
</script>
<?php include "inc/footer.php"; ?>ajax检测用户名 nameCheck.php
<?php
$username = trim($_POST['username']);
if (empty($username)){
echo '<span style="color: red;font-weight: bold">用户名不能为空</span>';
} else {
require 'inc/connect.php';
$sqlUsername= "SELECT * FROM `user` WHERE `username`= '$username'";
$stmt = $pdo->query($sqlUsername);
if (true == $stmt) {
if ($stmt->rowCount() > 0) {
echo '<span style="color: red;font-weight: bold">用户名已注册</span>';
} else {
echo '<span style="color: green;font-weight: bold">恭喜，可以注册</span>';
}
} else { //如果PDOStatement创建失败
print_r($pdo->errorInfo());
}
}
ajax检测邮箱 emailCheck.php
<?php
$email = trim($_POST['email']);
if (empty($_POST['email'])) {
echo '<span style="color: red;font-weight: bold">邮箱不能为空</span>';
} else {
require 'inc/connect.php';
$sqlemail = "SELECT * FROM `user` WHERE `email`='$email' ";
$stmt = $pdo->query($sqlemail);
if (true == $stmt) {
if ($stmt->rowCount()>0) {
echo '<span style="color: red;font-weight: bold">该邮箱已注册</span>';
}else {
echo '<span style="color: green;font-weight: bold">恭喜，可以注册</span>';
}
} else {
print_r($pdo->errorInfo());
}
}
数据库配置config.php
<?php
$dsn= "mysql:host=localhost; dbname=demo";
$userName = "root";
$password = "root";
数据库连接connect.php
<?php
header('content-type:text/html;charset=utf-8');
require 'config.php';
$pdo = new PDO($dsn, $userName, $password);头部文件header.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首页布局</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<div class="row"> <!--头部开始-->
<div class="col-md-12">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">名称</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">分类 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">信息统计</a></li>
<li><a href="#">人员统计</a></li>
<li><a href="#">信息发布</a></li>
<li><a href="#">待定项目</a></li>
<li><a href="#">待定项目</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
<input type="text" class="form-control" id="search" placeholder="搜索......"
onfocus="this.placeholder=''" onblur="this.placeholder='搜索......'">
<span class="input-group-btn">
<button class="btn btn-success">搜索</button>
</span>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="reg.php"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
<li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div> <!--头部结束-->
尾部文件footer.php
<div class="row"> <!--底部开始-->
<div class="col-md-12">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<p style="text-align: center;margin-bottom: 15px;margin-top: 15px;color: #9d9d9d"> ©2017
<a href="" class="navbar-link">无名小站</a>. ALL RIGHTS RESERVED.
</p>
</div>
</nav>
</div>
</div> <!--底部结束-->
</div>
</body>
</html>
注册验证add.php
<?php
include 'inc/header.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
$error = [];
if (empty($_POST['username'])){
$error[] = '未输入用户名，请重新输入';
} else {
$username = trim($_POST['username']);
}
if (empty($_POST['email'])){
$error[] = '请输入邮箱地址';
} else {
$email = trim($_POST['email']);
}
if (empty($_POST['password1'])){
$error[] = '请输入密码';
} else {
if (empty($_POST['password2'])){
$error[] = '请输入确认密码';
} else {
if ($_POST['password1'] == $_POST['password2']){
$password = trim($_POST['password1']);
} else {
$error[] = '两次输入密码不一致';
}
}
}
if (empty($error)){
require 'inc/connect.php';
$stmt = $pdo ->prepare("INSERT `user`(username, email, password) VALUES(:username, :email, sha1(:password))");
$stmt->bindParam(':username', $username);
$stmt->bindParam(':email', $email);
$stmt->bindParam(':password', $password);
if ($stmt->execute()){
echo '注册成功';
} else {
echo '注册失败'.$stmt->errorInfo().'';
}
} else {
foreach ($error as $message){
echo '<h3>错误信息：'.$message.'</h3>';
}
}
}
include 'inc/footer.php';首页布局，使用bootstrap index.php
<?php include 'inc/header.php' ?>
<div class="row">
<div class="col-md-3 hidden-xs"> <!--左侧导航栏开始-->
<div class="panel panel-default"> <!--左侧站点介绍-->
<div class="panel-heading">
<h3 class="panel-title">
站点介绍
</h3>
</div>
<div class="panel-body">
站点介绍内容
</div>
</div><!--左侧站点介绍结束-->
<div class="panel panel-default"><!--左侧分类列表开始-->
<div class="panel-heading">
<h3 class="panel-title">
分类目录
</h3>
</div>
<div class="panel-body">
<a href="#" class="list-group-item ">信息统计</a>
<a href="#" class="list-group-item">故障统计</a>
<a href="#" class="list-group-item">人员统计</a>
<a href="#" class="list-group-item">信息发布</a>
<a href="#" class="list-group-item">待定项目</a>
</div>
</div> <!--左侧分类列表结束-->
</div><!--左侧导航栏结束-->
<div class="col-md-9 col-xs-12"><!--最新信息更新内容开始-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!--幻灯片开始-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.runoob.com//wp-content/uploads/2014/07/slide1.png" alt="...">
<div class="carousel-caption">
幻灯片测试
</div>
</div>
<div class="item">
<img src="http://www.runoob.com//wp-content/uploads/2014/07/slide2.png" alt="...">
<div class="carousel-caption">
幻灯片
</div>
</div>
<div class="item">
<img src="http://www.runoob.com//wp-content/uploads/2014/07/slide3.png" alt="...">
<div class="carousel-caption">
幻灯片
</div>
</div>
</div>
<!-- 幻灯片控制 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">上一页</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">下一页</span>
</a>
</div> <!--幻灯片结束-->
<div class="page-header">
<h3>最新信息
<small>最近更新的内容</small>
</h3>
</div>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
data-toggle="tab">待定项目</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
data-toggle="tab">待定项目</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">待定项目</a>
</li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">待定项目</a>
</li>
</ul>
<div class="tab-content"><!-- 标签面板开始 -->
<div role="tabpanel" class="tab-pane active" id="home">
<div class="panel panel-info"> <!--选项卡1列表开始-->
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-4">
<a href="#" class="thumbnail">
<img src="http://www.runoob.com//wp-content/uploads/2014/07/slide1.png" alt="...">
</a>
</div>
<div class="title">
<h3>新闻标题</h3>
<p>内容</p>
</div>
</div>
<div class="panel-footer">
<a href="">
<span class="glyphicon glyphicon-calendar "></span>
<small>
<em>2017.12.23</em>
</small>
</a>
<a href="">
<span class="glyphicon glyphicon-comment"></span>
<small>
<em>3</em>条评论
</small>
</a>
<a href="">
<span class="glyphicon glyphicon-eye-open"></span>
<small>
<em>144</em>次阅读
</small>
</a>
<a href="">
<span class="glyphicon glyphicon-thumbs-up"></span>
<small>
<em>123</em>次点赞
</small>
</a>
<a href="" style="float: right" class="btn-link">
<small>阅读全文</small>
<span class="glyphicon glyphicon-chevron-right "></span>
</a>
</div>
</div>
</div><!--选项卡1列表结束-->
<div class="panel panel-info"> <!--选项卡2列表开始-->
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-4">
<a href="#" class="thumbnail">
<img src="http://www.runoob.com/wp-content/uploads/2014/07/slide1.png" alt="...">
</a>
</div>
<div class="title">
<h3>新闻标题</h3>
<p>内容</p>
</div>
</div>
<div class="panel-footer">
<a href="">
<span class="glyphicon glyphicon-calendar "></span>
<small>
<em>2017.12.23</em>
</small>
</a>
<a href="">
<span class="glyphicon glyphicon-comment"></span>
<small>
<em>3</em>条评论
</small>
</a>
<a href="">
<span class="glyphicon glyphicon-eye-open"></span>
<small>
<em>144</em>次阅读
</small>
</a>
<a href="">
<span class="glyphicon glyphicon-thumbs-up"></span>
<small>
<em>123</em>次点赞
</small>
</a>
<a href="">
<small>阅读全文</small>
<span class="glyphicon glyphicon-chevron-right "></span>
</a>
</div>
</div>
</div><!--选项卡2列表结束-->
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="panel panel-default"> <!--选项卡1列表开始-->
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-4">
<a href="#" class="thumbnail">
<img src="http://www.runoob.com//wp-content/uploads/2014/07/slide1.png" alt="...">
</a>
</div>
<div class="title">
<h3>新闻标题2</h3>
<p>内容2</p>
</div>
</div>
<div class="panel-footer">
<a href="">
<span class="glyphicon glyphicon-calendar "></span>
<small>
<em>2017.12.23</em>
</small>
</a>
<a href="">
<span class="glyphicon glyphicon-comment"></span>
<small>
<em>3</em>条评论
</small>
</a>
<a href="">
<span class="glyphicon glyphicon-eye-open"></span>
<small>
<em>144</em>次阅读
</small>
</a>
<a href="">
<span class="glyphicon glyphicon-thumbs-up"></span>
<small>
<em>123</em>次点赞
</small>
</a>
<a href="">
<small>阅读全文</small>
<span class="glyphicon glyphicon-chevron-right "></span>
</a>
</div>
</div>
</div><!--选项卡1列表结束-->
<div class="panel panel-default"> <!--选项卡2列表开始-->
<div class="panel-body">
<div class="row">
<div class="col-xs-6 col-md-4">
<a href="#" class="thumbnail">
<img src="http://www.runoob.com//wp-content/uploads/2014/07/slide1.png" alt="...">
</a>
</div>
<div class="title">
<h3>新闻标题</h3>
<p>内容</p>
</div>
</div>
<div class="panel-footer">
<a href="">
<span class="glyphicon glyphicon-calendar "></span>
<small>
<em>2017.12.23</em>
</small>
</a>
<a href="">
<span class="glyphicon glyphicon-comment"></span>
<small>
<em>3</em>条评论
</small>
</a>
<a href="">
<span class="glyphicon glyphicon-eye-open"></span>
<small>
<em>144</em>次阅读
</small>
</a>
<a href="">
<span class="glyphicon glyphicon-thumbs-up"></span>
<small>
<em>123</em>次点赞
</small>
</a>
<a href="">
<small>阅读全文</small>
<span class="glyphicon glyphicon-chevron-right "></span>
</a>
</div>
</div>
</div><!--选项卡2列表结束-->
</div>
<div role="tabpanel" class="tab-pane" id="messages">列表3</div>
<div role="tabpanel" class="tab-pane" id="settings">列表4</div>
</div> <!-- 标签面板结束 -->
</div>
</div>
</div> <!--最新信息更新内容结束-->
<?php include 'inc/footer.php' ?>
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
