iCMS:json json处理标签

# iCMS JSON标签技术文档 ## JSON标签 (json) JSON标签用于获取和解析JSON数据，支持从URL获取或直接解析JSON字符串。 ### iCMS:json 标签 #### 支持参数 | 参数名 | 类型 | 默认值 | 说明 | | ------ | ----------- | ------ | --------------- | | url | 字符串 | - | JSON数据URL地址 | | json | 字符串 | - | JSON字符串 | | cache | 布尔值 | false | 是否缓存结果 | | time | 整数 | -1 | 缓存时间（秒） | | page | 布尔值/整数 | false | 是否按页缓存 | #### 返回值 解析后的JSON数据数组。如果解析失败，将显示错误信息并返回空数组。 #### 使用示例 ```html <!-- 从URL获取JSON数据 --> <!--{iCMS:json url="https://api.example.com/data" cache="true" time="3600"}--> <div class="data-list"> <!--{foreach key="key" value="item" from="$json"}--> <div class="item"> <h3><!--{$item.title}--></h3> <p><!--{$item.description}--></p> </div> <!--{/foreach}--> </div> <!-- 解析JSON字符串 --> <!--{iCMS:json json='{"name":"张三","age":25,"skills":["PHP","JavaScript","CSS"]}'}--> <div class="user-info"> <h3><!--{$json.name}--></h3> <p>年龄: <!--{$json.age}--></p> <p>技能: <!--{foreach key="k" value="skill" from="$json.skills"}--> <span class="skill"><!--{$skill}--></span> <!--{/foreach}--> </p> </div> ``` ### 常见应用场景 #### 1. 调用第三方API ```html <!--{iCMS:json url="https://api.weather.com/forecast?city=beijing" cache="true" time="1800"}--> <div class="weather-forecast"> <h2>天气预报</h2> <div class="current"> <h3>当前天气: <!--{$json.current.condition}--></h3> <p>温度: <!--{$json.current.temperature}-->°C</p> <p>湿度: <!--{$json.current.humidity}-->%</p> </div> <div class="forecast"> <h3>未来天气</h3> <ul> <!--{foreach key="key" value="day" from="$json.forecast"}--> <li> <span class="date"><!--{$day.date}--></span> <span class="condition"><!--{$day.condition}--></span> <span class="temp"><!--{$day.low}-->°C - <!--{$day.high}-->°C</span> </li> <!--{/foreach}--> </ul> </div> </div> ``` #### 2. 配置数据 ```html <!--{iCMS:json json='{"theme":{"primary":"#3498db","secondary":"#2ecc71"},"layout":{"sidebar":"left","width":"1200px"}}' cache="true"}--> <style> :root { --primary-color: <!--{$json.theme.primary}-->; --secondary-color: <!--{$json.theme.secondary}-->; --layout-width: <!--{$json.layout.width}-->; } </style> <div class="container" style="max-width: <!--{$json.layout.width}-->;"> <div class="layout layout-<!--{$json.layout.sidebar}-->"> <!-- 页面内容 --> </div> </div> ``` #### 3. 动态数据展示 ```html <!--{iCMS:json url="/api/statistics.json" cache="true" time="600"}--> <div class="statistics"> <h2>网站统计</h2> <div class="stats-grid"> <div class="stat-item"> <h3>文章总数</h3> <div class="value"><!--{$json.articles}--></div> </div> <div class="stat-item"> <h3>用户总数</h3> <div class="value"><!--{$json.users}--></div> </div> <div class="stat-item"> <h3>评论总数</h3> <div class="value"><!--{$json.comments}--></div> </div> <div class="stat-item"> <h3>今日访问</h3> <div class="value"><!--{$json.today_visits}--></div> </div> </div> </div> ``` ### 注意事项 1. **URL与JSON参数**：必须提供url或json参数中的一个，否则标签将返回false 2. **缓存机制**：启用缓存可以减少网络请求，提高性能 3. **错误处理**：JSON解析失败时会显示错误信息并返回空数组 4. **安全性**：从外部URL获取数据时，应确保来源可信 5. **缓存时间**：根据数据更新频率设置合适的缓存时间 ### 高级用法 #### 分页缓存 ```html <!--{iCMS:json url="https://api.example.com/data?page=$page" cache="true" page="true" time="1800"}--> <!-- 这将为每个页码创建单独的缓存 --> ``` #### 条件缓存 ```html <!--{if $need_fresh}--> <!--{iCMS:json url="https://api.example.com/data" cache="false"}--> <!--{else}--> <!--{iCMS:json url="https://api.example.com/data" cache="true" time="3600"}--> <!--{/if}--> ``` #### 组合使用 ```html <!--{iCMS:json url="https://api.example.com/products" cache="true"}--> <!--{foreach key="key" value="product" from="$json.items"}--> <div class="product"> <h3><!--{$product.name}--></h3> <p>价格: ¥<!--{$product.price}--></p> <!-- 获取每个产品的详细信息 --> <!--{iCMS:json url="https://api.example.com/product/<!--{$product.id}-->" cache="true" time="7200"}--> <div class="product-details"> <p>库存: <!--{$json.stock}--></p> <div class="description"><!--{$json.description}--></div> </div> <!--{/iCMS}--> </div> <!--{/foreach}--> ```