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

Django个人主页网站搭建全指南

news 2026/3/27 9:24:43

一、环境准备（必做）

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：测试访问

  • 访问验证页：http://127.0.0.1:8000/
  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

http://www.jsqmd.com/news/497652/

相关文章：

  • ### 2. `isTransformResponse: true` 或不设置时（默认） 返回的是转换后的数据，通常是 `res.data` 的内容：
  • 列表推导式详解与实战应用
  • 基于springboot“茶见”在线商城设计与开发(源码+精品论文+答辩PPT等资料)
  • 第 18 篇 综合项目实战：基于 RK3568 的安卓智能门禁系统，全栈开发
  • 《我从达尔文那里学到的投资知识》
  • 力扣 hot100 滑动窗口最大值 单调双端队列 java 简单题解
  • 金融交易系统高可用测试指南：构建永不宕机的安全防线
  • SGI备份还原单文件版
  • 天地图中使用html2canvas问题
  • Zen Browser：基于 Firefox 的极简开源浏览器，隐私与速度兼得
  • Linux系统文件操作简介
  • OpenClaw 核心功能解析：一文让你彻底搞懂 OpenClaw
  • Win 32 API：初步了解与应用
  • 2026年SCI论文降AI率用什么工具？实测5款后选了这个
  • 4K型护套连接器ZE0703-09（250）参数
  • hello-agent task01打卡
  • PDF文件拆分， 不限制文件大小
  • 携程任我行礼品卡回收秒变现攻略 - 京顺回收
  • 任务栏标语图片
  • 加一 - 题目笔记
  • MySQL主键设计原则与自增ID的潜在问题分析
  • 自动化测试常用函数（元素的定位）
  • 技术分享-日志链路追踪
  • 龙虾智能体不是玩具！国家安全部提醒：这3个防护步骤必做
  • （独自升级Lv.1）C++基础面试题
  • 从零学网安第四期--在kali里面制作木马程序并实现远程控制
  • 238. 除了自身以外数组的乘积
  • 自动驾驶购物车测试：超市里的交通拥堵难题——软件测试工程师的实战解构
  • 《MySQL数据库基础》4. 数据类型
  • 别再花冤枉钱了！强推10款国内免费降AI神器，一键破解论文AIGC难题（附传送门）