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

引言

随着互联网技术的不断发展，前端框架和后端框架的结合应用越来越广泛。在这个攻略中，我们将探讨如何利用ThinkPHP5（TP5）和Bootstrap框架轻松实现数据表的增删改查（CRUD）功能。TP5作为一款优秀的PHP开发框架，Bootstrap则以其简洁的界面设计和丰富的组件库受到广泛欢迎。本文将详细讲解如何将这两者结合起来，实现一个功能完善、界面美观的数据表管理系统。

准备工作

在开始之前，请确保您已安装以下软件：

PHP环境（推荐使用PHP 7.0以上版本）
ThinkPHP5框架
MySQL数据库
Bootstrap框架

数据库设计

首先，我们需要设计一个简单的用户表（user），包含以下字段：

字段名	数据类型	说明
id	int	主键
username	varchar	用户名
email	varchar	邮箱
password	varchar	密码

创建表的SQL语句如下：

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

ThinkPHP5模型设计

在ThinkPHP5中，我们需要创建一个模型（User.php）来操作数据库中的用户表：

namespace app\common\model;

use think\Model;

class User extends Model
{
    // 设置当前模型对应的完整数据表名称
    protected $table = 'user';

    // 定义关联规则
    public function role()
    {
        return $this->belongsTo('Role', 'role_id', 'id');
    }
}

视图设计

接下来，我们使用Bootstrap框架来设计视图界面。以下是一个简单的数据表增删改查界面示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>数据表管理</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim 和 Respond.js 用于 IE8 及以下版本浏览器支持 HTML5 元素和媒体查询 -->
    <!-- 警告：通过 file:// 协议（就是直接将html页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <h2>用户列表</h2>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addUserModal">添加用户</button>
        <table class="table table-bordered">
            <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>
                            <button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#editUserModal" data-id="{$user.id}">编辑</button>
                            <button type="button" class="btn btn-danger btn-xs" onclick="deleteUser({$user.id})">删除</button>
                        </td>
                    </tr>
                {/volist}
            </tbody>
        </table>
    </div>

    <!-- 添加用户模态框 -->
    <div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="addUserModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addUserModalLabel">添加用户</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="addUserForm">
                        <div class="form-group">
                            <label for="newUsername" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="newUsername" name="username" placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="newEmail" class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="newEmail" name="email" placeholder="请输入邮箱">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="newPassword" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="newPassword" name="password" placeholder="请输入密码">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="addUser()">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑用户模态框 -->
    <div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editUserModalLabel">编辑用户</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="editUserForm">
                        <input type="hidden" id="editUserId" name="id">
                        <div class="form-group">
                            <label for="editUsername" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="editUsername" name="username" placeholder="请输入用户名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="editEmail" class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="editEmail" name="email" placeholder="请输入邮箱">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="editPassword" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="editPassword" name="password" placeholder="请输入密码">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="editUser()">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        // 添加用户
        function addUser() {
            var data = $('#addUserForm').serialize();
            $.post("{:url('user/add')}", data, function (res) {
                if (res.code === 200) {
                    alert('添加成功！');
                    location.reload();
                } else {
                    alert('添加失败：' + res.msg);
                }
            });
        }

        // 删除用户
        function deleteUser(id) {
            if (confirm('确定要删除该用户吗？')) {
                $.post("{:url('user/delete')}", {id: id}, function (res) {
                    if (res.code === 200) {
                        alert('删除成功！');
                        location.reload();
                    } else {
                        alert('删除失败：' + res.msg);
                    }
                });
            }
        }

        // 编辑用户
        function editUser() {
            var data = $('#editUserForm').serialize();
            $.post("{:url('user/edit')}", data, function (res) {
                if (res.code === 200) {
                    alert('编辑成功！');
                    location.reload();
                } else {
                    alert('编辑失败：' + res.msg);
                }
            });
        }

        // 获取编辑用户信息
        $('.btn-success').click(function () {
            var id = $(this).data('id');
            $.get("{:url('user/getInfo')}", {id: id}, function (res) {
                if (res.code === 200) {
                    $('#editUserId').val(res.data.id);
                    $('#editUsername').val(res.data.username);
                    $('#editEmail').val(res.data.email);
                    $('#editPassword').val(res.data.password);
                } else {
                    alert('获取信息失败：' + res.msg);
                }
            });
        });
    </script>
</body>
</html>

控制器设计

接下来，我们需要在控制器（UserController.php）中实现用户管理相关的功能：

<?php
namespace app\common\controller;

use think\Controller;
use app\common\model\User;

class UserController extends Controller
{
    // 添加用户
    public function add()
    {
        $data = input('post.');
        $user = new User();
        $result = $user->save($data);
        if ($result) {
            return json(['code' => 200, 'msg' => '添加成功']);
        } else {
            return json(['code' => 400, 'msg' => '添加失败']);
        }
    }

    // 删除用户
    public function delete()
    {
        $id = input('get.id');
        $user = User::get($id);
        if ($user) {
            $result = $user->delete();
            if ($result) {
                return json(['code' => 200, 'msg' => '删除成功']);
            } else {
                return json(['code' => 400, 'msg' => '删除失败']);
            }
        } else {
            return json(['code' => 400, 'msg' => '用户不存在']);
        }
    }

    // 编辑用户
    public function edit()
    {
        $data = input('post.');
        $user = User::get($data['id']);
        if ($user) {
            $result = $user->save($data);
            if ($result) {
                return json(['code' => 200, 'msg' => '编辑成功']);
            } else {
                return json(['code' => 400, 'msg' => '编辑失败']);
            }
        } else {
            return json(['code' => 400, 'msg' => '用户不存在']);
        }
    }

    // 获取用户信息
    public function getInfo()
    {
        $id = input('get.id');
        $user = User::get($id);
        if ($user) {
            return json(['code' => 200, 'data' => $user->getData()]);
        } else {
            return json(['code' => 400, 'msg' => '用户不存在']);
        }
    }
}

总结

通过以上步骤，我们已经成功地使用TP5和Bootstrap实现了一个简单的数据表增删改查功能。在实际项目中，您可以根据需求进行功能扩展和优化，例如添加分页、权限验证等。希望这篇文章对您有所帮助！

正文

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

引言

准备工作

数据库设计

ThinkPHP5模型设计

视图设计

控制器设计

总结

相关阅读

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

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

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

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

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

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

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

揭秘伊犁地区新冠肺炎数据：追踪病毒足迹，共筑健康防线

揭秘三月份疫情数据：实时监控，科学防控，共筑健康防线

轿车漆面保养攻略：揭秘漆面数据表，守护爱车光彩如新