在前后端分离的开发场景中,Bootstrap Table作为常用的前端表格组件,需要后端提供符合其数据格式的JSON接口来实现动态数据加载。PHP作为轻量且易部署的后端语言,非常适合快速搭建这类接口。下面详细介绍实现过程。

接口核心需求分析
Bootstrap Table默认请求后端接口时,会携带分页、排序相关的参数,后端需要返回包含total(总数据条数)和rows(当前页数据数组)两个字段的JSON对象,才能正常渲染表格内容。常见的请求参数如下:
- page:当前请求的页码,默认从1开始
- limit:每页显示的数据条数
- sort:排序的字段名
- order:排序方式,值为asc或desc
基础环境准备
首先需要一个可用的MySQL数据库,假设我们有一个用户表user,表结构如下:
| 字段名 | 类型 | 说明 |
|---|---|---|
| id | int | 用户ID,自增主键 |
| username | varchar(50) | 用户名 |
| age | int | 用户年龄 |
| create_time | datetime | 创建时间 |
PHP接口实现步骤
1. 接收并处理请求参数
首先获取前端传递的分页、排序参数,设置默认值避免参数缺失导致的错误。
<?php
// 设置响应头为JSON格式
header('Content-Type: application/json; charset=utf-8');
// 允许跨域请求,根据实际需求调整
header('Access-Control-Allow-Origin: *');
// 获取请求参数,设置默认值
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$limit = isset($_GET['limit']) ? intval($_GET['limit']) : 10;
$sort = isset($_GET['sort']) ? $_GET['sort'] : 'id';
$order = isset($_GET['order']) ? $_GET['order'] : 'desc';
// 计算分页偏移量
$offset = ($page - 1) * $limit;
?>
2. 数据库连接与查询
使用PDO扩展连接数据库,先查询符合条件的总数据条数,再查询当前页的具体数据,支持排序功能。
<?php
// 数据库连接配置,实际使用时替换为自己的数据库信息
$db_host = '127.0.0.1';
$db_name = 'test_db';
$db_user = 'root';
$db_pass = '123456';
try {
// 创建PDO连接
$pdo = new PDO("mysql:host=$db_host;dbname=$db_name;charset=utf8", $db_user, $db_pass);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// 查询总数据条数
$count_sql = "SELECT COUNT(*) as total FROM user";
$count_stmt = $pdo->query($count_sql);
$total = $count_stmt->fetch(PDO::FETCH_ASSOC)['total'];
// 查询当前页数据,支持排序
$data_sql = "SELECT id, username, age, create_time FROM user ORDER BY $sort $order LIMIT $offset, $limit";
$data_stmt = $pdo->query($data_sql);
$rows = $data_stmt->fetchAll(PDO::FETCH_ASSOC);
// 封装返回数据
$result = [
'total' => $total,
'rows' => $rows
];
// 输出JSON数据
echo json_encode($result, JSON_UNESCAPED_UNICODE);
} catch (PDOException $e) {
// 错误处理,返回错误信息
echo json_encode([
'total' => 0,
'rows' => [],
'error' => $e->getMessage()
]);
}
?>
3. 前端调用示例
前端Bootstrap Table只需要配置接口地址即可自动请求数据,示例配置如下:
<table id="userTable" data-url="http://ipipp.com/api/user_list.php"></table>
<script>
$('#userTable').bootstrapTable({
columns: [{
field: 'id',
title: '用户ID',
sortable: true
}, {
field: 'username',
title: '用户名',
sortable: true
}, {
field: 'age',
title: '年龄',
sortable: true
}, {
field: 'create_time',
title: '创建时间'
}]
});
</script>
注意事项
- 排序字段
$sort直接拼接进SQL语句存在SQL注入风险,实际项目中需要校验排序字段是否为表中存在的字段,避免恶意参数传入。 - 数据库连接信息不要硬编码在接口文件中,建议放到独立的配置文件里,提升安全性和可维护性。
- 如果接口需要支持搜索功能,可以在接收参数时增加
search参数,在SQL查询中添加对应的WHERE条件即可。
以上代码为基础实现版本,实际生产环境中还需要增加参数校验、日志记录、接口鉴权等更多功能,保障接口的稳定性和安全性。
PHPJSONBootstrap_Table后端接口修改时间:2026-07-07 11:24:27