搜索
织梦建站

织梦API如何为LayUI高效提供数据？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 1 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 33 分钟
位置： 首页 › 织梦建站 › 正文

下面我将为你提供一个完整、详细的步骤指南，从后端API开发到前端LayUI调用，包含核心代码和最佳实践。

织梦api给layUI提供数据
（图片来源网络，侵删）

整体思路

  1. 后端（织梦CMS）：创建一个自定义的PHP文件，这个文件将作为API接口，它会连接数据库，查询你需要的数据（如文章列表、分类等），然后将数据格式化为JSON格式返回给前端。
  2. 前端（LayUI）：使用LayUI的数据表格组件（table）或其他需要数据的组件（如select），通过AJAX请求调用后端API接口。
  3. 数据交互：前端接收到JSON数据后，LayUI会自动将其渲染成表格、下拉列表等UI元素。

第一步：在织梦CMS中创建API接口

这是最关键的一步,我们需要创建一个PHP文件来处理数据请求。

创建API文件

在你的织梦CMS根目录下（与index.php同级），创建一个新文件夹，api，然后在 api 文件夹里创建一个新文件，article_list.php。

你的网站根目录/
├── api/
│   └── article_list.php  <-- 这是我们的API文件
├── dede/
├── include/
├── static/
├── index.php
└── ...

编写API代码 (article_list.php)

这个文件的核心任务是：安全地接收参数 -> 查询数据库 -> 返回JSON数据。

<?php
// 引入织梦数据库配置文件，确保路径正确
// 如果你的文件在根目录，这个路径通常没问题
require_once (dirname(__FILE__) . "/include/config_global.php");
// 引入数据库操作类
require_once (dirname(__FILE__) . "/include/dedehtml.class.php");
// 设置响应头为JSON，告诉浏览器返回的是JSON数据
header('Content-Type: application/json; charset=utf-8');
// --- 1. 安全地获取前端传递过来的参数 ---
// 使用 $_GET 或 $_POST，取决于你前端如何发送请求
$page = isset($_GET['page']) ? intval($_GET['page']) : 1; // 当前页码
$limit = isset($_GET['limit']) ? intval($_GET['limit']) : 10; // 每页显示条数
// 可以添加更多筛选条件，例如按分类ID查询
$cid = isset($_GET['cid']) ? intval($_GET['cid']) : 0; // 分类ID
// --- 2. 连接数据库并查询数据 ---
// 初始化数据库连接
$db = new DedeHTML($cfg_dbhost, $cfg_dbuser, $cfg_dbpwd, $cfg_dbname, $cfg_dbprefix);
// 构建SQL查询语句
// 这里以查询文章表 `dede_archives` 为例
$sql = "SELECT a.id, a.title, a.pubdate, c.typename, a.click ";
$sql .= "FROM dede_archives AS a ";
$sql .= "LEFT JOIN dede_arctype AS c ON a.typeid = c.id ";
$sql .= "WHERE 1=1 ";
// 添加筛选条件
if ($cid > 0) {
    $sql .= "AND a.typeid = $cid ";
}
// 添加排序和分页
$sql .= "ORDER BY a.id DESC ";
// LIMIT子句的计算：(页码-1) * 每页条数, 每页条数
$sql .= "LIMIT " . (($page - 1) * $limit) . ", $limit";
// 执行查询
$datalist = $db->GetList($sql); // GetList 是一个方便的织梦方法，可以直接返回数组
// --- 3. 获取总数据量，用于LayUI分页 ---
$count_sql = "SELECT COUNT(*) as total FROM dede_archives";
$row = $db->GetOne($count_sql);
$total = $row['total'];
// --- 4. 格式化数据并返回JSON ---
// LayUI数据表格期望的数据格式是：
// {
//   "code": 0,
//   "msg": "",
//   "count": 总数据量,
//   "data": [ 数据数组 ]
// }
// 处理日期，让前端更方便使用
foreach ($datalist as &$item) {
    $item['pubdate'] = date('Y-m-d H:i:s', $item['pubdate']);
}
// 组装最终返回的数据
$result = [
    "code" => 0, // LayUI规定，0表示成功
    "msg"  => "",
    "count" => $total,
    "data" => $datalist
];
// 将数组转换为JSON字符串并输出
// JSON_UNESCAPED_UNICODE 确保中文字符不被转义
echo json_encode($result, JSON_UNESCAPED_UNICODE);
// 关闭数据库连接
$db->Close();
?>

代码解释：

织梦api给layUI提供数据
（图片来源网络，侵删）
  • 安全性：对 $_GET 的参数都使用 intval() 进行处理，防止SQL注入。
  • 分页：LayUI的table组件会自动传递 page 和 limit 参数，我们根据这两个参数计算 LIMIT 子句。
  • 数据格式：返回的JSON格式严格遵循LayUI table 组件的要求，这是LayUI能够正确解析和渲染的关键。
  • 编码：header 和 json_encode 都设置了 utf-8，确保中文正常显示。

第二步：在前端页面中使用LayUI调用API

我们创建一个HTML文件,用于展示LayUI数据表格，并加载我们刚刚创建的API数据。

创建HTML文件

在网站的任意静态页面位置创建一个HTML文件,article.html。

编写前端代码 (article.html)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">使用LayUI加载织梦文章列表</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <style>
        body { padding: 20px; }
    </style>
</head>
<body>
<table class="layui-table" id="articleTable" lay-filter="articleTable"></table>
<!-- 引入LayUI的JS文件 -->
<script src="/static/layui/layui.js"></script>
<script>
layui.use(['table', 'layer'], function(){
    var table = layui.table;
    var layer = layui.layer;
    // 渲染表格 - 这是核心方法
    table.render({
        elem: '#articleTable' // 绑定表格的ID
        ,url: '/api/article_list.php' // 你的API接口地址
        // ,where: { // 如果需要额外传递参数，可以在这里定义
        //     cid: 1 // 只看分类ID为1的文章
        // }
        ,page: true // 开启分页
        ,limit: 10 // 每页默认显示的条数
        ,limits: [10, 20, 50, 100] // 每页条数的选择项
        ,cols: [[ // 表头设置
            {field: 'id', title: 'ID', width: 80, sort: true}
            ,{field: 'title', title: '文章标题', width: '40%'}
            ,{field: 'typename', title: '所属分类', width: 120}
            ,{field: 'pubdate', title: '发布时间', width: 180}
            ,{field: 'click', title: '点击量', width: 100, sort: true}
        ]]
        ,done: function(res, curr, count) {
            // 渲染完成的回调，可以在这里做些事情
            // console.log(res); // res即为接口返回的数据
            // console.log(curr); // 当前页码
            // console.log(count); // 数据总条数
        }
    });
});
</script>
</body>
</html>

代码解释：

  • layui.use：模块化加载LayUI的 table 和 layer 组件。
  • table.render：这是渲染数据表格的核心方法。
    • elem: 指定要渲染的HTML表格元素（通过ID）。
    • url: 指向我们后端API的URL，LayUI会自动向这个URL发送带有 page, limit 等参数的AJAX请求。
    • page: true: 开启LayUI的自动分页功能。
    • cols: 定义表格的列，field 必须与API返回的JSON数据中的键名完全一致。
    • done: 渲染完成的回调函数，可以用来在数据加载后执行一些操作。

第三步：进阶与最佳实践

添加筛选功能

假设我们想根据分类ID来筛选文章。

织梦api给layUI提供数据
（图片来源网络，侵删）

后端 (article_list.php) 我们已经写好了 $cid 的逻辑，无需改动。

前端 (article.html) 添加一个下拉选择框，并监听其变化来重新加载表格。

<!-- 在body中添加筛选框 -->
<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">选择分类</label>
        <div class="layui-input-inline">
            <select name="cid" id="categorySelect" lay-verify="required">
                <option value="">全部分类</option>
                <!-- 这里可以用JS动态加载分类，也可以写死 -->
                <option value="1">新闻动态</option>
                <option value="2">产品中心</option>
            </select>
        </div>
        <button class="layui-btn" id="searchBtn">查询</button>
    </div>
</div>
<table class="layui-table" id="articleTable" lay-filter="articleTable"></table>
// 在script标签内修改
layui.use(['table', 'form', 'layer'], function(){
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.jquery;
    // 渲染表格
    var tableIns = table.render({
        elem: '#articleTable'
        ,url: '/api/article_list.php'
        ,page: true
        ,cols: [[
            // ... 同上 ...
        ]]
    });
    // 监听查询按钮点击事件
    $('#searchBtn').on('click', function(){
        // 获取选中的分类ID
        var cid = $('#categorySelect').val();
        // 重新加载表格，并传递筛选参数
        tableIns.reload({
            where: { // 设定异步数据接口的额外参数
                cid: cid
            }
            ,page: {
                curr: 1 // 重新从第 1 页开始
            }
        });
    });
});

处理跨域问题

如果你的前端页面和API接口不在同一个域名下（前端是 localhost:8080，API是 localhost），就会遇到跨域问题，浏览器会阻止AJAX请求。

解决方案（在织梦API文件中添加）

在 article_list.php 文件的最顶部，添加以下代码：

<?php
// ... 在 require_once 之前添加 ...
// 允许任何来源的请求，你也可以指定具体的域名
// header("Access-Control-Allow-Origin: *");
// 更安全的做法，只允许你自己的前端域名
header("Access-Control-Allow-Origin: http://localhost:8080"); // 替换成你的前端域名
// 允许的请求方法
header("Access-Control-Allow-Methods: GET, POST");
// 允许的请求头
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
// ... 后面的代码保持不变 ...
require_once (dirname(__FILE__) . "/include/config_global.php");
// ...

使用Token进行API鉴权

为了防止API被滥用,你应该增加一个鉴权机制，最简单的方式是使用Token。

后端 (article_list.php) 在查询数据前，先验证Token。

// ... 在SQL查询之前添加 ...
$valid_token = 'YOUR_SECRET_TOKEN'; // 这里设置一个你自己的密钥
$provided_token = isset($_GET['token']) ? $_GET['token'] : '';
if ($provided_token !== $valid_token) {
    // 如果Token不正确，返回错误信息
    $result = [
        "code" => 403,
        "msg"  => "API访问权限不足，请提供正确的Token。",
        "count" => 0,
        "data" => []
    ];
    echo json_encode($result, JSON_UNESCAPED_UNICODE);
    exit; // 终止脚本执行
}
// ... 后面的SQL查询和返回数据代码 ...

前端 (article.html) 在 table.render 的 where 参数中添加Token。

table.render({
    elem: '#articleTable'
    ,url: '/api/article_list.php'
    ,where: {
        token: 'YOUR_SECRET_TOKEN' // 添加Token
    }
    // ... 其他配置 ...
});

通过以上步骤,你就成功地实现了织梦CMS为LayUI提供数据的功能。

核心回顾：

  1. 后端：创建一个 .php 文件，接收参数，查询数据库，返回符合LayUI格式的JSON数据。
  2. 前端：使用 table.render() 方法，指定 url 指向后端API，cols 中的 field 与JSON的 key 对应。
  3. 交互：LayUI自动处理分页参数和AJAX请求，开发者只需关注业务逻辑和UI呈现。

这个模式不仅适用于数据表格,同样适用于LayUI的下拉选择框（formSelects）、图片上传等所有需要数据源的组件，希望这份详细的指南能帮到你！

-- 展开阅读全文 --
头像
int main在C语言中具体指什么？
« 上一篇 今天
织梦picname如何更换图片？
下一篇 » 今天

相关文章

取消
微信二维码
支付宝二维码

目录[+]