模拟后端模板引擎渲染

上一篇:生成文档

下一篇:数据约定

前端写后端模板引擎可以解决 HTML转换为后端模板 这个痛点,提高工作效率。

前端渲染

前端使用模板引擎渲染页面需要三个重要元素:

  1. DOM
  2. 数据
  3. 模板

DOM

<div id="box"></div>
var box = document.getElementById('box')

数据

var data = {
    title: '标题',
    content: '内容xoxoxoxo',
    list: [
        "a", "b", "c"
    ]
}

模板

<!-- Handlebars 模板 -->
{{title}}
<hr>
<ul>
{{#each list}}
<li>{{this}}</li>
{{/each}}
</ul>

后端渲染

后端使用模板引擎渲染页面也需要四个主要元素

  1. url
  2. 数据
  3. 模板
  4. 页面请求方式

url

/render/

数据

{
    title: '标题',
    content: '内容xoxoxoxo',
    list: [
        "a", "b", "c"
    ]
}

模板

<!-- PHP Smarty 模板 -->
{{$title}}
<ul>
{{foreach $list as $this}}
<li>{{$this}}</li>
{{/foreach}}
</ul>
<!-- PHP 直接解析 -->
<?php echo $content; ?>
<hr>
<ul>
<?php
foreach($list as $value) {
    echo "<li>";
    echo $value;
    echo "</li>";
}
?>
</ul>

页面请求方式

GET POST DELETE PUT

fms.view(settings)

下载示例代码

下载后在在命令行切换至解压后的文件夹运行

npm install fms
nodemon -w fms.js fms.js

请务必安装 nodemon 启动项目提高调试效率 npm install nodemon -g

根据后端渲染页面所需的几个主要元素,在 fms.js 中使用如下代码配置页面渲染

fms.view({
    title: "PHP直接解析渲染示例",
    // 页面请求方式
    type: 'get',
    // url
    url: '/render/',
    // 模板
    template: "render.php",
    // 数据
    data: {
        title: '标题',
        content: '内容xoxoxoxo',
        list: [
            "a", "b", "c"
        ]
    },
    res: {
        ok: {
            content: "内容"
        },
        err: {
            content: "没有权限"
        },
        wait: {
            content: "等待管理员审核"
        }
    }
})

模板路径是 view/render.php,配置的参数是 template: "render.php"。 因为在默认参数 中配置了:

view: {
    templateDir: './view/'
}

使用 nodemon 启动 fms.js 后会在 http://127.0.0.1:3000/render/ 看到后端渲染脚本端口未启动的提示

确认你已经安装 php cli后在项目根目录运行

# 打开本地 1234 端口,以 mock/ 为项目根目录
php -S 127.0.0.1:1234 -t mock


可以在 //fms/ 中控制渲染数据以改变渲染结果

上一篇:生成文档

下一篇:数据约定

评论
想在此留下评论,请访问 {{issues_link}} 提交评论
Top