在 Vue 中，我的节点 server.js 可以工作并与表连接，但 axio 不能

Question

我正在学习本教程 Vue、Node JS、Express、MySQL Crud 以及这个 Vue 3 Crud。 我正在尝试连接到我的“事件”表，这是我的 server.js 文件

const bodyParser = require("body-parser");
const cors = require("cors");

const app = express();

var corsOptions = {
  origin: "http://localhost:8081"
};

app.use(cors(corsOptions));

// parse requests of content-type - application/json
app.use(bodyParser.json());

// parse requests of content-type - application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

// simple route
app.get("/", (req, res) => {
  res.json({ message: "Welcome to my app." });
});

// set port, listen for requests
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}.`);
});

const db = require("./app/models");

const EventController = require("./app/controllers/event.controller");

EventController.create({
  event_name: "Espresso",
  event_date: "2024-02-16",
  event_desc: "Mf",
})

当我使用节点 server.js 运行 server.js 时，它实际上成功地创建了事件表中的“Espresso”插入。但在 vue 项目（server.js 文件也位于其中）中，我使用“EventDataService.js”作为 CRUD 方法。这是EventDataService.js：

import http from "../http-common";

class EventDataService {
  getAll() {
    return http.get("/event");
  }

  get(event_id) {
    return http.get(`/event/${event_id}`);
  }

  create(data) {
    return http.post("/event", data);
  }

  update(event_id, data) {
    return http.put(`/event/${event_id}`, data);
  }

  delete(event_id) {
    return http.delete(`/event/${event_id}`);
  }

  deleteAll() {
    return http.delete(`/event`);
  }

  findByTitle(event_name) {
    return http.get(`/event?event_name=${event_name}`);
  }
}

export default new EventDataService();

http 导入就是这个 http-common.js 文件：

import axios from "axios";

export default axios.create({
  baseURL: "http://localhost:8080/api",
  headers: {
    "Content-type": "application/json"
  }
});

这就是我在 vue 文件中使用代码的方式：

import EventDataService from '../services/EventDataService'

再往下

saveEvent() {
            if (this.event_name == ""){
              this.titleWarning = true;
            } else if (this.event_date == null){
              this.dateWarning = true;
            } else {
                var event_data = {
                    event_name: this.event_name,
                    event_date: this.event_date,
                    event_desc: this.event_desc,
                };
                EventDataService.create(event_data)
                    .then((response) => {
                        this.event_id = response.data.event_id;
                        console.log("Successful");
                        console.log("Event ID: " + this.event_id);
                    })
                    .catch((e) => {
                        console.log("Error saving event to db: ")
                        console.log(e);
                    })
                    this.$router.push('/');
            }
        },

我收到一个错误（已修剪，请告诉我是否应该给出完整的错误）：

Error saving event to db: 
message: "Network Error", name: "AxiosError", code: "ERR_NETWORK", config: {…}, request: XMLHttpRequest }
​
code: "ERR_NETWORK"
config: Object { timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }
adapter: Array(3) [ "xhr", "http", "fetch" ]
baseURL: "http://localhost:8080/api"

我是一个初学者，所以我真的不知道我做错了什么 - 它可能是 baseURL 但也许我在使用 .我使用 XAMPP 作为数据库。如果需要的话，以下是项目的依赖项：

"dependencies": {
    "@mdi/font": "5.9.55",
    "axios": "^1.7.2",
    "body-parser": "^1.20.2",
    "core-js": "^3.8.3",
    "cors": "^2.8.5",
    "express": "^4.19.2",
    "mysql2": "^3.10.1",
    "roboto-fontface": "*",
    "sequelize": "^6.37.3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuetify": "^3.0.0-beta.0",
    "webfontloader": "^1.0.0"
  }

任何事情都有帮助，因为我真的不知道。如果我需要提供该项目的更多代码，请告诉我。另外，我想知道是否可以只使用 server.js 文件，但它位于根目录中，所以我不知道如何将其导入到我的 src > 组件 > Events.vue 文件中

Answer 1

我认为您的

server.js

文件中缺少一些代码。 在

app.listen()

函数之前应该有一些映射路线的代码。

应该是这样的：

...

// parse requests of content-type - application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

app.post("/event", (req, res) => {
  EventController.create({
  event_name: "Espresso",
  event_date: "2024-02-16",
  event_desc: "Mf",
  });
});

// simple route
app.get("/", (req, res) => {
  res.json({ message: "Welcome to my app." });
});

...

此代码的作用是在后端使用路由

http://localhost:8081/event

创建一个端点。前端中的

http.post('/event', data)

将向该端点发送请求。您已在后端为

EventController

中的每个功能手动指定 URL。