![](/img/trans.png)
[英]How to get JSON in Laravel from vue.js axios POST?
[英]Vue Axios Post Cancelled in Laravel (api)
我目前正在重構一些舊代碼。 我想獲取一個 vue 表單的數據,以便通過 laravel 的 api 發布到我的數據庫中。 看着 json output 我得到了控制器方法,一切對我來說都很好。 我還嘗試將 Route::post 代碼移動到常規 web.php 沒有成功。
我將發布我的架構和確切錯誤消息的屏幕截圖(xhr 已取消)。
Route::middleware('auth:api')->get('/user', function (Request $request) {
return $request->user();
});
Route::get('/session', 'SessionController@index');
Route::get('/session/{id}', 'SessionController@currentRoom');
Route::post('/create', 'SessionController@create');
Route::put('/session/{id}', 'SessionController@update');
Route::delete('/session/{id}', 'SessionController@destroy');
會話控制器.php
<?php
namespace App\Http\Controllers;
use App\Services\LongPolling;
use Faker\Generator;
use App\Session;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Response;
class SessionController extends Controller
{
public function create(Request $request)
{
// $session = new Session();
// $session->playerName = $faker->name;
// $session->playerId = $faker->numberBetween($min = 0, $max = 127);
// $session->roomName = $faker->name;
// $session->roomDescription = $faker->text;
// $session->overallValue = $faker->numberBetween($min = 10, $max = 70);
// $session->playerValue = $faker->randomDigitNotNull;
// $session->isAdmin = $faker->boolean ? false : true;
// $session->save();
$validator = Validator::make($request->all(), [
'roomName' => 'required|string',
'roomDescription' => 'required|string'
]);
if ($validator->fails()){
return Response::json(['errors' =>$validator->errors()], 422);
}
$session = Session::create([
'roomName' => $request('roomName'),
'roomDescription' => $request('roomDescription')
]);
return Response::json(['session' => $session,
'message' => 'success'], 200);
}
創建.vue
<template>
<div>
<form>
<strong>roomname:</strong>
<br />
<input type="text" v-model="roomName" />
<br />
<strong>description:</strong>
<br />
<input type="text" v-model="roomDescription" />
<br />
<button v-on:click="formSubmit">Click me</button>
</form>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
roomName: "",
roomDescription: ""
};
},
methods: {
formSubmit() {
axios
.post("/api/create", {
roomName: this.roomName,
roomDescription: this.roomDescription
})
.then(function(response) {
console.log(response);
})
.catch(error => {
console.log(error);
});
}
}
};
</script>
<style>
</style>
room.blade.php
<!-- Stored in resources/views/child.blade.php -->
@extends('layouts.app')
@section('title', 'Scrumpoker')
@section('content')
<br>
<br>
<create>
</create>
@endsection
應用程序.js
require('./bootstrap');
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
Vue.use(Vuetify)
const opts = {}
// Vue.component('App', require('./components/App.vue').default);
// Vue.component('Card', require('./components/card.vue').default);
// Vue.component('session', require('./components/Session.vue').default);
Vue.component('create', require('./components/Create.vue').default);
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
});
檢查它是否與CORS相關而不與POST相關?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.