So implementieren Sie mit MySQL und JavaScript eine einfache Online-Editor-Funktion-MySQL-Tutorial-php.cn

So implementieren Sie mit MySQL und JavaScript eine einfache Online-Editor-Funktion

王林

Freigeben： 2023-09-21 11:01:20

Original

1498 Leute haben es durchsucht

So implementieren Sie mit MySQL und JavaScript eine einfache Online-Editor-Funktion

Wie der Titel „So implementieren Sie mit MySQL und JavaScript eine einfache Online-Editor-Funktion“

Mit der rasanten Entwicklung des Internets erfordern immer mehr Anwendungen Online-Editoren, um Benutzer beim Schreiben und Bearbeiten von Text und Code zu unterstützen , und Verschiedene Dokumente. In diesem Artikel wird erläutert, wie Sie mithilfe von MySQL und JavaScript eine einfache Online-Editor-Funktion implementieren, und es werden spezifische Codebeispiele bereitgestellt.

1. Datenbankdesign

Die Online-Editor-Funktion muss von Benutzern erstellte Dateien speichern, daher ist eine Datenbank zum Speichern verwandter Informationen erforderlich. Wir verwenden MySQL als Datenbank, erstellen in MySQL eine Datenbank mit dem Namen „Dateien“ und erstellen in der Datenbank eine Tabelle mit dem Namen „Dokumente“. Die Struktur der Tabelle ist wie folgt:

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

Nach dem Login kopieren

2. Back-End-Implementierung

Erstellen Sie eine Datei mit dem Namen „server.js“, um die Backend-Logik zu verwalten. Zuerst müssen wir die notwendigen Bibliotheken und Module einführen. Der Code lautet wie folgt:

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();

Nach dem Login kopieren

Routing- und Verarbeitungsfunktionen definieren. Wir definieren die folgenden Routen:

POST /documents: wird zum Erstellen neuer Dokumente verwendet;
GET /documents: wird zum Abrufen aller Dokumente verwendet;
GET /documents/:id: wird zum Abrufen bestimmter Dokumente basierend auf der ID verwendet;
PUT /documents/:id: wird zum Aktualisieren des angegebenen Dokuments verwendet.
DELETE /documents/:id: wird zum Löschen des angegebenen Dokuments verwendet.

Der Code lautet wie folgt:

// 创建文档
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');
});

Nach dem Login kopieren

3. Front-End-Implementierung

Erstellen Sie eine Datei mit dem Namen „editor.html“ für die Front-End-Anzeige und Interaktion. Zuerst müssen wir eine HTML-Seite erstellen und die erforderlichen Bibliotheken und Dateien einführen. Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Erstellen Sie eine Datei mit dem Namen „editor.js“, um die Front-End-Logik zu verwalten. Der Code lautet wie folgt:

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();
  }
});

Nach dem Login kopieren

4. Testen und Ausführen

Geben Sie den Projektordner in der Befehlszeile ein und installieren Sie die erforderlichen Abhängigkeiten:

$ npm install express body-parser mysql

Nach dem Login kopieren

Starten Sie den Backend-Server:

$ node server.js

Nach dem Login kopieren

Öffnen Sie im Browser-Datei editor.html, um mit der Nutzung der Online-Editor-Funktion zu beginnen.

Zusammenfassung:

Dieser Artikel implementiert eine einfache Online-Editorfunktion über MySQL und JavaScript, einschließlich grundlegender Vorgänge wie Hinzufügen, Löschen, Ändern und Suchen. Durch die Trennung von Front- und Back-End verwendet das Front-End Vue.js, um eine einfache interaktive Schnittstelle zu implementieren, und das Back-End verwendet Express und MySQL, um Daten zu verarbeiten.

Das Obige ist eine detaillierte Einführung und ein Codebeispiel für die Verwendung von MySQL und JavaScript zur Implementierung einer einfachen Online-Editor-Funktion. Ich hoffe, dieser Artikel kann Ihnen helfen, den Online-Editor zu verstehen und zu verwenden.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit MySQL und JavaScript eine einfache Online-Editor-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!