Comme le titre, "Comment utiliser MySQL et JavaScript pour implémenter une fonction d'édition en ligne simple"
Avec le développement rapide d'Internet, de plus en plus d'applications nécessitent des éditeurs en ligne pour aider les utilisateurs à rédiger et éditer du texte, du code , et Divers documents. Cet article expliquera comment utiliser MySQL et JavaScript pour implémenter une fonction d'édition en ligne simple et fournira des exemples de code spécifiques.
1. Conception de la base de données
La fonction d'éditeur en ligne doit stocker les fichiers créés par les utilisateurs, une base de données est donc nécessaire pour stocker les informations associées. Nous utilisons MySQL comme base de données, créons une base de données nommée "files" dans MySQL et créons une table nommée "documents" dans la base de données. La structure de la table est la suivante :
CREATE TABLE `documents` ( `id` INT(11) NOT NULL AUTO_INCREMENT, `title` VARCHAR(255) NOT NULL, `content` TEXT NOT NULL, PRIMARY KEY (`id`) );
2. Implémentation back-end
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();Le code est le suivant :
// 创建文档
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. Implémentation front-end
<!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();
}
});4. Test et exécution
$ npm install express body-parser mysql
$ node server.js
Résumé :
Cet article implémente une fonction d'édition en ligne simple via MySQL et JavaScript, comprenant des opérations de base telles que l'ajout, la suppression, la modification et la recherche. En séparant le front-end et le back-end, le front-end utilise Vue.js pour implémenter une interface interactive simple, et le back-end utilise Express et MySQL pour traiter les données.
Ce qui précède est une introduction détaillée et un exemple de code sur la façon d'utiliser MySQL et JavaScript pour implémenter une fonction d'édition en ligne simple. J'espère que cet article pourra vous aider à comprendre et à utiliser l'éditeur en ligne.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
