Maison > Article > base de données > Comment utiliser MySQL et JavaScript pour implémenter une fonction d'édition en ligne simple
Comment utiliser MySQL et JavaScript pour implémenter une fonction d'édition en ligne simple
- 王林original
- 2023-09-21 11:01:201480parcourir
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
- . Créez un fichier appelé "server.js" pour gérer la logique backend. Tout d'abord, nous devons introduire les bibliothèques et modules nécessaires. Le code est le suivant :
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();- Définir les fonctions de routage et de traitement. Nous définissons les itinéraires suivants :
- POST /documents : utilisé pour créer de nouveaux documents ;
- GET /documents : utilisé pour obtenir tous les documents ;
- GET /documents/:id : utilisé pour obtenir les documents spécifiés en fonction de l'ID ;
- PUT /documents/:id : utilisé pour mettre à jour le document spécifié ;
- DELETE /documents/:id : utilisé pour supprimer le document spécifié.
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
- Créez un fichier nommé "editor.html" pour l'affichage et l'interaction front-end. Tout d'abord, nous devons créer une page HTML et introduire les bibliothèques et fichiers nécessaires. Le code est le suivant :
<!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>- Créez un fichier nommé "editor.js" pour gérer la logique frontale. Le code est le suivant :
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
- Entrez le dossier du projet dans la ligne de commande et installez les dépendances nécessaires :
$ npm install express body-parser mysql
- Démarrez le serveur backend :
$ node server.js
- Ouvrir dans le fichier editor.html du navigateur pour commencer à utiliser la fonction d'édition en ligne.
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!