ホームページ >データベース >mysql チュートリアル >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. バックエンドの実装
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();
// 创建文档 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. フロントエンドの実装
<!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>
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(); } });
$ npm install express body-parser mysql
$ node server.js
以上がMySQL と JavaScript を使用して簡単なオンライン エディター機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。