当前位置： 首页 > article >正文

MySQL(SQLite3)数据库+Flask框架+HTML搭建个人博客网站

article 2024/10/10 2:12:34

        搭建一个博客并实现文章的发送功能，涉及到前后端开发和数据库操作。以下是一个简单的示例，使用Python的Flask框架作为后端，HTML和JavaScript作为前端，SQLite作为数据库。

1. 项目结构

my_blog/
│
├── app.py
├── templates/
│   ├── index.html
│   ├── profile.html
│   └── base.html
├── static/
│   ├── style.css
│   └── script.js
└── blog.db

2. 后端代码 (app.py)

以下数据库使用的是sqlite3（后文介绍MySQL数据库和数组的实现）：
from flask import Flask, render_template, request, redirect, url_for, session
import sqlite3
import secrets

app = Flask(__name__)
app.secret_key = secrets.token_hex(16)  # 生成一个 32 字节的随机十六进制字符串

# 初始化数据库
def init_db():
    db = sqlite3.connect('blog.db')
    cursor = db.cursor()
    cursor.execute('''
        CREATE TABLE IF NOT EXISTS users (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            username TEXT NOT NULL,
            password TEXT NOT NULL
        )
    ''')
    cursor.execute('''
        CREATE TABLE IF NOT EXISTS posts (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            user_id INTEGER NOT NULL,
            title TEXT NOT NULL,
            content TEXT NOT NULL,
            FOREIGN KEY (user_id) REFERENCES users(id)
        )
    ''')
    db.commit()
    db.close()

init_db()

@app.route('/')
def index():
    db = sqlite3.connect('blog.db')
    cursor = db.cursor()
    cursor.execute('SELECT * FROM posts')
    posts = cursor.fetchall()
    db.close()
    return render_template('index.html', posts=posts)

@app.route('/profile', methods=['GET', 'POST'])
def profile():
    if 'username' not in session:
        return redirect(url_for('index'))
    
    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']
        db = sqlite3.connect('blog.db')
        cursor = db.cursor()
        cursor.execute('INSERT INTO posts (user_id, title, content) VALUES (?, ?, ?)', (session['user_id'], title, content))
        db.commit()
        db.close()
        return redirect(url_for('profile'))
    
    db = sqlite3.connect('blog.db')
    cursor = db.cursor()
    cursor.execute('SELECT * FROM posts WHERE user_id = ?', (session['user_id'],))
    posts = cursor.fetchall()
    db.close()
    return render_template('profile.html', posts=posts)

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        db = sqlite3.connect('blog.db')
        cursor = db.cursor()
        cursor.execute('SELECT * FROM users WHERE username = ? AND password = ?', (username, password))
        user = cursor.fetchone()
        db.close()
        if user:
            session['username'] = user[1]
            session['user_id'] = user[0]
            return redirect(url_for('profile'))
        else:
            return "Invalid credentials"
    return render_template('login.html')

@app.route('/logout')
def logout():
    session.pop('username', None)
    session.pop('user_id', None)
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)
 如果使用的是MySQL数据库，请注意：

        使用MySQL作为数据库时，需要对代码进行一些调整。首先，确保你已经安装了所需的Python库：

pip install Flask mysql-connector-python

并将app.py文件的内容用以下代码代替 

from flask import Flask, render_template, request, redirect, url_for, session
import mysql.connector
import secrets

app = Flask(__name__)
app.secret_key = secrets.token_hex(16)  # 生成一个 32 字节的随机十六进制字符串

# MySQL database configuration
db_config = {
    'host': 'localhost',
    'user': 'your_username',
    'password': 'your_password',
    'database': 'your_database'
}

# Database initialization
def init_db():
    db = mysql.connector.connect(**db_config)
    cursor = db.cursor()
    cursor.execute('''
        CREATE TABLE IF NOT EXISTS users (
            id INT AUTO_INCREMENT PRIMARY KEY,
            username VARCHAR(255) NOT NULL,
            password VARCHAR(255) NOT NULL
        )
    ''')
    cursor.execute('''
        CREATE TABLE IF NOT EXISTS posts (
            id INT AUTO_INCREMENT PRIMARY KEY,
            user_id INT NOT NULL,
            title VARCHAR(255) NOT NULL,
            content TEXT NOT NULL,
            FOREIGN KEY (user_id) REFERENCES users(id)
        )
    ''')
    db.commit()
    db.close()

init_db()

@app.route('/')
def index():
    db = mysql.connector.connect(**db_config)
    cursor = db.cursor()
    cursor.execute('SELECT * FROM posts')
    posts = cursor.fetchall()
    db.close()
    return render_template('index.html', posts=posts)

@app.route('/profile', methods=['GET', 'POST'])
def profile():
    if 'username' not in session:
        return redirect(url_for('index'))
    
    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']
        db = mysql.connector.connect(**db_config)
        cursor = db.cursor()
        cursor.execute('INSERT INTO posts (user_id, title, content) VALUES (%s, %s, %s)', (session['user_id'], title, content))
        db.commit()
        db.close()
        return redirect(url_for('profile'))
    
    db = mysql.connector.connect(**db_config)
    cursor = db.cursor()
    cursor.execute('SELECT * FROM posts WHERE user_id = %s', (session['user_id'],))
    posts = cursor.fetchall()
    db.close()
    return render_template('profile.html', posts=posts)

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        db = mysql.connector.connect(**db_config)
        cursor = db.cursor()
        cursor.execute('SELECT * FROM users WHERE username = %s AND password = %s', (username, password))
        user = cursor.fetchone()
        db.close()
        if user:
            session['username'] = user[1]
            session['user_id'] = user[0]
            return redirect(url_for('profile'))
        else:
            return "Invalid credentials"
    return render_template('login.html')

@app.route('/logout')
def logout():
    session.pop('username', None)
    session.pop('user_id', None)
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)
当然也可以不使用数据库，而用数组储存模拟的数据：

我们用posts数组来存储我们模拟的数据，请将以下代码写入app.py文件

from flask import Flask, render_template, session, redirect, url_for, request
import secrets

app = Flask(__name__)
app.secret_key = secrets.token_hex(16)  # 生成一个 32 字节的随机十六进制字符串

# 模拟数据
posts = [
    (1, 'Author 1', 'First Post', 'This is the content for the first post.'),
    (2, 'Author 2', 'Second Post', 'This is the content for the second post.'),
]

# 主页
@app.route('/')
def index():
    return render_template('index.html', posts=posts)

# 登录视图（示例用简单的登录方式）
@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        session['username'] = request.form.get('username')
        return redirect(url_for('index'))
    return render_template('login.html')

# 个人中心
@app.route('/profile', methods=['GET', 'POST'])
def profile():
    if 'username' not in session:
        return redirect(url_for('login'))
    
    if request.method == 'POST':
        title = request.form.get('title')
        content = request.form.get('content')
        # 在此处可以添加代码将新帖子保存到数据库或列表中
        posts.append((len(posts) + 1, session['username'], title, content))

    return render_template('profile.html', posts=posts)

# 登出视图
@app.route('/logout')
def logout():
    session.pop('username', None)
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run(debug=True)
  • 设置密钥：secret_key 是用于加密 Flask 应用中的某些数据的一个字符串，特别是与用户会话相关的数据。Flask 使用这个密钥来进行数据签名（比如处理 Flask 的 session 对象时）。
  • 用户会话保护：该密钥有助于防止伪造用户会话。使用时，Flask 会对存储在会话中的数据进行签名，以防止攻击者修改会话内容。

        你并不需要知道这个密钥的具体值 ，但你有方法可以获取这个随机生成的密钥，感兴趣自己多了解了解。

3. 前端代码

基础模板 (templates/base.html)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}My Blog{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <nav>
        <a href="{{ url_for('index') }}">Home</a>
        {% if 'username' in session %}
        <a href="{{ url_for('profile') }}">Profile</a>
        <a href="{{ url_for('logout') }}">Logout</a>
        {% else %}
        <a href="{{ url_for('login') }}">Login</a>
        {% endif %}
    </nav>
    <div class="content">
        {% block content %}{% endblock %}
    </div>
</body>
</html>

首页 (templates/index.html)
{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block content %}
<h1>Welcome to My Blog</h1>
<ul>
    {% for post in posts %}
    <li>
        <h2>{{ post[2] }}</h2>
        <p>{{ post[3] }}</p>
    </li>
    {% endfor %}
</ul>
{% endblock %}

        这段代码是一个使用 Jinja2 模板引擎的 HTML 模板文件。它继承了一个名为 base.html 的基础模板，并在其中定义了两个块（title 和 content）。以下是代码的详细解释：

1. {% extends "base.html" %}

  • 作用: 这行代码表示当前模板继承自 base.html 文件。base.html 通常是一个包含网站通用结构的基础模板，比如头部、导航栏、页脚等。
  • 继承: 通过继承，当前模板可以使用 base.html 中定义的结构，并在特定位置插入自己的内容。

2. {% block title %}Home{% endblock %}

  • 作用: 这行代码定义了一个名为 title 的块，并将其内容设置为 Home。
  • 用途: 通常，title 块用于定义页面的标题，这个标题会显示在浏览器的标签栏中。

3. {% block content %} 和 {% endblock %}

  • 作用: 这行代码定义了一个名为 content 的块，并在其中插入了页面的主要内容。
  • 用途: content 块通常用于放置页面的主要内容，比如文章列表、表单等。

4. <h1>Welcome to My Blog</h1>

  • 作用: 这是一个一级标题，显示在页面的主要内容区域。

5. <ul> 和 {% for post in posts %}

  • 作用: 这是一个无序列表，用于显示文章列表。{% for post in posts %} 是一个循环语句，遍历 posts 列表中的每一项。
  • 用途: 在循环中，每一项 post 都会生成一个列表项 <li>，并显示文章的标题和内容。

6. {{ post[2] }} 和 {{ post[3] }}

  • 作用: 这些是变量插值，用于显示 post 对象的特定属性。
    • post[2] 通常表示文章的标题。
    • post[3] 通常表示文章的内容。
个人中心 (templates/profile.html)
{% extends "base.html" %}

{% block title %}Profile{% endblock %}

{% block content %}
<h1>Welcome, {{ session['username'] }}!</h1>
<form action="{{ url_for('profile') }}" method="post">
    <label for="title">Title:</label>
    <input type="text" id="title" name="title" required>
    <label for="content">Content:</label>
    <textarea id="content" name="content" required></textarea>
    <button type="submit">Post</button>
</form>
<ul>
    {% for post in posts %}
    <li>
        <h2>{{ post[2] }}</h2>
        <p>{{ post[3] }}</p>
    </li>
    {% endfor %}
</ul>
{% endblock %}

4. 静态文件 (static/style.css)

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

nav {
    background-color: #333;
    overflow: hidden;
}

nav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav a:hover {
    background-color: #ddd;
    color: black;
}

.content {
    padding: 20px;
    margin: 20px;
}

form {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input, textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

button {
    padding: 10px 20px;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #555;
}

        我暂时还没有编写login和logout的html文件，如果感兴趣可以自己先编写。不过在首页你可以直接点击profile进入个人中心，这并不影响。至于如何运行flask项目，可以在终端使用以下代码。

flask --app app run --host=0.0.0.0

5. 运行应用

  1. 确保你已经安装了Flask。如果没有，可以通过pip install flask安装。
  2. 运行app.py，访问http://127.0.0.1:5000即可看到博客首页。
  3. 登录后可以进入个人中心，发表文章。

http://www.kler.cn/news/340611.html

相关文章：

  • 【小沐学GIS】blender导入OpenTopography地形数据（BlenderGIS、OSM、Python）
  • 2024.10.9 QT事件
  • 科创集团所属园区入驻企业北京铭镓半导体获 “硬科技”潜在独角兽企业认定
  • Matlab线条设置
  • 提示工程、微调和 RAG
  • 【ROS2】geometry_msgs::msg::Twist和sensor_msgs::msg::Joy
  • ssm智能社区管理系统的设计与实现
  • Vue 3 中实现懒加载功能
  • 2020年华为杯数学建模竞赛C题论文和代码
  • 树结构Tree
  • 数据结构——排序（交换排序）
  • LabVIEW激光诱导击穿光谱识别与分析系统
  • Scrum实战中遇到的问题与解决方法
  • 算法工程师重生之第二十四天（买卖股票的最佳时机II 跳跃游戏 跳跃游戏II K次取反后最大化的数组和 ）
  • 【C语言系统编程】【第一部分：操作系统知识】1.3.实践与案例分析
  • 5G NR BWP 简介
  • Linux——磁盘分区、挂载
  • 基于深度学习的手术中的增强现实导航
  • 光路科技以技术创新为驱动，打造创新型企业新标杆
  • 从零开始：SpringBoot实现古典舞在线交流平台