layui框架怎样展示商品

Layui框架可以通过以下步骤展示商品：

1. 引入Layui框架的相关组件，如Layui CSS、Layui JS、jQuery等。

2. 创建一个包含商品信息的HTML模板，包括商品名称、价格、图片等。

3. 使用Layui的模板引擎laytpl将商品信息模板和后台数据进行绑定，生成商品列表。

4. 将商品列表渲染到前端页面上，通过Layui的布局组件实现商品列表的排版和展示。

5. 可以使用Layui的其他组件，如轮播图组件、弹出层组件等来增强商品展示的效果和用户体验。

示例代码：

HTML模板：

<script type="text/html" id="goodsTpl">
  {{# layui.each(d.data, function(index, item){ }}
  <div class="layui-col-md3">
    <div class="goods-item">
      <div class="goods-img">
        <a href="{{item.link}}">
          <img src="{{item.img}}" alt="{{item.title}}">
        </a>
      </div>
      <div class="goods-info">
        <div class="goods-title">{{item.title}}</div>
        <div class="goods-price">￥{{item.price}}</div>
      </div>
    </div>
  </div>
  {{# }); }}
</script>

JavaScript代码：

// 引入Layui组件
layui.use(['laytpl','jquery'], function(){
  var laytpl = layui.laytpl,
      $ = layui.jquery;
  
  // 模拟后台数据
  var data = {
    data: [
      {
        title: '商品1',
        price: 100,
        img: 'img/goods1.jpg',
        link: '#'
      },
      {
        title: '商品2',
        price: 200,
        img: 'img/goods2.jpg',
        link: '#'
      },
      {
        title: '商品3',
        price: 300,
        img: 'img/goods3.jpg',
        link: '#'
      }
    ]
  };
  
  // 使用Layui模板引擎渲染商品列表
  var getGoodsTpl = $('#goodsTpl').html();
  laytpl(getGoodsTpl).render(data, function(html){
    $('#goodsList').html(html);
  });
});

CSS样式：

.goods-item {
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.goods-img {
  height: 200px;
  text-align: center;
  line-height: 200px;
}

.goods-img img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

.goods-info {
  padding: 10px;
}

.goods-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.goods-price {
  font-size: 14px;
  color: #f00;
}