轻松上手TP5 Bootstrap：轻松实现数据表增删改查功能全攻略

引言

随着互联网技术的飞速发展，Bootstrap 框架因其简洁、高效和响应式等特点，成为了开发人员制作网页的首选工具之一。而 ThinkPHP5（TP5）作为一款流行的 PHP 框架，具有易用、高效和扩展性强等特点。本文将结合 TP5 和 Bootstrap，为大家详细介绍如何轻松实现数据表的增删改查（CRUD）功能。

环境准备

在开始之前，请确保以下环境已准备好：

PHP 5.6 或更高版本
MySQL 5.6 或更高版本
ThinkPHP5 框架
Bootstrap 框架

创建项目

创建一个新的 ThinkPHP5 项目：

php think create project tp5_bootstrap_crud

cd tp5_bootstrap_crud

安装 Bootstrap 框架：

composer require twbs/bootstrap

数据库设计

创建数据库：

CREATE DATABASE tp5_bootstrap_crud;

使用以下 SQL 语句创建数据表：

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(50) NOT NULL,
  `email` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

配置数据库连接

打开 application/database.php 文件，配置数据库连接信息：

return [
    // 数据库类型
    'type'            => 'mysql',
    // 服务器地址
    'hostname'        => 'localhost',
    // 数据库名
    'database'        => 'tp5_bootstrap_crud',
    // 用户名
    'username'        => 'root',
    // 密码
    'password'        => '',
    // 端口
    'hostport'        => '3306',
    // 数据库连接字符集
    'charset'         => 'utf8',
    // 数据库表前缀
    'prefix'          => 'tp5_',
    // 数据库部署方式:0 单数据库单表,1 单数据库多表,2 主从式
    'deploy'          => 0,
    // 数据库读写分离开启
    'rw_separate'     => false,
    // 数据库连接参数
    'params'          => [],
    // 数据库编码默认采用utf8
    'charset_default' => 'utf8',
    // 数据库表名前缀
    'table_prefix'    => 'tp5_',
    // 是否开启SQL监听
    'sql_log'         => false,
    // 是否严格检查字段是否存在
    'fields_strict'   => false,
    // 是否开启字段缓存
    'fields_cache'    => false,
    // 字段缓存有效期
    'fields_cache_time' => 60,
    // 是否检查字段是否增加
    'fields_check'    => false,
    // 是否使用过时语法
    'strict_type'     => false,
    // 是否关闭SQL注释
    'sql_comment'     => 'SELECT',
    // 是否使用自定义数据库连接
    'custom'          => [],
    // 自定义数据库连接参数
    'params_custom'   => [],
];

创建控制器

创建一个名为 UserController 的控制器：

php think make:controller User

在 User 控制器中，添加以下方法：

public function index()
{
    $users = Db::name('users')->select();
    return $this->fetch('index', ['users' => $users]);
}

public function add()
{
    return $this->fetch('add');
}

public function save()
{
    $data = input('post.');
    $result = Db::name('users')->insert($data);
    if ($result) {
        return $this->success('添加成功');
    } else {
        return $this->error('添加失败');
    }
}

public function edit($id)
{
    $user = Db::name('users')->find($id);
    return $this->fetch('edit', ['user' => $user]);
}

public function update()
{
    $data = input('post.');
    $result = Db::name('users')->where('id', $data['id'])->update($data);
    if ($result) {
        return $this->success('修改成功');
    } else {
        return $this->error('修改失败');
    }
}

public function delete($id)
{
    $result = Db::name('users')->delete($id);
    if ($result) {
        return $this->success('删除成功');
    } else {
        return $this->error('删除失败');
    }
}

创建视图

创建以下视图文件：

application/index/view/user/index.html
application/index/view/user/add.html
application/index/view/user/edit.html

在 index.html 文件中，添加以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>用户列表</h1>
        <a href="{:url('user/add')}" class="btn btn-primary">添加用户</a>
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {volist name="users" id="user"}
                <tr>
                    <td>{$user.id}</td>
                    <td>{$user.username}</td>
                    <td>{$user.email}</td>
                    <td>
                        <a href="{:url('user/edit', ['id' => $user.id])}" class="btn btn-success">编辑</a>
                        <a href="{:url('user/delete', ['id' => $user.id])}" class="btn btn-danger">删除</a>
                    </td>
                </tr>
                {/volist}
            </tbody>
        </table>
    </div>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

在 add.html 文件中，添加以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>添加用户</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>添加用户</h1>
        <form action="{:url('user/save')}" method="post">
            <div class="form-group">
                <label for="username">用户名：</label>
                <input type="text" class="form-control" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">密码：</label>
                <input type="password" class="form-control" id="password" name="password" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱：</label>
                <input type="email" class="form-control" id="email" name="email" required>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

在 edit.html 文件中，添加以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>编辑用户</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h1>编辑用户</h1>
        <form action="{:url('user/update')}" method="post">
            <input type="hidden" name="id" value="{$user.id}">
            <div class="form-group">
                <label for="username">用户名：</label>
                <input type="text" class="form-control" id="username" name="username" value="{$user.username}" required>
            </div>
            <div class="form-group">
                <label for="password">密码：</label>
                <input type="password" class="form-control" id="password" name="password" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱：</label>
                <input type="email" class="form-control" id="email" name="email" value="{$user.email}" required>
            </div>
            <button type="submit" class="btn btn-primary">提交</button>
        </form>
    </div>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

运行项目

启动 ThinkPHP5 服务器：

php think run

打开浏览器，访问 http://localhost:8000/，即可看到用户列表页面。

总结

本文介绍了如何使用 ThinkPHP5 和 Bootstrap 框架实现数据表的增删改查功能。通过以上步骤，您可以快速搭建一个具有 CRUD 功能的网页应用。希望本文对您有所帮助！

正文

轻松上手TP5 Bootstrap：轻松实现数据表增删改查功能全攻略

引言

环境准备

创建项目

数据库设计

配置数据库连接

创建控制器

创建视图

运行项目

总结

相关阅读

揭秘轮毂数据：深度解析行业趋势与未来挑战

轻松掌握钉钉数据表保存技巧，告别数据丢失烦恼

揭秘折线数据表：轻松掌握趋势分析，洞察数据背后的秘密

揭秘轮毂数据表：如何通过数据分析提升车辆性能与安全

揭秘身高体重：如何打造健康生活数据表？

揭秘国考数据：揭秘历年考情，助你精准备战公务员考试

伊犁地区新冠实时数据揭秘：追踪疫情，共筑防线

揭秘TP5+Bootstrap：轻松实现数据表增删改查全攻略

轿车漆面保养揭秘：深度解析漆面数据表，解锁完美车漆保养之道

揭秘国考数据表：揭秘国家公务员考试背后的真相与趋势