学习笔记网站

一、项目概览与环境搭建

本项目是一个 人员管理系统，用于用户信息的采集、存储、查询和删除。技术栈如下：

目录结构

// 项目根目录
realname/
├── config/
│   └── database.php        // 数据库连接配置
├── public/                 // 入口文件目录（对外暴露）
│   ├── index.php           // 数据管理页（Layui 表格）
│   ├── login.php           // 用户登录
│   ├── register.php        // 用户注册
│   ├── study.php           // 学习笔记（当前页）
│   └── static/layui/       // Layui 静态资源
└── views/                  // 视图模板目录（不对外暴露）
    ├── index.php
    ├── login.php
    ├── register.php
    └── study.php

💡 设计思想：采用简单的 MVC 分层 —— public/ 负责逻辑处理（Controller），views/ 负责页面渲染（View），config/ 管理数据库连接（Model 层简化）。

二、数据库设计

使用 MySQL，数据库名为 realname，核心表 users 结构如下：

-- users 表结构
CREATE TABLE users (
    id         INT AUTO_INCREMENT PRIMARY KEY,
    username   VARCHAR(50)  NOT NULL  -- 用户名
    mobile     VARCHAR(20)  NOT NULL  -- 手机号
    password   VARCHAR(255) NOT NULL  -- 密码
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP  -- 注册时间
);

数据库连接

在 config/database.php 中使用 mysqli 扩展连接：

// config/database.php
$conn = new mysqli(
    "localhost",   // 主机
    "root",        // 用户名
    "199809",      // 密码
    "realname",    // 数据库名
    "3306"         // 端口
);
$conn->set_charset("utf8mb4");

三、PHP 后端核心逻辑

3.1 数据写入（注册）

在 register.php 中处理 POST 表单，将用户名、手机号、密码写入数据库：

// 接收表单数据
$username = $_POST["username"];
$mobile   = $_POST["mobile"];
$password = $_POST["password"];

// SQL 插入
$sql = "INSERT INTO users (username, mobile, password)
        VALUES ('$username', '$mobile', '$password')";

if ($conn->query($sql) === TRUE) {
    echo "注册成功！第 " . $conn->insert_id . " 条数据";
}

3.2 数据查询 + JSON 输出（index.php 接口）

这是 Layui 表格的数据源，通过 ?action=ajax 返回 JSON：

// 关键机关：检测 ajax 请求
if ($_GET['action'] == 'ajax') {

    // COUNT 查总数（Layui 分页需要）
    $count = $conn->query("SELECT COUNT(*) as total FROM users")
                  ->fetch_assoc()['total'];

    // 查全部数据
    $result = $conn->query("SELECT id, username, mobile, created_at FROM users");
    $data = [];
    while($row = $result->fetch_assoc()) { $data[] = $row; }

    // 输出 JSON，然后 exit 死掉——绝不让 HTML 污染数据
    header('Content-Type: application/json');
    echo json_encode(["code" => 0, "msg" => "ok", "count" => $count, "data" => $data]);
    exit; // 🛑 关键！执行完立刻死掉
}

3.3 数据删除（index.php 接口）

// 通过 POST 接收要删除的用户 ID
$id = intval($_POST['id']);  // intval 防 SQL 注入

$sql = "DELETE FROM users WHERE id = $id";
$conn->query($sql);

echo json_encode(["code" => 0, "msg" => "删除成功"]);
exit; // 🛑 同样立刻死掉

四、前端页面设计

4.1 登录 / 注册页（纯 HTML + CSS）

使用卡片式布局，居中表单，渐变背景。核心 CSS 模式：

/* 卡片容器 */
.login-container {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    max-width: 400px;
    padding: 2.5rem;
}

/* 渐变背景 */
body {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 输入框聚焦动效 */
input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79,70,229,0.1);
}

4.2 数据管理页（Layui 表格）

使用 Layui 的 table 模块渲染动态表格，自动处理分页、排序：

// Layui table.render —— 一行配置搞定表格
table.render({
    elem: '#user-table',
    url:  '/index.php?action=ajax',  // 数据源指向 PHP 接口
    cols: [[
        {field: 'id',         title: 'ID',   width: 80,  sort: true},
        {field: 'username',   title: '用户名', width: 180},
        {field: 'mobile',     title: '手机号', width: 200},
        {field: 'created_at', title: '注册时间', sort: true},
        {title: '操作', templet: function(d) {
            return '<button lay-event="del">删除</button>';
        }}
    ]],
    page: true  // 开启分页
});

五、Ajax 前后端交互

删除操作是一个完整的 Ajax 调用链：前端点击 → Layer 确认框 → Ajax 请求 → PHP 处理 → 返回 JSON → 刷新表格。

// 监听表格工具按钮事件
table.on('tool(user-table)', function(obj) {
    if (obj.event === 'del') {

        // ① Layer 确认弹窗
        layer.confirm('确定删除吗？', function(index) {

            // ② Ajax 发请求给后端
            $.ajax({
                type: "post",
                url:  '/index.php?action=del',
                data: { id: obj.data.id },
                dataType: "json",
                success: function(ret) {
                    if (ret.code === 0) {
                        layer.msg('删除成功');
                        table.reload('user-table'); // ③ 刷新表格
                    }
                }
            });

            layer.close(index);
        });
    }
});

六、安全注意事项

当前已做的防护

intval() 强制转整数，防止删除接口的 SQL 注入 ✓
exit 在 JSON 输出后立刻终止，防止 HTML 污染数据 ✓
数据库连接使用独立配置文件，与视图分离 ✓

待改进项

密码应使用 password_hash() 加密存储，当前是明文待处理
注册/登录接口应使用 预处理语句（prepared statement）防注入待处理
应增加 CSRF Token 防护和输入 XSS 过滤待处理

七、部署上线要点

Apache 配置（.htaccess）

# 隐藏入口文件扩展名
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

# 禁止直接访问 views 目录
RewriteRule ^views/ - [F,L]

Nginx 配置

# 禁止访问 views 目录
location ~ /views/ {
    deny all;
    return 403;
}

# 只允许 public 目录被访问
root /var/www/realname/public;

上线 Checklist

修改数据库密码为强密码 ✓
关闭 PHP 错误显示 display_errors = Off ✓
配置 HTTPS 证书待处理
设置文件权限（config 目录 600）待处理

🚀个人学习日志