📌 Flask MySQL CRUD 애플리케이션 구현
이번 포스팅에서는 Flask와 MySQL을 활용한 사용자 관리 API와 웹 인터페이스를 구현하는 방법을 다루겠습니다. 이 프로젝트는 사용자를 추가, 조회, 수정 및 삭제하는 기능을 제공하며, 이를 위한 Blueprint와 HTML 템플릿을 포함한 전체 코드를 제공하겠습니다.
🚦 1. Flask 애플리케이션 설정
(1) MySQL 연결 설정 및 Flask 애플리케이션 기본 설정
app.py에서는 Flask 애플리케이션을 설정하고, MySQL과 연결한 후, Blueprint를 등록하여 사용자 관련 API 엔드포인트를 만듭니다.
from flask import Flask
from flask_mysqldb import MySQL
from flask_smorest import Api
from user_routes import create_user_blueprint
app = Flask(__name__)
# MySQL 연결 설정
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = 'oz-password'
app.config['MYSQL_DB'] = 'oz'
mysql = MySQL(app)
# blueprint 생성 및 등록
app.config["API_TITLE"] = "My API"
app.config["API_VERSION"] = "v1"
app.config["OPENAPI_VERSION"] = "3.1.3"
app.config["OPENAPI_URL_PREFIX"] = "/"
app.config["OPENAPI_SWAGGER_UI_PATH"] = "/swagger-ui"
app.config["OPENAPI_SWAGGER_UI_URL"] = "https://cdn.jsdelivr.net/npm/swagger-ui-dist/"
user_blp = create_user_blueprint(mysql)
api = Api(app)
api.register_blueprint(user_blp)
from flask import render_template
@app.route('/users_interface')
def users_interface():
return render_template('users.html')
if __name__ == '__main__':
app.run(debug=True)- mysql은 flask-mysqldb를 사용하여 MySQL과 연결하는 객체입니다.
- create_user_blueprint는 user_routes.py에서 정의된 Blueprint를 생성하고 등록하는 함수입니다.
- /users_interface URL을 통해 사용자 인터페이스를 제공하는 HTML 페이지를 렌더링합니다.
💻 2. 사용자 관리 API 구현 (user_routes.py)
user_routes.py에서는 사용자 관련 API를 CRUD 방식으로 구현합니다. 사용자는 GET, POST, PUT, DELETE 방식으로 관리할 수 있습니다.
(1) 사용자 관리 Blueprint 생성
from flask_smorest import Blueprint, abort
from flask import request, jsonify
def create_user_blueprint(mysql):
user_blp = Blueprint('user_routes', __name__, url_prefix='/users')
# 모든 사용자 조회
@user_blp.route('/', methods=['GET'])
def get_users():
cursor = mysql.connection.cursor()
cursor.execute("SELECT * FROM users")
users = cursor.fetchall()
cursor.close()
# 튜플을 딕셔너리로 변환
users_list = []
for user in users:
users_list.append({
'id': user[0],
'name': user[1],
'email': user[2]
})
return jsonify(users_list)
# 사용자 추가
@user_blp.route('/', methods=['POST'])
def add_user():
user_data = request.json
cursor = mysql.connection.cursor()
cursor.execute("INSERT INTO users (name, email) VALUES (%s, %s)",
(user_data['name'], user_data['email']))
mysql.connection.commit()
cursor.close()
return jsonify({'message': 'User added successfully'}), 201
# 사용자 수정
@user_blp.route('/<int:user_id>', methods=['PUT'])
def update_user(user_id):
user_data = request.json
cursor = mysql.connection.cursor()
cursor.execute("UPDATE users SET name = %s, email = %s WHERE id = %s",
(user_data['name'], user_data['email'], user_id))
mysql.connection.commit()
cursor.close()
return jsonify({'message': 'User updated successfully'})
# 사용자 삭제
@user_blp.route('/<int:user_id>', methods=['DELETE'])
def delete_user(user_id):
cursor = mysql.connection.cursor()
cursor.execute("DELETE FROM users WHERE id = %s", (user_id,))
mysql.connection.commit()
cursor.close()
return jsonify({'message': 'User deleted successfully'})
return user_blp- GET /users: 모든 사용자 데이터를 조회합니다.
- POST /users: 새로운 사용자를 추가합니다.
- PUT /users/<user_id>: 특정 사용자의 데이터를 수정합니다.
- DELETE /users/<user_id>: 특정 사용자를 삭제합니다.
🧪 3. 사용자 인터페이스 구현 (templates/users.html)
이 HTML 파일은 웹 페이지에서 사용자를 관리할 수 있는 인터페이스를 제공합니다. JavaScript를 사용하여 비동기적으로 사용자 데이터를 추가하고 수정하며 삭제할 수 있습니다.
(1) HTML 사용자 인터페이스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Users</title>
<script>
function fetchUsers() {
fetch("/users")
.then((response) => response.json())
.then((users) => {
const usersList = document.getElementById("users-list");
usersList.innerHTML = "";
users.forEach((user) => {
const userItem = document.createElement("li");
userItem.textContent = `ID: ${user.id}, Name: ${user.name}, Email: ${user.email}`;
usersList.appendChild(userItem);
});
})
.catch((error) => console.error("Error:", error));
}
function addUser() {
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
fetch("/users", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ name: name, email: email }),
})
.then((response) => response.json())
.then((data) => {
console.log(data);
fetchUsers();
})
.catch((error) => console.error("Error:", error));
}
window.onload = fetchUsers;
function updateUser() {
const userId = document.getElementById("update-user-id").value;
const name = document.getElementById("update-name").value;
const email = document.getElementById("update-email").value;
fetch(`/users/${userId}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ name: name, email: email }),
})
.then((response) => response.json())
.then((data) => {
console.log(data);
fetchUsers();
})
.catch((error) => console.error("Error:", error));
}
function deleteUser() {
const userId = document.getElementById("update-user-id").value;
fetch(`/users/${userId}`, {
method: "DELETE",
})
.then((response) => response.json())
.then((data) => {
console.log(data);
fetchUsers();
})
.catch((error) => console.error("Error:", error));
}
</script>
</head>
<body>
<h1>Users</h1>
<ul id="users-list"></ul>
<h2>Add User</h2>
<input type="text" id="name" placeholder="Name" />
<input type="email" id="email" placeholder="Email" />
<button onclick="addUser()">Add User</button>
<h2>Update/Delete User</h2>
<input type="number" id="update-user-id" placeholder="User ID" />
<input type="text" id="update-name" placeholder="New Name" />
<input type="email" id="update-email" placeholder="New Email" />
<button onclick="updateUser()">Update User</button>
<button onclick="deleteUser()">Delete User</button>
</body>
</html>- 이 HTML 파일은 사용자 목록을 화면에 표시하고, 사용자를 추가, 수정, 삭제하는 기능을 제공합니다.
- 각 기능은 JavaScript의 fetch API를 사용하여 서버와 비동기적으로 통신합니다.
✅ 마무리 요약 및 복습 포인트
- Flask와 MySQL 연동: flask-mysqldb를 사용하여 Flask 애플리케이션과 MySQL을 연결하고, 사용자 정보를 저장하고 조회하는 API를 구현했습니다.
- Blueprint 활용: Blueprint를 사용하여 사용자 관련 기능을 별도의 모듈로 관리하며, Flask 애플리케이션에 등록하였습니다.
- 웹 인터페이스 구현: HTML과 JavaScript를 사용하여 사용자가 웹에서 직접 데이터를 추가, 수정, 삭제할 수 있는 UI를 제공했습니다.
'Flask' 카테고리의 다른 글
| Chapter 3-2 Flask-SQLAlchemy 구축(app.py) (0) | 2025.04.21 |
|---|---|
| Chapter 3-1 ORM이란? Flask-SQLAlchemy란? (0) | 2025.04.21 |
| Chapter 2-6 Flask-MySQLdb 설정 및 사용법 (0) | 2025.04.18 |
| Chapter 2-5 Flask-Smorest 활용하여 REST API 생성 (0) | 2025.04.18 |
| Chapter 2-4 Flask-Smorest 활용하여 REST API 생성 (0) | 2025.04.18 |