我有一个具有多个控制器的API资源路由，但是只能访问一个（“ project” =>“ API \ ProjectController”）。我为其他API资源路由（例如：'api / userEdit'）使用了良好的URI（在路由列表中），但仍然收到错误：
POST http://127.0.0.1:8000/profile/api/userEdit 404（未找到）
{消息：“”，异常：“ Symfony \ Component \ HttpKernel \ Exception \ NotFoundHttpException”，…} 异常：“ Symfony \ Component \ HttpKernel \ Exception \ NotFoundHttpException” 文件：“ C：\ Users \ PC-HP \ Desktop \ myapp \ mywebsite \ vendor \ laravel \ framework \ src \ Illuminate \ Routing \ RouteCollection.php” 线：179 信息： ”” 跟踪：[{，…}，{，…}，{，…}，{，…}，{，…}，…]
我所有的控制器都存在于Http / Controllers / API中。这很奇怪。
感谢您的帮助。
CreateProject.vue（使用'project'=>'API \ ProjectController'）
<template>
<div>
<form @submit.prevent="addProject">
<div class="create-form" id="" style="margin-left:40%;margin-top:80px;">
<div class="mt-4">
<label for="usr">Project Name:</label><br>
<input type="text" v-model="form.title" class="form-control" :class="{ 'is-invalid': form.errors.has('title') }" required>
<has-error :form="form" field="title"></has-error>
</div>
<div class="mt-4">
<label for="usr">Description:</label><br>
<textarea v-model="form.desc" name="desc" class="form-control" :class="{ 'is-invalid': form.errors.has('desc') }" required></textarea>
<has-error :form="form" field="desc"></has-error>
</div>
<div class="mt-4">
<label for="usr">Keys words:</label><br>
<input type="text" v-model="form.keyword" name="keyword" class="form-control" v-on:keyup.space="addKeywords">
<li v-for="(keyw,index) in form.keywords" :key="index">{{keyw}}<a href="#" @click.prevent="deleteKeywords(index)">x</a></li>
</div>
<div class="" id="">
<label for="usr">Category</label><br>
<select v-model="form.category" class="form-control">
<option value="1" selected="selected">Select a choice</option>
<option value="2">gfdg</option>
<option value="3">gffdg</option>
<option value="4">fdsfd</option>
<option value="5">gfdgfd</option>
<option value="6">gfdgf</option>
<option value="7">gfddfg</option>
<option value="8">wewerw</option>
</select>
</div>
<label class="mt-4">Images</label><br>
<div class="uploader-create-project" @dragenter="OnDragEnter" @dragleave="OnDragLeave" @dragover.prevent @drop="onDrop" :class="{ dragging: form.isDragging }">
<div class="upload-control" v-show="form.images.length">
<label for="file">Select a file</label>
</div>
<div v-show="!form.images.length">
<i class="fa fa-cloud-upload"></i>
<p>Drag your images here</p>
<div>OR</div>
<div class="file-input">
<label for="file">Select a file</label>
<input type="file" id="file" @change="onInputChange" multiple>
</div>
</div>
<div class="images-preview" v-show="form.images.length">
<div class="img-wrapper" v-for="(image,index) in form.images" :key="index">
<img :src="image" :alt="`Image Uploader ${index}`">
<div class="details">
<span class="name" v-text="form.files[index].name" ></span>
</div>
<a href='#' @click.prevent="deleteImage(index)" class="delete-link">Delete</a>
</div>
</div>
</div>
<span>{{(form.sizefiles/1000000).toFixed(2)}} Mo</span>
<div class="mt-4">
<label for="usr">Poste</label><br>
<input type="text" v-model="form.task_name" class="form-control" name="task">
<label style="margin-left:20px;">person required</label>
<select v-model="form.nbr_person" form="carform" class="form-control">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<button type="button" class="btn btn-primary" @click="addTask">+</button>
</div>
<li v-for="(task,index) in form.tasks" :key="index">0/{{task.nbr_person_max}} {{task.name}} <a href="#" @click.prevent="deleteTask(index)">x</a></li>
<div class="mt-4">
<input type="checkbox" v-model="form.private" id="private" name="private">
<label for="scales">Private</label>
</div>
<div class="mt-4">
<input type="submit">
</div>
</div>
</form>
</div>
</template>
<script>
export default{
data(){
return{
form: new Form({
title:'',
desc:'',
nbr_person:'',
category:'',
keyword:'',
private:'',
task_name:'',
tasks:[],
keywords:[],
isDragging: false,
dragCount:0,
files:[],
images:[],
sizefiles:0,
})
}
},
methods:{
addTask(){
if(this.form.task_name != ''){
if(this.form.tasks.length < 4){
if(this.form.nbr_person == ''){this.form.nbr_person= 1;}
this.form.tasks.push({
name:this.form.task_name,
nbr_person_max:this.form.nbr_person
});
}else{ this.$toastr.e('The maximum of tasks is reach');}
}else{
this.$toastr.e('Please write a task in the empty field');
}
this.form.task_name='';
this.form.nbr_person='';
},
deleteTask(index){
this.form.tasks.splice(index,1);
},
addKeywords(){
if(this.form.keyword == ' '){this.form.keyword = ''};
if(this.form.keywords.length < 4){
if(this.form.keyword != ''){
this.form.keywords.push(this.form.keyword);
this.form.keyword='';
}else{
this.$toastr.e('Please write a keyword in the empty field');
}
}else{ this.$toastr.e('The maximum (4) keywords is reach'); }
},
deleteKeywords(index){
this.form.keywords.splice(index,1);
},
addProject(){
if(this.form.category == ''){this.form.category = 'none';}
this.form.post('api/project');
},
//Upload image setting
onInputChange(e){
const files = e.target.files;
Array.from(files).forEach(file => this.addImage(file));
},
OnDragEnter(e){
e.preventDefault();
this.form.dragCount++;
this.form.isDragging=true;
return false;
},
OnDragLeave(e){
e.preventDefault();
this.form.dragCount--;
if(this.form.dragCount <= 0)
this.form.isDragging=false;
},
onDrop(e){
e.preventDefault();
e.stopPropagation();
this.form.isDragging = false;
const files = e.dataTransfer.files;
Array.from(files).forEach(file => this.addImage(file));
},
addImage(file){
if(!file.type.match('image.*')){
this.$toastr.e(`${file.name} is not an image ${file.size}`);
return;
}else if( (this.form.sizefiles + file.size) <= 1000000){
this.form.sizefiles += file.size;
this.form.files.push(file);
const reader = new FileReader();
reader.onload = (e) => this.form.images.push(e.target.result);
reader.readAsDataURL(file);
}else{
this.$toastr.e(`The maximum of space(1 Mo) have been reach `);
}
},
getFileSize(size) {
const fSExt = ['Bytes', 'KB', 'MB', 'GB'];
let i = 0;
while(size > 900) {
size /= 1024;
i++;
}
return `${(Math.round(size * 100) / 100)} ${fSExt[i]}`;
},
deleteImage(index){
this.form.sizefiles = this.form.sizefiles - this.form.files[index].size;
this.form.images.splice(index,1);
this.form.files.splice(index,1);
},
},
computed:{
}
}
</script>
Profile.vue（不适用于任何发布/获取呼叫控制器）
<template>
<div class="container">
<div class="profile-box" id="">
<form @submit.prevent="finishEdit">
<div class="edit-profile mt-5 mb-5" v-show="form.active_user_edit">
<h4>Edit Profile</h4>
<div class="change-image" id="">
<label>Profile picture</label><br>
<input type="file" id="file" @change="processImg">
</div>
<div class="change-name" id="">
<label>Name</label><br>
<p>Name : {{actual_user}} <button type="button" class="btn btn-primary" @click.prevent="Edit('name')">O</button></p>
<input type="text" class="form-control" v-show="form.inputName" v-model="form.change_name">
</div>
<div class="change-desc" id="">
<p>Description <button type="button" class="btn btn-primary" @click.prevent="Edit('desc')">O</button></p>
<textarea class="form-control" v-model="form.change_desc" v-show="form.inputDesc"></textarea>
</div>
<div class="change-profession" id="">
<p>Speciality : {{spec}} <button type="button" class="btn btn-primary" @click.prevent="Edit('spec')">O</button></p>
<input type="text" class="form-control" v-model="form.change_spec" v-show="form.inputSpec">
</div>
<div class="email" id="">
<p>Email : {{email}} <button type="button" class="btn btn-primary" @click.prevent="Edit('email')">O</button></p>
<input type="text" class="form-control" v-model="form.change_email" v-show="form.inputEmail">
</div>
<div class="mt-4">
<button type="submit" class="btn btn-primary" >Edit</button>
</div>
</div>
</form>
</div>
</div>
</template>
<script>
//date setting
var moment = require('moment');
export default {
props: ['username','desc','email','actual_user','sub_date','id','spec','love'],
data(){
return{
form: new Form({
moment:moment,
sameUser:false,
id_user:0,
active_user_edit:'',
editBut:'',
selected_img:'',
showLove:'',
inputName:false,
inputEmail:false,
inputSpec:false,
inputDesc:false,
change_name:'',
change_email:'',
change_desc:'',
change_spec:'',
})
}
},
methods:{
editProfile(){
const check = this.form.active_user_edit;
if(check){
this.form.active_user_edit = false;
console.log(this.form.active_user_edit);
}else{
this.form.active_user_edit = true;
console.log(this.form.active_user_edit);
}
},
processImg() {
//this.form.selected_img = this.$refs.file.form.selected_img[0];
//console.log(event.target.files[0]);
},
Edit(part){
if(part == 'name'){
if(this.form.inputName == false){
this.form.inputName = true;
}else{
this.form.inputName = false;
}
}else if(part == 'desc'){
if(this.form.inputDesc == false){
this.form.inputDesc = true;
}else{
this.form.inputDesc = false;
}
}else if(part == 'email'){
if(this.form.inputEmail == false){
this.form.inputEmail = true;
}else{
this.form.inputEmail = false;
}
}else if(part == 'spec'){
if(this.form.inputSpec == false){
this.form.inputSpec = true;
}else{
this.form.inputSpec = false;
}
}
},
finishEdit(){
if(this.form.change_name == ''){
this.form.change_name = this.actual_user;
}
if(this.form.change_email == ''){
this.form.change_email = this.email;
}
if(this.form.change_spec == ''){
this.form.change_spec = this.spec;
}
if(this.form.change_desc == ''){
this.form.change_desc = 'Nothing for the moment..';
}
this.form.post('api/userEdit');
},
},
}
</script>
api.php
/////
<?php
use Illuminate\Http\Request;
Route::middleware('auth:api')->get('/user', function (Request $request) {
return $request->user();
});
Route::apiResources([
'project' => 'API\ProjectController',
'userEdit' => 'API\UserEditController',
'tasks' => 'API\TaskController',
'contact' => 'API\ContactController'
]);
答案 0 :(得分：2)
您应该知道是否调用api route，您的网址应如下所示：
localhost/api/..
但是您的网址/ api /位于配置文件之后：
http://127.0.0.1:8000/profile/api/userEdit
在您的vuejs代码中替换
this.form.post('api/userEdit');
使用：
this.form.post('/api/userEdit');
/ 网址开头