IT评测·应用市场-qidao123.com

标题: 从0开始教你，如何进行前后端的数据库（MySQL）连接 [打印本页]

---

作者: 知者何南    时间: 2025-2-21 06:13
标题: 从0开始教你，如何进行前后端的数据库（MySQL）连接
引言

很多小伙伴会好奇，如何从零开始实现一个完备的前后端项目，并将数据存储在 MySQL 数据库中，然后我们可以进行及时的更新，查询，修改，增加删除。
比如一个简单的留言板系统，用户可以通过前端提交留言，后端将数据存储到 MySQL 中，再通过 API（如axios） 将数据展示在前端页面上。又大概一个视频留言系统，允许用户上传视频和评论，这些功能都需要前后端与数据库的协作。本篇博客将通过详细的例子，从基础出发，带你一步步完成从数据库搭建到前后端数据交互的全过程。
无论你是初学者照旧有一定基础的开辟者，这篇文章都能帮助你掌握前后端与数据库连接的核心技能。

---

一、环境预备（详细的各环境安装细节会在下节单拎出来讲解）

在开始之前，需要确保以下环境已经预备停当：

• 安装 MySQL
  
  
  
  • 前往 MySQL 官方网站 下载并安装 MySQL。
    
  • 在安装过程中，设置一个安全的 root 用户密码，并选择开辟者默认设置。
    
  • 安装完成后，启动 MySQL 服务，使用命令行或图形界面工具（如 MySQL Workbench，博主用的是Navicat界面化工具）连接数据库。
    
  
  
• 安装 Node.js
  
  
  
  • 前往 Node.js 官方网站 下载并安装 LTS 版本。
    
  • 安装完成后，在终端输入以下命令，确认安装成功：
    
    1. node -v
    2. npm -v

    复制代码
  
  
• 安装 Vue 开辟环境
  
  
  
  • 使用 Vue CLI 快速搭建项目。首先，安装 Vue CLI：
    
    1. npm install -g @vue/cli

    复制代码
  • 创建一个 Vue 项目：
    
    1. vue create frontend

    复制代码
    根据提示选择默认设置。
    
  
  
• 测试工具
  
  
  
  • 推荐使用 Postman 或 curl 测试后端 API，方便调试接口。（可略）
    
  
  

---

二、创建数据库和表

• 登录 MySQL 打开终端，输入以下命令登录 MySQL：
  
  1. mysql -u root -p

  复制代码
  输入密码后进入 MySQL。固然，对于大部门伙伴来说肯定是用界面化操纵最好（如navicat）
  
  
  
  
• 创建数据库 创建一个名为 example_db（恣意）的数据库：
  
  1. CREATE DATABASE example_db;

  复制代码
• 使用数据库 切换到刚刚创建的数据库：
  
  1. USE example_db;

  复制代码
• 创建数据表 创建一个 messages 表，用于存储留言信息：
  
  1. CREATE TABLE messages (
  2.     id INT AUTO_INCREMENT PRIMARY KEY,
  3.     username VARCHAR(255) NOT NULL,
  4.     content TEXT NOT NULL,
  5.     created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
  6. );

  复制代码
• 插入测试数据
  
  1. INSERT INTO messages (username, content) VALUES ('Alice', 'Hello, this is my first message!');
  2. INSERT INTO messages (username, content) VALUES ('Bob', 'This platform is great!');

  复制代码

---

三、后端连接 MySQL

我们将使用 Node.js 和 mysql2 库连接 MySQL。

• 初始化项目 创建一个新的后端目录，并初始化项目：
  
  1. mkdir backend && cd backend
  2. npm init -y

  复制代码
• 安装依靠
  
  1. npm install express mysql2 cors

  复制代码
• 创建后端代码 新建 server.js 文件，写入以下代码：
  
  1. const express = require('express');
  2. const mysql = require('mysql2');
  3. const cors = require('cors');
  5. const app = express();
  6. const port = 3000;
  8. app.use(cors());
  9. app.use(express.json());
  11. // 创建数据库连接
  12. const db = mysql.createConnection({
  13.     host: 'localhost',
  14.     user: 'root',
  15.     password: 'yourpassword',
  16.     database: 'example_db'
  17. });
  19. // 测试数据库连接
  20. db.connect(err => {
  21.     if (err) {
  22.         console.error('数据库连接失败:', err);
  23.     } else {
  24.         console.log('成功连接到数据库');
  25.     }
  26. });
  28. // 获取所有留言
  29. app.get('/messages', (req, res) => {
  30.     db.query('SELECT * FROM messages', (err, results) => {
  31.         if (err) {
  32.             res.status(500).send(err);
  33.         } else {
  34.             res.json(results);
  35.         }
  36.     });
  37. });
  39. // 添加新留言
  40. app.post('/messages', (req, res) => {
  41.     const { username, content } = req.body;
  42.     db.query('INSERT INTO messages (username, content) VALUES (?, ?)', [username, content], (err, results) => {
  43.         if (err) {
  44.             res.status(500).send(err);
  45.         } else {
  46.             res.json({ id: results.insertId, username, content });
  47.         }
  48.     });
  49. });
  51. // 启动服务器
  52. app.listen(port, () => {
  53.     console.log(`服务器运行在 http://localhost:${port}`);
  54. });

  复制代码
• 启动后端服务器
  
  1. node server.js

  复制代码
  访问 http://localhost:3000/messages，可以看到数据库中的留言。
  

---

四、前端连接后端

我们使用 Vue 实现前端部门。（这里是已经创建过了vue项目文件的，项目文件名为frontend）

• 创建组件 在 frontend/src/components 目录下创建 MessageBoard.vue 文件，写入以下代码：
  
  1. <template>
  2.   <div>
  3.     <h1>留言板</h1>
  4.     <ul>
  5.       <li v-for="message in messages" :key="message.id">
  6.         <strong>{{ message.username }}</strong>: {{ message.content }}
  7.       </li>
  8.     </ul>
  9.     <form @submit.prevent="addMessage">
  10.       <input v-model="username" placeholder="用户名" required />
  11.       <textarea v-model="content" placeholder="留言内容" required></textarea>
  12.       <button type="submit">提交</button>
  13.     </form>
  14.   </div>
  15. </template>
  17. <script>
  18. import axios from 'axios';
  20. export default {
  21.   data() {
  22.     return {
  23.       messages: [],
  24.       username: '',
  25.       content: ''
  26.     };
  27.   },
  28.   created() {
  29.     this.fetchMessages();
  30.   },
  31.   methods: {
  32.     async fetchMessages() {
  33.       try {
  34.         const response = await axios.get('http://localhost:3000/messages');
  35.         this.messages = response.data;
  36.       } catch (error) {
  37.         console.error('Error fetching messages:', error);
  38.       }
  39.     },
  40.     async addMessage() {
  41.       try {
  42.         const newMessage = { username: this.username, content: this.content };
  43.         await axios.post('http://localhost:3000/messages', newMessage);
  44.         this.messages.push(newMessage);
  45.         this.username = '';
  46.         this.content = '';
  47.       } catch (error) {
  48.         console.error('Error adding message:', error);
  49.       }
  50.     }
  51.   }
  52. };
  53. </script>

  复制代码
• 集成组件 在src/App.vue 中引入该组件：
  
  1. <template>
  2.   <MessageBoard />
  3. </template>
  5. <script>
  6. import MessageBoard from './components/MessageBoard.vue';
  8. export default {
  9.   components: {
  10.     MessageBoard
  11.   }
  12. };
  13. </script>

  复制代码
• 运行项目 在 frontend 目录下启动项目：
  
  1. npm run serve

  复制代码
  在浏览器中访问 http://localhost:8080，可以看到留言板功能。
  

---

五、总结

通过上述步骤，我们实现了一个简单的留言板系统，涵盖了以下内容：

• 使用 MySQL 创建数据库和数据表：
  
  
  
  • 首先，创建一个 MySQL 数据库，用于存储留言信息。
    
  • 在数据库中创建一个表，界说留言的字段，如留言内容、用户信息、留言时间等。
    
  
  
• 使用 Node.js 开辟后端接口并连接数据库：
  
  
  
  • 使用 Node.js 和 Express 框架开辟后端 API。
    
  • 安装并设置 MySQL 驱动（如 mysql2 或 sequelize）来连接数据库。
    
  • 创建干系的 API 接口，比方 GET 用于获取留言列表，POST 用于添加留言等。
    
  • 后端与数据库交互，处理数据的增删改查（CRUD）操纵。
    
  
  
• 使用 Vue 开辟前端页面，与后端进行交互：
  
  
  
  • 使用 Vue.js 创建前端页面，展示留言列表，并提供用户输入留言的表单。
    
  • 使用 axios 或 fetch 等工具来发送 HTTP 请求与后端接口交互。
    
  • 将用户的留言显示在前端页面上，并及时更新。
    
  
  

通过这样的实现，用户可以在前端输入留言，后端接收并存储到 MySQL 数据库中，留言列表也会在页面上及时显示更新。这是一个简单的 CRUD 应用，恰当入门学习 Web 开辟、数据库管理和前后端交互。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4