5分钟node.js入门之与Vue项目实现前后端交互 |
您所在的位置：网站首页 › vue如何前后端分离 › 5分钟node.js入门之与Vue项目实现前后端交互 |
|
一、前言
随着互联网时代的发展，前后端分离式开发已成为互联网项目开发的业界标准使用方式，写什么业务都需要一个强大的后端支持，现在只要我们掌握了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 组件中，我们可以添加以下代码： 新增书籍 Title Author Actions ` {{ book.title }} {{ book.author }} 修改 删除 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, }; }, };在上述代码中，我们首先导入 book.js 模块，并创建一个名为 books 的数组来存储所有书籍的信息。然后，我们定义了四个方法来操作书籍数据： loadBooks：获取所有书籍的信息并将其存储到 books 数组中。 addBook：打开“新增书籍”对话框。 editBook：打开“编辑书籍”对话框，并将要编辑的书籍信息设置为 editBookData 对象的属性。 saveBook：保存正在编辑或新增的书籍信息，并更新 books 数组。 deleteBook：删除一本书籍，并更新 books 数组。 closeDialog：关闭对话框。 4.弹窗子组件BookDialog.vue在 BookDialog.vue 组件中，使用了props属性来接受从父组件传递过来的数据。在setup()函数中，我们通过ref()创建响应式变量，并使用watch()监听props中的bookData变化，以便在编辑模式下展示正确的书籍信息。最后，我们还添加了一些基本的样式，使弹窗看起来更加漂亮。 {{ editMode ? '修改' : '新增' }}书籍 Title: Author: 提交{{ editMode && '修改'}} 取消 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, }; }, }; .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; }通过以上代码，我们实现了一个基本的前后端交互的单表的图书管理（增删改查）。用户可以在浏览器中查看所有书籍的信息，并进行新增、编辑和删除操作，而所有的数据都存储在 MongoDB 数据库中。通过结合node的生态在Vue项目里使用，我们可以快速构建出一个高效的图书管理系统，并提供给用户优质的体验。 三、结束以上就是咱们结合node实现前后端交互的所有步骤了，给能坚持看完并手撸一遍的同学点个赞。至此，您已成功地使用 Node.js 和 Vue.js 实现了前后端交互。这只是一个简单的示例，但您可以使用这些技术来构建更复杂的 Web 应用程序。 最后清舟祝**大家 "山高处再相见，海阔天空共此时" **。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |