Comment utiliser MySQL et JavaScript pour implémenter une fonction d'édition en ligne simple-tutoriel mysql-php.cn

Comment utiliser MySQL et JavaScript pour implémenter une fonction d'édition en ligne simple

王林

Libérer： 2023-09-21 11:01:20

original

1496 Les gens l'ont consulté

Comment utiliser MySQL et JavaScript pour implémenter une fonction dédition en ligne simple

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`)
);

Copier après la connexion

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();

Copier après la connexion

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');
});

Copier après la connexion

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>

Copier après la connexion

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();
  }
});

Copier après la connexion

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

Copier après la connexion

Démarrez le serveur backend :

$ node server.js

Copier après la connexion

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!