티스토리 뷰
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 데이터베이스에 안전하게 저장할 수 있습니다.
'IT 이야기' 카테고리의 다른 글
카페24 쇼핑몰에서 네이버 로그인이 안 되는 경우 해결방법 (0) | 2024.08.14 |
---|---|
Adobe XD 디자인을 HTML과 CSS 코드로 변환할 때 (0) | 2024.07.25 |
국내통신사별 리버스 도메인(PTR레코드) 등록방법 (0) | 2024.07.17 |
와우자(WOWZA) 스트리밍 서버를 운영하면서 관리자 패스워드를 잊어버린 경우 해결법 (0) | 2024.03.18 |
Ubuntu 에서 nodejs 설치하기 (0) | 2023.11.09 |
Ubuntu에서 nginx 설치하기 (0) | 2023.11.09 |
보이스피싱 예방법 (1) | 2023.10.17 |
[Ubuntu] 64bit 리눅스에서 32bit 실행파일(ELF) 실행방법 (0) | 2023.04.13 |
RPA의 개념과 장단점 (0) | 2023.02.24 |
To build a Node.js server using PM2 on Windows 10 (0) | 2023.02.24 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
- W3Schools Online Web Tutorials
- 구차니의 잡동사니 모음
- [IT]블로거팁닷컴
- 비앤아이님의 블로그
- Blog Suspect
- 즐거운하루 blog
- zinicap의 검색엔진 마케팅(SEM)
- 머니야머니야님의 블로그
- [Friend] AtinStory
- [기타배우기]해브원 박스
- [웹표준] SINDB.com
- 해커 C 이야기
- [애드센스] 길라잡이
- 정순봉의 IT SCHOOL
- 씨디맨의 컴퓨터이야기
- 2proo Life Story
- 못된준코의 세상리뷰
- [IT강좌] 정보문화사
- IN 대전
- 에우르트는 나쁜남자 -_-
- 씬의 싱크탱크
- 엔돌슨의 IT이야기
- 진이늘이
- 'Cooltime'의 블로그
- 후이의 Tistory
- Soulstorage
- 앤드&엔드의 블로그
- June Blog
- 노지의 소박한 이야기
- gbWorld
- 인터넷 속 나의 생각
- HarshNix
- ART of WEB
- 녹두장군 - 상상을 현실로
TAG
- 스마트폰
- MBTI
- It
- 안드로이드 어플 추천
- 효과음
- C언어
- MBTI 검사
- C언어 문제
- 프로그래밍
- 모토로이
- MBTI 테스트
- 소스
- 강좌
- MBTI 자료
- C언어 소스
- 강의
- 소스코드
- 리뷰
- 예제 소스
- 프로그래밍 문제
- HTML
- C
- JavaScript
- 성공
- php
- MBTI 강좌
- 안드로이드
- 인터넷
- 인터넷 익스플로러
- 안드로이드 어플
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
글 보관함