如何使用 Vue.js 和 Express.js 构建全栈应用-JavaScript中文网-JavaScript教程资源分享门户

前言

Vue.js 和 Express.js 是当前非常流行的前端和后端技术。Vue.js 是由尤雨溪开发的一款渐进式 JavaScript 框架，可以轻松构建交互性强、性能优异的 Web 应用程序。Express.js 则是基于 Node.js 平台的 Web 应用程序框架，可以快速搭建高性能、可扩展的 Web 应用程序。

本文将介绍如何使用 Vue.js 和 Express.js 构建全栈应用，包括前端和后端的搭建和连接，以及如何使用 RESTful API 和 MongoDB 数据库进行数据交互。本文适合有一定 Vue.js 和 Express.js 基础的开发人员阅读。

环境准备

在开始构建全栈应用之前，需要先准备好以下环境：

Node.js 和 npm
MongoDB 数据库

前端搭建

创建 Vue.js 项目

首先，我们需要创建一个 Vue.js 项目。可以使用 Vue CLI 快速创建一个新项目，具体步骤如下：

安装 Vue CLI
```
npm install -g @vue/cli
```
创建新项目
```
vue create my-project
```
在创建项目的过程中，可以选择需要的插件和配置项。
启动开发服务器
```
cd my-project
npm run serve
```
启动开发服务器后，可以在浏览器中访问 http://localhost:8080 查看应用程序。

编写前端代码

接下来，我们需要编写前端代码。在本例中，我们将创建一个简单的 TodoList 应用程序，用于演示前后端如何交互。

首先，在 src/components 目录下创建一个名为 TodoList.vue 的组件，用于显示 TodoList：

// javascriptcn.com 代码示例
<template>
  <div>
    <h1>TodoList</h1>
    <form @submit.prevent="addTodo">
      <input type="text" v-model="newTodo" />
      <button type="submit">Add</button>
    </form>
    <ul>
      <li v-for="todo in todos" :key="todo._id">
        {{ todo.content }}
        <button @click="deleteTodo(todo._id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
      newTodo: "",
    };
  },
  created() {
    this.fetchTodos();
  },
  methods: {
    fetchTodos() {
      // TODO: fetch todos from backend API
    },
    addTodo() {
      // TODO: add new todo to backend API
    },
    deleteTodo(id) {
      // TODO: delete todo from backend API
    },
  },
};
</script>

其中，data 属性用于存储 TodoList 数据，created 生命周期钩子用于在组件创建时调用 fetchTodos 方法获取数据，methods 属性用于定义方法，包括获取数据、添加新数据和删除数据。

接下来，我们需要编写前端代码与后端 API 进行交互。在 src/api 目录下创建一个名为 todos.js 的文件，用于定义与 TodoList 相关的 API：

// javascriptcn.com 代码示例
import axios from "axios";

const baseURL = "http://localhost:3000/api";

const todoAPI = axios.create({
  baseURL,
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
});

export const fetchTodos = async () => {
  const response = await todoAPI.get("/todos");
  return response.data;
};

export const addTodo = async (content) => {
  const response = await todoAPI.post("/todos", { content });
  return response.data;
};

export const deleteTodo = async (id) => {
  const response = await todoAPI.delete(`/todos/${id}`);
  return response.data;
};

其中，baseURL 为后端 API 的地址，todoAPI 为使用 Axios 创建的 API 实例，fetchTodos、addTodo 和 deleteTodo 分别为获取数据、添加新数据和删除数据的方法。

最后，我们需要将 TodoList.vue 组件中的方法与 API 进行关联。修改 methods 属性如下：

// javascriptcn.com 代码示例
methods: {
  async fetchTodos() {
    const todos = await fetchTodos();
    this.todos = todos;
  },
  async addTodo() {
    if (this.newTodo) {
      const todo = await addTodo(this.newTodo);
      this.todos.push(todo);
      this.newTodo = "";
    }
  },
  async deleteTodo(id) {
    await deleteTodo(id);
    this.todos = this.todos.filter((todo) => todo._id !== id);
  },
},

现在，前端代码已经编写完成。可以在浏览器中查看应用程序，如果一切正常，应该能够看到一个空的 TodoList，可以添加和删除 Todo 项。

后端搭建

创建 Express.js 应用程序

接下来，我们需要创建一个 Express.js 应用程序。可以使用 Express Generator 快速创建一个新应用程序，具体步骤如下：

安装 Express Generator
```
npm install -g express-generator
```
创建新应用程序
```
express my-app --no-view
```
在创建应用程序的过程中，可以选择需要的插件和配置项。
安装依赖项
```
cd my-app
npm install
```
启动开发服务器
```
npm start
```
启动开发服务器后，可以在浏览器中访问 http://localhost:3000 查看应用程序。

编写后端代码

接下来，我们需要编写后端代码。在 routes 目录下创建一个名为 todos.js 的路由文件，用于定义与 TodoList 相关的 API：

// javascriptcn.com 代码示例
const express = require("express");
const router = express.Router();
const Todo = require("../models/todo");

router.get("/", async (req, res) => {
  const todos = await Todo.find();
  res.json(todos);
});

router.post("/", async (req, res) => {
  const { content } = req.body;
  const todo = new Todo({ content });
  await todo.save();
  res.json(todo);
});

router.delete("/:id", async (req, res) => {
  const { id } = req.params;
  await Todo.findByIdAndDelete(id);
  res.json({ message: "Todo deleted" });
});

module.exports = router;

其中，Todo 为使用 Mongoose 创建的数据模型，get、post 和 delete 分别为获取数据、添加新数据和删除数据的路由处理程序。

接下来，我们需要将路由与应用程序进行关联。在 app.js 文件中添加以下代码：

const todosRouter = require("./routes/todos");

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use("/api/todos", todosRouter);

其中，express.json() 和 express.urlencoded() 用于解析请求体中的 JSON 和 URL 编码数据，/api/todos 为 TodoList 相关的 API 路由前缀。

最后，我们需要连接到 MongoDB 数据库。在 app.js 文件中添加以下代码：

// javascriptcn.com 代码示例
const mongoose = require("mongoose");

mongoose.connect("mongodb://localhost:27017/my-app", {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const db = mongoose.connection;

db.on("error", console.error.bind(console, "connection error:"));
db.once("open", function () {
  console.log("Connected to MongoDB");
});

其中，mongoose.connect() 用于连接到 MongoDB 数据库，db 为数据库连接对象，db.on() 和 db.once() 用于监听数据库连接状态。

现在，后端代码已经编写完成。可以在浏览器中查看应用程序，如果一切正常，应该能够使用前端代码添加和删除 Todo 项，并查看后端数据库中的数据。

总结

本文介绍了如何使用 Vue.js 和 Express.js 构建全栈应用，包括前端和后端的搭建和连接，以及如何使用 RESTful API 和 MongoDB 数据库进行数据交互。通过本文的学习，读者可以了解如何使用 Vue.js 和 Express.js 构建全栈应用，并掌握相关的开发技能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657af207d2f5e1655d571cdf