laravel - 如何使用 vue 和 laravel 将数据插入数据库
问题描述
我尝试使用 vue js 和 laravel 创建一个 crud 系统。
我已经创建了 api 路由等等......
但是当我点击提交时,我收到了消息405 (Method Not Allowed)
这是我的AddArtist.vue
文件
<form @submit.prevent="add">
<input type="text" class="form-control" v-model="artist.name" placeholder="Artist Name">
<button class="btn btn-success" type="submit">Save</button>
</form>
<script>
export default {
data: function () {
return {
errors: [],
image: '',
artist: {
name: '',
}
}
},
methods: {
add() {
axios.post('/api/artist/store-artist', this.$data.artist)
.then((response) => {
alert('Success add Artist')
console.log(response)
})
},
},
mounted() {
console.log('Add Artist Mounted.')
}
}
</script>
和我的api.php
路线
Route::group(['middleware' => 'cors'], function(){
Route::post('addartist/store-artist', 'ArtistController@store');
});
这里是我的控制器ArtistController.php
public function store(Request $request)
{
$input = $request->all();
dd($input);
}
最后一个是我的模型Artist.php
class Artist extends Model
{
protected $table = 'artist';
protected $fillable = ['artist_name', 'date_birth', 'cover', 'gender'];
}
解决方案
那是拼写错误:
更改 addartist/store-artist
为 artist/store-artist
路线中
你的 api 是:
Route::group(['middleware' => 'cors'], function(){
Route::post('addartist/store-artist', 'ArtistController@store');
});
你正在做:
axios.post('/api/artist/store-artist', this.$data.artist)
.then((response) => {
alert('Success add Artist')
console.log(response)
})
推荐阅读
- c++ - 如何在 Makefile 中为两组文件使用不同的规则?
- excel - 使用宏今天和过去日期过滤日期
- css - Google Chrome 滚动捕捉中的潜在错误
- typescript - 如何键入函数的静态成员?
- docker - 如何使用 docker compose 在 angular 和 spring 之间进行通信
- java - 带有验证的 Kafka Connect JsonConverter
- python - 如何录制视频并从网络摄像头保存?
- c# - 发布到 IIS 上的 ASP.NET Core 应用程序无法识别 AD 用户
- c# - 在 Main 方法中等待 - 在任务完成之前谁获得控制权?
- javascript - 循环遍历复杂的反应状态以删除所有空字符串