文/风笛

主要用于产品展示的企业官网，往往需要产品图集的展示，也就是类似一些电商网站中的商品展示。

然而，简洁的DouPHP并没有该功能，如果需要的话，还是得自己动手去开发。下面在前人的基础上，简单说说DouPHP产品图集展示的开发，适用于像我这样的DouPHP小白。

先说说基本思路：①在数据库中增加图集的字段→②在后台的Html文件中增加上传图片的组件→③在后台对应的PHP文件中，将上传的图片数据储存到数据库→④在后台对应的PHP文件中，加入编辑文章时图集处理的代码→⑤在前台的对应PHP文件中加入调用数据的代码→⑥在前端页面对应的位置使用smarty的标签（语法）调用图集数据。

一、增加gallery字段

首先是在数据库的产品表（dou_product）中增加字段“gallery”，该字段的设置和image字段差不多。

二、加入图集上传组件

建好字段之后，到后台的后台产品页面（admin/templates/product.htm）中增加上传图片的组件。组件下载地址：https://gitee.com/cuihaifeng123456/douphp_multi_graph_component。

1）解压组件文件夹，替换admin

2）引入多图插件

在引入多图插件的时候，注意路径，我的是当前路径的文件引用，所以直接是{include file="gallery_widget.htm"}

3）在添加产品那里增加上传的代码：

      <tr>
       <td align="right">图集上传</td>
       <td>
        <div id="gallery" class="tab-pane">
         <div class="gallery_upload" data-action="product.php?rec=upload_gallery" data-remove="">
         </div>
         <br/>
         <p class="label-primary">图集支持拖拽顺序调整，操作图集记得点击提交按钮保存操作。</p>
         <div class="move-mod gallery_list">
          {if $product.gallery}
          {foreach from=$product.gallery item=gallery}
          <div style='width: 20%;margin:10px;display: inline-block'>
           <img src="{$site.root_url}{$gallery}" style="width:100%" />
           <input type="hidden" name="gallery[]" value="{$gallery}">
           <p><span class="btn btn-danger" data-toggle="del_gallery_file" data-url="del_gallery_img.php?rec=del&img={$gallery}" style="width: 100%;padding: 10px 0px;text-align: center">删除图片 </span>
           </p>
          </div>
          {/foreach}
          {/if}
         </div>
        </div>
       </td>
      </tr>

我将代码加入到缩略图之后，效果如下：

三、后台处理逻辑（admin/product.php）

1、图集Ajax上传处理逻辑（我是在原来的“图片上传”下面增加的，第30行）

//图集ajax上传处理逻辑
if ($rec == 'upload_gallery'){
    if ($_FILES['img_url']) {
        $image_name = $img->upload_image('img_url');
        $file_name = $images_dir . $image_name;
        echo $file_name;
    } else {
        echo '';
    }
}

2、图集数据上传

1）在“产品添加”里面增加图集上传的代码，将图集的数据上传到服务器。我在“产品添加-图片上传的下面增加，第150行”。

    //图集上传
    if (is_array($_POST['gallery'])) {
            $_POST['gallery'] = implode(',', $_POST['gallery']);
        }else{
            $_POST['gallery']="";
        }

将数据插入数据库（我这里是第164行），增加 gallery 和 $_POST[gallery] ：

$sql = "INSERT INTO " . $dou->table('product') . " (id, cat_id, name, price, defined, content, image ,gallery,keywords, description, add_time)" . " VALUES (NULL, '$_POST[cat_id]', '$_POST[name]', '$_POST[price]', '$_POST[defined]', '$_POST[content]', '$image','$_POST[gallery]', '$_POST[keywords]', '$_POST[description]', '$add_time')";
    $dou->query($sql);

2）在“产品编辑”里面增加图集上传的代码，为了在编辑产品的时候，也能够将新数据上传到数据库。

    //图集上传
    if (is_array($_POST['gallery'])) {
            $_POST['gallery'] = implode(',', $_POST['gallery']);
        }else{
            $_POST['gallery']="";
        }

将更新后的数据插入到数据库（在原来的代码中增加gallery = '$_POST[gallery]' 我这里是第237行）：

$sql = "update " . $dou->table('product') . " SET cat_id = '$_POST[cat_id]', name = '$_POST[name]', price = '$_POST[price]', defined = '$_POST[defined]' ,content = '$_POST[content]'" . $image . ", gallery = '$_POST[gallery]', keywords = '$_POST[keywords]', description = '$_POST[description]' WHERE id = '$_POST[id]'";
    $dou->query($sql);

到这里，数据的写入基本完成，我还遇到了一个问题，还不知道怎么解决，编辑的时候，没能读取到已有的数据。

四、前端处理

1、前端逻辑处理（在模板文件的product.php中增加，我再第38行增加）

//产品图集调用

$product['gallery'] = $product['gallery']?explode(',',$product['gallery']):false;

2、前端模板调用（ product.dwt ）

<div id="showbox">
 <!--{foreach from=$product.gallery item=gallery}-->
 <img src="{$site.root_url}{$gallery}" width="368" height="368" />
 <!--{/foreach}-->
</div><!--展示图片盒子-->

最终效果如下：

以上为一个伪技术的一些总结。