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

一、环境准备必做1. 检查 Python 环境运行# 检查Python版本建议3.8 python --version # 安装Django pip install django4.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.BigAutoField2. 全局路由文件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, nameverify), # 个人主页 path(home/, views.home_page, namehome), ]3. 数据模型文件my_profile/models.py运行from django.db import models # 个人主页核心信息 class PersonalProfile(models.Model): name models.CharField(max_length50, verbose_name姓名) occupation models.CharField(max_length100, verbose_name职业/年级) phone models.CharField(max_length11, verbose_name手机号) email models.EmailField(verbose_name邮箱) bio models.TextField(verbose_name个人简介) research models.TextField(verbose_name研究方向) current_course models.CharField(max_length100, verbose_name当前课程) def __str__(self): return self.name class Meta: verbose_name 个人主页信息 verbose_name_plural 个人主页信息 # 学员 class Student(models.Model): name models.CharField(max_length50, verbose_name学员姓名) student_id models.CharField(max_length20, verbose_name学号, uniqueTrue) major models.CharField(max_length100, 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_length50, verbose_name学生姓名) title models.CharField(max_length50, verbose_name年级) department models.CharField(max_length100, verbose_name所属院系) office models.CharField(max_length50, verbose_name宿舍号) phone models.CharField(max_length11, verbose_name联系电话) def __str__(self): return self.name class Meta: verbose_name 学生信息 verbose_name_plural 学生信息 # 访问日志记录谁访问了哪个页面 class VisitLog(models.Model): ip_address models.CharField(max_length50, verbose_name访问IP) user models.CharField(max_length50, verbose_name访问用户名, blankTrue) page models.CharField(max_length100, verbose_name访问页面) visit_time models.DateTimeField(auto_now_addTrue, 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_length100, verbose_name课程名称) code models.CharField(max_length20, verbose_name课程编号, uniqueTrue) 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(namename, current_coursecourse) # 验证成功跳转到个人主页传递数据 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 langzh-CN head meta charsetUTF-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 classverify-box h2个人主页访问验证/h2 !-- 错误提示 -- {% if error %} p classerror{{ error }}/p {% endif %} !-- 验证表单 -- form methodPOST {% csrf_token %} !-- Django必加的CSRF防护 -- div classform-group label forname姓名/label input typetext idname namename required placeholder请输入姓名 /div div classform-group label forcourse当前课程/label select idcourse namecourse required option value请选择课程/option option value大语言模型大语言模型/option /select /div button typesubmit classsubmit-btn验证并进入/button /form /div /body /html7. 个人主页模板templates/home.html预览!DOCTYPE html html langzh-CN head meta charsetUTF-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 classheader h1{{ profile.name }} 的个人主页/h1 p{{ profile.occupation }}/p /div div classcontainer div classcard h3基本联系方式/h3 p 手机号{{ profile.phone }}/p p 邮箱{{ profile.email }}/p /div div classcard h3个人简介/h3 p{{ profile.bio }}/p /div div classcard h3研究方向/h3 p{{ profile.research }}/p /div div classcard h3当前课程/h3 p{{ profile.current_course }}/p /div a href/ classback-btn返回验证页/a /div {% else %} !-- 无数据时提示 -- div classno-data p暂无个人信息请先在后台添加数据/p a href/admin/ classback-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 # 邮箱可选如admintest.com # 密码至少8位如Admin123! # 确认密码重复上面的密码步骤 5添加测试数据运行# 启动开发服务器 python manage.py runserver访问后台http://127.0.0.1:8000/admin/用刚创建的超级管理员账号登录点击「个人主页信息」→「增加」填入你的信息表格字段内容姓名张斯羽职业 / 年级2023 级高校学生手机号[phone]邮箱zhangsiyu0066gmail.com个人简介努力搬砖的大学生环游世界的探险者。研究方向大语言模型、计算机视觉、机器学习、深度学习、数学建模当前课程大语言模型点击「保存」按钮。步骤 6测试访问访问验证页http://127.0.0.1:8000/输入姓名北冥有羽选择课程大语言模型 → 点击「验证并进入」成功跳转到个人主页显示所有数据库中的信息直接访问个人主页http://127.0.0.1:8000/home/后台修改数据回到 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