Javascript 拉维尔7号+；Vue-未定义api-无法在Vue中显示任务发布

我正在vue和Laravel 7中创建一个任务crm，它有一个表单可以上载多个图像。我正处于测试阶段，无法显示我的

AllTask.vue

。我有一个

CreateTask.vue

表单组件，它按预期显示，但

AllTasks.vue

组件没有显示。在控制台中，我得到错误信息：

Uncaught (in promise) ReferenceError: api is not defined

作为Laravel和Vue的新手，我不清楚如何定义我的api。首先，我让控制器位于controllers文件夹中的API文件夹中，并在我的

API.php

文件中调用它们，如下所示：

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::middleware('auth:api')->get('/task', function (Request $request) {
     return $request->task();
 });

Route::apiResources(['user' => 'API\UserController']);
Route::apiResources(['task' => 'API\TaskController']); 

这引发了api not defined错误，因此我在这次调用中注释掉了任务的一部分，并将我的控制器移出api文件夹，移到常规控制器文件夹中

在清除缓存并重新编译应用程序之后，我在控制台中遇到了相同的错误。我完全迷路了，希望有人能给我定位。 以下是我目前掌握的代码：

TaskController.php

public function getAllTasks()
    {
        $tasks = Task::with('task_images')->orderBy('created_at', 'desc')->get();
        return response()->json(['error' => false, 'data' => $tasks]);
    }


public function createTask(Request $request)
    {
        $user = Auth::user();
        $task_name = $request->task_name;
        $task_priority = $request->task_priority;
        $task_assigned_to = $request->task_assigned_to;
        $task_assigned_by = $request->task_assigned_by;
        $task_description = $request->task_description;
        $task_to_be_completed_date = $request->task_to_be_completed_date;
        $task_status = $request->task_status;
        $task_notes = $request->task_notes;
        $task_finished = $request->task_finished;
        $task_image_description = $request->task_image_description;
        $task_image_id = $request->task_image_id;
        $images = $request->images;

        $task = Task::create([
            'task_name' => $task_name,
            'task_priority' => $task_priority,
            'task_assigned_to' => $task_assigned_to,
            'task_assigned_by' => $task_assigned_by,
            'task_description' => $task_description,
            'task_to_be_completed_date' => $task_to_be_completed_date,
            'task_status' => $task_status,
            'task_notes' => $task_notes,
            'task_finished' => $task_finished,
            'task_image_description' => $task_image_description,
            'task_image_id' => $task_image_id,
            'user_id' => $user->id,
        ]);

        foreach ($images as $image) {
            $imagePath = Storage::disk('uploads')->put($user->id . '/tasks', $image);
            TaskImage::create([
                'task_image_description' => $task_image_description,
                'task_image_path' => '/uploads/' . $imagePath,
                'task_id' => $task->id
            ]);
        }
        return response()->json(['error' => false, 'data' => $task]);
    }

app.js

require("./bootstrap");
window.Vue = require("vue");

import store from "./store/index";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);

import { Form, HasError, AlertError } from "vform";
import moment from "moment";
window.Form = Form;
Vue.component(HasError.name, HasError);
Vue.component(AlertError.name, AlertError);
import VueRouter from "vue-router";
Vue.use(VueRouter);
import VueProgressBar from "vue-progressbar";
Vue.use(VueProgressBar, {
    color: "rgb(143, 255, 199)",
    failedColor: "red",
    height: "6px"
});
import Swal from "sweetalert2";
// const Swal = require('sweetalert2')
window.Swal = Swal;
const toast = Swal.mixin({
    toast: true,
    position: "top-end",
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true,
    onOpen: toast => {
        toast.addEventListener("mouseenter", Swal.stopTimer);
        toast.addEventListener("mouseleave", Swal.resumeTimer);
    }
});
window.toast = toast;
let routes = [
    {
        path: "/dashboard",
        component: require("./components/Dashboard.vue").default
    },
    {
        path: "/developer",
        component: require("./components/Developer.vue").default
    },
    {
        path: "/profile",
        component: require("./components/Profile.vue").default
    },
    {
        path: "/users",
        component: require("./components/Users.vue").default
    },
    {
        path: "/tasks",
        component: require("./components/Tasks.vue").default
    }
];
const router = new VueRouter({
    mode: "history",
    routes
});
Vue.filter("upText", function(text) {
    return text.charAt(0).toUpperCase() + text.slice(1);
});
Vue.filter("myDate", function(created_date) {
    return moment(created_date).format("MMMM Do YYYY, h:mm:ss a");
});

window.Fire_event = new Vue();
Vue.component(
    "example-component",
    require("./components/ExampleComponent.vue").default
);

Vue.component(
    "dashboard-component",
    require("./components/Dashboard.vue").default
);

Vue.component(
    "passport-clients",
    require("./components/passport/Clients.vue").default
);

Vue.component(
    "passport-authorized-clients",
    require("./components/passport/AuthorizedClients.vue").default
);

Vue.component(
    "passport-personal-access-tokens",
    require("./components/passport/PersonalAccessTokens.vue").default
);

Vue.component("create-task", require("./components/CreateTask.vue").default);

Vue.component("all-tasks", require("./components/AllTasks.vue").default);

const app = new Vue({
    el: "#app",
    router,
    store
});

web.php

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

Route::get('{path}', "HomeController@index")->where('path', '([A-z\d/\/_.]+)?');

Route::group(['middleware' => 'auth', 'prefix' => 'task'], function () {
    Route::get('get_all', 'TaskController@getAllTasks')->name('fetch_all');
    Route::post('create_task', 'TaskController@createTask')->name('create_task');
});

如果我遗漏了任何内容，或者您希望看到我可能遗漏的更多信息，请让我知道，我将很乐意编辑我的查询。提前感谢您的帮助

编辑 AllTasks.vue

<template>
  <div class="row">
    <div class="col-md-6" v-for="(task, i) in tasks" :key="i">
      <div class="card mt-4">
        <img
          v-if="task.task_images.length"
          class="card-img-top"
          :src="task.task_images[0].task_image_path"
          alt
        />
        <div class="card-body">
          <p class="card-text">
            <strong>{{ task.task_name }}</strong>
          </p>
          <br />
          {{ truncateText(task.task_description) }}
        </div>
        <button class="btn btn-success m-2" @click="viewTask(i)">View Task</button>
      </div>
    </div>
    <el-dialog v-if="currentTask" :visible.sync="taskDialogVisible" width="40%">
      <span>
        <h3>{{ currentTask.task_name }}</h3>
        <div class="row">
          <div class="col-md-6" v-for="(img, i) in currentTask.task_images" :key="i">
            <img :src="img.task_image_path" class="img-thumbnail" alt />
          </div>
        </div>
        <hr />
        <h5>Assigned To</h5>
        <p>{{ currentTask.task_assigned_to }}</p>
        <h5>Assigned By</h5>
        <p>{{ currentTask.task_assigned_by }}</p>
        <h5>Due</h5>
        <p>{{ currentTask.task_to_be_completed_date }}</p>
        <h5>Notes</h5>
        <p>{{ currentTask.task_notes }}</p>
        <h5>Priority</h5>
        <p>{{ currentTask.task_priority }}</p>
        <h5>Status</h5>
        <p>{{ currentTask.task_status }}</p>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="taskDialogVisible = false">Okay</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "all-tasks",
  data() {
    return {
      taskDialogVisible: false,
      currentTask: "",
    };
  },
  computed: {
    ...mapState(["tasks"]),
  },
  beforeMount() {
    this.$store.dispatch("getAllTasks");
  },
  methods: {
    truncateText(text) {
      if (text.length > 24) {
        return `${text.substr(0, 24)}...`;
      }
      return text;
    },
    viewTask(taskIndex) {
      const task = this.tasks[taskIndex];
      this.currentTask = task;
      this.taskDialogVisible = true;
    },
  },
};
</script>

编辑#2 将以下内容添加到bootstrap.js之后

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.api = window.axios;

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

未定义

api

错误消失，但替换为：

TypeError: api.task is not a function

我已经隔离了它的位置。在CrateTask.vue中，我有一行：

api.task("/task/create_task", formData, {
          headers: { "Content-Type": "multipart/form-data" },
        })

---

问题（我的问题）是我是个笨蛋，不知道如何解决它。再次感谢您的帮助。

任务不是axios的一种方法。也许，您需要调用api.get来访问您的laravel控制器路径。在到达此处之前，请务必查找文档

---

看看文档

我猜您是在从AllTasks组件调用API。你介意把那部分也分享一下吗？你好，哈特夫。非常感谢。我已经编辑了这个问题，将AllTasks.vue和resources/js/store/index.js都包括在内。我希望它能揭示我所缺少的东西。干杯。这里：-

api

基本上就是

axios

客户端。请确保你的

bootstrap.js中有它，在那篇文章的一条评论中，他说他在
bootstrap
中设置了它，如下所示：
const-api=axios.create（{baseURL:'https://some-domain.com/api/，超时：1000，头：{'X-Custom-Header'：'foobar'}）我强烈建议您开设一门课程，学习您正在学习的技术的基础知识。请记住，在编程中，有时是可行的，但它并不正确。不知道代码的功能可能非常危险。
api.task("/task/create_task", formData, {
          headers: { "Content-Type": "multipart/form-data" },
        })