VUE+node（express）实现前后端分离

介绍

前后端分离是一种流行的应用架构，它将前端和后端的代码分别放置在不同的服务器上，通过 API 接口来进行通信。这种架构方式具有很多优点，比如可以提高应用的并发能力、减小服务器压力、便于扩展性等等。下面我将介绍如何使用VUE和Node.js的Express实现前后端分离。

前端实现

步骤一：安装VueCLI

为了快速创建Vue.js应用程序，我们需要先安装Vue CLI。在命令行中运行以下命令：

npm install -g @vue/cli

步骤二：创建项目

使用上一步安装的Vue CLI，我们可以轻松地创建一个应用程序。只需在终端上运行以下命令：

vue create my-app

其中“my-app”是你的应用程序名。在命令执行完成后，该命令会生成一个基本的Vue.js项目。

步骤三：编写前端代码

VueJS提供了一个很好的应用程序结构，你可以在里面创建组件、路由以及与后端通信的代码。对于这个演示，我们只需简单地创建一个仅包含一个输入框和一个按钮的组件，以便用户可以输入数据并提交到后端。以下是代码示例：

<template>
  <div>
    <h1>前端页面</h1>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="data" placeholder="请输入内容" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      data: "",
    };
  },
  methods: {
    async submitForm() {
      const response = await fetch("/api/data", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          data: this.data,
        }),
      });
      const responseData = await response.json();
      console.log(responseData);
    },
  },
};
</script>

这个代码定义了一个带有一个输入框和一个按钮的Vue组件。当用户填写了数据并提交表单时，它会将数据提交到后端API。

步骤四：运行前端代码

通过运行以下命令，在开发模式下启动Vue.js应用程序：

npm run serve

这个命令将会运行我们在上一步中创建的VueJS应用程序。你可以在 http://localhost:8080 打开一个浏览器窗口来查看该应用程序。

后端实现

步骤一：安装Node.js

Node.js是一种服务端JavaScript环境，你可以使用它来创建Web应用程序。在这个演示中，我们将使用Node.js来创建一个Express应用程序。如果你还没有安装Node.js，请从官方网站下载并安装。

步骤二：创建新项目

我们需要使用Node.js的npm包管理器来安装Express和其它依赖项。在命令行中输入以下命令：

mkdir my-app
cd my-app
npm init -y
npm install express body-parser cors

上述命令将：

• 创建一个名称为“ my-app ”的项目文件夹。
• 在该项目文件夹中初始化一个新的npm项目。
• 安装Express、Body Parser和CORS npm包。

步骤三：编写后端代码

在“ my-app ”文件夹中创建一个名为 index.js 的文件，并添加以下代码：

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

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

app.post("/api/data", (req, res) => {
  const data = req.body.data;
  console.log(`DATA: ${data}`);
  res.send({ message: "成功提交数据" });
});

const port = process.env.PORT || 5000;
app.listen(port, () => {
  console.log(`服务器已启动： http://localhost:${port}`);
});

这个代码将启动一个Express应用程序并对 "/api/data" 路径进行POST请求的监听。当一个POST请求被发送到该路径时，它会打印传入请求正文中的数据，并向客户端返回一条成功消息。

步骤四：运行后端代码

在命令行中运行以下命令，以启动Node.js/Express服务器：

node index.js

这个命令将会运行我们在上一步中创建的Node.js程序。现在，我们已经编写了一个简单的后端应用程序，每当接收一个POST请求时，都会打印客户端传来的数据。

测试

现在我们已经分别编写了前端和后端应用程序。我们可以通过按照以下步骤测试整个过程。

1. 在终端中执行 cd my-app 命令进入后端项目目录，在命令行中运行 node index.js 命令，启动后端服务；
2. 在另一个终端中执行 cd my-app 命令进入前端项目目录，在命令行中运行 npm run serve 命令，启动前端服务；
3. 打开浏览器，输入 http://localhost:8080，进入前端页面；
4. 在前端页面中输入待提交数据，点击 "提交" 按钮，查看控制台；

如果一切都正确配置，你应该可以看到一条成功消息被输出给控制台，表示数据已经成功提交。