基于Django框架的静态个人名片网站设计

Elaine3362026-06-09 11:13

基于Django框架的静态个人名片网站设计（入门）

文章目录

如果你刚开始接触 Python Web 开发，Django 毫无疑问是一个功能完备、开箱即用的强大框架。为了帮助大家快速上手，本文将通过一个非常实用的 个人名片页面 项目，带你走通 Django 的核心开发流程，深入理解其经典的 MVT（Model-View-Template） 架构。

通过本教程，我们将实现：

  • 一个结构清晰的个人名片首页。
  • 使用 SQLite 数据库存储和读取"项目经历"数据（实现 Model 层）。
  • 通过 Django 自带的 Admin 后台动态管理数据。
  • 使用 HTML 模板展示个人技能与项目（实现 Template 层）。
  • 编写视图逻辑处理数据请求（实现 View 层）。

一、什么是 MVT 模式？

在开始写代码前，我们先用一张简单的图表来理解 Django 的 MVT 模式：

层次 对应文件 职责
M (Model - 模型) models.py 负责与数据库交互，定义数据结构（ORM）。
V (View - 视图) views.py 负责核心业务逻辑。它从 Model 获取数据，并将其传递给 Template。
T (Template - 模板) index.html 负责页面渲染，将数据用 HTML+CSS 的形式展示给用户。

二、开发步骤

第一步：创建项目与应用

  • 首先，确保你的电脑中已安装 Python 和 Django。打开终端，切换到你的工作目录（例如 d:\Code\Web），运行以下命令：
bash 复制代码 
# 1. 创建名为 mycard 的 Django 项目
django-admin startproject mycard

# 2. 进入项目目录
cd mycard

# 3. 创建名为 card 的应用（App）
python manage.py startapp card

第二步：注册应用与配置

  • 打开项目配置文件 mycard/settings.py，在 INSTALLED_APPS 列表中注册我们刚刚创建的 card 应用。同时，为了更符合用户的使用习惯，我们可以顺便修改语言和时区配置：
python 复制代码 
# mycard/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'card',  # 注册 card 应用
]

# 设置为中文和东八区时区
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_TZ = True

第三步：定义 Model（数据模型）

  • 我们希望页面上的"项目经历"是可以动态维护的，而不是写死在 HTML 里。在 card/models.py 中定义一个 Project 类：
python 复制代码 
# card/models.py
from django.db import models

class Project(models.Model):
    title = models.CharField('项目名称', max_length=100)
    description = models.TextField('项目描述')
    tech_stack = models.CharField('技术栈', max_length=200)
    url = models.URLField('项目链接', blank=True, default='')
    created_at = models.DateTimeField('创建时间', auto_now_add=True)

    class Meta:
        verbose_name = '项目'
        verbose_name_plural = '项目'
        ordering = ['-created_at']  # 按创建时间倒序排列

    def __str__(self):
        return self.title

第四步：注册后台管理

  • Django 自带了一个非常强大的后台管理系统。为了能在后台管理我们刚才创建的 Project 数据，需要在 card/admin.py 中进行注册：
python 复制代码 
# card/admin.py
from django.contrib import admin
from .models import Project

@admin.register(Project)
class ProjectAdmin(admin.ModelAdmin):
    list_display = ['title', 'tech_stack', 'created_at']

第五步：执行迁移并创建管理员账号

  • 每次修改了 models.py 后，都需要通过"迁移"操作将修改应用到真实的数据库中（Django 默认使用 SQLite 数据库，会自动在项目根目录生成 db.sqlite3 文件）。

在终端中执行以下命令：

bash 复制代码 
# 生成迁移文件
python manage.py makemigrations

# 执行迁移，创建数据库表
python manage.py migrate

# 创建用于登录后台的超级用户
python manage.py createsuperuser

根据提示输入用户名、邮箱和密码（密码输入时不会显示，直接输入后回车即可）。

第六步：编写 View（视图）

  • 视图负责从数据库中获取数据，并组合一些静态信息，最后传递给前端模板。编辑 card/views.py：
python 复制代码 
# card/views.py
from django.shortcuts import render
from .models import Project

def index(request):
    """个人名片主页视图"""
    # 1. 从数据库中获取所有的项目经历
    projects = Project.objects.all()

    # 2. 定义个人基本信息（静态数据）
    profile = {
        'name': '示例',
        'title': '示例',
        'bio': '示例',
        'about': (
            '示例'
        ),
        'github': 'https://github.com/Elaine-one',
        'email': '',
        'location': '示例· 示例',
        'avatar': '',  # 留空时可在模板中展示首字母
    }

    # 3. 定义技能列表
    skills = [
        '示例',
        
    ]

    # 4. 将数据包装在 context 字典中传递给模板
    context = {
        'profile': profile,
        'skills': skills,
        'projects': projects,
    }
    return render(request, 'card/index.html', context)

第七步：配置路由（URL）

Django 采用两级路由机制，即"项目主路由"分发给"应用子路由"。

  1. 首先，在应用目录中新建子路由文件 card/urls.py：
python 复制代码 
# card/urls.py
from django.urls import path
from . import views

app_name = 'card'

urlpatterns = [
    path('', views.index, name='index'),
]
  1. 然后，配置项目的主路由 mycard/urls.py，将根路径请求引入到 card 的路由中：
python 复制代码 
# mycard/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('card.urls')),  # 包含应用的路由
]

第八步：编写 Template（模板）以下均为示例

  • 在 card 目录下创建模板文件夹，路径必须为：card/templates/card/index.html（这是 Django 的默认模板寻找约定）。

新建 index.html 并写入以下内容：

html 复制代码 
<!-- card/templates/card/index.html -->
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ profile.name }} 的个人名片</title>
    <link rel="stylesheet" href="{% static 'card/css/style.css' %}">
</head>
<body>
    <div class="card-container">
        <!-- 头部个人信息 -->
        <header class="profile-header">
            <div class="avatar">
                {% if profile.avatar %}
                    <img src="{{ profile.avatar }}" alt="{{ profile.name }}">
                {% else %}
                    <span class="avatar-letter">{{ profile.name|slice:":1" }}</span>
                {% endif %}
            </div>
            <h1>{{ profile.name }}</h1>
            <p class="subtitle">{{ profile.title }}</p>
            <p class="location">📍 {{ profile.location }}</p>
        </header>

        <!-- 关于我 -->
        <section class="section">
            <h2>关于我</h2>
            <p class="about-text">{{ profile.about }}</p>
        </section>

        <!-- 专业技能 -->
        <section class="section">
            <h2>专业技能</h2>
            <div class="skills-tags">
                {% for skill in skills %}
                    <span class="tag">{{ skill }}</span>
                {% endfor %}
            </div>
        </section>

        <!-- 项目经历（动态获取自数据库） -->
        <section class="section">
            <h2>项目经历</h2>
            <div class="projects-list">
                {% for project in projects %}
                    <div class="project-item">
                        <h3>{{ project.title }}</h3>
                        <p class="tech-stack"><strong>技术栈:</strong> {{ project.tech_stack }}</p>
                        <p class="desc">{{ project.description }}</p>
                        {% if project.url %}
                            <a href="{{ project.url }}" target="_blank" class="project-link">查看项目 →</a>
                        {% endif %}
                    </div>
                {% empty %}
                    <p class="no-data">暂无项目经历，请在 Admin 后台添加。</p>
                {% endfor %}
            </div>
        </section>

        <!-- 联系方式 -->
        <footer class="profile-footer">
            <a href="mailto:{{ profile.email }}">📧 邮件联系</a>
            <a href="{{ profile.github }}" target="_blank">💻 GitHub</a>
        </footer>
    </div>
</body>
</html>

第九步：添加静态文件

  • 在 card 目录下创建静态文件夹，路径为：card/static/card/。
  1. 新建 css/style.css 来美化我们的页面：
css 复制代码 
/* card/static/card/css/style.css */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}
.card-container {
    max-width: 600px;
    margin: 40px auto;
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.profile-header {
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}
.avatar-letter {
    display: inline-block;
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    background: #007bff;
    color: #fff;
    font-size: 36px;
    font-weight: bold;
    text-transform: uppercase;
}
.subtitle {
    color: #666;
    font-size: 1.1em;
}
.location {
    font-size: 0.9em;
    color: #888;
}
.section {
    margin-top: 25px;
}
.section h2 {
    border-left: 4px solid #007bff;
    padding-left: 10px;
    font-size: 1.3em;
    margin-bottom: 15px;
}
.tag {
    display: inline-block;
    background: #e9ecef;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.85em;
    margin: 4px;
}
.project-item {
    background: #fafafa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #eee;
}
.project-item h3 {
    margin-top: 0;
    color: #007bff;
}
.tech-stack {
    font-size: 0.9em;
    color: #555;
}
.project-link {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    color: #007bff;
    font-size: 0.9em;
}
.profile-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.profile-footer a {
    margin: 0 15px;
    text-decoration: none;
    color: #333;
}
  1. 同样地，你也可以在 card/static/card/js/script.js 中放入你的交互脚本。

三、运行与验证

  • 完成了上述步骤后，我们就可以启动 Django 的本地开发服务器来检验成果了：
bash 复制代码 
python manage.py runserver
  1. 录入数据 ：访问 http://127.0.0.1:8000/admin/，使用第 5 步创建的超级用户账号登录。点击"项目"旁边的"增加"，添加几条你的项目经历。
  1. 查看名片 ：访问 http://127.0.0.1:8000/，你将会看到一个排版整洁的个人名片页面，其中"项目经历"一栏正是你刚才在后台录入的数据。（示例）

四、总结

  • 在这篇教程中，我们通过动手实践，搭建了一个基于 Django MVT 架构的个人名片页面。这个虽然小巧但结构完整的项目，帮助我们直观地理解了 Django 的核心运行机制：
  1. 数据驱动的 Model 层：利用 Django ORM（对象关系映射），我们无需直接编写 SQL 语句，就能在 Python 代码中定义数据表结构。通过迁移工具（Migrations），数据库的创建和结构更新变得更加直观与安全。
  2. 松耦合的 Template 层：将 HTML 表现层与业务逻辑分离开来。借助 Django 模板语言（DTL），我们能够安全地渲染上下文变量、循环遍历列表，并根据条件展示不同的页面元素。
  3. 作为枢纽的 View 层：充当数据与页面之间的桥梁。它负责接收 HTTP 请求，从 Model 中检索数据，加工处理后将其传递给指定的 Template。
  4. 开箱即用的 Admin 模块：省去了自行开发后台管理系统的麻烦，通过极少的配置就能实现安全的数据增删改查功能。

下一步探索建议

如果你希望在当前名片项目的基础上继续深入学习，可以尝试以下几个方向：

  • 引入 Django 表单（Forms）：在名片页面下方增加一个"向我留言"的表单，通过 Django Forms 模块接收、校验访问者的输入并保存到数据库。
  • 数据库切换：将开发环境默认的 SQLite 数据库配置修改为更适用于生产环境的 PostgreSQL 或 MySQL，体验多数据库配置。
  • 静态文件优化 ：了解在实际部署时，如何通过配置 STATIC_ROOT 并运行 python manage.py collectstatic 命令来集中管理和分发静态资源。
  • 尝试部署上线 ：将项目代码托管至 GitHub，并尝试将其部署到免费或轻量级的云平台上，走通 Web 开发的最后一步。
  • MVT 模式是 Django 的设计基石。理解了这一套协作机制，后续在面对更复杂的业务场景时，你将能够更自如地组织代码和扩展功能。
相关推荐
道友可好1 小时前
3 个人，100 万行代码，一行都没人写：OpenAI 的 Harness Engineering 实验
前端·人工智能·后端
henrylin99992 小时前
开源量化软件功能介绍
python·开源
C+-C资深大佬2 小时前
Python 新手学习指南
开发语言·python
Yeats_Liao2 小时前
8：Servlet生命周期-Java Web
后端
嫂子的姐夫2 小时前
050-wx小程序合肥住房
爬虫·python·小程序·逆向
爱吃提升2 小时前
Python 多线程 threading + 多进程 multiprocessing 完整实操教程
开发语言·python
许彰午2 小时前
24_Java NIO核心组件
java·python·nio
Soofjan2 小时前
其它(5)：Bleve 全文检索
后端
Gopher_HBo2 小时前
Go语言学习笔记(七)并发
后端
热门推荐
01【AI】2026 年具身智能模型和世界模型总结022026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf03GitHub 镜像站点04Codex 下载安装指南：Windows 和 macOS 官方版下载052026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？06【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法07Agnes AI 全模态 API 免费实测报告：文生图 + 文生视频完整测试08CC-Switch & Claude 基于 Linux 服务器安装使用指南09AI科技热点日报 | 2026年6月1日10CC-Switch 下载、安装与使用配置指南【2026.5.29】