搭建个人主页/团队介绍页面_群晖主页html-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43369406/article/details/144492365

参考：

环境：

macOS15.2
VSCode
Anaconda
Python311

x.1 结果展示

源文件存储在https://github.com/yingmuzhi/Web

在这里插入图片描述

x.2 环境准备

工具准备

Python 3.11（Anaconda）
编辑器（VS Code）
浏览器（Chrome）

在你的工作目录下创建项目文件夹，例如 personal_website：

personal_website/
├── static/              # 静态文件夹（CSS/JS/Images）
├── templates/           # HTML 模板
├── app.py               # Flask 主程序
├── config.py            # 数据库配置
├── models.py            # 数据库模型
├── requirements.txt     # 依赖库

安装必要依赖

使用的anaconda创建的python3.11虚拟环境，

conda create --name env_cp311_web

进入虚拟环境，

conda activate env_cp311_web

安装Flask和依赖库，创建requirements.txt 文件，写入以下内容：

Flask==2.3.2
Flask-SQLAlchemy==3.0.5

安装依赖：

pip install -r requirements.txt

x.3 项目结构和代码

x.3.1 配置数据库

创建 config.py，配置 SQLite 数据库：

import os

BASE_DIR = os.path.abspath(os.path.dirname(__file__))	# BASE_DIR 变量存储了项目的根目录路径。这个路径会被用来定位数据库文件

class Config:	# Flask 应用的配置类
    SQLALCHEMY_DATABASE_URI = f"sqlite:///{os.path.join(BASE_DIR, 'personal_website.db')}"			# 数据库文件的绝对路径
    SQLALCHEMY_TRACK_MODIFICATIONS = False	# 关闭 SQLAlchemy 的修改跟踪功能, 为了提高性能

这段代码定义了一个配置类 Config，主要用于 Flask 应用的配置。它指定了一个 SQLite 数据库的位置，并设置了一些数据库相关的选项。

x.3.2 定义数据库模型

创建 models.py，定义项目模型：

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()	# 创建一个 SQLAlchemy 对象实例；db 是整个应用的数据库对象，负责管理模型和数据库的交互（如建表、查询、插入等操作）

# 定义项目模型
class Project(db.Model):	# 定义一个名为 Project 的数据库模型，这个类表示数据库中的一张表
    id = db.Column(db.Integer, primary_key=True)	# 定义模型的 id 字段
    title = db.Column(db.String(100), nullable=False)	# 定义模型的 title 字段
    description = db.Column(db.Text, nullable=False)	# 定义模型的 description 字段

    def __repr__(self):	# 定义模型的字符串表示方法；当用print输出Project实例对象调用该方法
        return f"<Project {self.title}>"

x.3.3 主程序文件

创建app.py，设置路由和后端逻辑：

from flask import Flask, render_template
from config import Config
from models import db, Project

# 创建 Flask 应用
app = Flask(__name__)	# 创建一个 Flask 应用实例；app 是整个 Web 应用的核心，用于处理请求和响应
app.config.from_object(Config)	# 将 Config 类的配置加载到 Flask 应用中；例如，设置了 SQLALCHEMY_DATABASE_URI，用于连接 SQLite 数据库；

# 初始化数据库
db.init_app(app)	# 将数据库对象（db）与 Flask 应用绑定

# 确保表在应用上下文中创建
with app.app_context():
    db.create_all()

# 路由：主页
@app.route("/")
def index():
    return render_template("index.html")	# 默认会在项目目录下的 templates 文件夹中查找模板文件

# 路由：关于页面
@app.route("/about")
def about():
    return render_template("about.html")

# 路由：项目页面
@app.route("/projects")
def projects():
    projects = Project.query.all()	# 从数据库中查询所有项目
    return render_template("projects.html", projects=projects)	# 渲染 templates/projects.html 并将项目数据传递到模板

if __name__ == "__main__":
    app.run(debug=True)	# 启动 Flask 开发服务器

补充一下路由的知识：路由是指将 URL（统一资源定位符）与对应的服务器代码逻辑关联起来的机制。它定义了当用户访问特定 URL 时，服务器应该如何处理请求，以及返回什么内容。在 Web 开发中，路由的作用是决定用户访问特定路径时，触发哪一段代码来处理该请求。

在 Flask 中，路由通过 @app.route() 装饰器实现。每个路由会绑定一个函数，当用户访问特定 URL 时，该函数会被调用，处理请求并返回响应。

x.3.4 创建前端页面

主页模板

在 templates/index.html 中编写 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的个人主页</h1>
    </header>
    <nav>
        <a href="/">主页</a>
        <a href="/about">关于我</a>
        <a href="/projects">项目</a>
    </nav>
    <section>
        <h2>你好！</h2>
        <p>我是某某，一名 Python 开发者，对 Web 开发充满热情。</p>
    </section>
</body>
</html>

about模板

templates/about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <header>
        <h1>关于我</h1>
    </header>
    <nav>
        <a href="/">主页</a>
        <a href="/about">关于我</a>
        <a href="/projects">项目</a>
    </nav>
    <section>
        <h2>你好！我是某某</h2>
        <p>
            我是一名 Python 开发者，喜欢构建简洁、高效的 Web 应用程序。
            我对以下领域感兴趣：
        </p>
        <ul>
            <li>Web 开发</li>
            <li>数据科学与分析</li>
            <li>自动化脚本开发</li>
        </ul>
        <p>在这里，你可以了解我的背景、技能以及我正在从事的项目。</p>
    </section>
    <footer>
        <p>&copy; 2024 某某个人主页</p>
    </footer>
</body>
</html>

项目页面模板

在 templates/projects.html 中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的项目</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <header>
        <h1>我的项目</h1>
    </header>
    <nav>
        <a href="/">主页</a>
        <a href="/about">关于我</a>
        <a href="/projects">项目</a>
    </nav>
    <section>
        <h2>项目列表</h2>
        <ul>
            {% for project in projects %}
            <li>
                <h3>{{ project.title }}</h3>
                <p>{{ project.description }}</p>
            </li>
            {% else %}
            <li>目前没有项目。</li>
            {% endfor %}
        </ul>
    </section>
</body>
</html>

样式文件

在 static/style.css 中：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9;
    color: #333;
}
header {
    background-color: #0078d7;
    color: #fff;
    padding: 20px;
    text-align: center;
}
nav {
    display: flex;
    justify-content: center;
    background-color: #00509e;
    padding: 10px 0;
}
nav a {
    color: #fff;
    margin: 0 15px;
    text-decoration: none;
}
nav a:hover {
    text-decoration: underline;
}
section {
    margin: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

x.4 初始化数据库和运行项目

x.4.1 初始化数据库

数据库表会自动创建，但你需要手动添加初始数据：

python
>>> from app import db, Project
>>> with app.app_context():
    	db.create_all()  # 创建数据库表
    	project1 = Project(title="个人博客", description="一个展示文章的网站")
    	project2 = Project(title="代码托管平台", description="一个简单的代码管理服务")
    	db.session.add_all([project1, project2])
    	db.session.commit()
>>> exit()

x.4.2 启动项目

python app.py

x.4.3 测试页面

	•	打开浏览器访问：
	•	http://127.0.0.1:5000/：主页
	•	http://127.0.0.1:5000/about：关于页面
	•	http://127.0.0.1:5000/projects：项目页面

x.5 下一步扩展

	•	部署项目：使用平台如 Heroku 或 PythonAnywhere 将项目部署到线上。
	•	增加动态内容：添加联系表单，允许用户留言。
	•	美化页面：使用 Bootstrap 或 Tailwind CSS。