laravel - Vue js Laravel axios POST 500 内部服务器错误
问题描述
我刚刚使用 Axios 为调用 API 创建了 laravel Vuejs 项目。Get Api 运行良好,但是当我要发布我的数据时,出现内部服务器错误。我正在为控制器使用资源。我只是创建 Api 并通过以下方式获取数据:
axios.get("http://localhost:8080/vuelaravel/tasks")
.then(response =>{this.tasks = response.data})
.catch(error => console.log(error.response));
vuelaravel 是我的项目名称。它运作良好。但是当我试图将数据发布到我的数据库中时,它显示了 500 内部错误。
Here is my controller:
<?php
namespace App\Http\Controllers;
use App\Todo;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
class TodoController extends Controller
{
public function index()
{
$tasks=Todo::orderBy('id', 'desc')->paginate(2);
return request()->json(200,$tasks);
}
public function create()
{
//
}
public function store(Request $request)
{
$todo=Todo::create($request->all());
if($todo){
$tasks=Todo::orderBy('id', 'desc')->paginate(2);
return request()->json(200,$tasks);
}
}
public function show(Todo $todo)
{
//
}
public function edit(Todo $todo)
{
//
}
public function update(Request $request, Todo $todo)
{
//
}
public function destroy(Todo $todo)
{
//
}
}
还有我的 ADD.Vue
<template>
<div>
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="text" name="name" v-model="name" id="name" placeholder="Title Name" class="form-control" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" @click="addRecord">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
name:'',
}
},
methods:{
addRecord(){
axios.post("http://localhost:8080/vuelaravel/tasks",{
'name': this.name,
})
.then(data => console.log(data))
.catch(error => console.log(error))
}
}
}
</script>
<style scoped>
</style>
这是错误:
app.js:285 POST http://localhost:8080/vuelaravel/tasks 500 (Internal Server Error)
at createError (app.js:699)
at settle (app.js:960)
at XMLHttpRequest.handleLoad (app.js:168)
我在 Welcome.blade.php 中使用我的 csrf
<meta name="csrf-token" content="{{csrf_token()}}">
通过 This Api 获取我的数据:
created(){
axios.get("http://localhost:8080/vuelaravel/tasks")
.then(response =>{this.tasks = response.data})
.catch(error => console.log(error.response));
}
解决方案
推荐阅读
- azure - Azure YAML 管道:动态查找组中的变量
- android - 如何使用 Android Room 查询预加载的数据库文件?
- python - 为python c-extension编写安装文件时如何指定动态库位置?
- python - 如何在 python 数据框中获取最后 n 个索引?
- flutter - Textfileld 在 Bottomshet 中不支持波斯语
- date - Fullcalendar v5 - 拖放外部事件返回当前日期并记下删除元素的日期
- visual-studio-code - 侧边栏导航上的 Visual Studio Code 自动预览模式?
- python - 具有键值的字典作为另一个字典 python
- javascript - 以函数作为值反应状态(setState),并使用构造函数与状态 obj 对 this.state 进行分类
- docker - Docker - 带有 Nginx 的 Supervisord 容器(sudo 用户)