如何为 axios 创建端点 POST

Question

我目前正在构建一个类似 Twitter 的应用程序作为 Vue.js 中的编码培训，并且一直卡在错误 POST 404 Not Found 上。

当我尝试 post 一条新推文时发生错误，而 "show the previous tweets" 功能有效。我对 "post a new tweet" 使用 axios post，对 "show the previous tweets" 使用 axios get。我为 post 和 get.

使用相同的地址 http://localhost:8080/feed.json

这意味着地址本身是正确的，几分钟前我了解到 POST 的错误很可能是因为我没有为 POST。

现在又出现了一个问题。即使在谷歌上搜索了一些有用的具体示例后，我也没有很好地了解 "creating an endpoint" 在我脑海中的样子。

所以我想通过提出以下问题来收集一些具体信息。

如果我想在 Vue.js 中将它用于 axios，我应该在什么样的文件中定义端点？视图文件？ JavaScript 文件？或者其他类型的文件？
我在哪里定义端点？在我的主目录里有App.vue exists？或者别的地方？
“为 axios post 创建端点在实际代码中看起来像什么？
定义端点后，我应该如何使用它？我的意思是，我在其中使用 axios post 的文件如何识别它？例如，在 Vue.js 中，在 Vue 文件的 JavaScript 部分写入行 import ShowPreviousTweets from './components/ShowPreviousTweets' 允许您使用外部定义的 ShowPreviousTweets 组件。当你想使用外部定义的端点时，是否有与此对应的东西？

注意：如果您通过 "Answer this question" 显示一些示例代码来回答我的问题，而不是仅仅在评论部分写一些句子，我将不胜感激。请在说明中包含一些示例代码。

[更新]

在此程序中，服务器端由 Node.js

负责

[我的工作目录 "slutuppgift" 是什么样的]

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]

[endpoint.js（在 "backend" 文件夹中]

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

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');
})

[更新版本 3]

[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]

[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>

[更新版本 5]

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]

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');
})

Answer 1

在您的主节点应用程序 js（在后端）中安装并运行表达：（使用 npm install —save express 安装它）

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

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

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

// 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');
});

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

更新

让我们看看这里：https://repl.it/repls/GargantuanFaintSets

这是一个基本的在线应用程序，我完成它是为了向您展示 express 和 node 如何协同工作。该应用创建了一个临时网站，现在请关注这些 link： - https://gargantuanfaintsets--five-nine.repl.co（主页，“/”获取端点） - https://gargantuanfaintsets--five-nine.repl.co/tweet（“/tweet”获取端点） - 对于 post，您需要使用 axios 或表单，因为使用浏览器直接导航总是会调用

现在在您的本地机器上，如果您的应用程序设置正确并且您的终端已启动并且运行正在执行命令node app.js（请务必使用您的 .js 主文件的名称和运行来自后端文件夹的命令）你可以导航到这个 link: http://localhost:3000/tweet

Answer 2

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

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

npm install --save cors

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

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

然后重试使用 axios 调用端点

如何为 axios 创建端点 POST

How to create an endpoint to axios POST

endpoint

vue.js

axios

更新