引言

很多小伙伴會(huì)好奇，如何從零開(kāi)始實(shí)現(xiàn)一個(gè)完整的前后端項(xiàng)目，并將數(shù)據(jù)存儲(chǔ)在 MySQL 數(shù)據(jù)庫(kù)中，然后我們可以進(jìn)行實(shí)時(shí)的更新，查詢，修改，增加刪除。

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

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

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

在開(kāi)始之前，需要確保以下環(huán)境已經(jīng)準(zhǔn)備就緒：

• 安裝 MySQL

  • 前往 MySQL 官方網(wǎng)站 下載并安裝 MySQL。
  • 在安裝過(guò)程中，設(shè)置一個(gè)安全的 root 用戶密碼，并選擇開(kāi)發(fā)者默認(rèn)配置。
  • 安裝完成后，啟動(dòng) MySQL 服務(wù)，使用命令行或圖形界面工具（如 MySQL Workbench，博主用的是Navicat界面化工具）連接數(shù)據(jù)庫(kù)。

• 安裝 Node.js

  • 前往 Node.js 官方網(wǎng)站 下載并安裝 LTS 版本。
  • 安裝完成后，在終端輸入以下命令，確認(rèn)安裝成功：

    node -v
    npm -v
    

• 安裝 Vue 開(kāi)發(fā)環(huán)境

  • 使用 Vue CLI 快速搭建項(xiàng)目。首先，安裝 Vue CLI：

    npm install -g @vue/cli
    

  • 創(chuàng)建一個(gè) Vue 項(xiàng)目：

    vue create frontend
    

    根據(jù)提示選擇默認(rèn)配置。

• 測(cè)試工具

  • 推薦使用 Postman 或 curl 測(cè)試后端 API，方便調(diào)試接口。（可略）

二、創(chuàng)建數(shù)據(jù)庫(kù)和表

• 登錄 MySQL 打開(kāi)終端，輸入以下命令登錄 MySQL：

  mysql -u root -p
  

  輸入密碼后進(jìn)入 MySQL。當(dāng)然，對(duì)于大部分伙伴來(lái)說(shuō)肯定是用界面化操作最好（如navicat）

  

  

• 創(chuàng)建數(shù)據(jù)庫(kù) 創(chuàng)建一個(gè)名為 example_db （任意）的數(shù)據(jù)庫(kù)：

  CREATE DATABASE example_db;
  

• 使用數(shù)據(jù)庫(kù) 切換到剛剛創(chuàng)建的數(shù)據(jù)庫(kù)：

  USE example_db;
  

• 創(chuàng)建數(shù)據(jù)表 創(chuàng)建一個(gè) messages 表，用于存儲(chǔ)留言信息：

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

• 插入測(cè)試數(shù)據(jù)

  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 庫(kù)連接 MySQL。

• 初始化項(xiàng)目 創(chuàng)建一個(gè)新的后端目錄，并初始化項(xià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)建數(shù)據(jù)庫(kù)連接
  const db = mysql.createConnection({
      host: 'localhost',
      user: 'root',
      password: 'yourpassword',
      database: 'example_db'
  });
  
  // 測(cè)試數(shù)據(jù)庫(kù)連接
  db.connect(err => {
      if (err) {
          console.error('數(shù)據(jù)庫(kù)連接失敗:', err);
      } else {
          console.log('成功連接到數(shù)據(jù)庫(kù)');
      }
  });
  
  // 獲取所有留言
  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 });
          }
      });
  });
  
  // 啟動(dòng)服務(wù)器
  app.listen(port, () => {
      console.log(`服務(wù)器運(yùn)行在 http://localhost:${port}`);
  });
  

• 啟動(dòng)后端服務(wù)器

  node server.js
  

  訪問(wèn) http://localhost:3000/messages，可以看到數(shù)據(jù)庫(kù)中的留言。

四、前端連接后端

我們使用 Vue 實(shí)現(xiàn)前端部分。（這里是已經(jīng)創(chuàng)建過(guò)了vue項(xiàng)目文件的，項(xiàng)目文件名為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="留言內(nèi)容" 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>
  

• 運(yùn)行項(xiàng)目 在 frontend 目錄下啟動(dòng)項(xiàng)目：

  npm run serve
  

  在瀏覽器中訪問(wèn) http://localhost:8080，可以看到留言板功能。

五、總結(jié)

通過(guò)上述步驟，我們實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的留言板系統(tǒng)，涵蓋了以下內(nèi)容：

• 使用 MySQL 創(chuàng)建數(shù)據(jù)庫(kù)和數(shù)據(jù)表：

  • 首先，創(chuàng)建一個(gè) MySQL 數(shù)據(jù)庫(kù)，用于存儲(chǔ)留言信息。
  • 在數(shù)據(jù)庫(kù)中創(chuàng)建一個(gè)表，定義留言的字段，如留言內(nèi)容、用戶信息、留言時(shí)間等。

• 使用 Node.js 開(kāi)發(fā)后端接口并連接數(shù)據(jù)庫(kù)：

  • 使用 Node.js 和 Express 框架開(kāi)發(fā)后端 API。
  • 安裝并配置 MySQL 驅(qū)動(dòng)（如 mysql2 或 sequelize）來(lái)連接數(shù)據(jù)庫(kù)。
  • 創(chuàng)建相關(guān)的 API 接口，例如 GET 用于獲取留言列表，POST 用于添加留言等。
  • 后端與數(shù)據(jù)庫(kù)交互，處理數(shù)據(jù)的增刪改查（CRUD）操作。

• 使用 Vue 開(kāi)發(fā)前端頁(yè)面，與后端進(jìn)行交互：

  • 使用 Vue.js 創(chuàng)建前端頁(yè)面，展示留言列表，并提供用戶輸入留言的表單。
  • 使用 axios 或 fetch 等工具來(lái)發(fā)送 HTTP 請(qǐng)求與后端接口 進(jìn)行 交互。
  • 將用戶的留言顯示在前端頁(yè)面上，并實(shí)時(shí)更新。

通過(guò)這樣的實(shí)現(xiàn)，用戶可以在前端輸入留言，后端接收并存儲(chǔ)到 MySQL 數(shù)據(jù)庫(kù)中，留言列表也會(huì)在頁(yè)面上實(shí)時(shí)顯示更新。這是一個(gè)簡(jiǎn)單的 CRUD 應(yīng)用，適合入門學(xué)習(xí) Web 開(kāi)發(fā)、數(shù)據(jù)庫(kù)管理和前后端交互。

到此這篇關(guān)于進(jìn)行前后端的數(shù)據(jù)庫(kù)(MySQL)連接操作的文章就介紹到這了,更多相關(guān)前后端的MySQL數(shù)據(jù)庫(kù)連接內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論