html登录页面设计如何通过phpstudy连接数据库

本地调试PHP项目，登录phpStudy是页面个省事的工具箱。但很多人卡在“HTML页面怎么连数据库”这一步——其实HTML自己连不了数据库，设计数据它只是通过静态标签。真正干活的连接是PHP文件，HTML通过表单把数据交给PHP，登录PHP再去连MySQL。页面这层窗户纸捅破了，设计数据后面就顺了。通过

先说你本地要装好phpStudy，连接启动Apache和MySQL服务，登录两个灯变绿就成。页面然后在phpStudy的设计数据网站根目录（默认是`WWW`文件夹）新建一个目录，比如叫`login_demo`。通过你的连接HTML文件、PHP文件都放这里。别放桌面或别处，不然路径容易乱，浏览器访问会404。

写登录页HTML时，别用花哨的框架，一个干净的表单就够。重点在`action`和`method`属性——`action`指向处理数据的PHP文件，比如`login.php`；`method`用`post`，密码不会暴露在URL里。举个例子：

<form action="login.php" method="post"> 用户名：<input type="text" name="username"> 密码：<input type="password" name="password"> <button type="submit">登录</button> </form>

这段代码里，`name`属性是关键的。PHP那边靠`$_POST['username']`取数据，名字对不上就白搭。我见过有人写`name="user"`，PHP里却用`$_POST['username']`，结果折腾半小时找不出错——先检查名字拼写，这是新手最容易犯的错。

接下来是重头戏：PHP连接MySQL。phpStudy自带的MySQL默认用户名是`root`，密码也是`root`（新版可能空密码，看你的版本）。连接用`mysqli`扩展，别用老掉牙的`mysql_*`函数，PHP7以后直接删了。代码长这样：

<?php $host = '127.0.0.1'; $user = 'root'; $pass = 'root'; $dbname = 'test'; $conn = new mysqli($host, $user, $pass, $dbname); if ($conn->connect_error) {  die('连接失败：' . $conn->connect_error); } ?>

这里有个坑。`$dbname`对应的数据库必须先在MySQL里建好，不然连接直接报错。打开phpStudy的“MySQL工具”或者用命令行，执行`CREATE DATABASE test;`，再建一张用户表：

CREATE TABLE users ( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(50) UNIQUE, password VARCHAR(255) );

密码字段用`VARCHAR(255)`，因为后面要存`password_hash()`生成的哈希值，那玩意儿有60多个字符，短了存不下。直接存明文密码是作死行为，别图省事。

现在把HTML表单和PHP串起来。在`login.php`里，先接收POST数据，再查数据库比对。一个基础版本：

<?php session_start(); if ($_SERVER['REQUEST_METHOD'] === 'POST') {  $username = $_POST['username']; $password = $_POST['password']; $conn = new mysqli('127.0.0.1', 'root', 'root', 'test'); $stmt = $conn->prepare("SELECT password FROM users WHERE username = ?"); $stmt->bind_param("s", $username); $stmt->execute(); $result = $stmt->get_result(); if ($row = $result->fetch_assoc()) {  if (password_verify($password, $row['password'])) {  $_SESSION['user'] = $username; header('Location: welcome.php'); exit; } else {  echo "密码不对"; } } else {  echo "用户不存在"; } } ?>

看见`bind_param`了吗？这叫预处理语句，防SQL注入的。直接拼接字符串`"SELECT ... WHERE username = '$username'"`是自杀式写法，黑客用个引号就能拖库。你本地练手无所谓，但养成好习惯不亏。

最后一步，在浏览器地址栏输入`http://127.0.0.1/login_demo/login.html`，别用`file://`协议直接打开HTML——那样表单提交会失败，因为PHP需要Apache解析。如果页面报404，检查文件是不是在`WWW`目录下，或者端口是不是被占用（phpStudy默认80端口，可能被IIS或别的程序抢了）。

我见过太多人卡在“明明代码没错但就是连不上”的困境。排查顺序：先看MySQL服务启动没，再用`telnet 127.0.0.1 3306`测端口通不通，最后看PHP报错日志（phpStudy的日志在`phpstudy_pro\Runtime\Log`目录下）。八成是密码错了或者数据库名写错，别一上来就怀疑代码逻辑。

这套流程跑通后，你可以加注册页面、加验证码、加session超时控制。但别急着堆功能——先把“表单→PHP→MySQL→反馈”这条链路走顺了，后面都是锦上添花。数据库连接失败时，PHP会返回500或者空白页，这时候把`php.ini`里的`display_errors`改成`On`，重启服务，错误信息就全显示出来了。调试完记得改回去，不然上线会暴露服务器路径。