Vue.js와 MySQL을 사용하여 회원가입 페이지 만들기 01

Vue.js와 MySQL을 사용하여 회원가입 사이트를 만드는 방법입니다.

 

1. 프로젝트 설정

우선, Vue.js 프로젝트와 Node.js 서버를 설정합니다.

Vue.js 설정

# Vue CLI를 사용하여 새로운 프로젝트 생성
vue create signup-app
cd signup-app

 

 

Node.js 설정

# Node.js 프로젝트 초기화
mkdir server
cd server
npm init -y

# 필요한 패키지 설치
npm install express mysql bcrypt body-parser cors axios

 

 

 

2. Vue.js 클라이언트 구현

signup-app 폴더에서 작업을 진행합니다.

src/components/SignUp.vue

 

 

<template>
  <div class="signup">
    <h2>회원가입</h2>
    <form @submit.prevent="signUp">
      <div>
        <label for="username">아이디:</label>
        <input type="text" v-model="username" required>
      </div>
      <div>
        <label for="password">비밀번호:</label>
        <input type="password" v-model="password" required>
      </div>
      <div>
        <label for="confirmPassword">비밀번호 확인:</label>
        <input type="password" v-model="confirmPassword" required>
      </div>
      <div>
        <label for="name">이름:</label>
        <input type="text" v-model="name" required>
      </div>
      <div>
        <label for="email">이메일:</label>
        <input type="email" v-model="email" required>
      </div>
      <button type="submit">회원가입</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
      confirmPassword: '',
      name: '',
      email: ''
    };
  },
  methods: {
    async signUp() {
      if (this.password !== this.confirmPassword) {
        alert('비밀번호가 일치하지 않습니다.');
        return;
      }
      
      const user = {
        username: this.username,
        password: this.password,
        name: this.name,
        email: this.email
      };
      
      try {
        const response = await axios.post('http://localhost:3000/signup', user);
        alert(response.data.message);
      } catch (error) {
        console.error(error);
        alert('회원가입 실패');
      }
    }
  }
};
</script>

<style scoped>
.signup {
  max-width: 400px;
  margin: auto;
}
</style>​

 

 

3. Node.js 서버 구현

server 폴더에서 작업을 진행합니다.

server/index.js

const express = require('express');
const mysql = require('mysql2');
const bcrypt = require('bcrypt');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const port = 3000;

app.use(cors());
app.use(bodyParser.json());

// MySQL 연결 설정
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root', // MySQL 사용자명
  password: '', // MySQL 비밀번호
  database: '' // 사용할 데이터베이스 이름
});

connection.connect((err) => {
  if (err) {
    console.error('데이터베이스 연결 오류:', err);
    return;
  }
  console.log('데이터베이스 연결 성공');
});

// 회원가입 API 엔드포인트
app.post('/signup', async (req, res) => {
  const { username, password, name, email } = req.body;

  try {
    // 비밀번호 해시화
    const hashedPassword = await bcrypt.hash(password, 10);

    // 사용자 정보 저장
    const query = 'INSERT INTO users (username, password, name, email) VALUES (?, ?, ?, ?)';
    connection.query(query, [username, hashedPassword, name, email], (err, results) => {
      if (err) {
        console.error('회원가입 오류:', err);
        res.status(500).json({ message: '회원가입 실패' });
        return;
      }
      res.status(200).json({ message: '회원가입 성공' });
    });
  } catch (error) {
    console.error('회원가입 오류:', error);
    res.status(500).json({ message: '회원가입 실패' });
  }
});

app.listen(port, () => {
  console.log(`서버가 http://localhost:${port} 에서 실행 중입니다.`);
});

 

 

4. MySQL 데이터베이스 설정

MySQL에 데이터베이스와 테이블을 생성합니다.

CREATE DATABASE signup_app;

USE signup_app;

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(50) NOT NULL,
  password VARCHAR(255) NOT NULL,
  name VARCHAR(50) NOT NULL,
  email VARCHAR(100) NOT NULL
);

 

 

 

 

이제 Vue.js 애플리케이션을 실행하고(npm run serve), Node.js 서버를 시작하여(node index.js) 회원가입 기능을 테스트할 수 있습니다.

 

위의 코드를 통해 사용자가 입력한 정보를 암호화하여 MySQL 데이터베이스에 안전하게 저장할 수 있습니다.