從零教會你如何進行前后端的數據庫(MySQL)連接操作

更新時間：2025年02月06日 08:58:25 作者：NNoThingg

這篇文章主要介紹了如何從零開始實現一個完整的前后端項目,將數據存儲在MySQL數據庫中,并通過API進行實時的更新、查詢、修改和刪除操作,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

引言

很多小伙伴會好奇，如何從零開始實現一個完整的前后端項目，并將數據存儲在 MySQL 數據庫中，然后我們可以進行實時的更新，查詢，修改，增加刪除。

比如一個簡單的留言板系統，用戶可以通過前端提交留言，后端將數據存儲到 MySQL 中，再通過 API（如axios）將數據展示在前端頁面上。又或者一個視頻留言系統，允許用戶上傳視頻和評論，這些功能都需要前后端與數據庫的協作。本篇博客將通過具體的例子，從基礎出發(fā)，帶你一步步完成從數據庫搭建到前后端數據交互的全過程。

無論你是初學者還是有一定基礎的開發(fā)者，這篇文章都能幫助你掌握前后端與數據庫連接的核心技能。

一、環(huán)境準備（具體的各環(huán)境安裝細節(jié)會在下節(jié)單拎出來講解）

在開始之前，需要確保以下環(huán)境已經準備就緒：

安裝 MySQL
- 前往 MySQL 官方網站下載并安裝 MySQL。
- 在安裝過程中，設置一個安全的 root 用戶密碼，并選擇開發(fā)者默認配置。
- 安裝完成后，啟動 MySQL 服務，使用命令行或圖形界面工具（如 MySQL Workbench，博主用的是Navicat界面化工具）連接數據庫。
安裝 Node.js
- 前往 Node.js 官方網站下載并安裝 LTS 版本。
- 安裝完成后，在終端輸入以下命令，確認安裝成功：
```
node -v
npm -v
```
安裝 Vue 開發(fā)環(huán)境
- 使用 Vue CLI 快速搭建項目。首先，安裝 Vue CLI：
```
npm install -g @vue/cli
```
- 創(chuàng)建一個 Vue 項目：
```
vue create frontend
```
  根據提示選擇默認配置。
測試工具
- 推薦使用 Postman 或 curl 測試后端 API，方便調試接口。（可略）

二、創(chuàng)建數據庫和表

登錄 MySQL 打開終端，輸入以下命令登錄 MySQL：
```
mysql -u root -p
```
輸入密碼后進入 MySQL。當然，對于大部分伙伴來說肯定是用界面化操作最好（如navicat）
創(chuàng)建數據庫 創(chuàng)建一個名為 example_db （任意）的數據庫：
```
CREATE DATABASE example_db;
```
使用數據庫 切換到剛剛創(chuàng)建的數據庫：
```
USE example_db;
```

創(chuàng)建數據表 創(chuàng)建一個 messages 表，用于存儲留言信息：

CREATE TABLE messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

插入測試數據

INSERT INTO messages (username, content) VALUES ('Alice', 'Hello, this is my first message!');
INSERT INTO messages (username, content) VALUES ('Bob', 'This platform is great!');

三、后端連接 MySQL

我們將使用 Node.js 和 mysql2 庫連接 MySQL。

初始化項目 創(chuàng)建一個新的后端目錄，并初始化項目：
```
mkdir backend && cd backend
npm init -y
```
安裝依賴
```
npm install express mysql2 cors
```

創(chuàng)建后端代碼 新建 server.js 文件，寫入以下代碼：

const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');

const app = express();
const port = 3000;

app.use(cors());
app.use(express.json());

// 創(chuàng)建數據庫連接
const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'yourpassword',
    database: 'example_db'
});

// 測試數據庫連接
db.connect(err => {
    if (err) {
        console.error('數據庫連接失敗:', err);
    } else {
        console.log('成功連接到數據庫');
    }
});

// 獲取所有留言
app.get('/messages', (req, res) => {
    db.query('SELECT * FROM messages', (err, results) => {
        if (err) {
            res.status(500).send(err);
        } else {
            res.json(results);
        }
    });
});

// 添加新留言
app.post('/messages', (req, res) => {
    const { username, content } = req.body;
    db.query('INSERT INTO messages (username, content) VALUES (?, ?)', [username, content], (err, results) => {
        if (err) {
            res.status(500).send(err);
        } else {
            res.json({ id: results.insertId, username, content });
        }
    });
});

// 啟動服務器
app.listen(port, () => {
    console.log(`服務器運行在 http://localhost:${port}`);
});

啟動后端服務器
```
node server.js
```
訪問 http://localhost:3000/messages，可以看到數據庫中的留言。

四、前端連接后端

我們使用 Vue 實現前端部分。（這里是已經創(chuàng)建過了vue項目文件的，項目文件名為frontend）

創(chuàng)建組件 在 frontend/src/components 目錄下創(chuàng)建 MessageBoard.vue 文件，寫入以下代碼：

<template>
  <div>
    <h1>留言板</h1>
    <ul>
      <li v-for="message in messages" :key="message.id">
        <strong>{{ message.username }}</strong>: {{ message.content }}
      </li>
    </ul>
    <form @submit.prevent="addMessage">
      <input v-model="username" placeholder="用戶名" required />
      <textarea v-model="content" placeholder="留言內容" required></textarea>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      messages: [],
      username: '',
      content: ''
    };
  },
  created() {
    this.fetchMessages();
  },
  methods: {
    async fetchMessages() {
      try {
        const response = await axios.get('http://localhost:3000/messages');
        this.messages = response.data;
      } catch (error) {
        console.error('Error fetching messages:', error);
      }
    },
    async addMessage() {
      try {
        const newMessage = { username: this.username, content: this.content };
        await axios.post('http://localhost:3000/messages', newMessage);
        this.messages.push(newMessage);
        this.username = '';
        this.content = '';
      } catch (error) {
        console.error('Error adding message:', error);
      }
    }
  }
};
</script>

集成組件 在src/ App.vue 中引入該組件：

<template>
  <MessageBoard />
</template>

<script>
import MessageBoard from './components/MessageBoard.vue';

export default {
  components: {
    MessageBoard
  }
};
</script>

運行項目 在 frontend 目錄下啟動項目：
```
npm run serve
```
在瀏覽器中訪問 http://localhost:8080，可以看到留言板功能。

五、總結

通過上述步驟，我們實現了一個簡單的留言板系統，涵蓋了以下內容：

使用 MySQL 創(chuàng)建數據庫和數據表：
- 首先，創(chuàng)建一個 MySQL 數據庫，用于存儲留言信息。
- 在數據庫中創(chuàng)建一個表，定義留言的字段，如留言內容、用戶信息、留言時間等。
使用 Node.js 開發(fā)后端接口并連接數據庫：
- 使用 Node.js 和 Express 框架開發(fā)后端 API。
- 安裝并配置 MySQL 驅動（如 mysql2 或 sequelize）來連接數據庫。
- 創(chuàng)建相關的 API 接口，例如 GET 用于獲取留言列表，POST 用于添加留言等。
- 后端與數據庫交互，處理數據的增刪改查（CRUD）操作。
使用 Vue 開發(fā)前端頁面，與后端進行交互：
- 使用 Vue.js 創(chuàng)建前端頁面，展示留言列表，并提供用戶輸入留言的表單。
- 使用 axios 或 fetch 等工具來發(fā)送 HTTP 請求與后端接口進行交互。
- 將用戶的留言顯示在前端頁面上，并實時更新。