我有设置表有3列(id、属性、内容)。我已经在设置表中播撒了一些数据,我想更新这个表。我正在填写一些表单,其中每个输入都显示了表设置的一行。在提交那份表格后,我要更新我的表格.例如,我的一些属性-内容对(在这种形式中的一些输入)是: background_image - 'image.jpg‘标头-’这是标题‘。
我很困惑,因为我不知道我应该发送什么到后端,而且我也不确定端点应该是什么.我希望你们中的一些人能帮我。如果你需要更多的问题,可以自由地问我。预先谢谢,下面是我的代码:
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>
我的异步提交功能不好,我只是在尝试一些东西.提前感谢!
发布于 2020-08-26 08:51:48
我会考虑在您的endpoint
上有一个api
,您可以在其中提交整个表单。
api.php
创建一个路由,我们可以将我们的axios
请求提交到:
Route::put('/settings', 'Api\SettingController@update')->name('api.settings.update');
请注意,我已经命名了controller
,因为您可能有此控制器的web
和api
版本。在单个控制器中混合api
和web
操作是不可取的。
web.php
这是一个标准的web
路由,它将显示包含vue
组件的blade
视图。我们将遍历这些设置,然后将这些设置作为prop
传递给prop
组件。
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);
}
您可能需要考虑将设置拆分为组和提交组,而不是整个表单,或者单独提交每个设置(如果这样做是有意义的)。
https://stackoverflow.com/questions/63596872
复制相似问题