如題，《如何使用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`) );
二、後端實作
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');
});三、前端實作
<!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實作了一個簡單的線上編輯器功能，包含增、刪、變更、檢查等基本操作。透過前後端分離的方式，前端使用Vue.js實現簡潔的互動介面，後端則使用Express和MySQL處理資料。
以上就是如何使用MySQL和JavaScript實作一個簡單的線上編輯器功能的詳細介紹和程式碼範例。希望本文能對你理解和使用線上編輯器有所幫助。
以上是如何使用MySQL和JavaScript實作一個簡單的線上編輯器功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
