大家好啊!今天咱聊聊怎么让网页能存用户信息。很多新手刚学做网站时,光会做漂亮的登录页面,但不知道怎么把用户填的账号密码存到数据库里。别慌,跟着我一步一步来,超简单!这里我用的是腾讯云服务器,作者还在制作分享一个免费域名获取,以及备案注意事项44人民币10年
刚学建站的新手常卡在「如何让网页记住用户」这个坎儿。今天就以我的个人网站「智极 Hup」为例(点击体验登录功能),手把手教你从 0 到 1 搭建带数据库的登录系统,正在制作,尽情关注我吧!! ,全程用腾讯云服务器 + 免费域名,备案流程和省钱技巧全公开!
目录
样式展示 测试登录账号 :admin 密码:123456 注册还在完善中 包括1.人机验证,2.给你的邮件发送验证码 后续关注我 正在着急的制作 谢谢支持!!!
一、先安装 MySQL 数据库
Windows 系统安装步骤(超详细)
-
下载安装包
去 MySQL 官网下载「MySQL Installer」(推荐)或「压缩包版」:- 官网地址:https://dev.mysql.com/downloads/mysql/
- 选「MySQL Community Server」社区版(免费),新手建议选「Installer」图形化安装,省心!
-
运行安装向导
- 步骤 1:选「Custom」自定义安装,勾选「MySQL Server」和「MySQL Workbench」(图形化管理工具,可选)。
- 步骤 2:选安装路径(别装 C 盘!比如 D:\MySQL),点击「Next」直到安装完成。
- 步骤 3:配置 MySQL Server,重点:
- 端口默认 3306,别改(除非被占用)。
- 字符集选「utf8mb4」(支持中文和 Emoji)。
- 设置 root 用户密码 **(一定要记住!)**,比如设为
your_strong_password
。
-
启动 MySQL 服务
- 安装完成后,在「服务」里找到「MySQL Server」,设为「自动启动」,并手动启动服务。
- 验证:打开命令提示符,输入
mysql -u root -p
,回车后输入刚才设的密码,能进入 MySQL 命令行即成功。
macOS 系统安装(用 Homebrew 更简单)
- 先装 Homebrew(如果没装):
bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
- 安装 MySQL:
bash
brew install mysql
- 启动服务并设置密码:
bash
mysql.server start # 启动服务 mysql_secure_installation # 初始化安全设置,按提示设置root密码
Linux 系统(以 Ubuntu 为例)
bash
sudo apt update
sudo apt install mysql-server
sudo systemctl start mysql
sudo mysql_secure_installation # 按提示设置密码和安全选项
二、修改 MySQL 密码(忘记密码或重置)
情况 1:记得当前密码,正常修改
- 登录 MySQL 命令行:
bash
mysql -u root -p
- 执行修改密码语句(用新密码替换
new_password
):sql
ALTER USER 'root'@'localhost' IDENTIFIED BY 'new_password'; FLUSH PRIVILEGES; # 刷新权限使修改生效
情况 2:忘记 root 密码,强制重置
- 停止 MySQL 服务:
bash
# Windows:在服务里停止MySQL服务 # macOS/Linux: sudo systemctl stop mysql
- 以「跳过权限验证」模式启动 MySQL:
bash
# macOS/Linux: sudo mysqld_safe --skip-grant-tables & # Windows:在命令提示符以管理员身份运行: mysqld --skip-grant-tables
- 无密码登录 MySQL:
bash
mysql
- 修改密码:
sql
USE mysql; UPDATE user SET authentication_string=PASSWORD('new_password') WHERE User='root'; FLUSH PRIVILEGES;
- 重启 MySQL 服务。
三、创建数据库用户(别直接用 root 用户!)
之前代码里用的数据库用户是userinformation
,密码123456
,但默认安装的 MySQL 只有root
用户。所以需要手动创建一个普通用户,更安全!
步骤 1:用 root 用户登录 MySQL
bash
mysql -u root -p
步骤 2:创建用户并授权
sql
-- 创建用户(@后面是允许登录的IP,%表示允许任何IP,本地开发用localhost更安全)
CREATE USER 'userinformation'@'localhost' IDENTIFIED BY '123456';
-- 授予该用户对userinformation数据库的所有权限
CREATE DATABASE IF NOT EXISTS userinformation;
GRANT ALL PRIVILEGES ON userinformation.* TO 'userinformation'@'localhost';
-- 刷新权限
FLUSH PRIVILEGES;
为什么不用 root 用户?
- root 权限太大,万一代码泄露密码,黑客能直接删库。
- 普通用户权限受限,更安全(比如只能操作指定数据库)。
四、测试数据库连接(关键!)
安装和配置完成后,一定要先测试能不能连上数据库,避免写代码时踩坑!
方法 1:用 MySQL Workbench 图形化工具
- 打开 Workbench,点击「New Connection」:
- Connection Name:随便填(比如 local_mysql)
- Hostname:localhost
- Port:3306
- Username:userinformation
- Password:123456(你刚才设的密码)
- 点击「Test Connection」,显示「Success」即成功。
方法 2:用 PHP 脚本测试
新建一个test_conn.php
文件,内容如下:
php
<?php
$conn = new mysqli('localhost', 'userinformation', '123456', 'userinformation');
if ($conn->connect_error) {
die("连接失败:" . $conn->connect_error);
} else {
echo "数据库连接成功!";
}
$conn->close();
?>
把文件放到 Web 服务器根目录(比如 Apache 的htdocs
或 Nginx 的html
目录),浏览器访问http://localhost/test_conn.php
,显示「连接成功」就 OK 了!
五、新手常见问题排查
-
安装时提示端口被占用
- 检查是否有其他程序占用 3306 端口(比如之前装过 MySQL 没卸干净)。
- 解决方案:修改 MySQL 端口为 3307 等其他端口,或关闭占用端口的程序。
-
PHP 连接数据库时报「Access denied」
- 大概率是用户名或密码错了,仔细检查
config.php
里的用户名、密码是否和 MySQL 中创建的一致。 - 注意:MySQL 用户是「用户名 @主机」组合唯一的,比如
userinformation@localhost
和userinformation@%
是两个不同的用户。
- 大概率是用户名或密码错了,仔细检查
-
命令行输入密码后没反应
- MySQL 命令行输入密码时不会显示任何字符,输完直接回车就行,别以为卡住了!
总结:安装 + 配置的正确顺序
- 安装 MySQL,设置 root 密码 →
- 创建普通数据库用户(非 root),授权 →
- 测试连接是否成功 →
- 再开始写代码!
六.功能实现
一、先给数据库「搭架子」
就像盖房子得先打地基,咱得先在数据库里建表。假设咱用 MySQL,打开 phpMyAdmin(或者其他数据库工具),敲几行 SQL 代码:
sql
-- 先建个叫userinformation的数据库
CREATE DATABASE IF NOT EXISTS `userinformation`;
USE `userinformation`;
-- 再建用户表,就像Excel表格一样,每个字段是一列
CREATE TABLE `users` (
`id` INT AUTO_INCREMENT PRIMARY KEY, -- 自动生成的用户编号,当主键
`username` VARCHAR(50) UNIQUE NOT NULL, -- 用户名,不能重复
`password` VARCHAR(255) NOT NULL, -- 密码,记得存加密后的
`email` VARCHAR(100) NOT NULL, -- 邮箱,以后可能用来找回密码
`create_time` DATETIME DEFAULT CURRENT_TIMESTAMP -- 注册时间,自动填当前时间
);
这里记住:password
字段一定要够长(至少 255 位),因为后面咱要存的是加密后的字符串,比明文长很多!
用 MySQL 命令行查看是否创建了用户
步骤 1:登录 MySQL
bash
mysql -u 用户名 -p
# 输入密码后进入MySQL命令行
步骤 2:查看用户信息
USE userinformation; -- 切换到你的数据库
SELECT * FROM users; -- 查询所有用户信息
输出示例:
+----+----------+----------------------------------+------------------+---------------------+
| id | username | password | email | create_time |
+----+----------+----------------------------------+------------------+---------------------+
| 1 | testuser | $2y$10$xxx... | test@example.com | 2023-05-20 12:34:56 |
二、写个「数据库连接器」
接下来,咱得让 PHP 能连上数据库。新建一个config.php
文件,专门放数据库的连接信息,就像存钥匙的地方:
<?php
$db = [
'host' => 'localhost', // 一般本地测试就填localhost,服务器上填IP
'user' => 'userinformation', // 数据库用户名,记得先创建这个用户
'pass' => '123456', // 用户名对应的密码
'dbname' => 'userinformation' // 刚才建的数据库名
];
// 用mysqli类连接数据库
$conn = new mysqli($db['host'], $db['user'], $db['pass'], $db['dbname']);
// 检查连接有没有问题,有问题就报错停下
if ($conn->connect_error) {
die("连不上数据库啊!错误:" . $conn->connect_error);
}
// 设置字符集,避免中文乱码
$conn->set_charset('utf8mb4');
?>
这里注意:生产环境千万别把密码直接写死在代码里!可以用环境变量或者配置文件加密,但新手阶段先这么写,后面再学高级玩法。
三、做个注册功能:从表单到存数据库
1. 先写注册页面(register.html)
就照着之前的登录页面改,多加点输入框,比如邮箱。注意表单的action
要指向register.php
(后面要写的处理文件):
<!-- 省略重复的HTML和CSS代码,重点看表单 -->
<form action="register.php" method="POST">
<div>
<label>用户名:</label>
<input type="text" name="username" required minlength="3"> <!-- 至少3个字符 -->
</div>
<div>
<label>密码:</label>
<input type="password" name="password" required minlength="6"> <!-- 至少6位 -->
</div>
<div>
<label>邮箱:</label>
<input type="email" name="email" required>
</div>
<button type="submit">注册</button>
</form>
2. 处理注册请求(register.php)
用户点了注册按钮后,数据会传到这里。咱得先检查数据合不合法,再存进数据库:
<?php
require_once 'config.php'; // 引入数据库连接
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// 过滤用户输入,防止恶意代码(比如有人在用户名里写<script>)
$username = htmlspecialchars(trim($_POST['username']));
$password = trim($_POST['password']);
$email = htmlspecialchars(trim($_POST['email']));
$errors = [];
// 检查用户名长度
if (strlen($username) < 3) {
$errors[] = "用户名至少3个字!";
}
// 检查密码长度
if (strlen($password) < 6) {
$errors[] = "密码至少6位!";
}
// 检查邮箱格式对不对
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$errors[] = "邮箱格式错啦!";
}
if (empty($errors)) {
// 先查一下这个用户名有没有被注册过
$stmt = $conn->prepare("SELECT id FROM users WHERE username = ?");
$stmt->bind_param("s", $username); // "s"表示参数是字符串
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows > 0) {
$errors[] = "这用户名已经被人用了!";
} else {
// 最重要的一步:加密密码!千万不能存明文!
$hashedPassword = password_hash($password, PASSWORD_DEFAULT);
// 把用户信息插入数据库
$insertStmt = $conn->prepare("INSERT INTO users (username, password, email) VALUES (?, ?, ?)");
$insertStmt->bind_param("sss", $username, $hashedPassword, $email);
if ($insertStmt->execute()) {
// 注册成功,跳转到登录页
header("Location: login.html");
exit;
} else {
$errors[] = "注册失败,重试一下吧!";
// 偷偷记个日志,方便自己查问题
error_log("注册出错:" . $insertStmt->error);
}
$insertStmt->close();
}
$stmt->close();
}
// 如果有错误,用弹窗告诉用户
if ($errors) {
echo "<script>alert('" . implode("\\n", $errors) . "');</script>";
}
}
$conn->close(); // 用完数据库记得关门!
?>
这里划重点:
password_hash
:这是 PHP 自带的加密函数,会自动加盐,比自己瞎加密安全 100 倍!prepare
和bind_param
:这俩是黄金搭档,能防止 SQL 注入攻击。简单说,就是把用户输入的内容当「纯文本」处理,不让黑客通过输入特殊字符篡改 SQL 语句。
四、登录功能:验证密码 + 保持登录状态
登录页面的 HTML 和之前差不多,重点看后端验证逻辑(login.php):
<?php
require_once 'config.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$username = htmlspecialchars(trim($_POST['username']));
$password = trim($_POST['password']);
// 查数据库,看看有没有这个用户名
$stmt = $conn->prepare("SELECT id, password FROM users WHERE username = ?");
$stmt->bind_param("s", $username);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows == 1) {
$user = $result->fetch_assoc();
// 验证密码是否正确(用之前存的哈希值对比)
if (password_verify($password, $user['password'])) {
// 登录成功,开个「会话」记住用户
session_start();
$_SESSION['user_id'] = $user['id'];
$_SESSION['username'] = $username;
$_SESSION['expire_time'] = time() + 3600; // 1小时后会话过期
// 跳转到用户主页
header("Location: dashboard.php");
exit;
} else {
echo "密码错啦!";
}
} else {
echo "用户不存在!";
}
$stmt->close();
}
$conn->close();
?>
** 会话(session)** 就像一张门票,用户登录后发给他,以后他访问需要登录的页面,带着这张门票就能通过验证。比如在dashboard.php
里,要先检查有没有有效的会话:
<?php
session_start();
// 如果会话过期或者没有user_id,踢回登录页
if (!isset($_SESSION['user_id']) || $_SESSION['expire_time'] < time()) {
header("Location: login.html");
exit;
}
?>
<h1>欢迎,<?= $_SESSION['username'] ?>!</h1>
五、新手常踩的坑和解决办法
-
连不上数据库
- 先检查
config.php
里的用户名、密码、数据库名是不是写错了,MySQL 服务有没有启动(本地测试的话,电脑右下角看看 MySQL 图标有没有亮)。 - 如果是服务器上的数据库,可能需要改成服务器的 IP,或者确认数据库用户有远程连接权限。
- 先检查
-
密码明明对了却登录失败
- 大概率是注册时没正确加密,或者登录时没对密码做
trim()
,导致前后有空格。比如用户注册时密码是 “123456”,但输入时不小心敲了空格,就会对不上。
- 大概率是注册时没正确加密,或者登录时没对密码做
-
页面显示乱码
- 检查数据库、表、PHP 文件的字符集是不是都设成了
utf8mb4
,包括 HTML 里的<meta charset="UTF-8">
也要确认。
- 检查数据库、表、PHP 文件的字符集是不是都设成了
六、安全和性能
- 密码安全大于天:永远不要存明文密码,永远用
password_hash
和password_verify
。 - 防君子也防小人:用户输入的所有内容,都要过滤(比如
htmlspecialchars
防 XSS 攻击),用预处理语句防 SQL 注入。 - 性能小优化:如果网站访问量有点大,可以给
username
字段加个索引,查询速度会更快:ALTER TABLE users ADD INDEX idx_username (username);
好了,这样一个能注册、能登录、能存用户信息的小系统就搭起来了!新手刚开始可能觉得数据库连接有点绕,但多写几次就熟了。记得自己动手敲代码,遇到问题别急,慢慢查错误,编程就是这么练出来的~
七、项目文件结构与存放位置
1. 核心文件列表
文件名 | 作用描述 | 必须性 |
---|---|---|
config.php | 数据库连接配置文件 | 必须 |
login.html | 登录页面 HTML | 必须 |
login.php | 登录逻辑处理(PHP 后端) | 必须 |
register.html | 注册页面 HTML | 必须 |
register.php | 注册逻辑处理(PHP 后端) | 必须 |
dashboard.php | 登录后主页(示例页面,验证会话用) | 可选 |
.htaccess | Apache 服务器配置文件(如 URL 重写、防盗链等) | 可选 |
index.php | 网站首页(可重定向到登录页或主页) | 可选 |
2. 文件存放路径(以 Linux 服务器为例)
plaintext
/var/www/html/your_project_name/ # Web服务器根目录(Apache/Nginx默认)
├─ config.php # 数据库连接配置,建议用权限控制禁止直接访问
├─ login.html # 登录页面
├─ login.php # 登录处理
├─ register.html # 注册页面
├─ register.php # 注册处理
└─ dashboard.php # 登录后主页
3. 权限设置(重要!)
- 文件权限:
bash
chmod -R 644 /var/www/html/your_project_name/ # 所有文件可读可写(PHP需写权限) chmod 755 /var/www/html/your_project_name/ # 目录可执行
- 禁止直接访问 PHP 配置文件(防止泄露数据库密码):
在.htaccess
中添加:apache
<Files config.php> Order allow,deny Deny from all </Files>
八、防火墙放行规则(以常见系统为例)
1. Linux 系统(ufw 防火墙)
开发环境(本地测试)
通常无需修改防火墙,默认允许本地访问。
生产环境(云服务器)
仅放行必要端口,避免暴露敏感服务!
# 查看当前防火墙状态
sudo ufw status
# 放行Web服务器端口(80/443)
sudo ufw allow 80/tcp # HTTP(可选,建议用HTTPS)
sudo ufw allow 443/tcp # HTTPS(推荐)
# 放行MySQL端口(仅本地访问,禁止公网!)
sudo ufw allow in on lo to any port 3306 # 允许本地环回接口访问MySQL
# 或(谨慎!仅当需要远程连接时开放,且限制IP)
sudo ufw allow from your_server_ip to any port 3306
# 拒绝其他所有端口(默认规则)
sudo ufw default deny incoming
sudo ufw default allow outgoing
# 启用防火墙
sudo ufw enable
2. Windows 系统(高级安全防火墙)
放行 Web 端口(80/443)
- 控制面板 → 系统和安全 → Windows Defender 防火墙 → 高级设置
- 入站规则 → 新建规则 → 端口 → 输入 80 或 443 → 允许连接 → 命名为 “Web 服务”
放行 MySQL 端口(3306,仅本地测试)
- 新建入站规则 → 端口 → 3306 → 允许连接 → 命名为 “MySQL 本地访问”
- 生产环境严禁开放 3306 公网访问!
九、补充
-
腾讯云服务器快速上手
- 购买配置服务器、安装宝塔面板、绑定域名(正在快马加鞭制作中)
-
第四章:域名获取与备案全流程
- 免费域名申请(如 Freenom)、腾讯云域名购买、ICP 备案详细步骤(正在快马加鞭制作中)
欢迎大家关注我 智极Hup - 知识分享 这是我自写网站啦,还在完善中 嘿嘿