使用Axios结合Vue提交表单数据无法存入数据库问题

看起来你已经把前后端的架子搭起来了，但数据没存进去的问题大概率是几个常见的坑导致的，我给你一步步排查：

1. 先解决最容易踩的CSRF令牌问题 #

Laravel默认会拦截所有没有携带CSRF令牌的POST请求，你的Axios请求里没带这个令牌的话，请求其实是被拒绝了，只是你没加错误处理所以没发现，反而因为代码逻辑跳转到了列表页。

解决方法：

• 首先确保你的Laravel主视图（比如resources/views/welcome.blade.php）里有CSRF元标签：

  <meta name="csrf-token" content="{{ csrf_token() }}">
  

• 然后在你的Vue项目入口（比如app.js）里全局配置Axios携带令牌：

  import axios from 'axios';
  window.axios = axios;
  
  window.axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  

  这样所有Axios请求都会自动带上CSRF令牌了。

2. 检查Employee模型的批量赋值权限 #

你在Laravel控制器里用了Employee::create($request->all())，但如果模型里没设置允许批量赋值的字段，数据是不会被存入数据库的。

打开你的Employee模型（一般在app/Models/Employee.php），添加$fillable属性：

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Employee extends Model
{
    // 允许name和email字段被批量赋值
    protected $fillable = ['name', 'email'];
}

3. 修正Axios请求的URL并添加错误处理 #

你当前的请求URL是硬编码的http://localhost/crud/public/employees，建议改成相对路径避免环境问题，同时一定要加错误处理，这样能直观看到请求哪里出错了：

修改Vue组件里的createEmployee方法：

methods:{
    createEmployee:function() {
        // 改成相对路径，Laravel的resource路由store对应的POST路径是/employees
        let uri = '/employees';
        Axios.post(uri, this.employee)
            .then((response)=>{
                console.log('提交成功:', response.data);
                this.$router.push({name: 'Employees'})
            })
            .catch((error)=>{
                // 打印错误信息，方便排查
                console.error('提交失败:', error.response?.data || error.message);
                alert('表单提交失败，请查看控制台错误信息');
            })
    }
}

4. 确认VueRouter的base路径是否正确 #

你的Vue路由里写的路径是/crud/public/和/crud/public/AddEmployee，如果你的Laravel项目的public目录是Web根目录，建议给VueRouter设置base路径，避免路径混乱：

在app.js的路由配置里：

const router = new VueRouter({
    mode: 'history',
    // 设置base路径为你的项目根路径
    base: '/crud/public/',
    routes: [
        { name : 'Employees', path: '/', component : Employees },
        { name : 'AddEmployee', path: '/AddEmployee', component : AddEmployee }
    ]
})

这样路由路径更简洁，也不容易出错。

按照这几步排查下来，应该就能解决数据不入库的问题了。如果还是有问题，打开浏览器的开发者工具（F12），查看Network标签页里的POST请求，看看返回的状态码和响应内容，就能快速定位问题啦。

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