MySQL과 JavaScript를 사용하여 간단한 온라인 편집기 기능을 구현하는 방법-MySQL 튜토리얼-php.cn

집

데이터 베이스

MySQL 튜토리얼

MySQL과 JavaScript를 사용하여 간단한 온라인 편집기 기능을 구현하는 방법

王林

Sep 21, 2023 am 11:01 AM

mysqljavascript온라인 편집자

MySQL과 JavaScript를 사용하여 간단한 온라인 편집기 기능을 구현하는 방법

"MySQL과 JavaScript를 사용하여 간단한 온라인 편집기 기능을 구현하는 방법"이라는 제목처럼

인터넷의 급속한 발전으로 인해 점점 더 많은 응용 프로그램에서 사용자가 텍스트, 코드를 작성하고 편집할 수 있도록 지원하는 온라인 편집기가 필요합니다. 그리고 각종 서류. 이 기사에서는 MySQL과 JavaScript를 사용하여 간단한 온라인 편집기 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 데이터베이스 디자인

온라인 편집 기능은 사용자가 생성한 파일을 저장해야 하므로 관련 정보를 저장하기 위한 데이터베이스가 필요합니다. MySQL을 데이터베이스로 사용하고, MySQL에서 "files"라는 데이터베이스를 생성하고, 데이터베이스에 "documents"라는 테이블을 생성합니다. 테이블의 구조는 다음과 같습니다.

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

2. 백엔드 구현

백엔드 로직을 처리하기 위해 "server.js"라는 파일을 만듭니다. 먼저 필요한 라이브러리와 모듈을 소개해야 합니다. 코드는 다음과 같습니다.

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

라우팅 및 처리 기능을 정의합니다. 우리는 다음 경로를 정의합니다:

POST /documents: 새 문서를 만드는 데 사용됩니다.
GET /documents: 모든 문서를 얻는 데 사용됩니다.
GET /documents/:id: ID를 기반으로 지정된 문서를 얻는 데 사용됩니다.
PUT /documents/:id: 지정된 문서를 업데이트하는 데 사용됩니다.
DELETE /documents/:id: 지정된 문서를 삭제하는 데 사용됩니다.

코드는 다음과 같습니다.

// 创建文档
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. 프론트 엔드 구현

프런트 엔드 디스플레이 및 상호 작용을 위해 "editor.html"이라는 파일을 만듭니다. 먼저 HTML 페이지를 만들고 필요한 라이브러리와 파일을 소개해야 합니다. 코드는 다음과 같습니다.

<!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 id="Online-Editor">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>

프론트 엔드 로직을 처리하기 위해 "editor.js"라는 파일을 만듭니다. 코드는 다음과 같습니다.

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. 테스트 및 실행

명령줄에 프로젝트 폴더를 입력하고 필요한 종속성을 설치합니다.

$ npm install express body-parser mysql

백엔드 서버 시작:

$ node server.js

에서 열기 온라인 편집기 기능을 사용하려면 browser editor.html 파일을 사용하세요.

요약:

이 글에서는 추가, 삭제, 수정, 검색과 같은 기본 작업을 포함하여 MySQL 및 JavaScript를 통해 간단한 온라인 편집기 기능을 구현합니다. 프런트엔드와 백엔드를 분리해 프런트엔드는 Vue.js를 사용해 간단한 인터랙티브 인터페이스를 구현하고, 백엔드는 Express와 MySQL을 사용해 데이터를 처리한다.

위는 MySQL과 JavaScript를 사용하여 간단한 온라인 편집기 기능을 구현하는 방법에 대한 자세한 소개와 코드 예제입니다. 이 기사가 온라인 편집기를 이해하고 사용하는 데 도움이 되기를 바랍니다.

위 내용은 MySQL과 JavaScript를 사용하여 간단한 온라인 편집기 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

MySQL의 역할 : 웹 응용 프로그램의 데이터베이스Apr 17, 2025 am 12:23 AM

웹 응용 프로그램에서 MySQL의 주요 역할은 데이터를 저장하고 관리하는 것입니다. 1. MySQL은 사용자 정보, 제품 카탈로그, 트랜잭션 레코드 및 기타 데이터를 효율적으로 처리합니다. 2. SQL 쿼리를 통해 개발자는 데이터베이스에서 정보를 추출하여 동적 컨텐츠를 생성 할 수 있습니다. 3.mysql은 클라이언트-서버 모델을 기반으로 작동하여 허용 가능한 쿼리 속도를 보장합니다.

MySQL : 첫 번째 데이터베이스 구축Apr 17, 2025 am 12:22 AM

MySQL 데이터베이스를 구축하는 단계에는 다음이 포함됩니다. 1. 데이터베이스 및 테이블 작성, 2. 데이터 삽입 및 3. 쿼리를 수행하십시오. 먼저 CreateAbase 및 CreateTable 문을 사용하여 데이터베이스 및 테이블을 작성한 다음 InsertInto 문을 사용하여 데이터를 삽입 한 다음 최종적으로 SELECT 문을 사용하여 데이터를 쿼리하십시오.

MySQL : 데이터 저장에 대한 초보자 친화적 인 접근 방식Apr 17, 2025 am 12:21 AM

MySQL은 사용하기 쉽고 강력하기 때문에 초보자에게 적합합니다. 1.MySQL은 관계형 데이터베이스이며 CRUD 작업에 SQL을 사용합니다. 2. 설치가 간단하고 루트 사용자 비밀번호를 구성해야합니다. 3. 삽입, 업데이트, 삭제 및 선택하여 데이터 작업을 수행하십시오. 4. Orderby, Where and Join은 복잡한 쿼리에 사용될 수 있습니다. 5. 디버깅은 구문을 확인하고 쿼리를 분석하기 위해 설명을 사용해야합니다. 6. 최적화 제안에는 인덱스 사용, 올바른 데이터 유형 선택 및 우수한 프로그래밍 습관이 포함됩니다.

MySQL 초보자가 친숙합니까? 학습 곡선 평가Apr 17, 2025 am 12:19 AM

MySQL은 다음과 같은 초보자에게 적합합니다. 1) 설치 및 구성이 쉽고, 2) 풍부한 학습 리소스, 3) 직관적 인 SQL 구문, 4) 강력한 도구 지원. 그럼에도 불구하고 초보자는 데이터베이스 디자인, 쿼리 최적화, 보안 관리 및 데이터 백업과 같은 과제를 극복해야합니다.

SQL은 프로그래밍 언어입니까? 용어를 명확하게합니다Apr 17, 2025 am 12:17 AM

예, sqlisaprogramminglanguages-pecializedfordatamanagement.1) 그것은 초점을 맞추고, 초점을 맞추고, 초점을 맞추고, sqlisessentialforquerying, 삽입, 업데이트 및 adletingdataindataindationaldatabase.3) weburer infriendly, itrequires-quirestoamtoavase

산성 특성 (원자력, 일관성, 분리, 내구성)을 설명하십시오.Apr 16, 2025 am 12:20 AM

산성 속성에는 원자력, 일관성, 분리 및 내구성이 포함되며 데이터베이스 설계의 초석입니다. 1. 원자력은 거래가 완전히 성공적이거나 완전히 실패하도록합니다. 2. 일관성은 거래 전후에 데이터베이스가 일관성을 유지하도록합니다. 3. 격리는 거래가 서로를 방해하지 않도록합니다. 4. 지속성은 거래 제출 후 데이터가 영구적으로 저장되도록합니다.

MySQL : 데이터베이스 관리 시스템 대 프로그래밍 언어Apr 16, 2025 am 12:19 AM

MySQL은 데이터베이스 관리 시스템 (DBMS) 일뿐 만 아니라 프로그래밍 언어와 밀접한 관련이 있습니다. 1) DBMS로서 MySQL은 데이터를 저장, 구성 및 검색하는 데 사용되며 인덱스 최적화는 쿼리 성능을 향상시킬 수 있습니다. 2) SQL과 같은 ORM 도구를 사용하여 Python에 내장 된 SQL과 프로그래밍 언어를 결합하면 작업을 단순화 할 수 있습니다. 3) 성능 최적화에는 인덱싱, 쿼리, 캐싱, 라이브러리 및 테이블 부서 및 거래 관리가 포함됩니다.

MySQL : SQL 명령으로 데이터 관리Apr 16, 2025 am 12:19 AM

MySQL은 SQL 명령을 사용하여 데이터를 관리합니다. 1. 기본 명령에는 선택, 삽입, 업데이트 및 삭제가 포함됩니다. 2. 고급 사용에는 조인, 하위 쿼리 및 집계 함수가 포함됩니다. 3. 일반적인 오류에는 구문, 논리 및 성능 문제가 포함됩니다. 4. 최적화 팁에는 인덱스 사용, 선택*을 피하고 한계 사용이 포함됩니다.

See all articles