一、环境准备（必做）

1. 检查 Python 环境

运行

# 检查Python版本（建议3.8+）
python --version
# 安装Django
pip install django==4.2.10  # 稳定版本，避免兼容性问题

2. 项目目录结构（最终效果）

personal_site/          # 项目根目录
├── manage.py           # Django核心文件
├── personal_site/      # 项目配置目录
│   ├── __init__.py
│   ├── settings.py     # 项目配置
│   ├── urls.py         # 全局路由
│   ├── asgi.py
│   └── wsgi.py
├── my_profile/            # 应用目录
│   ├── __init__.py
│   ├── admin.py        # 后台配置
│   ├── apps.py
│   ├── migrations/     # 数据库迁移文件
│   ├── models.py       # 数据模型
│   ├── tests.py
│   └── views.py        # 视图函数
└── templates/          # 模板目录
    ├── verify.html     # 验证页面
    └── home.html       # 个人主页

二、完整代码文件（按文件复制）

1. 项目配置文件：personal_site/settings.py

运行

import os
from pathlib import Path

# 项目根目录
BASE_DIR = Path(__file__).resolve().parent.parent

# 安全密钥（开发环境可直接用，生产环境需修改）
SECRET_KEY = 'django-insecure-abc1234567890'

# 调试模式（开发环境开启）
DEBUG = True

# 允许访问的主机
ALLOWED_HOSTS = ['127.0.0.1', 'localhost']

# 已安装的应用
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'profile',  # 注册profile应用
]

# 中间件
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

# 根路由配置
ROOT_URLCONF = 'personal_site.urls'

# 模板配置
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],  # 模板目录
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

# WSGI配置
WSGI_APPLICATION = 'personal_site.wsgi.application'

# 数据库配置（默认SQLite，无需额外安装）
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

# 密码验证
AUTH_PASSWORD_VALIDATORS = [
    {'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator'},
    {'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator'},
    {'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator'},
    {'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator'},
]

# 语言和时区
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_TZ = True

# 静态文件（CSS/JS/图片）
STATIC_URL = 'static/'

# 默认主键字段类型
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

2. 全局路由文件：personal_site/urls.py

运行

from django.contrib import admin
from django.urls import path
from my_profile import views  # 导入my_profile应用的视图

urlpatterns = [
    # 后台管理页面
    path('admin/', admin.site.urls),
    # 验证页面（默认首页）
    path('', views.verify_page, name='verify'),
    # 个人主页
    path('home/', views.home_page, name='home'),
]

3. 数据模型文件：my_profile/models.py

运行

from django.db import models

# 个人主页核心信息
class PersonalProfile(models.Model):
    name = models.CharField(max_length=50, verbose_name="姓名")
    occupation = models.CharField(max_length=100, verbose_name="职业/年级")
    phone = models.CharField(max_length=11, verbose_name="手机号")
    email = models.EmailField(verbose_name="邮箱")
    bio = models.TextField(verbose_name="个人简介")
    research = models.TextField(verbose_name="研究方向")
    current_course = models.CharField(max_length=100, verbose_name="当前课程")

    def __str__(self):
        return self.name
    class Meta:
        verbose_name = "个人主页信息"
        verbose_name_plural = "个人主页信息"

# 学员
class Student(models.Model):
    name = models.CharField(max_length=50, verbose_name="学员姓名")
    student_id = models.CharField(max_length=20, verbose_name="学号", unique=True)
    major = models.CharField(max_length=100, verbose_name="专业")
    join_date = models.DateField(verbose_name="入学时间")

    def __str__(self):
        return self.name
    class Meta:
        verbose_name = "学员"
        verbose_name_plural = "学员"

# 学生信息
class Teacher(models.Model):
    name = models.CharField(max_length=50, verbose_name="学生姓名")
    title = models.CharField(max_length=50, verbose_name="年级")
    department = models.CharField(max_length=100, verbose_name="所属院系")
    office = models.CharField(max_length=50, verbose_name="宿舍号")
    phone = models.CharField(max_length=11, verbose_name="联系电话")

    def __str__(self):
        return self.name
    class Meta:
        verbose_name = "学生信息"
        verbose_name_plural = "学生信息"

# 访问日志（记录谁访问了哪个页面）
class VisitLog(models.Model):
    ip_address = models.CharField(max_length=50, verbose_name="访问IP")
    user = models.CharField(max_length=50, verbose_name="访问用户名", blank=True)
    page = models.CharField(max_length=100, verbose_name="访问页面")
    visit_time = models.DateTimeField(auto_now_add=True, verbose_name="访问时间")

    def __str__(self):
        return f"{self.ip_address} - {self.page}"
    class Meta:
        verbose_name = "访问日志"
        verbose_name_plural = "访问日志"

# 课程
class Course(models.Model):
    name = models.CharField(max_length=100, verbose_name="课程名称")
    code = models.CharField(max_length=20, verbose_name="课程编号", unique=True)
    credit = models.FloatField(verbose_name="学分")
    description = models.TextField(verbose_name="课程简介")

    def __str__(self):
        return self.name
    class Meta:
        verbose_name = "课程"
        verbose_name_plural = "课程"

4. 后台配置文件：my_profile/admin.py

运行

from django.contrib import admin
from .models import PersonalProfile, Student, Teacher, VisitLog, Course

# 注册原有模型
@admin.register(PersonalProfile)
class PersonalProfileAdmin(admin.ModelAdmin):
    list_display = ('name', 'occupation', 'phone', 'email')

# 注册新增模型1：学员
@admin.register(Student)
class StudentAdmin(admin.ModelAdmin):
    list_display = ('name', 'student_id', 'major', 'join_date')
    search_fields = ('name', 'student_id')

# 注册新增模型2：学生信息
@admin.register(Teacher)
class TeacherAdmin(admin.ModelAdmin):
    list_display = ('name', 'title', 'department', 'phone')
    search_fields = ('name', 'department')

# 注册新增模型3：访问日志
@admin.register(VisitLog)
class VisitLogAdmin(admin.ModelAdmin):
    list_display = ('ip_address', 'page', 'visit_time')
    readonly_fields = ('ip_address', 'user', 'page', 'visit_time') # 只读，不能手动修改
    search_fields = ('ip_address',)

# 注册新增模型4：课程
@admin.register(Course)
class CourseAdmin(admin.ModelAdmin):
    list_display = ('name', 'code', 'credit')
    search_fields = ('name', 'code')

5. 视图函数文件：my_profile/views.py

运行

from django.shortcuts import render
from .models import PersonalProfile  # 导入个人信息模型

# 页面1：访问验证页（默认首页）
def verify_page(request):
    # 如果是POST请求（提交验证表单）
    if request.method == "POST":
        # 获取表单提交的姓名和课程
        name = request.POST.get("name")
        course = request.POST.get("course")
        try:
            # 从数据库查询匹配的信息
            profile = PersonalProfile.objects.get(name=name, current_course=course)
            # 验证成功，跳转到个人主页（传递数据）
            return render(request, "home.html", {"profile": profile})
        except PersonalProfile.DoesNotExist:
            # 验证失败，返回验证页并提示错误
            return render(request, "verify.html", {"error": "验证失败！请检查姓名和课程是否正确"})
    # GET请求：直接返回验证页
    return render(request, "verify.html")

# 页面2：个人主页
def home_page(request):
    # 从数据库获取第一条个人信息（如果有多个，可扩展为按条件查询）
    try:
        profile = PersonalProfile.objects.first()
    except:
        profile = None
    # 渲染个人主页，传递数据库数据
    return render(request, "home.html", {"profile": profile})

6. 验证页面模板：templates/verify.html

预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>访问验证 - 张斯羽的个人主页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        body {
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .verify-box {
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            width: 400px;
        }
        .verify-box h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }
        .form-group input, .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
        }
        .submit-btn {
            width: 100%;
            padding: 12px;
            background-color: #6a5acd;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 10px;
        }
        .submit-btn:hover {
            background-color: #55489d;
        }
        .error {
            color: red;
            text-align: center;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="verify-box">
        <h2>个人主页访问验证</h2>
        <!-- 错误提示 -->
        {% if error %}
        <p class="error">{{ error }}</p>
        {% endif %}
        <!-- 验证表单 -->
        <form method="POST">
            {% csrf_token %}  <!-- Django必加的CSRF防护 -->
            <div class="form-group">
                <label for="name">姓名：</label>
                <input type="text" id="name" name="name" required placeholder="请输入姓名">
            </div>
            <div class="form-group">
                <label for="course">当前课程：</label>
                <select id="course" name="course" required>
                    <option value="">请选择课程</option>
                    <option value="大语言模型">大语言模型</option>
                </select>
            </div>
            <button type="submit" class="submit-btn">验证并进入</button>
        </form>
    </div>
</body>
</html>

7. 个人主页模板：templates/home.html

预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ profile.name }}的个人主页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        body {
            background-color: #f8f8f8;
            color: #333;
        }
        .header {
            background-color: #6a5acd;
            color: white;
            padding: 30px;
            text-align: center;
        }
        .header h1 {
            font-size: 32px;
            margin-bottom: 10px;
        }
        .header p {
            font-size: 18px;
            opacity: 0.9;
        }
        .container {
            max-width: 1000px;
            margin: 30px auto;
            padding: 0 20px;
        }
        .card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
            padding: 25px;
            margin-bottom: 20px;
        }
        .card h3 {
            color: #6a5acd;
            margin-bottom: 15px;
            font-size: 20px;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }
        .card p {
            font-size: 16px;
            line-height: 1.6;
            color: #666;
            margin-bottom: 10px;
        }
        .back-btn {
            display: inline-block;
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #6a5acd;
            color: white;
            text-decoration: none;
            border-radius: 5px;
        }
        .back-btn:hover {
            background-color: #55489d;
        }
        .no-data {
            text-align: center;
            padding: 50px;
            color: #999;
            font-size: 18px;
        }
    </style>
</head>
<body>
    {% if profile %}
    <!-- 有数据时显示个人主页 -->
    <div class="header">
        <h1>{{ profile.name }} 的个人主页</h1>
        <p>{{ profile.occupation }}</p>
    </div>
    <div class="container">
        <div class="card">
            <h3>基本联系方式</h3>
            <p>📱 手机号：{{ profile.phone }}</p>
            <p>📧 邮箱：{{ profile.email }}</p>
        </div>
        <div class="card">
            <h3>个人简介</h3>
            <p>{{ profile.bio }}</p>
        </div>
        <div class="card">
            <h3>研究方向</h3>
            <p>{{ profile.research }}</p>
        </div>
        <div class="card">
            <h3>当前课程</h3>
            <p>{{ profile.current_course }}</p>
        </div>
        <a href="/" class="back-btn">返回验证页</a>
    </div>
    {% else %}
    <!-- 无数据时提示 -->
    <div class="no-data">
        <p>暂无个人信息，请先在后台添加数据！</p>
        <a href="/admin/" class="back-btn">前往后台添加</a>
    </div>
    {% endif %}
</body>
</html>

三、分步执行操作（关键步骤）

步骤 1：创建项目和应用

运行

# 1. 创建项目
django-admin startproject personal_site

# 2. 进入项目目录
cd personal_site

# 3. 创建profile应用
python manage.py startapp my_profile

# 4. 创建templates模板目录
mkdir templates

步骤 2：复制代码文件

  • 将上面的代码按文件名对应复制到项目目录中（覆盖默认生成的文件，注意备份）。

步骤 3：数据库迁移（创建表）

运行

# 1. 生成迁移文件（根据models.py创建表结构）
python manage.py makemigrations

# 2. 执行迁移（创建SQLite数据库表）
python manage.py migrate

步骤 4：创建超级管理员（后台登录用）

运行

python manage.py createsuperuser
# 按提示输入：
# 用户名（如：admin）
# 邮箱（可选，如：admin@test.com）
# 密码（至少8位，如：Admin123!）
# 确认密码（重复上面的密码）

步骤 5：添加测试数据

运行

# 启动开发服务器
python manage.py runserver
  • 访问后台：http://127.0.0.1:8000/admin/
  • 用刚创建的超级管理员账号登录
  • 点击「个人主页信息」→「增加」，填入你的信息：

    表格

    字段 内容
    姓名 张斯羽
    职业 / 年级 2023 级高校学生
    手机号 12345678901
    邮箱 zhangsiyu0066@gmail.com
    个人简介 努力搬砖的大学生，环游世界的探险者。
    研究方向 大语言模型、计算机视觉、机器学习、深度学习、数学建模
    当前课程 大语言模型
  • 点击「保存」按钮。

步骤 6：测试访问

  1. 输入姓名：北冥有羽，选择课程：大语言模型 → 点击「验证并进入」
  2. 成功跳转到个人主页，显示所有数据库中的信息

  1. 直接访问个人主页：http://127.0.0.1:8000/home/
  2. 后台修改数据：回到 admin 页面，修改任意字段（如个人简介），保存后刷新个人主页，数据会实时更新（动态效果）。

四、常见问题解决

1. 报错：CSRF token missing or incorrect

  • 原因：表单未加{% csrf_token %}
  • 解决：检查 verify.html 中的表单是否包含该标签。

2. 后台看不到「个人主页信息」

  • 原因：未注册模型到 admin
  • 解决：检查 profile/admin.py 是否正确注册了 PersonalProfile 模型。

3. 页面样式错乱

  • 原因：CSS 路径或语法错误
  • 解决：复制上面的完整 CSS 代码，确保没有遗漏。

五、总结

1. 核心逻辑：通过 Django 模型将个人信息存入数据库，视图从数据库读取数据并渲染到模板，实现动态页面（后台修改数据，前端实时更新）。

2. 关键步骤：创建项目→定义模型→数据库迁移→配置后台→编写视图和模板→测试访问。

3. 核心文件：models.py（数据结构）、views.py（业务逻辑）、verify.html/home.html（前端页面）、urls.py（路由配置）。

【附页】

personal_site: 本代码仓库主要内容包括：1) 环境准备与项目目录结构；2) 核心配置文件说明；3) 数据模型设计（个人信息、学生、课程等）；4) 后台管理配置；5) 视图函数实现验证逻辑；6) 前端模板设计（验证页和个人主页）；7) 分步操作指南（创建项目、数据库迁移、添加测试数据等）。该方案实现了动态数据展示功能，通过后台修改数据可实时更新前端页面，适合用于构建个人学术主页或作品集网站。https://gitee.com/Zhang-Siyu0066/personal_site

# sqlite # 数据库 # python # 后端 # 编辑器 # django
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

Anthropic深度解析

avatar AtomGit开源社区
cover

AI时代代码安全新挑战：Claude Code几分钟内发现Vim与Emacs RCE 0Day漏洞

avatar AtomGit开源社区
cover

动态权限渲染：前后端RBAC个人项目经验分享

avatar AtomGit开源社区