基于 Flask 与 MySQL 构建简单的博客系统

引言

在互联网时代，博客是人们分享知识、记录生活的重要平台。借助 Python 的 Flask 框架与 MySQL 数据库，我们可以快速搭建一个简单的博客系统。本文将详细介绍如何从零开始构建这样一个系统，涵盖环境搭建、数据库设计、后端接口实现以及前端页面展示等方面。

环境准备

安装依赖

首先，我们需要安装 Flask 和 MySQL 驱动。在命令行中运行以下命令：

收起

bash

pip install flask mysql-connector-python

数据库设置

假设你已经安装了 MySQL 数据库，创建一个名为 blog_db 的数据库，并在其中创建两个表：users 和 posts。

收起

sql

-- 创建数据库
CREATE DATABASE blog_db;-- 使用数据库
USE blog_db;-- 创建用户表
CREATE TABLE users (id INT AUTO_INCREMENT PRIMARY KEY,username VARCHAR(50) NOT NULL UNIQUE,password VARCHAR(255) NOT NULL
);-- 创建博客文章表
CREATE TABLE posts (id INT AUTO_INCREMENT PRIMARY KEY,title VARCHAR(200) NOT NULL,content TEXT NOT NULL,user_id INT NOT NULL,FOREIGN KEY (user_id) REFERENCES users(id)
);

后端实现（Flask）

数据库连接

创建一个 app.py 文件，首先实现与 MySQL 数据库的连接。

收起

python

import mysql.connector
from flask import Flask, request, jsonifyapp = Flask(__name__)# 数据库连接配置
db = mysql.connector.connect(host="localhost",user="your_username",password="your_password",database="blog_db"
)cursor = db.cursor()

用户注册接口

收起

python

@app.route('/register', methods=['POST'])
def register():data = request.get_json()username = data.get('username')password = data.get('password')if not username or not password:return jsonify({"message": "用户名和密码不能为空"}), 400try:cursor.execute("INSERT INTO users (username, password) VALUES (%s, %s)", (username, password))db.commit()return jsonify({"message": "注册成功"}), 201except mysql.connector.IntegrityError:return jsonify({"message": "用户名已存在"}), 409

用户登录接口

收起

python

@app.route('/login', methods=['POST'])
def login():data = request.get_json()username = data.get('username')password = data.get('password')cursor.execute("SELECT id FROM users WHERE username = %s AND password = %s", (username, password))user = cursor.fetchone()if user:return jsonify({"message": "登录成功", "user_id": user[0]}), 200else:return jsonify({"message": "用户名或密码错误"}), 401

创建博客文章接口

收起

python

@app.route('/posts', methods=['POST'])
def create_post():data = request.get_json()title = data.get('title')content = data.get('content')user_id = data.get('user_id')if not title or not content or not user_id:return jsonify({"message": "标题、内容和用户 ID 不能为空"}), 400try:cursor.execute("INSERT INTO posts (title, content, user_id) VALUES (%s, %s, %s)", (title, content, user_id))db.commit()return jsonify({"message": "文章创建成功"}), 201except Exception as e:return jsonify({"message": f"创建文章失败: {str(e)}"}), 500

获取所有博客文章接口

收起

python

@app.route('/posts', methods=['GET'])
def get_all_posts():cursor.execute("SELECT posts.id, posts.title, posts.content, users.username FROM posts JOIN users ON posts.user_id = users.id")posts = cursor.fetchall()post_list = []for post in posts:post_dict = {"id": post[0],"title": post[1],"content": post[2],"author": post[3]}post_list.append(post_dict)return jsonify(post_list), 200

运行 Flask 应用

收起

python

if __name__ == '__main__':app.run(debug=True)

前端实现（简单示例）

创建一个 index.html 文件，使用 HTML、CSS 和 JavaScript 实现一个简单的前端界面，与后端接口进行交互。

收起

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单博客系统</title><style>body {font-family: Arial, sans-serif;margin: 20px;}form {margin-bottom: 20px;}input,textarea {display: block;margin-bottom: 10px;width: 300px;}</style>
</head><body><h1>注册</h1><form id="registerForm"><input type="text" id="registerUsername" placeholder="用户名"><input type="password" id="registerPassword" placeholder="密码"><button type="submit">注册</button></form><h1>登录</h1><form id="loginForm"><input type="text" id="loginUsername" placeholder="用户名"><input type="password" id="loginPassword" placeholder="密码"><button type="submit">登录</button></form><h1>创建文章</h1><form id="createPostForm"><input type="text" id="postTitle" placeholder="文章标题"><textarea id="postContent" placeholder="文章内容"></textarea><input type="hidden" id="userId"><button type="submit">发布文章</button></form><h1>文章列表</h1><div id="postList"></div><script>// 注册功能document.getElementById('registerForm').addEventListener('submit', function (e) {e.preventDefault();const username = document.getElementById('registerUsername').value;const password = document.getElementById('registerPassword').value;fetch('/register', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ username, password })}).then(response => response.json()).then(data => alert(data.message));});// 登录功能document.getElementById('loginForm').addEventListener('submit', function (e) {e.preventDefault();const username = document.getElementById('loginUsername').value;const password = document.getElementById('loginPassword').value;fetch('/login', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ username, password })}).then(response => response.json()).then(data => {if (data.message === '登录成功') {document.getElementById('userId').value = data.user_id;}alert(data.message);});});// 创建文章功能document.getElementById('createPostForm').addEventListener('submit', function (e) {e.preventDefault();const title = document.getElementById('postTitle').value;const content = document.getElementById('postContent').value;const userId = document.getElementById('userId').value;fetch('/posts', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ title, content, user_id: userId })}).then(response => response.json()).then(data => alert(data.message));});// 获取文章列表功能function getPosts() {fetch('/posts').then(response => response.json()).then(posts => {const postList = document.getElementById('postList');postList.innerHTML = '';posts.forEach(post => {const postDiv = document.createElement('div');postDiv.innerHTML = `<h2>${post.title}</h2><p>作者: ${post.author}</p><p>${post.content}</p>`;postList.appendChild(postDiv);});});}getPosts();</script>
</body></html>