Cara menggunakan MySQL dan JavaScript untuk melaksanakan fungsi editor dalam talian yang mudah-tutorial mysql-php.cn

Cara menggunakan MySQL dan JavaScript untuk melaksanakan fungsi editor dalam talian yang mudah

王林

Lepaskan： 2023-09-21 11:01:20

asal

1493 orang telah melayarinya

Cara menggunakan MySQL dan JavaScript untuk melaksanakan fungsi editor dalam talian yang mudah

Seperti tajuknya, "Cara menggunakan MySQL dan JavaScript untuk melaksanakan fungsi editor dalam talian yang mudah"

Dengan perkembangan pesat Internet, semakin ramai orang Semakin banyak aplikasi memerlukan editor dalam talian untuk menyokong pengguna dalam menulis dan mengedit teks, kod dan pelbagai fail. Artikel ini akan memperkenalkan cara menggunakan MySQL dan JavaScript untuk melaksanakan fungsi editor dalam talian yang mudah dan menyediakan contoh kod khusus.

1. Reka bentuk pangkalan data

Fungsi editor dalam talian perlu menyimpan fail yang dibuat oleh pengguna, jadi pangkalan data diperlukan untuk menyimpan maklumat berkaitan. Kami menggunakan MySQL sebagai pangkalan data, mencipta pangkalan data bernama "fail" dalam MySQL, dan mencipta jadual bernama "dokumen" dalam pangkalan data Struktur jadual adalah seperti berikut:

CREATE TABLE `documents` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `title` VARCHAR(255) NOT NULL,
  `content` TEXT NOT NULL,
  PRIMARY KEY (`id`)
);

Salin selepas log masuk

2. Backend. pelaksanaan

Buat fail bernama "server.js" untuk mengendalikan logik bahagian belakang. Pertama, kita perlu memperkenalkan perpustakaan dan modul yang diperlukan. Kami mentakrifkan laluan berikut:

POST /documents: digunakan untuk mencipta dokumen baharu;

GET /documents/:id: digunakan untuk mendapatkan dokumen yang ditentukan berdasarkan ID; #

Kodnya adalah seperti berikut:

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

Salin selepas log masuk

3 pelaksanaan bahagian hadapan
#🎜🎜 bernama "#Buat fail. editor.html" Fail, digunakan untuk paparan bahagian hadapan dan interaksi. Pertama, kita perlu membuat halaman HTML dan memperkenalkan perpustakaan dan fail yang diperlukan Kodnya adalah seperti berikut:

// 创建文档
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');
});

Salin selepas log masuk

Buat fail bernama "editor.js" dengan Untuk mengendalikan logik bahagian hadapan. Kodnya adalah seperti berikut:

<!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>

Salin selepas log masuk

4 Menguji dan menjalankan

Masukkan folder projek pada baris arahan dan pasang kebergantungan yang diperlukan: #🎜 🎜#

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

Salin selepas log masuk

$ npm install express body-parser mysql

Salin selepas log masuk

Buka fail editor.html anda bermula Gunakan ciri editor dalam talian.

Ringkasan:

Di atas ialah pengenalan terperinci dan contoh kod tentang cara menggunakan MySQL dan JavaScript untuk melaksanakan fungsi editor dalam talian yang mudah. Saya harap artikel ini dapat membantu anda memahami dan menggunakan editor dalam talian.

Atas ialah kandungan terperinci Cara menggunakan MySQL dan JavaScript untuk melaksanakan fungsi editor dalam talian yang mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!