织梦模板JS能解析吗?

99ANYc3cd6
预计阅读时长 21 分钟
位置: 首页 织梦建站 正文

当然可以,而且这在织梦模板(DedeCMS)的开发中是一种非常常见和重要的技术。

织梦模板在js能解析吗
(图片来源网络,侵删)

答案是:织梦模板的引擎本身是PHP,无法直接解析写在模板文件(.htm)里的 {dede:} 标签,你可以通过JavaScript来动态请求和解析由PHP生成的数据。

下面我将详细解释几种常见的实现方式,从简单到复杂。


核心概念:前后端分离思想

要理解这个问题,首先要明白织梦模板的工作流程:

  1. 前端(浏览器):用户访问一个网址,http://yourdomain.com/list-1.html
  2. 请求到达服务器:服务器上的Web服务器(如Nginx、Apache)接收到请求。
  3. PHP引擎处理:服务器发现这个请求需要由PHP处理,于是把它交给PHP引擎(如PHP-FPM)。
  4. 织梦引擎解析:PHP引擎加载织梦系统的核心文件,织梦引擎会读取 list_1.htm 这个模板文件。
  5. 替换标签:织梦引擎会扫描文件里的所有 {dede:} 标签(如 {dede:list}),执行相应的PHP代码从数据库里获取数据,然后用获取到的数据替换掉这些标签。
  6. 生成HTML:织梦引擎会输出一个纯HTML文件,发送给用户的浏览器。
  7. 浏览器渲染:浏览器收到这个纯HTML文件,然后开始执行里面的HTML、CSS和JavaScript代码。

关键点:当JavaScript开始执行时,它看到的已经是被替换完毕的纯HTML了,它看不到任何 {dede:}

要让JS“解析”织梦标签,我们不能指望JS直接看懂 {dede:},而是需要JS参与到“数据获取”这个环节中。

织梦模板在js能解析吗
(图片来源网络,侵删)

常见的JS解析织梦数据的方法

这里有几种主流的实现方式:

通过AJAX请求一个PHP接口(最常用、最推荐)

这是最标准、最灵活的方式,它遵循了前后端分离的思想。

工作流程:

  1. 前端JS发起请求:页面加载完成后,JavaScript使用 fetchaxios 等库,向服务器的一个特定URL(这个URL是一个PHP文件)发送一个AJAX请求。
  2. 后端PHP处理请求:服务器接收到这个请求,执行一个专门的PHP文件(get_data.php),这个文件里不包含任何织梦模板,而是直接使用织梦的数据库操作类(如 $dsql)来查询数据,并将查询结果(通常是JSON格式)返回。
  3. 前端JS接收数据并渲染:前端JS接收到PHP返回的JSON数据,然后使用JavaScript动态地操作DOM(创建新的HTML元素并添加到页面上)。

示例代码:

织梦模板在js能解析吗
(图片来源网络,侵删)

创建一个PHP接口文件 (api/get_articles.php)

<?php
require_once (dirname(__FILE__) . "/../include/common.inc.php"); // 引入织梦核心文件
// 设置响应头为JSON格式
header('Content-Type: application/json; charset=utf-8');
// 获取GET参数,例如分类ID
$cid = isset($_GET['cid']) ? intval($_GET['cid']) : 0;
// 使用织梦的数据库查询类
$sql = "SELECT id, title, pubdate FROM dede_archives WHERE typeid = {$cid} ORDER BY pubdate DESC LIMIT 10";
$dsql->SetQuery($sql);
$dsql->Execute();
$articles = [];
while ($row = $dsql->GetArray()) {
    // 格式化日期,方便JS使用
    $row['pubdate'] = date('Y-m-d H:i:s', $row['pubdate']);
    $articles[] = $row;
}
// 将数据转换为JSON并输出
echo json_encode($articles);
?>

在你的织梦模板文件 (index.htm) 中使用JS

<!DOCTYPE html>
<html>
<head>我的页面</title>
</head>
<body>
    <h1>文章列表</h1>
    <div id="article-list">
        <!-- 文章列表将由JS动态加载到这里 -->
        <p>正在加载...</p>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const articleList = document.getElementById('article-list');
            const categoryId = 1; // 假设我们要获取分类ID为1的文章
            // 使用 fetch API 发起请求
            fetch(`/api/get_articles.php?cid=${categoryId}`)
                .then(response => response.json())
                .then(data => {
                    // 清空加载提示
                    articleList.innerHTML = '';
                    // 遍历数据并渲染
                    data.forEach(article => {
                        const articleItem = document.createElement('div');
                        articleItem.className = 'article-item';
                        articleItem.innerHTML = `
                            <a href="/plus/view.php?aid=${article.id}">${article.title}</a>
                            <span class="date">${article.pubdate}</span>
                        `;
                        articleList.appendChild(articleItem);
                    });
                })
                .catch(error => {
                    console.error('获取数据失败:', error);
                    articleList.innerHTML = '<p>加载失败,请稍后再试。</p>';
                });
        });
    </script>
</body>
</html>

优点:

  • 性能好:页面初始加载快,数据按需获取。
  • 用户体验好:可以实现无刷新加载,页面更流畅。
  • 解耦:前端和后端(数据接口)分离,便于维护和扩展。

在模板中直接输出JSON数据给JS(适用于小量数据)

如果你的数据量不大,并且需要在页面加载时就初始化一些JS变量,可以直接在模板中通过PHP输出一个JS变量。

示例代码:

在织梦模板文件 (index.htm) 中

<!DOCTYPE html>
<html>
<head>我的页面</title>
</head>
<body>
    <h1>文章列表</h1>
    <div id="article-list"></div>
    <script>
        // PHP直接在这里定义了一个JS变量,数据在页面加载时就已准备好
        const initialArticles = {dede:json name='list' function='json_encode(@me)' /};
        document.addEventListener('DOMContentLoaded', function() {
            const articleList = document.getElementById('article-list');
            if (initialArticles && initialArticles.length > 0) {
                initialArticles.forEach(article => {
                    // ... 渲染逻辑同上 ...
                });
            } else {
                articleList.innerHTML = '<p>暂无文章。</p>';
            }
        });
    </script>
</body>
</html>

说明: 这里的 {dede:json} 是一个自定义标签,或者你可以使用织梦的 runphp='yes' 功能来实现。

使用 {dede:} + runphp 的方式:

{dede:list pagesize='10'}
    $items[] = [
        'id' => $fields['id'],
        'title' => $fields['title'],
        'pubdate' => date('Y-m-d', $fields['pubdate'])
    ];
{/dede:list}
<script>
    var articleData = <?php echo json_encode($items); ?>;
</script>

优点:

  • 简单直接,无需额外创建接口文件。
  • 数据在页面初始加载时就可用,JS无需再次请求。

缺点:

  • 增加了页面初始体积,如果数据量大会影响首屏加载速度。
  • 不适合需要频繁更新的动态数据。

利用织梦的“动态浏览”模式

织梦本身支持“动态浏览”,即文章链接是 plus/view.php?aid=xxx 的形式,这本身就是一种动态数据加载,你可以通过JS监听某些事件(如点击“加载更多”按钮),然后构造这个动态链接,将返回的HTML片段通过JS插入到页面中。

这种方式比较老旧,且容易因为织梦模板的更新而失效,不推荐在新项目中使用,但了解其原理有助于维护老系统。


方法 优点 缺点 适用场景
AJAX请求PHP接口 性能好、用户体验佳、前后端解耦、可扩展性强 需要编写额外的PHP接口文件,开发稍复杂 绝大多数现代Web应用,特别是需要动态交互和数据加载的场景
模板中直接输出JSON 简单、无需额外接口、数据初始化快 增加页面体积、影响首屏加载、不适合大数据 少量静态配置数据、页面初始化所需的小量数据
织梦动态浏览模式 利用现有功能 老旧、不易维护、耦合度高 维护织梦老系统,或实现简单的“加载更多”功能

对于任何新的或现代的织梦模板开发项目,强烈推荐使用第一种方法:通过AJAX请求一个独立的PHP数据接口,这是目前Web开发的标准实践,能让你的织梦网站拥有更好的性能和用户体验。

-- 展开阅读全文 --
头像
dede友情链接模板如何修改?
« 上一篇 01-15
dede如何调用上级栏目的文章列表?
下一篇 » 01-15

相关文章

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