一个前端后端的综合实例

一、前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
</head>
<body>
    <h2>用户注册</h2>
    <table>
        <tr>
            <td>账户</td>
            <td><input type="text" name="username"></td>
            <td><span id="err_msg"></span></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="gender" value ="1" checked>男
                <input type="radio" name ="gender" value="2">女
            </td>
        </tr>
        <tr align = "center">
            <td colspan= "2">
                <input type="button" name ="btn" value ="确定">
            </td>
        </tr>
    </table>
<script type="text/javascript" src="https://cdn.bootcss/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    //检测用户名是否重复
    $('input[name="username"]').blur(function(){
        var data = {};
        data.username = $('input[name="username"]').val();
        data.type= 1;
        if (res.status==0)
        {
            $("#err_msg").text(res.msg);
            $("#err_msg").css('color','red');
            $('input[name="password"]').attr('disabled','disabled');
        }else{
            $("#err_msg").text(res.msg);
            $("#err_msg").css('color','green');
            $('input[name="password"]').removeAttr('disabled');
        }
    },'json')
//检查用户名和密码不能为空
$('input[name="btn"]').click(function(){
    var data = {};
    data.username = $('input[name="usrname"]').val();
    data.password = $('input[name ="password"]').val();
    data.gender = $('input[name="gender"]').val();
    data.type = 2;
    if(data.username =='' || data.password == '')
    {
        alert('用户名或密码不能为空')；
        return;
    }
    $.post('3-doSubmit.php',data,function(res){
        if(res.status == 1)
        {
            alert(res.msg);
        }else{
            alert(res.msg);
        }
    },'json')
})
</script>
</body>
</html>

二、数据库连接

<?php
namespace connect_chloe;
use PDO;
$config = require __DIR__.'\\config\database.php';
extract($config);
// dsn data source name 包括PDO驱动名称 主机名 端口号 数据库名称
$dsn = sprintf('%s:host=%s;port=%d;dbname=%s',$type,$host,$port,$dbname);
try{
    $pdo= new PDO($dsn,$username,$password,[PDO::ATTR_ERRMODE=>PDO::ERRMODE_WARINING]);
    $pdo->setAtrribute(PDO::ATTR_DEFAULT_FETCH_MODE,PDO::FETCH_ASSOC0);
}catch(\Exception $e){
    die('Connection error:'.$e->getMessage());
}
?>

三、

<?php
namespace pdo_chloe;
require 'common.php';
//接收数据
$username = !empty($_POST['username'])  &&  isset($_POST['username']) ? $_POST['username'] :null;
$password =!empty($_POST['password'])  && isset($_POST['password']) ? $_POST['password'] : null;
$gender = !empty($_POST['$gender'])  && isset($_POST['$gender']) ? $_POST['$gender'] : null;
$create_time = time();
//请求分发器 type 1 检查用户名第一名 2 注册 3 登录
$type = isset($_POST['type']) && !empty($_POST['type']) ? intval($_POST['type']) : null;
switch($type){
    case 1:
        $res = checkUname($username);
        if($res){
            echo json_encode(['status'=>0,'msg'=>'用户名已被占用'],320);
        }else{
            echo json_encode(['status'=>1,'msg'=>'用户名合法'],320);
        }
        break;
    case 2:
        $sql = "INSERT INTO `user` = '{$username}',`pwd`='{$password}',`gender`={$gender},`create_time`={$create_time};";
        if(empty($username) || empty($password) || empty($gender))
        {
            echo json_encode(['status'=>10,'msg'=>'系统字段错误']);
        }else{
            $flag = checkUname($username);
            if(!$flag)
            {
                $res = $pdo->exec($sql);
                if($res)
                {
                    echo json_encode(['status'=>1,'msg'=>'注册成功'],320);
                }else{
                    echo json_encode(['status'=>0,'msg'=>'注册失败'],320);
                }
            }else{
                echo json_encode(['status'=>0,'msg'=>'请勿重复提交'],320);
            }
        }
        break;
    default:
        break;
}
?>

更多相关文章

随机推荐