> 웹 프론트엔드 > 프런트엔드 Q&A > JavaScript를 사용하여 수정된 데이터를 MySQL 데이터베이스에 저장하는 방법

JavaScript를 사용하여 수정된 데이터를 MySQL 데이터베이스에 저장하는 방법

PHPz
풀어 주다: 2023-04-24 11:15:46
원래의
1170명이 탐색했습니다.

웹 애플리케이션에서는 MySQL 데이터베이스가 널리 사용됩니다. 하지만 이제 막 MySQL을 사용하기 시작한 개발자들에게는 수정된 데이터를 어떻게 저장해야 하는지 등의 어려움이 있을 수 있습니다. 이 기사에서는 JavaScript를 사용하여 수정된 데이터를 MySQL 데이터베이스에 저장하는 방법을 소개합니다.

첫 번째 단계는 MySQL 데이터베이스에 연결하는 것입니다. 이 경우 Node.js를 사용하여 MySQL에 연결하겠습니다. MySQL에 연결하려면 npm 패키지 mysql을 사용해야 합니다. 이 패키지는 Node.js 환경에서 사용할 수 있는 mysql용 Node.js 드라이버입니다. 다음 명령어로 mysql을 설치할 수 있습니다.

npm install mysql

MySQL 데이터베이스에 연결

다음 단계는 Node.js의 드라이버를 사용하여 MySQL 데이터베이스에 연결하는 것입니다. 다음 내용을 포함하는 db.js라는 파일을 생성하겠습니다.

const mysql = require('mysql');

const con = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'testdb'
});

module.exports = con;
로그인 후 복사

createConnection 메소드를 사용하여 MySQL 연결을 생성하겠습니다. 이 메소드는 다음 속성을 가진 객체를 허용합니다:

  • host - MySQL 서버 호스트 이름
  • user - MySQL 사용자의 사용자 이름
  • password - MySQL 사용자 비밀번호
  • database - MySQL 데이터베이스 이름

이 Connect를 내보낼 것입니다. 다른 파일에서 사용하세요.

수정된 데이터 저장

이제 MySQL 데이터베이스에 연결되었으므로 수정된 데이터를 저장할 수 있습니다. id, name, email이라는 세 개의 열이 있는 "users"라는 테이블이 있다고 가정해 보겠습니다. JavaScript를 사용하여 HTML 양식에서 이 세 가지 값을 가져와 데이터를 저장하겠습니다.

먼저 사용자가 이름과 이메일을 입력할 수 있는 HTML 양식을 만듭니다. 양식은 다음과 같습니다.

<form>
  <input type="text" id="name" name="name" placeholder="Name">
  <input type="email" id="email" name="email" placeholder="Email">
  <button type="button" onclick="save()">Save</button>
</form>
로그인 후 복사

양식에는 사용자의 이름과 이메일 주소를 가져오기 위한 입력 요소가 정의되어 있습니다. 또한 양식에 버튼 요소를 추가하고 저장 기능을 호출하는 onclick 이벤트 핸들러를 제공했습니다.

이제 데이터를 저장하는 JavaScript 코드를 작성해 보겠습니다. index.html에 다음 스크립트를 추가하세요.

<script src="db.js"></script>
<script>
function save() {
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;

  const sql = `INSERT INTO users (name, email) VALUES ('${name}', '${email}')`;
  
  db.query(sql, function (err, result) {
    if (err) throw err;
    console.log("1 record inserted");
  });
}
</script>
로그인 후 복사

이 스크립트에서는 먼저 사용자가 입력한 이름과 이메일 주소를 가져옵니다. 다음으로, 이 값을 사용하여 사용자가 입력한 데이터를 MySQL 데이터베이스의 사용자 테이블에 삽입하는 INSERT 문을 만듭니다.

우리는 MySQL의 쿼리 방식을 사용하여 SQL 쿼리를 실행합니다. 이 메서드는 SQL 쿼리와 콜백 함수라는 두 가지 매개변수를 받습니다. 콜백 함수는 쿼리가 실행된 후에 호출됩니다. 콜백 함수에서는 오류가 있는지 확인하고 삽입된 레코드 수를 출력할 수 있습니다.

이제 사용자가 이름과 이메일을 입력하고 저장 버튼을 클릭하면 JavaScript를 사용하여 데이터를 MySQL 데이터베이스에 저장합니다.

결론

JavaScript를 사용하여 MySQL 데이터베이스에 수정 사항을 저장하는 것은 어렵지 않습니다. 이 기사에서는 MySQL 데이터베이스에 연결하고 JavaScript를 사용하여 HTML 양식에서 데이터를 가져온 다음 해당 데이터를 MySQL 데이터베이스에 저장하는 방법을 설명했습니다. 문제가 발생하면 mysql npm 패키지의 공식 문서를 읽고 추가 도움을 받으세요.

위 내용은 JavaScript를 사용하여 수정된 데이터를 MySQL 데이터베이스에 저장하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿