一、前言
随着互联网时代的发展，前后端分离式开发已成为互联网项目开发的业界标准使用方式地图场景，写什么业务都需要一个强大的后端支持网页游戏服务端开发，现在只要我们掌握了Express与Mongoose的使用，似乎这些工作作为一个前端开发也能独立完成了(真的是泰裤辣)！。在本文中，我们将解释如何使用 Express 和 MongoDB 创建、读取、更新和删除书籍的接口，并在 Vue3 项目中实现前后端交互。
二、前戏1. 首先，我们需要安装和配置所需的软件包和工具。
为了使用 Express 和 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 应用程序，并设置四个路由来响应客户端请求：
四、实例
前戏差不多了，咱们废话不多说，咱们直接开始上实例。接下来，我们需要在 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 的对象3D道具，并添加了四个方法来实现与后端的交互：
这些方法使用 Axios 发送 HTTP 请求，并返回响应数据。
3.在Vue组件中，我们可以调用这些方法来操作书籍数据，并实现前后端交互。
在 BookList.vue 组件中，我们可以添加以下代码：
<div>
<button @click="addBook">新增书籍button>
<table>
<thead>
<tr>
<th>Titleth>
<th>Authorth>
<th>Actionsth>
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>
<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 的数组来存储所有书籍的信息。然后，我们定义了四个方法来操作书籍数据：
4.弹窗子组件BookDialog.vue
在 BookDialog.vue 组件中，使用了props属性来接受从父组件传递过来的数据。在setup()函数中，我们通过ref()创建响应式变量，并使用watch()监听props中的bookData变化，以便在编辑模式下展示正确的书籍信息。最后网页游戏服务端开发，我们还添加了一些基本的样式，使弹窗看起来更加漂亮。
<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>
<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 应用程序。
最后清舟祝**大家 "山高处再相见，海阔天空共此时" **。
