前端页面模块修改成可动态生成数据模块——大部分数据为GPT生成（仅供学习参考）

呆淋2024-10-10 10:55

前端页面模块修改成可动态生成数据模块：

这些案例展示了如何通过Blade模板将前端页面模块变成可动态生成的模板。通过巧妙使用Blade语法、控制结构、CSS/JS分离、组件复用等技巧，可以大大提高代码的灵活性和复用性。在Laravel的Controller中准备好数据并传递给模板，是动态生成页面模块的核心。

案例 1：自定义商品列表展示模块

前后变化：
静态HTML代码（前）：
html 复制代码 
<div class="product-item">
    <img src="images/product1.jpg" alt="Product 1">
    <h2>Product 1</h2>
    <p>This is a great product.</p>
    <span>$29.99</span>
</div>

<div class="product-item">
    <img src="images/product2.jpg" alt="Product 2">
    <h2>Product 2</h2>
    <p>This is another great product.</p>
    <span>$39.99</span>
</div>
动态Blade模板代码（后）：
blade 复制代码 
@foreach($products as $product)
    <div class="product-item">
        <img src="{{ $product['image'] }}" alt="{{ $product['title'] }}">
        <h2>{{ $product['title'] }}</h2>
        <p>{{ $product['description'] }}</p>
        <span>${{ $product['price'] }}</span>
    </div>
@endforeach
setting.json 文件：
json 复制代码 
{
    "name": "product-list",
    "title": "商品列表模块",
    "schema": [
        {
            "type": "section",
            "name": "section",
            "label": "商品列表设置"
        },
        {
            "type": "combo",
            "name": "products",
            "label": "商品信息",
            "multiple": true,
            "multiLine": true,
            "value": [
                {
                    "title": "Product 1",
                    "image": "images/product1.jpg",
                    "description": "This is a great product.",
                    "price": "29.99"
                },
                {
                    "title": "Product 2",
                    "image": "images/product2.jpg",
                    "description": "This is another great product.",
                    "price": "39.99"
                }
            ],
            "items": [
                {
                    "type": "input-text",
                    "name": "title",
                    "label": "商品标题"
                },
                {
                    "type": "input-image",
                    "name": "image",
                    "label": "商品图片"
                },
                {
                    "type": "textarea",
                    "name": "description",
                    "label": "商品描述"
                },
                {
                    "type": "input-number",
                    "name": "price",
                    "label": "价格"
                }
            ]
        }
    ]
}
setting_data.json 文件：
json 复制代码 
{
    "products": [
        {
            "title": "Product 1",
            "image": "images/product1.jpg",
            "description": "This is a great product.",
            "price": "29.99"
        },
        {
            "title": "Product 2",
            "image": "images/product2.jpg",
            "description": "This is another great product.",
            "price": "39.99"
        }
    ]
}

案例 2：可自定义的博客文章卡片模块

前后变化：
静态HTML代码（前）：
html 复制代码 
<div class="post-card">
    <h3>Post Title 1</h3>
    <p>This is a brief description of the post.</p>
    <p>By Author Name on January 1, 2024</p>
</div>

<div class="post-card">
    <h3>Post Title 2</h3>
    <p>This is another brief description of the post.</p>
    <p>By Another Author on February 15, 2024</p>
</div>
动态Blade模板代码（后）：
blade 复制代码 
@foreach($posts as $post)
    <div class="post-card">
        <h3>{{ $post['title'] }}</h3>
        <p>{{ Str::limit($post['content'], 100) }}</p>
        <p>By {{ $post['author'] }} on {{ $post['published_at']->format('M d, Y') }}</p>
    </div>
@endforeach
setting.json 文件：
json 复制代码 
{
    "name": "blog-posts",
    "title": "博客文章模块",
    "schema": [
        {
            "type": "section",
            "name": "section",
            "label": "博客文章设置"
        },
        {
            "type": "combo",
            "name": "posts",
            "label": "文章信息",
            "multiple": true,
            "multiLine": true,
            "value": [
                {
                    "title": "Post Title 1",
                    "content": "This is a brief description of the post.",
                    "author": "Author Name",
                    "published_at": "2024-01-01"
                },
                {
                    "title": "Post Title 2",
                    "content": "This is another brief description of the post.",
                    "author": "Another Author",
                    "published_at": "2024-02-15"
                }
            ],
            "items": [
                {
                    "type": "input-text",
                    "name": "title",
                    "label": "文章标题"
                },
                {
                    "type": "textarea",
                    "name": "content",
                    "label": "文章内容"
                },
                {
                    "type": "input-text",
                    "name": "author",
                    "label": "作者"
                },
                {
                    "type": "input-date",
                    "name": "published_at",
                    "label": "发布日期"
                }
            ]
        }
    ]
}
setting_data.json 文件：
json 复制代码 
{
    "posts": [
        {
            "title": "Post Title 1",
            "content": "This is a brief description of the post.",
            "author": "Author Name",
            "published_at": "2024-01-01"
        },
        {
            "title": "Post Title 2",
            "content": "This is another brief description of the post.",
            "author": "Another Author",
            "published_at": "2024-02-15"
        }
    ]
}

案例 3：自定义统计数字板块

前后变化：
静态HTML代码（前）：
html 复制代码 
<div class="stat-item">
    <span class="stat-number" data-count="4465">0</span>
    <p>Projects</p>
</div>

<div class="stat-item">
    <span class="stat-number" data-count="4">0</span>
    <p>Factories</p>
</div>
动态Blade模板代码（后）：
blade 复制代码 
@foreach($statistics as $stat)
    <div class="stat-item">
        <span class="stat-number" data-count="{{ $stat['num'] }}">0</span>
        <p>{{ $stat['title'] }}</p>
    </div>
@endforeach
<script src="{{ asset('js/counter.js') }}"></script>
setting.json 文件：
json 复制代码 
{
    "name": "stat-counter",
    "title": "统计数字板块",
    "schema": [
        {
            "type": "section",
            "name": "section",
            "label": "统计数字设置"
        },
        {
            "type": "combo",
            "name": "statistics",
            "label": "统计信息",
            "multiple": true,
            "multiLine": true,
            "value": [
                {
                    "title": "Projects",
                    "num": "4465"
                },
                {
                    "title": "Factories",
                    "num": "4"
                }
            ],
            "items": [
                {
                    "type": "input-text",
                    "name": "title",
                    "label": "统计项标题"
                },
                {
                    "type": "input-number",
                    "name": "num",
                    "label": "统计项数字"
                }
            ]
        }
    ]
}
setting_data.json 文件：
json 复制代码 
{
    "statistics": [
        {
            "title": "Projects",
            "num": "4465"
        },
        {
            "title": "Factories",
            "num": "4"
        }
    ]
}

案例 4：客户评价轮播模块

前后变化：
静态HTML代码（前）：
html 复制代码 
<div class="testimonial-item">
    <img src="images/client1.jpg" alt="Client 1">
    <h4>Client 1</h4>
    <p>"This is a great product!"</p>
</div>

<div class="testimonial-item">
    <img src="images/client2.jpg" alt="Client 2">
    <h4>Client 2</h4>
    <p>"I highly recommend this company!"</p>
</div>
动态Blade模板代码（后）：
blade 复制代码 
<div class="testimonials-carousel">
    @foreach($testimonials as $testimonial)
        <div class="testimonial-item">
            <img src="{{ $testimonial['avatar'] }}" alt="{{ $testimonial['name'] }}">


            <h4>{{ $testimonial['name'] }}</h4>
            <p>"{{ $testimonial['review'] }}"</p>
        </div>
    @endforeach
</div>
<script src="{{ asset('js/carousel.js') }}"></script>
setting.json 文件：
json 复制代码 
{
    "name": "testimonials-carousel",
    "title": "客户评价轮播模块",
    "schema": [
        {
            "type": "section",
            "name": "section",
            "label": "客户评价设置"
        },
        {
            "type": "combo",
            "name": "testimonials",
            "label": "客户评价信息",
            "multiple": true,
            "multiLine": true,
            "value": [
                {
                    "name": "Client 1",
                    "review": "This is a great product!",
                    "avatar": "images/client1.jpg"
                },
                {
                    "name": "Client 2",
                    "review": "I highly recommend this company!",
                    "avatar": "images/client2.jpg"
                }
            ],
            "items": [
                {
                    "type": "input-text",
                    "name": "name",
                    "label": "客户姓名"
                },
                {
                    "type": "textarea",
                    "name": "review",
                    "label": "评价内容"
                },
                {
                    "type": "input-image",
                    "name": "avatar",
                    "label": "客户头像"
                }
            ]
        }
    ]
}
setting_data.json 文件：
json 复制代码 
{
    "testimonials": [
        {
            "name": "Client 1",
            "review": "This is a great product!",
            "avatar": "images/client1.jpg"
        },
        {
            "name": "Client 2",
            "review": "I highly recommend this company!",
            "avatar": "images/client2.jpg"
        }
    ]
}

案例 5：自定义导航菜单

前后变化：
静态HTML代码（前）：
html 复制代码 
<nav>
    <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About Us</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact Us</a></li>
    </ul>
</nav>
动态Blade模板代码（后）：
blade 复制代码 
<nav>
    <ul>
        @foreach($menuItems as $menuItem)
            <li><a href="{{ $menuItem['url'] }}">{{ $menuItem['name'] }}</a></li>
        @endforeach
    </ul>
</nav>
setting.json 文件：
json 复制代码 
{
    "name": "nav-menu",
    "title": "导航菜单模块",
    "schema": [
        {
            "type": "section",
            "name": "section",
            "label": "导航菜单设置"
        },
        {
            "type": "combo",
            "name": "menuItems",
            "label": "菜单项",
            "multiple": true,
            "multiLine": true,
            "value": [
                {
                    "name": "Home",
                    "url": "/home"
                },
                {
                    "name": "About Us",
                    "url": "/about"
                }
            ],
            "items": [
                {
                    "type": "input-text",
                    "name": "name",
                    "label": "菜单名称"
                },
                {
                    "type": "input-url",
                    "name": "url",
                    "label": "菜单链接"
                }
            ]
        }
    ]
}
setting_data.json 文件：
json 复制代码 
{
    "menuItems": [
        {
            "name": "Home",
            "url": "/home"
        },
        {
            "name": "About Us",
            "url": "/about"
        }
    ]
}

文件生成的注意事项以及实现过程：

文件生成过程：

  1. 确定模块的动态部分：

    • 找出哪些内容需要通过外部数据动态生成，如商品列表、博客文章、统计数据等。
    • 将这些内容抽象为数据结构，以便后续可以通过Blade模板渲染。

  2. 创建setting.json文件：

    • setting.json文件定义了模块的设置项。该文件用于描述页面模块的结构、可配置项（如文本、图片、数字等）。
    • 定义集合（如商品列表、菜单项等）的字段结构，确保数据类型正确，并指定默认值。
    • 示例：为每个集合项指定input-text（文本输入框）、textarea（多行文本输入）、input-image（图片选择）、input-number（数字输入）等控件类型。

  3. 创建setting_data.json文件：

    • setting_data.json文件用于存储实际的动态数据。该文件可以根据实际项目需要进行调整，加载页面时会作为初始数据传递给模板。
    • 根据setting.json中定义的字段结构，填充实际数据，如商品信息、文章内容、统计数字等。

  4. 在Blade模板中使用数据：

    • 通过Blade语法（如@foreach）遍历传递的数据集合，并动态渲染HTML内容。
    • 使用{``{ $variable }}将数据插入到HTML中。

注意事项：

  1. 数据结构保持一致：

    • setting.json和setting_data.json文件中的数据结构必须保持一致。setting.json定义了数据结构，setting_data.json则提供实际数据。

  2. 类型和格式的匹配：

    • 确保setting.json中的字段类型与前端的Blade模板中的使用保持一致。例如，如果定义了input-number，确保Blade模板中相应字段被处理为数字。

  3. 多样化的数据格式支持：

    • 可以在setting.json中为不同的字段类型设置对应的表单元素（如文本、数字、图片等），确保前端支持各种数据格式的动态加载。

通过这种方式，你可以生成高度动态化和模块化的前端页面，实现自定义的集合内容模块，提升页面的可复用性和扩展性。

将前端页面模块转换为可自定义集合内容的Blade模板是一项常见的任务，特别是在Laravel框架中构建可复用的动态前端页面时。

主要过程：

  1. 确定模块化的静态HTML部分：

    • 首先，确定页面中哪些部分是动态的，哪些部分是静态的。静态部分可以保持不变，而动态部分则需要用Blade变量替换。

  2. 将静态HTML模板转换为Blade模板：

    • 将静态HTML中的内容替换为Blade模板语法。将数据、文本、图片路径等元素替换为Blade中的变量（如{``{ $variable }}），便于传递动态数据。

  3. 使用Blade的控制结构：

    • 使用Blade的控制结构（如@foreach，@if等）处理需要重复或条件渲染的内容。例如，使用@foreach来循环遍历集合数据，生成多段相似的HTML。

  4. 在Controller中处理数据传递：

    • 在Laravel的Controller中准备好所需的动态数据，并传递给Blade模板。可以使用compact()或with()方法将数据传递到视图中。

  5. Blade组件和部分复用：

    • 利用Blade组件（如@component，@include）将常见的部分提取出来，以便在不同的页面或不同的模块之间复用。这使得代码更加简洁和易于维护。

技巧：

  1. Blade变量与集合数据结合：

    • 将HTML中需要动态替换的部分替换为Blade变量，如标题、描述、图片、链接等。通过在Controller中将集合数据传递给Blade模板，模板可以根据不同的数据动态生成页面内容。

  2. 条件渲染和循环：

    • 利用Blade的控制语句（如@foreach, @if），可以动态渲染数据。这在处理列表或数组类型的数据时尤为有用。根据数据的有无或其他条件来决定是否渲染某些内容。

  3. 使用Blade组件提高代码复用性：

    • 将重复使用的页面片段转化为Blade组件或者部分模板，便于在不同的页面中引用和复用。组件还可以接受参数，进一步提高其灵活性。

  4. CSS和JS模块化处理：

    • 当某个前端模块需要与多个页面共享时，可以将相应的CSS和JS文件分离出来，并在Blade模板中根据需要进行引入。

  5. JSON或API数据的处理：

    • 可以通过读取JSON文件或调用API，将数据传递给Blade模板，实现前端的动态渲染。比如，利用json_decode()函数读取配置文件并将其传递给Blade模板。
相关推荐
量子-Alex35 分钟前
【多模态聚类】用于无标记视频自监督学习的多模态聚类网络
学习·音视频·聚类
轻口味37 分钟前
命名空间与模块化概述
开发语言·前端·javascript
吉大一菜鸡40 分钟前
FPGA学习（基于小梅哥Xilinx FPGA）学习笔记
笔记·学习·fpga开发
前端小小王1 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发1 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀2 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪2 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
sunnf2 小时前
DB-GPT 智谱在线模型配置
gpt
云起无垠2 小时前
第79期 | GPTSecurity周报
gpt·aigc
热门推荐
01Cube-Studio：开源大模型全链路一站式中台02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问07构建高效的广告投放系统：应用架构的设计与实现08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10【一文读懂】NTN（非地面网络）技术介绍