我一直在努力用Vue.js / Laravel实现CRUD，并且在尝试插入数据库时，数据库出现500个内部服务器错误。线索不多，因为我已经尝试了几乎所有东西，包括CSRF令牌。你能提供一个线索吗？
这是我的控制器JobController
<?php
namespace App\Http\Controllers;
use App\Job;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
class JobController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$jobs = Job::with('website')->get();
return response($jobs->jsonSerialize(), Response::HTTP_OK);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$user = Auth::user()->name;
$job = new Job();
$job->user = $user;
$job->website_id = $request->website;
$job->type = $request->type;
$job->description = $request->description;
$job->attachment_path = '';
$job->status = $request->status;
$job->save();
return response($job->jsonSerialize(),Response::HTTP_CREATED);
}
/**
* Display the specified resource.
*
* @param \App\Job $job
* @return \Illuminate\Http\Response
*/
public function show(Job $job)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Job $job
* @return \Illuminate\Http\Response
*/
public function edit(Job $job)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Job $job
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Job $job)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param \App\Job $job
* @return \Illuminate\Http\Response
*/
public function destroy(Job $job)
{
//
}
}
这是我的模范工作
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Job extends Model
{
protected $fillable = [
'user',
'website_id',
'type',
'description',
'attachment_path',
'status'
];
public function website(){
return $this->belongsTo('App\Website');
}
}
这是我的路线/api.php
<?php
use Illuminate\Http\Request;
use Illuminate\Http\Response;
Route::middleware('auth:api')->get('/user', function (Request $request) {
return $request->user();
});
// Route::resource('/clients','ClientController',[
// 'except'=>['edit','show','store']
// ]);
Route::resource('/jobs','JobController',[
'except'=>['edit','show','store']
]);
Route::post('/jobs/store','JobController@store');
Route::resource('/domains','WebsiteController',[
'except'=>['edit','show','store']
]);
这是我的app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import VueRouter from 'vue-router'
import Domains from './components/Domains'
import Jobs from './components/Jobs'
let App = require('./components/App.vue');
//building the routes
Vue.use(VueRouter);
const routes = [
{
path:'/Jobs',component: Jobs
},
{
path:'/Domains',component: Domains
}
];
const router = new VueRouter({
routes: routes,
//mode: 'history',
})
const app = new Vue({
el: '#app',
router: router,
components:{App}
});
最后，这是Job.vue组件，假定它可以执行提交任务：
<template>
<div class="container">
<div class="form-group">
<input type="text" class="form-control" id="filter" placeholder="Filter the Logs">
<i class="fas fa-plus jobs-page" @click="openAdd"></i>
</div>
<div class="row content-holder">
<table>
<thead>
<tr>
<th class="client-name">Domain</th>
<th class="client-pm">By</th>
<th class="client-pm">Type</th>
<th class="client-pm">Status</th>
<th class="client-pm">Date</th>
</tr>
</thead>
<tbody>
<tr v-for="job in jobs" :key="job.id" :job="job" class="tr-table">
<td class="client-name">{{ job.website.domain }}</td>
<td class="client-pm">{{ job.user }}</td>
<td class="client-pm">{{ job.type }}</td>
<td class="client-pm">{{ job.status }}</td>
<td class="client-pm">{{moment(job.created_at).fromNow()}}</td>
</tr>
</tbody>
</table>
</div>
<!-- This is where the insert data is comming from -->
<div v-if="showModal" class="container">
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Create Log</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="close">
<i class="fas fa-plus"></i>
</button>
</div>
<div class="modal-body">
<label for="website">Domain:</label>
<input v-model="job.website" name="website" type="text" id="website" class="form-control">
<br>
<label for="type">Type:</label>
<select v-model="job.type" id="type" class="form-control" name="type">
<option>Client Update</option>
<option>Dev Update</option>
<option>Bug</option>
<option>Style Fix</option>
</select>
<br>
<label for="description">Log Description:</label>
<textarea v-model="job.description" class="form-control" rows="5" id="description" name="description"></textarea>
<br>
<label for="description">Tell Everyone:</label>
<input type="checkbox" name="tell-everyone" id="tell-everyone"><br>
<label for="checked">Resolved and Tested:</label>
<input type="checkbox" name="status" id="status" value="checked">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" @click="save">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import moment from 'moment';
export default {
name: "Jobs",
data(){
return{
showModal: false,
jobs: [],
job: {user:'',website: '', type: '',description: '',attachment_path:'',status:''},
}
},
methods: {
openAdd(){
this.showModal = true;
},
close(){
this.showModal = false;
},
getJobs(){
window.axios.get('/develogger/api/jobs').then(({data})=>{
data.forEach(job =>{
this.jobs.push(job)
});
});
},
moment,
save(){
axios.post('/develogger/api/jobs/store',this.job).then((response) => {
this.close()
this.jobs.push(response.data)
})
.catch((error) => this.errors = error.response.data.errors)
}
},
created(){
this.getJobs();
},
}
</script>