Laravel Backpack中如何在创建页展示JSON列reviewsDistribution？

针对你的需求，推荐两种实用配置方式，优先采用自定义字段组件实现友好的星级录入界面：

一、推荐方案：自定义星级分布字段（友好录入） #

1. 创建自定义字段视图 #

在 resources/views/vendor/backpack/crud/fields/star_distribution.blade.php 中创建字段视图，用五个数字输入框对应各星级：

<div @include('crud::inc.field_wrapper_attributes') >
    <label>{!! $field['label'] !!}</label>
    @include('crud::inc.field_translatable_icon')

    <div class="row g-3">
        <div class="col">
            <div class="form-group mb-0">
                <small>1星</small>
                <input type="number" min="0" name="reviewsDistribution[oneStar]" 
                       value="{{ old('reviewsDistribution.oneStar', $field['value']['oneStar'] ?? 0) }}" 
                       class="form-control">
            </div>
        </div>
        <div class="col">
            <div class="form-group mb-0">
                <small>2星</small>
                <input type="number" min="0" name="reviewsDistribution[twoStar]" 
                       value="{{ old('reviewsDistribution.twoStar', $field['value']['twoStar'] ?? 0) }}" 
                       class="form-control">
            </div>
        </div>
        <div class="col">
            <div class="form-group mb-0">
                <small>3星</small>
                <input type="number" min="0" name="reviewsDistribution[threeStar]" 
                       value="{{ old('reviewsDistribution.threeStar', $field['value']['threeStar'] ?? 0) }}" 
                       class="form-control">
            </div>
        </div>
        <div class="col">
            <div class="form-group mb-0">
                <small>4星</small>
                <input type="number" min="0" name="reviewsDistribution[fourStar]" 
                       value="{{ old('reviewsDistribution.fourStar', $field['value']['fourStar'] ?? 0) }}" 
                       class="form-control">
            </div>
        </div>
        <div class="col">
            <div class="form-group mb-0">
                <small>5星</small>
                <input type="number" min="0" name="reviewsDistribution[fiveStar]" 
                       value="{{ old('reviewsDistribution.fiveStar', $field['value']['fiveStar'] ?? 0) }}" 
                       class="form-control">
            </div>
        </div>
    </div>

    @if(isset($field['hint']))
        <p class="help-block mt-2">{!! $field['hint'] !!}</p>
    @endif
</div>

2. 在CrudController中配置字段 #

在 setupCreateOperation 方法中添加自定义字段：

$this->crud->addField([
    'name' => 'reviewsDistribution',
    'label' => '星级评分分布',
    'type' => 'star_distribution', // 对应自定义视图的名称
    'value' => $this->crud->entry->reviewsDistribution ?? [
        'oneStar' => 0,
        'twoStar' => 0,
        'threeStar' => 0,
        'fourStar' => 0,
        'fiveStar' => 0,
    ],
]);

3. 模型中配置自动序列化 #

在对应模型中添加 $casts 属性，让Laravel自动处理数组与JSON的转换，无需手动转义：

protected $casts = [
    'reviewsDistribution' => 'array',
];

二、备选方案：使用Backpack原生JSON字段（适合技术人员录入） #

如果不需要可视化录入，可直接配置原生JSON字段，开启代码编辑器：

$this->crud->addField([
    'name' => 'reviewsDistribution',
    'label' => '星级评分分布',
    'type' => 'json',
    'default' => '{"oneStar":0,"twoStar":0,"threeStar":0,"fourStar":0,"fiveStar":0}',
    'options' => [
        'mode' => 'code',
        'lineNumbers' => true,
        'indentWithTabs' => true,
    ],
]);

注：之前尝试table、json、array类型未达预期的原因：table字段偏向展示而非录入；默认json字段未配置编辑器体验差；array字段仅支持简单数组结构，不匹配固定键的星级分布场景。

内容的提问来源于stack exchange，提问作者Antop