ホームページ >データベース >mysql チュートリアル >MySQL と JavaScript を使用して簡単なオンライン エディター機能を実装する方法

MySQL と JavaScript を使用して簡単なオンライン エディター機能を実装する方法

王林
王林オリジナル
2023-09-21 11:01:201493ブラウズ

MySQL と JavaScript を使用して簡単なオンライン エディター機能を実装する方法

例: 「MySQL と JavaScript を使用して簡単なオンライン エディター機能を実装する方法」

インターネットの急速な発展に伴い、ますます多くのアプリケーションがユーザーのテキスト、コード、さまざまなファイルの作成と編集をサポートするオンライン エディターです。この記事では、MySQL と JavaScript を使用して簡単なオンライン エディター機能を実装する方法と、具体的なコード例を紹介します。

1. データベース設計

オンラインエディタ機能では、ユーザーが作成したファイルを保存する必要があるため、関連情報を保存するデータベースが必要です。データベースとして 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`)
);

2. バックエンドの実装

    #バックエンド ロジックを処理するために、「server.js」という名前のファイルを作成します。まず、必要なライブラリとモジュールを導入する必要があります。コードは次のとおりです:
  1. 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');
});

3. フロントエンドの実装

    フロントエンド用に「editor.html」という名前のファイルを作成します。表示とインタラクション。まず、HTML ページを作成し、必要なライブラリとファイルを導入する必要があります。コードは次のとおりです:
  1. <!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」という名前のファイルを作成します。終了ロジック。コードは次のとおりです:
  1. 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();
      }
    });
4. テストと実行

    コマンド ラインでプロジェクト フォルダーを入力し、必要な依存関係をインストールします:
  1. $ npm install express body-parser mysql
    バックエンド サーバーを起動します:
  1. $ node server.js
    editor.html ファイルをブラウザで開き、オンライン エディタ機能の使用を開始します。
概要:

この記事では、追加、削除、変更、クエリなどの基本操作を含む、MySQL と JavaScript を使用した簡単なオンライン エディター機能を実装します。フロントエンドとバックエンドを分離することで、フロントエンドは Vue.js を使用してシンプルな対話型インターフェイスを実装し、バックエンドは Express と MySQL を使用してデータを処理します。

上記は、MySQL と JavaScript を使用して簡単なオンライン エディター機能を実装する方法の詳細な紹介とコード例です。この記事がオンライン エディターの理解と使用に役立つことを願っています。

以上がMySQL と JavaScript を使用して簡単なオンライン エディター機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。