Vue.js 如何创建axios POST的端点

我目前正在Vue.js中构建一个类似Twitter的应用程序作为编码培训，并且遇到了一个错误

POST 404 Not Found

当我试图发布一条新的tweet时会发生错误，而“显示以前的tweet”功能可以工作。我正在使用

axios post

来表示“发布新tweet”，使用

axios get

来表示“显示以前的tweet”。我用的是同一个地址

http://localhost:8080/feed.json

用于

post

和

get

这意味着地址本身是正确的，就在几分钟前，我了解到帖子的错误很可能是因为我没有为帖子创建端点

现在又来了一个问题。即使在谷歌搜索了一些有用的具体例子之后，我也不知道“创建端点”在我的脑海中是什么样子

因此，我想通过提出以下问题来收集一些具体信息

• 如果我想在Vue.js中为axios使用端点，我应该在什么样的文件中定义端点？Vue文件？JavaScript文件？还是其他类型的文件
• 在哪里定义端点？在我的主

  App.vue

  所在的目录中？还是别的地方

• 在实际代码中，“为axios post创建端点”看起来如何

• 一旦定义了端点，我应该如何使用它？我的意思是，我使用的

  axios post

  文件如何识别它？例如，在Vue.js中，在Vue文件的JavaScript部分中写入行

  import ShowPreviousTweets from./components/ShowPreviousTweets'

  ，可以使用外部定义的

  ShowPreviousTweets

  组件。当您要使用外部定义的端点时，是否有与此对应的内容

注意：如果您通过“回答此问题”显示一些示例代码，而不是在评论部分写一些句子来回答我的问题，我将不胜感激。请务必在解释中包含一些示例代码。

[更新]

slutuppgift/
|--                         Static files
|-- index.html              HTML-code 
|-- feed.json               the API JSON-data
|-- node_modules   
|-- backend
|-- |-- endpoint.js         newly created endpoint according to the advice         
|-- src/                
|-- |-- main.js             JavaScript-code to initialize Vue & app.vue
|-- |-- App.vue             Vue-code for the application
|-- |-- components/         Vue-code for components
|-- |-- views/              Vue-code for pages/templates (Vue-router).
|-- |-- router.js           JavaScript-code for Vue-router (URL-structure)
|-- |-- api.js              JavaScript-code for Express.js (the API)

在这个程序中，服务器端由Node.js负责

[我的工作目录“SlutupGift”看起来如何]

slutuppgift/
|--                         Static files
|-- index.html              HTML-code 
|-- feed.json               the API JSON-data
|-- node_modules            
|-- src/                
|-- |-- main.js             JavaScript-code to initialize Vue & app.vue
|-- |-- App.vue             Vue-code for the application
|-- |-- components/         Vue-code for components
|-- |-- views/              Vue-code for pages/templates (Vue-router).
|-- |-- router.js           JavaScript-code for Vue-router (URL-structure)
|-- |-- api.js              JavaScript-code for Express.js (the API)

[更新版本2]

slutuppgift/
|--                         Static files
|-- index.html              HTML-code 
|-- feed.json               the API JSON-data
|-- node_modules   
|-- backend
|-- |-- endpoint.js         newly created endpoint according to the advice         
|-- src/                
|-- |-- main.js             JavaScript-code to initialize Vue & app.vue
|-- |-- App.vue             Vue-code for the application
|-- |-- components/         Vue-code for components
|-- |-- views/              Vue-code for pages/templates (Vue-router).
|-- |-- router.js           JavaScript-code for Vue-router (URL-structure)
|-- |-- api.js              JavaScript-code for Express.js (the API)

[endpoint.js（在“后端”文件夹中]

[更新版本3]

slutuppgift/
|--                         Static files
|-- index.html              HTML-code 
|-- feed.json               the API JSON-data
|-- node_modules   
|-- backend
|-- |-- endpoint.js         newly created endpoint according to the advice         
|-- src/                
|-- |-- main.js             JavaScript-code to initialize Vue & app.vue
|-- |-- App.vue             Vue-code for the application
|-- |-- components/         Vue-code for components
|-- |-- views/              Vue-code for pages/templates (Vue-router).
|-- |-- router.js           JavaScript-code for Vue-router (URL-structure)
|-- |-- api.js              JavaScript-code for Express.js (the API)

[App.vue]

newKweet(){
  var self = this;
  alert(self.kweetInput);

  this.axios.post('/newKweet', {     
    userJSON: self.userJSON
    avatar: self.userJSON.avatar,
    username: self.userJSON.username,
    handle: self.userJSON.handle,
    timestamp: self.userJSON.timestamp,
    content: self.userJSON.content,
    media: {
      type: self.userJSON.media.type,
      url: self.userJSON.media.url
    },
    actions: {
      replies: self.userJSON.actions.replies,
      rekweets: self.userJSON.actions.rekweets,
      likes: self.userJSON.actions.likes
    }  
  })
  .then(function(response){
    console.log('The output: ');
    console.log(response.data);
  })
  .catch(function(error){
    console.log('An error occured...');
    console.log(error);
  });    

  self.kweetInput = '';
  console.log('The end of newKweet() method');
}

[更新版本4]

slutuppgift/
|--                         Static files
|-- index.html              HTML-code 
|-- feed.json               the API JSON-data
|-- node_modules   
|-- backend
|-- |-- endpoint.js         newly created endpoint according to the advice         
|-- src/                
|-- |-- main.js             JavaScript-code to initialize Vue & app.vue
|-- |-- App.vue             Vue-code for the application
|-- |-- components/         Vue-code for components
|-- |-- views/              Vue-code for pages/templates (Vue-router).
|-- |-- router.js           JavaScript-code for Vue-router (URL-structure)
|-- |-- api.js              JavaScript-code for Express.js (the API)

[App.vue的模板部分]

<template>
    <form class = "userContainer">
        <div class = "user-avatar"> 
            <img src="avatar/avatar-loggedin.jpg">
        </div>
        <textarea rows = "10" cols = "80" v-model="kweetInput">  </textarea>  
    button class = "kwitterBtn" type = "submit" @click.prevent="newKweet()">Kwitter</button>
    </form>  
</template>

[endpoint.js]

var express = require('express');
var endpoint = express();

var cors = require('cors');
endpoint.use(cors());

var portNo = 3000;

endpoint.listen(portNo, function(){
    console.log('Listening on port ' + portNo);
});

// Get method route
endpoint.get('/newKweet', function(req, res){
    res.send('GET request to kweet');
});

// POST method route
endpoint.post('/newKweet', function(req, res){
    res.send('POST request kweet');
})

---

在主节点应用程序js（后端）中安装并运行express： （使用npm安装-save express安装）

然后以这种方式创建所有端点

// GET method route
app.get('/tweet', function (req, res) {
  res.send('GET request to tweet');
});

// POST method route
app.post('/tweet', function (req, res) {
  res.send('POST request tweet');
});

若有不同的方法，可以使用相同的端点，但不能有具有相同方法和端点的两个端点

---

更新 让我们看看这里：

这是一个基本的在线应用程序，我为它完成了演示express和node如何协同工作。该应用程序创建了一个临时网站，现在请点击以下链接： -（home，即“/”get端点） -（该“/tweet”获取端点） -对于帖子，您需要使用axios或表单，因为直接使用浏览器进行导航，请务必拨打电话

现在在您的本地机器上，如果您的应用程序设置正确，并且终端已启动并运行命令

node app.js

（请确保使用.js主文件的名称并从后端文件夹运行命令）您可以导航到此链接：

http://localhost:3000/tweet

要启用跨域请求，请执行以下操作：

从终端安装cors（您需要留在节点应用程序的根文件夹中）：

然后在实际模块导入后，在应用程序main js中添加这一行

var express = require('express')
var app = express()
/* THE NEW PART */
var cors = require('cors')
app.use(cors())
/* ... */

---

然后重试使用axios调用端点

是否有服务器正在运行，为json文件提供服务？vue是一个前端框架。当您执行HTTP请求（例如使用axios）时，该请求会转到后端，例如

php

服务器。然后该后端可以接受HTTP方法（例如

POST

或

GET

）在一个特定的URL上。就像更新的帖子一样，我在服务器端使用Node.js。看看。它还没有准备好生产，但为了学习如何构建前端，它将在JSON数据文件上提供一个REST API。仍然会得到相同的错误。这次我还得到了

xhr.js？ec6c:172 post localhost:3000/newKweet net:：ERR_FAILED

I添加了更新版本5以显示

endpoint.js

文件的当前状态。我在线创建了一个应用程序副本：尝试调用此端点：此副本做什么？当我点击“运行”按钮时，它生成了许多绿色语句作为输出。