5分钟node.js入门之与Vue项目实现前后端交互

站长

2023年08月06日 04:07 · 阅读数 22

一、前言

随着互联网时代的发展，前后端分离式开发已成为互联网项目开发的业界标准使用方式，写什么业务都需要一个强大的后端支持，现在只要我们掌握了Express与Mongoose的使用，似乎这些工作作为一个前端开发也能独立完成了(真的是泰裤辣)！。在本文中，我们将解释如何使用 Express 和 MongoDB 创建、读取、更新和删除书籍的接口，并在 Vue3 项目中实现前后端交互。

二、前戏

1. 首先，我们需要安装和配置所需的软件包和工具。

为了使用 Express 和 MongoDB 构建后端，我们需要安装以下软件包：

Express：用于构建 Web 应用程序和 API。
Mongoose：用于连接和操作 MongoDB 数据库。

ps： (不熟悉以上模块的可以点击翻阅相关文章学习)

在 Node.js 中，可以使用 npm 包管理器安装这些软件包。

//开启终端，进入项目文件夹并运行以下命令：
npm install express mongoose

2.安装完毕后，我们可以开始撸代码了。

首先，我们需要创建一个 Express 应用程序，并设置路由来响应客户端请求。在 app.js 文件中，我们可以添加以下代码：

const express = require('express');
const mongoose = require('mongoose');

// 连接 Mongodb 数据库
mongoose.connect('mongodb://localhost/books', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

// 创建 Book 模型用于存放书籍信息
const Book = mongoose.model('Book', {
  title: String,
  author: String,
  description: String
});

// 创建 Express 应用程序
const app = express();

// 设置路由
app.get('/books', async (req, res) => {
  // 从数据库中获取所有书籍的信息
  const books = await Book.find();
  res.send(books);
});

app.post('/books', async (req, res) => {
  // 接收来自客户端的书籍信息，并存储到数据库中
  const {title, author, description} = req.body;
  const book = new Book({title, author, description});
  await book.save();
  res.send('ok');
});

app.put('/books/:id', async (req, res) => {
  // 根据书籍 ID 更新书籍信息
  const {id} = req.params;
  const {title, author, description} = req.body;
  await Book.findByIdAndUpdate(id, {title, author, description});
  res.send('ok');
});

app.delete('/books/:id', async (req, res) => {
  // 根据书籍 ID 删除书籍信息
  const {id} = req.params;
  await Book.findByIdAndDelete(id);
  res.send('ok');
});

// 启动 Express 应用程序
app.listen(3000, () => console.log('Server started at http://localhost:3000'));

3.最后别忘了在命令行中运行该程序

node app.js

在上述代码中，我们首先使用 Mongoose 连接 MongoDB 数据库，并创建 Book 模型。模型定义了如何将数据存储在数据库中。然后，我们创建一个 Express 应用程序，并设置四个路由来响应客户端请求：

GET /books：返回所有书籍的信息。
POST /books：接收来自客户端的书籍信息，并存储到数据库中。
PUT /books/:id：根据书籍 ID 更新书籍信息。
DELETE /books/:id：根据书籍 ID 删除书籍信息。前戏差不多了，咱们废话不多说，咱们直接开始上实例。

四、实例

前戏差不多了，咱们废话不多说，咱们直接开始上实例。接下来，我们需要在 Vue3 项目中实现前后端交互。

1.首先，我们需要安装和配置`Axios`库，用于向后端发送 HTTP 请求并处理响应。

请开启终端，进入项目文件夹并运行以下命令：

npm install axios

2.安装完毕后，我们继续撸服务代码。

在 Vue3 项目中，我们通常将所有与后端交互的代码放在服务模块中。在 src/services 目录下，我们可以创建一个名为 book.js 的文件，并添加以下代码：

import axios from 'axios';

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

export default {
  async getAll() {
    const response = await axios.get(`${API_URL}/books`);
    return response.data;
  },

  async create(book) {
    const response = await axios.post(${API_URL}/books, book);
    return response.data;
  },

  async update(id, book) {
    const response = await axios.put(${API_URL}/books/${id}, book);
    return response.data;
  },

  async delete(id) {
    const response = await axios.delete(${API_URL}/books/${id});
    return response.data;
  }
};

在上述代码中，我们定义了一个名为 book 的对象，并添加了四个方法来实现与后端的交互：

getAll：获取所有书籍信息。
create：创建一本新书并将其存储到数据库中。
update：更新一本书籍的信息。
delete：删除一本书籍的信息。

这些方法使用 Axios 发送 HTTP 请求，并返回响应数据。

3.在Vue组件中，我们可以调用这些方法来操作书籍数据，并实现前后端交互。

在 BookList.vue 组件中，我们可以添加以下代码：

<template>
  <div>
    <button @click="addBook">新增书籍</button>
    <table>
      <thead>
        <tr>
          <th>Title</th>
          <th>Author</th>
          <th>Actions</th>
        </tr>`
      </thead>
      <tbody>
        <tr v-for="book in books" :key="book._id">
          <td>{{ book.title }}</td>
          <td>{{ book.author }}</td>
          <td>
            <button @click="editBook(book)">修改</button>
            <button @click="deleteBook(book)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <book-dialog :showDialog="showDialog" :editMode="editMode" :bookData="editBookData" @close="closeDialog" @save="saveBook"></book-dialog>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import bookService from '@/services/book';
import BookDialog from '@/components/BookDialog.vue';

export default {
  name: 'BookList',

  components: {
    BookDialog,
  },
  setup() {
    const books = ref([]);
    const showDialog = ref(false);
    const editMode = ref(false);
    const editBookData = ref({});

    const loadBooks = async () => {
      books.value = await bookService.getAll();
    };

    const addBook = () => {
      editMode.value = false;
      editBookData.value = {};
      showDialog.value = true;
    };

    const editBook = (book) => {
      editMode.value = true;
      editBookData.value = { ...book };
      showDialog.value = true;
    };

    const saveBook = async () => {
      if (editMode.value) {
        await bookService.update(editBookData.value._id, editBookData.value);
      } else {
        await bookService.create(editBookData.value);
      }
      closeDialog();
      loadBooks();
    };

    const deleteBook = async (book) => {
      if (confirm(`Are you sure to delete ${book.title}?`)) {
        await bookService.delete(book._id);
        loadBooks();
      }
    };

    const closeDialog = () => {
      showDialog.value = false;
    };

    onMounted(loadBooks);

    return {
      books,
      showDialog,
      editMode,
      editBookData,
      addBook,
      editBook,
      saveBook,
      deleteBook,
      closeDialog,
    };
  },
};
</script>

在上述代码中，我们首先导入 book.js 模块，并创建一个名为 books 的数组来存储所有书籍的信息。然后，我们定义了四个方法来操作书籍数据：

loadBooks：获取所有书籍的信息并将其存储到 books 数组中。
addBook：打开“新增书籍”对话框。
editBook：打开“编辑书籍”对话框，并将要编辑的书籍信息设置为 editBookData 对象的属性。
saveBook：保存正在编辑或新增的书籍信息，并更新 books 数组。
deleteBook：删除一本书籍，并更新 books 数组。
closeDialog：关闭对话框。

4.弹窗子组件BookDialog.vue

在 BookDialog.vue 组件中，使用了props属性来接受从父组件传递过来的数据。在setup()函数中，我们通过ref()创建响应式变量，并使用watch()监听props中的bookData变化，以便在编辑模式下展示正确的书籍信息。最后，我们还添加了一些基本的样式，使弹窗看起来更加漂亮。

<template>
  <div v-if="showDialog" class="book-dialog">
    <div class="dialog-content">
      <h2>{{ editMode ? '修改' : '新增' }}书籍</h2>
      <form @submit.prevent="saveBook">
        <label for="title">Title:</label>
        <input type="text" id="title" v-model="editBookData.title" required />

        <label for="author">Author:</label>
        <input type="text" id="author" v-model="editBookData.author" required />

        <button type="submit">提交{{ editMode && '修改'}}</button>
        <button type="button" @click="closeDialog">取消</button>
      </form>
    </div>
  </div>
</template>

<script>
import { reactive, watch } from 'vue';

export default {
  name: 'BookDialog',

  props: {
    showDialog: {
      type: Boolean,
      required: true,
    },
    editMode: {
      type: Boolean,
      required: true,
    },
    bookData: {
      type: Object,
      default: () => ({}),
    },
  },

  setup(props, { emit }) {
    const editBookData = reactive({ title: '', author: '' });

    watch(
      () => props.bookData,
      (newValue) => {
        Object.assign(editBookData,newValue)
        //console.log(editBookData)
      }
    );

    const saveBook = () => {
      emit('save');
    };

    const closeDialog = () => {
      emit('close');
    };

    return {
      editBookData,
      saveBook,
      closeDialog,
    };
  },
};
</script>

<style scoped>
.book-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

form {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 10px;
}

input {
  margin-bottom: 20px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

 button {
  margin-right: 10px;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

 button:focus {
  outline: none;
}

 button:hover {
  background-color: #0069d9;
}
</style>

通过以上代码，我们实现了一个基本的前后端交互的单表的图书管理（增删改查）。用户可以在浏览器中查看所有书籍的信息，并进行新增、编辑和删除操作，而所有的数据都存储在 MongoDB 数据库中。通过结合node的生态在Vue项目里使用，我们可以快速构建出一个高效的图书管理系统，并提供给用户优质的体验。

三、结束

以上就是咱们结合node实现前后端交互的所有步骤了，给能坚持看完并手撸一遍的同学点个赞。至此，您已成功地使用 Node.js 和 Vue.js 实现了前后端交互。这只是一个简单的示例，但您可以使用这些技术来构建更复杂的 Web 应用程序。

最后清舟祝**大家 "山高处再相见，海阔天空共此时" **。