当前位置：首页 > PHP

js实现登录注册php

2026-02-14 03:53:15PHP

以下是一个基于JavaScript前端与PHP后端结合的登录注册系统实现方案，分为前端和后端两部分：

前端实现（JavaScript/HTML）

注册页面示例

<!-- register.html -->
<form id="registerForm">
  <input type="text" name="username" placeholder="用户名" required>
  <input type="email" name="email" placeholder="邮箱" required>
  <input type="password" name="password" placeholder="密码" required>
  <button type="submit">注册</button>
</form>

<script>
document.getElementById('registerForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);

  fetch('register.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    if(data.success) {
      alert('注册成功');
    } else {
      alert(data.message);
    }
  });
});
</script>

登录页面示例

js实现登录注册php

<!-- login.html -->
<form id="loginForm">
  <input type="text" name="username" placeholder="用户名" required>
  <input type="password" name="password" placeholder="密码" required>
  <button type="submit">登录</button>
</form>

<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const formData = new FormData(this);

  fetch('login.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    if(data.success) {
      localStorage.setItem('authToken', data.token);
      window.location.href = 'dashboard.html';
    } else {
      alert(data.message);
    }
  });
});
</script>

后端实现（PHP）

数据库连接（config.php）

<?php
$host = 'localhost';
$db   = 'your_database';
$user = 'username';
$pass = 'password';
$charset = 'utf8mb4';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES   => false,
];

try {
    $pdo = new PDO($dsn, $user, $pass, $options);
} catch (\PDOException $e) {
    throw new \PDOException($e->getMessage(), (int)$e->getCode());
}
?>

注册处理（register.php）

js实现登录注册php

<?php
require 'config.php';

header('Content-Type: application/json');

$username = $_POST['username'] ?? '';
$email = $_POST['email'] ?? '';
$password = password_hash($_POST['password'], PASSWORD_BCRYPT);

$stmt = $pdo->prepare("INSERT INTO users (username, email, password) VALUES (?, ?, ?)");
$success = $stmt->execute([$username, $email, $password]);

echo json_encode([
    'success' => $success,
    'message' => $success ? '注册成功' : '注册失败'
]);
?>

登录处理（login.php）

<?php
require 'config.php';

header('Content-Type: application/json');

$username = $_POST['username'] ?? '';
$password = $_POST['password'] ?? '';

$stmt = $pdo->prepare("SELECT * FROM users WHERE username = ?");
$stmt->execute([$username]);
$user = $stmt->fetch();

if ($user && password_verify($password, $user['password'])) {
    $token = bin2hex(random_bytes(32));
    echo json_encode([
        'success' => true,
        'token' => $token,
        'message' => '登录成功'
    ]);
} else {
    echo json_encode([
        'success' => false,
        'message' => '用户名或密码错误'
    ]);
}
?>

数据库表结构

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    email VARCHAR(100) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);