如何使用 Laravel 和 Vuejs 一次更新更多表行？

Question

我有 settings 表，其中包含 3 列（id、property、content）。 我已将一些数据播种到设置表中，并且我想更新此表。我正在填写一些表格，其中每个输入都呈现表格设置的一行。提交该表格后，我希望更新我的表格...... 例如，我的一些属性-内容对（我在这种形式中的一些输入）是： background_image - 'image.jpg' header - '这是标题'

我很困惑，因为我真的不知道应该向后端发送什么，而且我不确定 endpoint 应该是什么...... 我希望你们中的一些人可以帮助我。如果您需要更多问题，请随时问我。在此先感谢，这是我的代码：

SettingsController.php

    <?php

namespace App\Http\Controllers\Api;

use App\Http\Requests\UpdateSettings;
use App\Http\Resources\SettingResource;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\Setting;

class SettingController extends Controller
{

    public function index()
    {
        $settings = Setting::all();

        return SettingResource::collection($settings);
    }

    public function store(Request $request)
    {
        //
    }

    public function show($id)
    {
        //
    }

    public function update(UpdateSettings $request, Setting $setting)
    {

        $setting->where('property', $request->property)
                ->update([ 'content' => $request->content ]);


        return new SettingResource($setting);
    }

    public function destroy($id)
    {
        //
    }
}

Settings.vue

    <template>
    <div class="ml-4 container">
        <button @click="submit" id="saveBtn" class="btn btn-primary mt-2">Save Admin Settings</button>

        <div class="custom-file mt-3">
            <label for="backgroundImage" class="custom-file-label input">Add Background Image</label>
            <input id="backgroundImage" @input="errors.clear('background_image')" @change="uploadImageName" type="file" class="custom-file-input btn btn-primary"
                   style="background: #1d68a7">
            <span class="text-danger"  v-if="errors.get('background_image')">{{ errors.get('background_image') }}</span>
        </div>

        <div class="form-group mt-3">
            <label for="header">Header</label>
            <input :class="{'is-invalid' : errors.get('header')}" @input="errors.clear('header')" v-model="form.header" type="text" class="form-control input" id="header">
            <span class="text-danger"  v-if="errors.get('header')">{{ errors.get('header') }}</span>
        </div>

        <div class="form-group mt-3">
            <label for="videoOne">Video one</label>
            <textarea :class="{'is-invalid' : errors.get('video')}" @input="errors.clear('video')" v-model="form.video" type="text" class="form-control videoBox input" id="videoOne"></textarea>
            <span class="text-danger"  v-if="errors.get('video')">{{ errors.get('video') }}</span>
            <div class="d-flex">
                <toggle-button class="mt-2 toggleButton"
                               @click="toggleBtn()"
                               v-model="form.active_video"
                               color="#82C7EB"
                               :sync="true"
                               :labels="{checked: 'Active', unchecked: 'Deactive'}"
                />
            </div>
        </div>

        <div class="mt-3">
            <label for="sectionOneText">Section One Text</label>
            <editor
                @input="errors.clear('section_one')"
                v-model="form.section_one"
                type="text"
                class="form-control"
                id="sectionOneText"
            >
            </editor>
            <span class="text-danger"  v-if="errors.get('section_one')">{{ errors.get('section_one') }}</span>
            <div class="d-flex">
            <toggle-button class="mt-2 toggleButton"
                           @click="toggleBtn()"
                           v-model="form.active_section_one"
                           color="#82C7EB"
                           :sync="true"
                           :labels="{checked: 'Active', unchecked: 'Deactive'}"
            />
            </div>
        </div>

        <div class="mt-3">
            <label for="editableBoxContainer">Editable Box Container</label>
            <editor
                @input="errors.clear('editable_box')"
                v-model="form.editable_box"
                type="text"
                class="form-control"
                id="editableBoxContainer"
            >
            </editor>
            <span class="text-danger" v-if="errors.get('editable_box')">{{ errors.get('editable_box') }}</span>
            <div class="d-flex">
            <toggle-button class="mt-2 toggleButton"
                           @click="toggleBtn()"
                           v-model="form.active_editable_box"
                           color="#82C7EB"
                           :sync="true"
                           :labels="{checked: 'Active', unchecked: 'Deactive'}"
            />
            </div>
        </div>

        <div class="mt-3">
            <label for="sectionTwoText">Section Two Text</label>
            <editor
                @input="errors.clear('section_two')"
                v-model="form.section_two"
                type="text"
                class="form-control"
                id="sectionTwoText"
            >
            </editor>
            <span class="text-danger"  v-if="errors.get('section_two')">{{ errors.get('section_two') }}</span>
            <div class="d-flex">
            <toggle-button class="mt-2 toggleButton"
                           @click="toggleBtn()"
                           v-model="form.active_section_two"
                           color="#82C7EB"
                           :sync="true"
                           :labels="{checked: 'Active', unchecked: 'Deactive'}"
            />
            </div>
        </div>

        <div class="mt-3">
            <label for="sectionThreeText">Section Three Text</label>
            <editor
                @input="errors.clear('section_three')"
                v-model="form.section_three"
                type="text"
                class="form-control"
                id="sectionThreeText"
            >
            </editor>
            <span class="text-danger"  v-if="errors.get('section_three')">{{ errors.get('section_three') }}</span>
            <div class="d-flex">
            <toggle-button class="mt-2 toggleButton"
                           @click="toggleBtn()"
                           v-model="form.active_section_three"
                           color="#82C7EB"
                           :sync="true"
                           :labels="{checked: 'Active', unchecked: 'Deactive'}"
            />
            </div>
        </div>

        <div class="form-group mt-3">
            <label for="videoTwo">Video two</label>
            <textarea :class="{'is-invalid' : errors.get('video_two')}" @input="errors.clear('video_two')" v-model="form.video_two" type="text" class="form-control videoBox input" id="videoTwo"></textarea>
            <span class="text-danger"  v-if="errors.get('video_two')">{{ errors.get('video_two') }}</span>
            <div class="d-flex">
                <toggle-button class="mt-2 toggleButton"
                               @click="toggleBtn()"
                               v-model="form.active_video_two"
                               color="#82C7EB"
                               :sync="true"
                               :labels="{checked: 'Active', unchecked: 'Deactive'}"
                />
            </div>
        </div>

        <div class="form-group mt-3">
            <label for="linkOne">Link One</label>
            <input :class="{'is-invalid' : errors.get('link_one')}" @input="errors.clear('link_one')" v-model="form.link_one" type="text" class="form-control input" id="linkOne">
            <span class="text-danger"  v-if="errors.get('link_one')">{{ errors.get('link_one') }}</span>
        </div>

        <div class="form-group mt-3">
            <label for="linkTwo">Link Two</label>
            <input :class="{'is-invalid' : errors.get('link_two')}" @input="errors.clear('link_two')" v-model="form.link_two" type="text" class="form-control input" id="linkTwo">
            <span class="text-danger"  v-if="errors.get('link_two')">{{ errors.get('link_two') }}</span>
        </div>

    </div>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
import {ToggleButton} from 'vue-js-toggle-button'
import Errors from "../helpers/Errors";
Vue.component('ToggleButton', ToggleButton)
export default {
    name: "Settings",
    components: {Editor},

    data() {
        return {
            errors: new Errors(),
            form: {
                background_image: '',
                header: '',
                video: '',
                active_video: null,
                section_one: '',
                active_section_one: null,
                editable_box: '',
                active_editable_box: null,
                section_two: '',
                active_section_two: null,
                section_three: '',
                active_section_three: null,
                video_two: '',
                active_video_two: null,
                link_one: '',
                link_two: '',
            },
        }
    },
    mounted() {
    },
    methods: {
        toggleBtn() {
            if (this.sectionTwotext) {
                this.sectionTwotext = false;
            } else {
                this.sectionTwotext = true;
            }
        },
        async submit() {
            try {
                const form = Object.assign({}, this.form);

                console.log(form);

                let result = Object.keys(form).map(function (key) {

                    return [key, form[key]];
                });
                console.log(result[0])

                result._method = 'PUT';

                for(let i=0; i<=15; i++) {
                    let objectResult = Object.assign({}, result[i]);
                    console.log('objectResult')
                    console.log(objectResult)
                    objectResult._method = 'PUT';
                     const {data} = await axios.post(`/api/setting/${i}`, objectResult);
                 }
            } catch (error) {
                console.log(error.response.data.errors);
                this.errors.record(error.response.data.errors);
            }

        },
        uploadImageName() {
            let image = document.getElementById("backgroundImage");
            this.form.background_image = image.files[0].name;
            console.log(image.files[0].name);
        },
    }
}
</script>

<style scoped>
#saveBtn {
    border-radius: 0;
}

.input {
    border-radius: 0;
}

.videoBox {
    height: 300px;
}
.toggleButton {
    margin-left: auto;
}
</style>

我的异步提交功能不正常，我只是在尝试一些东西...... 提前致谢！

Answer 1

我会考虑在您提交整个表单的api 上设置一个endpoint。

api.php

创建一个路由，我们可以将axios 请求提交到：

Route::put('/settings', 'Api\SettingController@update')->name('api.settings.update');

请注意，我已将 controller 命名为命名空间，因为您可能拥有此控制器的 web 和 api 版本。不建议在单个控制器中混合 api 和 web 操作。

web.php

这是一个标准的web 路由，它将显示一个包含vue 组件的blade 视图。我们通过设置，然后将其作为prop 传递给Settings.vue 组件。

Route::get('/settings', 'SettingController@edit')->name('settings.edit');

edit.blade.php

<settings :settings="{{ $settings }}"></settings>

Settings.vue

axios.put('/api/settings', {
  header: this.form.header,
  background_image: this.form.background_image
  ... other fields to be submitted
})
.then(success => {
  console.log(success);
})
.catch(error => {
  console.log(error);
});

SettingController.php

public function edit()
{
  return view('settings.edit', ['settings' => Setting::all()]);
}

Api\SettingController.php

public function update(Request $request)
{
  $validator = Validator::make(
    $request->all(),
    [
      'header' => ['required', 'string'],
      'background_image' => ['required', 'string']
      ... other fields to be validated
    ]
  );

  if ($validator->fails()) {
    return response()->json(['errors' => $validator->errors()], 422);
  }

  foreach ($validator->validated() as $property => $content) {
    Setting::where('property', $property)->update(['content' => $content]);
  }

  return response()->json(['success' => true], 200);
}

您可能需要考虑将设置分成组并提交组而不是整个表单，或者单独提交每个设置（如果这样做是有意义的）。