把node.js写的接口和vue项目结合一下

下面是一个基本的示例，演示如何使用 Node.js 编写 API 接口，并将其与 Vue 项目结合起来。

1. 先创建一个 Node.js 项目，并在其中安装必要的依赖：

npm init
npm install express cors body-parser --save

2. 在项目的根目录下创建一个名为 index.js 的文件，并编写以下代码：

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();

app.use(cors());
app.use(bodyParser.json());

app.get('/api/data', (req, res) => {
  const data = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' }
  ];
  res.json(data);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

这个代码创建了一个 Express 应用程序，并添加了 CORS 和 body-parser 中间件。然后，它定义了一个带有 /api/data 路由的 GET 请求处理程序。在这个示例中，我们只是返回一些硬编码的数据。

3. 在 Vue 项目中，创建一个名为 api.js 的文件，并编写以下代码：

import axios from 'axios';

const API_URL = 'http://localhost:3000';

export default {
  getData() {
    return axios.get(`${API_URL}/api/data`);
  }
};

这个代码使用 axios 库来向我们的 Node.js API 发送 GET 请求，并返回响应数据。

4. 在 Vue 项目中，使用我们的 API 文件来获取数据。例如，在组件中，您可以这样做：

<template>
  <div>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import api from './api';

export default {
  data() {
    return {
      data: []
    };
  },
  created() {
    api.getData().then(response => {
      this.data = response.data;
    });
  }
};
</script>

这个示例中，我们在组件的 created 钩子函数中使用我们的 API 文件来获取数据，并将其保存在组件的 data 对象中。然后，我们在模板中使用 v-for 指令来循环遍历数据并呈现它们。

这就是如何将 Node.js 编写的 API 接口与 Vue 项目结合起来。