详解本地Vue项目请求本地Node.js服务器的配置方法

下面是详解本地Vue项目请求本地Node.js服务器的配置方法的完整攻略。

环境准备

在开始本地Vue项目请求本地Node.js服务器的配置之前，需要先完成以下环境准备：

安装Node.js，确保版本高于8.0
安装Vue CLI，用于快速搭建Vue项目

步骤一：创建后端服务

首先，需要通过Node.js创建一个本地的后端服务。可以通过Express框架来实现。

1. 安装Express

在命令行窗口中输入以下命令进行安装：

npm install express -g

2. 创建node.js文件

在项目目录中创建一个名为server.js的文件。然后在文件中添加以下代码：

var express = require('express');   //引入Express模块
var app = express();    //创建Express实例

app.get('/', function (req, res) {
  res.send('Hello World!');  // 返回一个Hello World表示访问成功
});

var server = app.listen(4000, function () {
  console.log('App listening at http://localhost:4000/');
});

这段代码创建了一个基本的后端服务，监听在4000端口上。当访问根路径时，返回的是一个字符串“Hello World!”。

3. 运行服务

在命令行窗口中运行以下命令来启动后端服务：

node server.js

步骤二：创建前端项目

接下来，需要创建一个Vue项目，并在其中配置跨域请求。在命令行中运行以下命令来创建一个Vue项目：

vue create vue-project

然后，进入到项目目录并安装axios依赖包，用于请求后端服务：

cd vue-project
npm install axios --save

步骤三：配置Vue项目

1. 配置跨域

在Vue项目的根目录下创建一个vue.config.js文件，并在其中添加以下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000',  // 代理目标地址
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
}

上述代码中，代理目标地址是本地后端服务的地址，即'http://localhost:4000'。

2. 编写Vue组件

在Vue项目中创建一个名为App.vue的组件，在其中添加以下代码：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      message: ''
    }
  },
  methods: {
    fetchData () {
      axios.get('/api')
        .then(response => {
          this.message = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>

上面的代码使用axios发送一个GET请求到“/api”路径，然后将返回的消息可以在视图中展示。

步骤四：运行项目

最后，在命令行中运行以下命令来启动Vue项目：

npm run serve

然后在浏览器中访问http://localhost:8080，就可以看到请求成功返回的“Hello World!”消息。

示例说明

示例一：通过POST方式传递参数

Vue组件的代码可以进行如下修改：

<template>
  <div>
    <form>
      <input type="text" v-model="data" />
      <button type="button" @click="postData">Submit</button>
    </form>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      data: '',
      message: ''
    }
  },
  methods: {
    postData () {
      const data = {
        data: this.data
      }

      axios.post('/api', data)
        .then(response => {
          this.message = response.data
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

这段代码通过POST请求将data参数提交到后端服务，并展示处理后的消息。

在后端服务中修改代码如下：

var express = require('express');
var bodyParser = require('body-parser');
var app = express();

app.use(bodyParser.json()); // 使用body-parser中间件来解析POST请求的参数

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.post('/', function (req, res) {
  var data = req.body.data; // 获取POST请求中的data参数
  res.send('The data you post is: ' + data);
});

var server = app.listen(4000, function () {
  console.log('App listening at http://localhost:4000/');
});

这段代码在后端服务中添加了一个接收POST请求的路由，并将请求中携带的data参数返回给前端。

示例二：通过POST方式上传文件