先说一下为什么写这样一个程序吧。因为  作业!作业!作业!!!
  作业内容是做一个登录和注册功能,登陆成功后可以跳转到公司主页。公司主页是上次的作业,当然了,我是在我的测试站点上扒下来的代码搞得。点此前往查看
  作业要用JavaScript写登录注册功能。但是用JavaScript不好操作数据库,注册登录做出来了应该也就只是个壳子。所以我就用php写了一下。。。为了表示我还是用了HTML、JavaScript、css的,所以文件结构可能有些奇怪,完全不需要我这么麻烦。
  php操作数据库,跟我之前写的那个表白网页的差不多。点此查看

代码

mark

文件结构:

config.php为数据库的配置文件。

<?php
/**
 * Created by PhpStorm.
 * User: xg
 * Date: 2018/11/17
 * Time: 21:53
 */
//数据库相关配置,使用前需配置好
define('MYSQL_HOST','ip.ip.ip.ip');//数据库地址,需要先修改!
define('MYSQL_USER','study');//数据库用户名
define('MYSQL_PW','yourpassw');//数据库密码
?>

functions.php连接数据库

<?php
/**
 * Created by PhpStorm.
 * User: xg
 * Date: 2018/11/17
 * Time: 21:54
 */
require_once 'config.php';

function connectDb(){
    $conn = mysqli_connect(MYSQL_HOST,MYSQL_USER,MYSQL_PW);
    if (!$conn){
        die('不能连接到数据库,请检查网络环境、数据库配置');
    }
    mysqli_select_db($conn,'study');
    return $conn;
}
?>

regist.html注册页面

<!DOCTYPE HTML>
<html class="ch-cn">

<head>
    <link rel="shortcut icon" href="favicon.ico"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


    <title>用户注册</title>
    <script src="js/function.js"></script>
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min.css?v=75ec36c67e" rel="stylesheet">
    <link rel="stylesheet" href="css/rl-style.css">
</head>
<body>
<div id="wrapper"></div>
<div id="nav-menu" role="navigation">
    <div id="nav-left">
        <a href="https://blog.xgblack.top/">
            <img id="site-avatar" no-lazyload src="https://img.xgblack.top/blog/181019/12FGlI6ghi.png">
            臾离云服务中心
        </a>
    </div>
    <div id="nav-right">
        <ul class="nav-right-list">
            <li class="nav-right-item">
                <a href="https://blog.xgblack.top/" target="_blank">
                    <i class="iconfont icon-aria-home">
                    </i>
                    公司首页
                </a>
            </li>

            <li class="nav-right-item"><a href="#" ><i class="iconfont icon-aria-archives"></i>业务</a></li>
            <li class="nav-right-item"><a href="#" ><i class="iconfont icon-aria-guestbook"></i>联系客服</a></li>
            <li class="nav-right-item"><a href="#" ><i class="iconfont icon-aria-friends"></i>合作伙伴</a></li>
            <li class="nav-right-item"><a href="#" ><i class="iconfont icon-aria-about"></i>关于</a></li>
            <li class="nav-right-item"><a href="login.html" ><i class="iconfont icon-aria-about"></i>登录</a></li>
        </ul>
    </div>
</div>

<div id="pjax-container">
    <style>
        #background {
            width: 100%;
            height: 100%;
            background: url(img/tom-van-hoogstraten-134606.jpg) center center no-repeat;
            background-size: cover;
            z-index: -1;
            position: relative;
        }
    </style>
    <header id="header" class="clearfix animated fadeInDown">
        <div id="site-meta">

            <div id="content">
                <h2 align="center">注册</h2>
                <form id="myform" method="post" action="db.php">
                    <p>*账  号:
                        <input id="uname" type="text" name="user" placeholder="账号首字符为字母">
                    </p>
                    <p>*邮  箱:
                        <input id="mail" type="email" name="mail" placeholder="youemil@xx.com">
                    </p>
                    <p>*联系电话:
                        <input id="phnum" type="text" name="phnum" placeholder="电话号码">
                    </p>
                    <p>*密  码:
                        <input id="upass" type="password" name="psw" placeholder="请输入密码">
                    </p>
                    <p>*确认密码:
                        <input id="dupass" type="password" name="dpsw" placeholder="请再输入一次密码">
                    </p>
                    <p id="sex-p">*性  别:
                        <input  type="radio" name="sex" value="male">男
                        <input type="radio" name="sex" value="fmale">女
                    </p>
                    <p id="ques-p">密保问题:
                        <select name="ques" id="ques-select">
                            <option value="ques00">你的大名?</option>
                            <option value="ques01">你的外号?</option>
                            <option value="ques02">你的生日?</option>
                        </select>
                    </p>
                    <p>问题答案:
                        <input id="answer" type="text" name="ans" placeholder="请输入密保问题的答案">
                    </p>

                    <p>职业选择:
                        <input type="checkbox" value="job1" name="check" checked>前端开发
                        <input type="checkbox" value="job2" name="check">后端开发
                        <input type="checkbox" value="job3" name="check">算法
                    </p>

                </form>

                <div id="error_box"><br></div><br>

                <button id="register-btn" onclick="register()">注册</button>
                <button id="go-regist-btn" type="button" onclick="window.location.href='login.html';">登录</button>


            </div>

        </div>
        <div id="background"></div>
    </header>

</div>
<script>

    function register() {
        // alert("yunxingle ");
        var uname =document.getElementById("uname").value;
        var mail = document.getElementById("mail").value;
        var phnum = document.getElementById("phnum").value;
        var upass = document.getElementById("upass").value;
        var dupass = document.getElementById("dupass").value;
        var sex = document.getElementsByName("sex").value;
        var ques = document.getElementsByName("ques").value;
        var ans = document.getElementById("answer").value;
        var check = document.getElementsByName("check").value;
        var oerror = document.getElementById("error_box");
        // alert(uname);

        if (isEmpty(uname)||isEmpty(mail)||isEmpty(phnum)||isEmpty(upass)) {
            oerror.innerHTML="账户、邮箱、联系电话、密码、性别 为必填项";
            // alert("账户、邮箱、联系电话、密码 为必填项");
        }else if(!(upass==dupass)) {
            oerror.innerText="两次密码不一致,请重新输入";
            document.getElementById("upass").value="";
            document.getElementById("dupass").value="";
        }else{
            // alert("注册成功,即将跳转到登录页面");
            var form=document.getElementById("myform");
            form.submit();
        }


    }


</script>

</body>
</html>

db.php获取post数据,并存入数据库

<?php
/**
 * Created by PhpStorm.
 * User: xg
 * Date: 2018/11/17
 * Time: 21:17
 */
require_once 'functions.php';

//获取参数
$username=$_POST['user'];
$mail=$_POST['mail'];
$phnum=$_POST['phnum'];
$psw=$_POST['psw'];
$sex=$_POST['sex'];
$ques=$_POST['ques'];
$ans=$_POST['ans'];
$mycheck=$_POST['check'];

$conn= connectDb();
$result= mysqli_query($conn,"SELECT * FROM webGisUsers WHERE username='$username'");
$result_arr=mysqli_fetch_assoc($result);
$id = $result_arr['id'];
if($id){
    echo '<script>alert("用户名已存在,请重新注册,点击确定返回注册");history.go(-1);</script>';
}else{
//    echo '用户名可用';
    mysqli_query($conn,"INSERT INTO webGisUsers(username,mail,phnum,psw,sex,ques,ans,mycheck) VALUES ('$username','$mail','$phnum','$psw','$sex','$ques','$ans','$mycheck')");
    echo '<script>alert("注册成功,即将跳转到登录");window.location.href = "login.html";</script>';

}

login.html登录界面

<!DOCTYPE HTML>
<html class="ch-cn">

<head>
    <link rel="shortcut icon" href="favicon.ico"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


    <title>用户登录</title>
    <script src="js/function.js"></script>
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min.css?v=75ec36c67e" rel="stylesheet">
    <link rel="stylesheet" href="css/rl-style.css">
</head>
<body>
<div id="wrapper"></div>
<div id="nav-menu" role="navigation">
    <div id="nav-left">
        <a href="https://blog.xgblack.top/">
            <img id="site-avatar" no-lazyload src="https://img.xgblack.top/blog/181019/12FGlI6ghi.png">
            臾离云服务中心
        </a>
    </div>
    <div id="nav-right">
        <ul class="nav-right-list">
            <li class="nav-right-item">
                <a href="https://blog.xgblack.top/" target="_blank">
                    <i class="iconfont icon-aria-home">
                    </i>
                    公司首页
                </a>
            </li>

            <li class="nav-right-item"><a href="#" ><i class="iconfont icon-aria-archives"></i>业务</a></li>
            <li class="nav-right-item"><a href="#" ><i class="iconfont icon-aria-guestbook"></i>联系客服</a></li>
            <li class="nav-right-item"><a href="#" ><i class="iconfont icon-aria-friends"></i>合作伙伴</a></li>
            <li class="nav-right-item"><a href="#" ><i class="iconfont icon-aria-about"></i>关于</a></li>
            <li class="nav-right-item"><a href="login.html" ><i class="iconfont icon-aria-about"></i>登录</a></li>
        </ul>
    </div>
</div>

<div id="pjax-container">
    <style>
        #background {
            width: 100%;
            height: 100%;
            background: url(img/tom-van-hoogstraten-134606.jpg) center center no-repeat;
            background-size: cover;
            z-index: -1;
            position: relative;
        }
    </style>
    <header id="header" class="clearfix animated fadeInDown">
        <div id="site-meta">

            <div id="box">
                <form id="login-form" method="post" action="login.php">

                    <h2>用户登录</h2>

                    <p>
                        用户名:
                        <input id="uname" type="text" name="luser" placeholder="请输入用户名">
                    </p>
                    <p>
                        密 码:
                        <input id="upass" type="password" name="lpsw" placeholder="请输入密码">
                    </p>
                </form>

                <div id="error_box"><br></div>

                <p>
                    <button id="login-btn" type="button" onclick="login()">登录</button>
                    <button id="go-regist-btn" type="button" onclick="window.location.href='regist.html';">注册</button>

                </p>

            </div>

        </div>
        <div id="background"></div>
    </header>

</div>
<script>
    function login() {
        var luser = document.getElementById("uname").value;
        var lpsw = document.getElementById("upass").value;
        var oerror = document.getElementById("error_box");
        if (isEmpty(luser) || isEmpty(lpsw)) {
            oerror.innerHTML = "错误提示:用户名、密码不能为空";
        } else {
            var login_from = document.getElementById("login-form");
            login_from.submit();
        }
    }
</script>

</body>
</html>

login.php检查登录信息是否正确

<?php
/**
 * Created by PhpStorm.
 * User: xg
 * Date: 2018/11/17
 * Time: 23:04
 */
require_once 'functions.php';
//获取参数
$luser =$_POST['luser'];
$lpsw = $_POST['lpsw'];

$conn= connectDb();
$result = mysqli_query($conn,"SELECT * FROM webGisUsers WHERE username='$luser'");
$result_arr=mysqli_fetch_assoc($result);
$username = $result_arr['username'];
if($username){
    $psw=$result_arr['psw'];
    if(($username==$luser)&&($psw==$lpsw)){
        echo '<script>alert("登录成功,即将跳转到公司主页");window.location.href = "index.html";</script>';
    }else{
        echo '<script>alert("用户名或密码错误,点击确定返回重新登录");history.go(-1);</script>';
    }
}else{
    echo '<script>alert("用户名不存在,请注册!");history.go(-1);</script>';
}

?>

成果

https://study.xgblack.top/gisstudy/login