MySQL と JavaScript を利用して、シンプルなオンラインエディタ機能を実現する方法

2年 ago
光, 明
2 minutes

MySQL と JavaScript を使用した簡単なオンラインエディター機能を実現するには、以下の手順に従います。

  1. ファイル名を格納するフィールドとファイルの内容を格納するフィールドの２つのフィールドを持つMySQLデータベースTableを作成する。テーブルの作成には以下のコマンドを使用。
CREATE TABLE files (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255),
content TEXT
);
  1. フロントページでは、ファイル名を入力するためのテキスト入力ボックス、ファイルの内容を表示および編集するためのテキスト領域、およびファイルを保存するための保存ボタンを作成します。これらの要素は HTML と CSS を使用して作成できます。
<input type="text" id="fileName" placeholder="文件名">
<textarea id="fileContent"></textarea>
<button id="saveButton">保存</button>
  1. JavaScriptでAJAXを使用してバックエンドとの連携を行い、ファイルの保存や読み込みの機能を実現する。以下のコードを使用する。
// 获取元素
var fileNameInput = document.getElementById('fileName');
var fileContentTextarea = document.getElementById('fileContent');
var saveButton = document.getElementById('saveButton');
// 保存文件
saveButton.addEventListener('click', function() {
var fileName = fileNameInput.value;
var fileContent = fileContentTextarea.value;
// 发送POST请求到后端保存文件
var xhr = new XMLHttpRequest();
xhr.open('POST', '/savefile', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 保存成功
console.log('文件保存成功');
} else {
// 保存失败
console.log('文件保存失败');
}
};
xhr.send('name=' + encodeURIComponent(fileName) + '&content=' + encodeURIComponent(fileContent));
});
// 加载文件
function loadFile(fileName) {
// 发送GET请求到后端获取文件内容
var xhr = new XMLHttpRequest();
xhr.open('GET', '/loadfile?name=' + encodeURIComponent(fileName), true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 获取文件内容成功
fileContentTextarea.value = xhr.responseText;
} else {
// 获取文件内容失败
console.log('获取文件内容失败');
}
};
xhr.send();
}
// 示例：加载文件名为example.txt的文件
loadFile('example.txt');
  1. サーバ側のプログラミング言語（例：Node.js）を使用してファイルの保存や読み込みリクエストを処理するバックエンドでは、以下のコードを使用できます。
// 保存文件的处理逻辑
app.post('/savefile', function(req, res) {
var fileName = req.body.name;
var fileContent = req.body.content;
// 在数据库中保存文件名和内容
connection.query('INSERT INTO files (name, content) VALUES (?, ?)', [fileName, fileContent], function(error, results, fields) {
if (error) throw error;
res.sendStatus(200);
});
});
// 加载文件的处理逻辑
app.get('/loadfile', function(req, res) {
var fileName = req.query.name;
// 从数据库中获取文件内容
connection.query('SELECT content FROM files WHERE name = ?', [fileName], function(error, results, fields) {
if (error) throw error;
if (results.length > 0) {
res.send(results[0].content);
} else {
res.sendStatus(404);
}
});
});

これはオンラインエディタ機能を簡単に実装する例であり、実際のニーズに合わせて拡張・変更が可能です。

bannerAds