如何使用MySQL和JavaScript實作一個簡單的線上編輯器功能-mysql教程-PHP中文網

如何使用MySQL和JavaScript實作一個簡單的線上編輯器功能

王林

發布： 2023-09-21 11:01:20

原創

1461 人瀏覽過

如何使用MySQL和JavaScript實作一個簡單的線上編輯器功能

如題，《如何使用MySQL和JavaScript實現一個簡單的線上編輯器功能》

隨著互聯網的快速發展，越來越多的應用需要在線編輯器來支援使用者編寫和編輯文字、程式碼以及各種文件。本文將介紹如何使用MySQL和JavaScript來實作一個簡單的線上編輯器功能，並提供具體的程式碼範例。

一、資料庫設計

線上編輯器功能需要儲存使用者建立的文件，因此需要一個資料庫來儲存相關的資訊。我們使用MySQL作為資料庫，在MySQL中建立一個名為"files"的資料庫，並在該資料庫中建立一個名為"documents"的表，表的結構如下：

CREATE TABLE `documents` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `title` VARCHAR(255) NOT NULL,
  `content` TEXT NOT NULL,
  PRIMARY KEY (`id`)
);

登入後複製

二、後端實作

建立一個名為"server.js"的文件，用於處理後端邏輯。首先，我們需要引入必要的函式庫和模組，程式碼如下：

const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'files'
});

connection.connect();

登入後複製

定義路由和處理函數。我們定義以下幾個路由：

POST /documents：用於建立新的文件；
GET /documents：用於取得所有文件;
GET /documents/:id：用於根據ID取得指定文件；
PUT /documents/:id：用於更新指定文件；
DELETE /documents/:id：用於刪除指定文件。

程式碼如下：

// 创建文档
app.post('/documents', (req, res) => {
  const { title, content } = req.body;
  const query = `INSERT INTO documents (title, content) VALUES ('${title}', '${content}')`;

  connection.query(query, (error, results) => {
    if (error) throw error;

    res.json({ id: results.insertId });
  });
});

// 获取所有文档
app.get('/documents', (req, res) => {
  connection.query('SELECT * FROM documents', (error, results) => {
    if (error) throw error;

    res.json(results);
  });
});

// 根据ID获取文档
app.get('/documents/:id', (req, res) => {
  const { id } = req.params;
  const query = `SELECT * FROM documents WHERE id = ${id}`;

  connection.query(query, (error, results) => {
    if (error) throw error;

    if (results.length > 0) {
      res.json(results[0]);
    } else {
      res.status(404).json({ error: 'Document not found' });
    }
  });
});

// 更新文档
app.put('/documents/:id', (req, res) => {
  const { id } = req.params;
  const { title, content } = req.body;
  const query = `UPDATE documents SET title = '${title}', content = '${content}' WHERE id = ${id}`;

  connection.query(query, (error, results) => {
    if (error) throw error;

    res.json({ success: true });
  });
});

// 删除文档
app.delete('/documents/:id', (req, res) => {
  const { id } = req.params;
  const query = `DELETE FROM documents WHERE id = ${id}`;

  connection.query(query, (error, results) => {
    if (error) throw error;

    res.json({ success: true });
  });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

登入後複製

三、前端實作

#建立一個名為"editor.html"的文件，用於前端展示和交互。首先，我們需要建立一個HTML頁面，並引入必要的函式庫和文件，程式碼如下：

<!DOCTYPE html>
<html>
<head>
  <title>Online Editor</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <h1>Online Editor</h1>
    <form @submit.prevent="saveDocument">
      <input type="text" v-model="title" placeholder="Title" required>
      <textarea v-model="content" placeholder="Content" required></textarea>
      <button type="submit">Save</button>
    </form>
    <ul>
      <li v-for="document in documents" :key="document.id">
        <a :href="'/documents/' + document.id">{{ document.title }}</a>
        <button @click="deleteDocument(document.id)">Delete</button>
      </li>
    </ul>
  </div>
  <script src="editor.js"></script>
</body>
</html>

登入後複製

建立一個名為"editor.js"的文件，用於處理前端邏輯。程式碼如下：

new Vue({
  el: '#app',
  data: {
    title: '',
    content: '',
    documents: []
  },
  methods: {
    async saveDocument() {
      try {
        const response = await axios.post('/documents', {
          title: this.title,
          content: this.content
        });
        this.documents.push({ id: response.data.id, title: this.title });
        this.title = '';
        this.content = '';
      } catch (error) {
        console.error(error);
      }
    },
    async deleteDocument(id) {
      try {
        await axios.delete(`/documents/${id}`);
        this.documents = this.documents.filter(document => document.id !== id);
      } catch (error) {
        console.error(error);
      }
    },
    async fetchDocuments() {
      try {
        const response = await axios.get('/documents');
        this.documents = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  },
  mounted() {
    this.fetchDocuments();
  }
});

登入後複製

四、測試與執行