非常便利的前端模板smarty js 的使用

最近在开发一个管理系统 在数据呈现时候 使用了smarty js的 库 。熟悉php smarty摸板的应该很熟悉

但我一开始还是表示怀疑态度的! 现在用了不要太爽哈 其实腾讯大大也在用类似的模板生成数据 比方lol 抽皮肤活动!!

用法很简单

1 获得json数据 通常是ajax获取json 或者直接动态json生成

2 创建html

3 调用

然后就可以在htm里生成数据了

 

很神奇 也很方便 好了我只是拖 说这个不错而已 用法是别的博主转载的 感谢

github地址:  https://github.com/miroshnikov/jsmart(里面也有教程)

首先来看if语句,if语句

{if},{elseif},{else}
{if $foo != 'bar'}
   bar
{elseif $foo == 'abc'}
   buh
{else}
   smth else
{/if}

foreach语句

{foreach $comic as $i => $comic}
      <tr>
        <td>{$comic.cnum}</td><td>{$comic.ctitle}</td>
        <td><a href="javascript:lookComic({$comic.cpage});">查看</a>
         <a href="javascript:editComic({$comic.cpage});">修改</a>
         <a href="javascript:deleteComic({$comic.cpage});">删除</a>
        </td>
      </tr>
      {foreachelse}
                            <td>没有数据</td><td>没有数据</td>
      {/foreach}

 还可以使用javascript 但不推荐 js里再生成js 没什么意义 而且变量是全局的

{$foo = 'bar'}

{javascript}
   if (foo == 'bar')

    alert(foo); // res: bar
    }
{/javascript}

还有很多用法 但也没时间仔细研究 边学边用吧

蛮适合做小功能性网页的, php的smarty有时候也过于庞大了哈~

 

转载于:https://www.cnblogs.com/lanbosm/p/5252450.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
graduation 毕业设计代码,还没完成!但可以跑哦~ Fis3+Es6+Smarty+Tmpl 项目实战 阅读以下部分假定你已经了解: 构建工具 Fis3 基于Smarty的解决方案 Fis-Smarty 一些杂碎 Less, Tmpl, Es6 ... 微薄网站的设计与实现 功能 展示,留言,评论,评论量,访问量 后台CMS 瀑布流展示,懒加载数据 接入微博组件等 技术方案 前后端分离 构建: Fis3 结构: HTML,TMPL,Smarty 样式: Less 类库/框架: jQuery util: urlParam ... 数据: 假数据模拟,后期发布开发机联调 目录结构 前端目录 └─graduation ├─ README.md ├─ home └─ common ├─ plugin # Smarty 的插件放入这个目录 ├─ smarty.conf # 本地测试的 Smarty 引擎的配置文件 ├─ fis-conf.js # fis3 的配置文件 ├─ page # 放一些页面 ├─ server.conf # 本地测试的URL转发规则配置文件 ├─ static # 非组件静态资源 ├─ test # 假数据 └─ widget # 放一些 widget,里面代码最终会被组件化封装 ├─ header # 头部模块 │ ├─ header.js # js文件es6 │ ├─ header.less # css预处理 │ ├─ header.tmpl # JS模板 │ └─ header.tpl # Smarty 复用还是挺方便的 ├─ nav # 导航模块 ├─ article # 文章模块 └─ footer # 尾部模块 目录文件不是都必须需要,一般都会包含page、widget俩目录 前端预览或发布到本地模拟开发机预览该项目 发布到本地模拟开发机预览该项目 修改 fis-global-conf.js const RECEIVER = 'http://127.0.0.1/graduation-rd/receiver.php'; const to_path = '/graduation-rd'; const base_url = '/Applications/XAMPP/xamppfiles/htdocs/graduation-rd/'; 安装 npm install -g fis3 npm install -g fis3-smarty 后端环境下载 启动 fis3 release -r common xuecheng fis3 release -r home xuecheng fis3 release -r ... 发布成功后目录 └─ htdocs └─graduation-rd ├── application ├── home.php ├── license.txt ├── receiver.php ├── system ├── user_guide ├── template # .tpl 发布位置 ├── static # 静态资源发布位置 ├── plugin # plugin/*.php 发布位置 └── config # config/*.json 发布位置
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值