Laravel绘图项目保存按钮实现：输入值获取与返回处理问询

1. 调整路由与请求方式 #

原GET路由不适合携带用户动态输入的表单数据，建议改用POST路由（符合RESTful创建资源的规范）：

// web.php
Route::post('canvas/save', [CustomAuthController::class, 'SaveDrawing'])->name('canvas.save');

2. 前端传递画布名称与尺寸 #

方法一：表单提交（简单直接） #

将输入框与保存按钮包裹在表单中，同时传递画布尺寸：

<form action="{{ route('canvas.save') }}" method="POST">
    @csrf
    <!-- 隐藏字段传递画布尺寸 -->
    <input type="hidden" name="size" value="{{ $size }}">
    <!-- 画布名称输入框 -->
    <input oninput="ChangeInput(this.value)" value="Canvas" type="text" name="title" id="title">
    <!-- 保存按钮 -->
    <button type="submit">保存画布</button>
</form>

点击提交按钮时，表单会自动将title和size字段POST到后端。

方法二：AJAX提交（无刷新体验） #

如果想要避免页面刷新，用AJAX提交更合适：

<input oninput="ChangeInput(this.value)" value="Canvas" type="text" name="title" id="title">
<button onclick="saveCanvas()">保存画布</button>

<script>
function saveCanvas() {
    const title = document.getElementById('title').value;
    const size = {{ $size }}; // 假设$size是后端传递到视图的变量

    fetch("{{ route('canvas.save') }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}",
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            title: title,
            size: size
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // 插入弹窗视图到页面
            document.body.insertAdjacentHTML('beforeend', data.html);
        }
    })
    .catch(error => console.error('保存失败:', error));
}
</script>

3. 后端获取参数并保存数据 #

修改SaveDrawing方法，通过请求实例获取参数，同时替换硬编码的用户ID：

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

public function SaveDrawing(Request $request) {
    // 可选：验证参数合法性
    $request->validate([
        'title' => 'required|string|max:255',
        'size' => 'required|string|max:255', // 根据你的size类型调整规则
    ]);

    $name = $request->input('title');
    $size = $request->input('size');
    $userId = Auth::id(); // 获取当前登录用户ID，替代硬编码的1

    $drawing = $this->createDrawing($name, $size, $userId);

    // 根据请求类型返回响应
    if ($request->wantsJson()) {
        // AJAX请求返回JSON，携带弹窗HTML
        return response()->json([
            'success' => true,
            'html' => view('partials.save-success-modal', compact('drawing'))->render()
        ]);
    } else {
        // 表单提交返回原页面，存入成功提示
        session()->flash('success', '画布保存成功！');
        return back();
    }
}

4. 实现弹窗局部视图 #

创建局部视图resources/views/partials/save-success-modal.blade.php：

<div class="modal-overlay" onclick="this.remove()">
    <div class="modal">
        <h3>保存成功！</h3>
        <p>你的画布 "{{ $drawing->name }}" 已保存。</p>
        <button onclick="this.closest('.modal-overlay').remove()">关闭</button>
    </div>
</div>

<style>
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
}
</style>

如果是表单提交，在主视图中添加以下代码显示弹窗：

@if(session('success'))
    <div class="modal-overlay" onclick="this.remove()">
        <div class="modal">
            <h3>保存成功！</h3>
            <p>{{ session('success') }}</p>
            <button onclick="this.closest('.modal-overlay').remove()">关闭</button>
        </div>
    </div>
@endif

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