全栈电商之舞：从零到部署的Vue+Express API开发（下）

2023-11-04 10:49:09

我们每天都会使用的网站和 App 都会保存我们的数据，即使关闭后，下次打开还能看到之前的内容，这便是「状态管理」的魅力。而今，我们将继续上篇中的 Vue 框架，利用 Express 框架搭建后端 API，构建一个小型全栈电商应用。

搭建Express后端API

现在，我们已拥有一个 Vue 前端应用，接下来需要搭建 Express 后端 API，以处理数据交互。首先，安装 Express 框架：

npm install express

然后，创建一个新的 JavaScript 文件 server.js，并输入以下代码：

const express = require('express');
const app = express();
const port = 3000;

app.get('/products', (req, res) => {
  res.json([{
    id: 1,
    name: 'Product 1',
    price: 100
  }, {
    id: 2,
    name: 'Product 2',
    price: 200
  }]);
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

在这段代码中，我们导入了 Express 并创建了一个新的 Express 应用程序。接着定义了一个端口号 3000，该应用程序将在该端口上进行监听。在该应用程序中，我们定义了一个 GET 路由 /products，它将在客户端向服务器发送 GET 请求时进行响应。该响应将是一个 JSON 数组，其中包含两个产品对象，每个对象都具有 id、name 和 price 属性。最后，我们调用 app.listen() 方法，该方法会让应用程序开始监听端口 3000，一旦检测到客户端请求，就会触发相应的路由处理函数。

连接Vue前端和Express后端

现在，我们已经搭建好了后端 API，接下来需要将 Vue 前端和 Express 后端连接起来。首先，在 Vue 项目的 main.js 文件中，我们需要安装 Axios 库，该库可以帮助我们轻松地向后端发送 HTTP 请求。

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$axios = axios

接着，我们需要修改 Vue 组件中的代码，以向后端发送请求并获取数据。例如，在 ProductList.vue 组件中，我们可以将 data() 方法改为以下形式：

export default {
  data() {
    return {
      products: []
    }
  },
  mounted() {
    this.$axios.get('/products').then(response => {
      this.products = response.data
    })
  }
}