MySQL과 JavaScript를 사용하여 간단한 파일 탐색 기능을 구현하는 방법

MySQL 및 JavaScript를 사용하여 간단한 파일 탐색 기능을 구현하는 방법

소개:
오늘날 디지털 시대에 파일 관리 및 탐색 기능은 일상 업무에서 없어서는 안 될 부분이 되었습니다. 이 기사에서는 MySQL과 JavaScript를 사용하여 간단한 파일 검색 기능을 구현하는 방법을 소개합니다. MySQL을 데이터베이스로 사용하여 파일의 메타데이터를 저장하고 JavaScript를 사용하여 사용자 인터페이스와 파일 작업을 구현합니다.

1. Create Database Table
   먼저, 파일의 메타데이터를 저장할 MySQL 데이터베이스 테이블을 생성해야 합니다. id(파일 ID, 자동 증가 기본 키), 이름(파일 이름), 크기(파일 크기) 및 경로(파일 경로) 열을 사용하여 "files"라는 테이블을 만들 수 있습니다. 다음 SQL 문을 사용하여 테이블을 생성할 수 있습니다.

CREATE TABLE 파일 (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(255),
size INT,
path VARCHAR(255)
);

2. Upload files to the server
   사용자는 파일 업로드 양식을 통해 서버에 파일을 업로드할 수 있습니다. 사용자가 파일을 선택하면 JavaScript를 통해 파일 객체를 얻고 XMLHttpRequest 객체를 사용하여 파일을 서버로 보냅니다. 서버는 파일을 수신한 후 지정된 디렉터리에 파일을 저장하고 파일의 메타데이터(파일 이름, 크기 및 경로)를 MySQL 데이터베이스에 삽입합니다. 다음은 파일 업로드에 대한 간단한 JavaScript 예입니다.

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (event) => {
   const selectedFile = event.target.files[0];
   const xhr = new XMLHttpRequest();
   xhr.open('POST', '/upload');
   xhr.send(selectedFile);
});

3. 파일 목록 쿼리
   파일 탐색 기능을 구현하려면 MySQL 데이터베이스에서 파일 목록을 쿼리하고 이를 사용자 인터페이스에 표시해야 합니다. Node.js를 서버 측 개발 환경으로 사용하고 MySQL용 Node.js 드라이버를 사용하여 쿼리 작업을 수행할 수 있습니다. 서버 측에서는 파일 목록 쿼리 요청을 처리하고 쿼리 결과를 JSON 형식으로 클라이언트에 반환하는 API를 작성할 수 있습니다. 다음은 Node.js 및 Express 프레임워크를 사용하는 예입니다.

const express = require('express');
const mysql = require('mysql');

const app = express();
const connection = mysql.createConnection({
   host: 'localhost',
   user: 'root',
   password: 'password',
   database: 'files'
});

app.get('/files', (req, res) => {
   connection.query('SELECT * FROM files', (error, results) => {
      if (error) throw error;
      res.json(results);
   });
});

app.listen(3000, () => {
   console.log('Server is running on port 3000');
});

4. 파일 목록 표시
   프런트 엔드에서는 JavaScript를 사용하여 AJAX를 통해 서버에서 파일 목록을 가져와 사용자 인터페이스에 표시할 수 있습니다. 다음 코드 예제를 사용할 수 있습니다.

fetch('/files')
   .then(response => response.json())
   .then(data => {
      const fileList = document.getElementById('fileList');
      data.forEach(file => {
         const listItem = document.createElement('li');
         listItem.textContent = file.name;
         fileList.appendChild(listItem);
      });
   });

위 단계를 통해 간단한 파일 탐색 기능을 구현할 수 있습니다. 사용자는 인터페이스에서 파일을 업로드하고 업로드된 파일 목록을 볼 수 있습니다. 물론 이는 기본적인 예일 뿐이며 파일 삭제, 다운로드 기능 추가 등 필요에 따라 이 기능을 확장하고 최적화할 수 있습니다.

결론:
간단한 파일 탐색 기능은 MySQL과 JavaScript를 사용하여 쉽게 구현할 수 있습니다. MySQL에 파일 메타데이터를 저장하고 JavaScript를 사용하여 파일 업로드, 쿼리 및 표시를 제어함으로써 파일 관리 및 탐색 인터페이스를 신속하게 구축할 수 있습니다. 물론 실제 필요에 따라 이 기능을 더욱 확장 및 최적화하고 더 많은 파일 작업 기능을 추가할 수 있습니다.

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