利用ThinkPHP5中的获取器，实现图片URL拼接

图片URL地址要保存为相对路径

存在数据库中的图片路径数据，要存放为相对路径，不要写死。这一点很重要

+----+---------------------------+------+-------------+-------------+
| id | url                       | from | delete_time | update_time |
+----+---------------------------+------+-------------+-------------+
|  1 | /banner-1a.png            |    1 |        NULL |        NULL |
|  2 | /banner-2a.png            |    1 |        NULL |        NULL |
|  3 | /banner-3a.png            |    1 |        NULL |        NULL |
|  4 | /category-cake.png        |    1 |        NULL |        NULL |
|  5 | /category-vg.png          |    1 |        NULL |        NULL |
|  6 | /category-dryfruit.png    |    1 |        NULL |        NULL |
|  7 | /category-fry-a.png       |    1 |        NULL |        NULL |
|  8 | /category-tea.png         |    1 |        NULL |        NULL |
|  9 | /category-rice.png        |    1 |        NULL |        NULL |
| 10 | /product-dryfruit@1.png   |    1 |        NULL |        NULL |
+----+---------------------------+------+-------------+-------------+
10 rows in set (0.00 sec)   

然后根据服务器配置，拼接得到完整的路径，再返回给客户端。

效果

假如服务器上图片的根 URL 是 http://z.cn/images，那么要返回的数据应该如下

{
    "id": 1,
    "name": "首页置顶",
    "description": "首页轮播图",
    "items": [
        {
            "key_word": "6",
            "type": 1,
            "img": {
                "url": "http://z.cn/images/banner-4a.png"
            }
        },
        {
            "key_word": "25",
            "type": 1,
            "img": {
                "url": "http://z.cn/images/banner-2a.png"
            }
        },
        {
            "key_word": "11",
            "type": 1,
            "img": {
                "url": "http://z.cn/images/banner-3a.png"
            }
        },
        {
            "key_word": "10",
            "type": 1,
            "img": {
                "url": "http://z.cn/images/banner-1a.png"
            }
        }
    ]
}

实现

要实现这个需求。可以利用 ThinkPHP 5 提供的获取器来实现。

文档在这里：https://www.kancloud.cn/manual/thinkphp5/135192

首先是创建一个配置文件：application\extra\setting.php

<?php
/**
 * 自定义配置文件
 */
return [
    'img_prefix' => 'http://z.cn/images'
];

然后修改图片的模型类

<?php

namespace app\api\model;

use think\Model;

class Image extends Model
{
    // 数据库 url 字段的获取器
    public function getUrlAttr($value)
    {
        // 获取配置信息，进行拼接
        if ($data['from'] == 1) {
            return config('setting.img_prefix') . $value;
        } else {
            return $value;
        } 
    }
}

其他表里可能也有 url 字段，所以把 Image 的 getUrlAttr 方法移动到基类中去。方便复用和维护

<?php

namespace app\api\model;

use think\Model;

/**
 * 所有模型的基类
 */
class BaseModel extends Model
{
    public function getUrlAttr($value, $data)
    {
        if ($data['from'] == 1) {
            return config('setting.img_prefix') . $value;
        } else {
            return $value;
        }
    }
}

不过有一种情况，其他表里的图片路径字段名不是叫 url，可以把基类的 getUrlAttr 方法名改一下，让他变成一个普通的函数。然后让模型类的获取器去调用这个普通函数即可

模型基类 BaseModel

<?php

namespace app\api\model;

use think\Model;

/**
 * 所有模型的基类
 */
class BaseModel extends Model
{
    public function prefixImgUrl($value, $data)
    {
        if ($data['from'] == 1) {
            return config('setting.img_prefix') . $value;
        } else {
            return $value;
        }
    }
}

Image 模型类

<?php

namespace app\api\model;

class Image extends BaseModel
{
    protected $hidden = [
        'id', 'from', 'delete_time', 'update_time'
    ];

    public function getUrlAttr($value, $data)
    {
        return $this->prefixImgUrl($value, $data);
    }
}

总结

步骤

1. 配置自定义配置文件
2. 修改模型类，增加获取器的方法

心得

思路很重要。框架只是一个工具，要利用好工具根据思路来解决问题。