flask-mysql 연동
app.py
from flask import Flask
from flask_smorest import Api
from flask_mysqldb import MySQL
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'] = '900326'
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.registe_blueprint(user_blp)
user_routes.py
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")
cursor.close()
users = cursor.fetchall()
# return 값이 튜플형태라 REST API 일려면 dict 타입이 되어야 되기 때문에 형변환을 해줘야 한다.
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({"msg" : "User added successfully"})
@user_blp.route('/<int:user_id>', methods=["PUT"])
def update_user(user_id):
user_data = request.json()
cursor = mysql.conneciton.cursor()
cursor.execute("UPDATE users SET name = %s, email = %s WEHRE id = %s",
(user_data['name'], user_data['email'], user_id)"))
mysql.connection.commit()
cursor.close()
return jsonify({"msg" : "User updated successfully})
@user_blp('<int:user_id>', methods=["DELETE"])
def delete_user(user_id):
user_data = request.json()
cursor = mysql.connection.cursor()
cursor.execute("DELETE FROM users WHERE id = %s",
(user_id,))
mysql.connection.commit()
cursor.close()
return jsonify({"msg" : "User deleted successfully"})
users.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>
개발 광기를 드러내보쟈..