搭建你的第一个 Python 网站：Django 入门实战分享

孙红_程序员

2025-06-12 17:38

阅读 289

引言：为什么我要写这篇 Django 入门教程？

作为一名在互联网公司工作的后端开发工程师，我经常接到各种各样的任务，从搭建内部工具、优化接口性能，到对接第三方系统等等。但有一个项目至今让我印象深刻 —— 那是我第一次用 Django 来搭建一个完整的网站。

事情是这样的：公司产品部门提了一个需求，希望我们快速搭建一个数据看板原型，用于展示某些业务指标的变化趋势。时间紧迫，产品说：“能用一天搞定吗？” 而我当时对 Django 只是略懂皮毛，平时主要写 Java 后台服务。可为了效率和后续的扩展性，我决定挑战一下自己，用 Django 快速搭建出这个站点。

这篇文章就是基于那次真实经历写出来的。我会以第一人称视角，带你一起从零开始，用 Django 构建一个基础网站，还会穿插讲解我在开发过程中踩过的坑、解决的问题，以及一些生产环境的经验总结。如果你是刚接触 Django 的新手，或者正在考虑入门 Python Web 开发，那么这篇文章可能会对你非常有帮助。

项目背景与问题描述：一个数据看板原型的需求

项目目标：

展示几个关键业务指标的趋势图（折线图）
支持按天、周、月维度筛选
数据来自已有的 API 接口（内部服务提供）

我当时面临的挑战：

不熟悉 Django 框架结构：虽然了解基本概念，比如 Model、View、Template，但实际操作起来总感觉找不到方向。
时间紧：需要在 1 天内交付可用版本。
前后端分离 vs 模板渲染？：选哪个方案更省事？要不要用 Vue 或 React？权衡之后选择了模板渲染，毕竟快。
如何接入现有接口？：之前都是调 RESTful 接口写 Java 客户端，第一次尝试在 Django 中进行 HTTP 请求。
部署经验不足：不知道怎么将本地跑通的服务部署到测试服务器上。
数据库是否需要同步？：是否需要使用模型？还是直接访问外部接口？

这些问题都需要一一解决。

解决思路与技术选型

技术方案概览：

模块	使用的技术
后端	Django + DRF（只用了部分）
前端	Bootstrap + ECharts
数据来源	内部 HTTP 接口
模板引擎	Django 自带的 Template 系统
部署方式	Gunicorn + Nginx

本来也想试试 Vue.js，但考虑到开发周期短、组件不多，最终选择直接在 Django 的 Template 里渲染页面内容。

整体架构图：

[浏览器] 
   ↓ 
[Django Template (HTML)] 
   ↓ 
[视图 View 函数或类] 
   ↓ 
[封装好的 API Client（requests 库）] 
   ↓ 
[其他服务返回 JSON 数据] 
   ↓ 
渲染图表

关键设计点：

轻量级框架优先：不用复杂的 ORM，避免引入不必要的 Model 层（因为数据来自外部接口，不是本地数据库）
视图函数组织清晰：采用基于函数的视图而不是类视图，方便调试
API 封装模块化：抽离接口调用逻辑，便于后期复用
图表渲染前端处理：使用 ECharts 渲染，减少后端计算压力

实战代码：从创建项目到展示第一个页面

第一步：安装并初始化项目

pip install django
django-admin startproject data_dashboard
cd data_dashboard
python manage.py startapp dashboard

别忘了在 settings.py 的 INSTALLED_APPS 添加 'dashboard'。

第二步：配置 URL 和视图函数

urls.py（整个项目的路由文件）

from django.urls import path
from dashboard.views import index

urlpatterns = [
    path('', index, name='index'),
]

views.py（简单返回一个 HTML 页面）

from django.shortcuts import render
import requests

def index(request):
    return render(request, 'index.html')

第三步：创建模板目录结构

在 dashboard 目录下新建 templates 文件夹，并添加 index.html：

dashboard/
├── templates/
│   └── index.html

然后编辑 settings.py 中的模板设置：

TEMPLATES = [
    {
        ...
        'DIRS': [BASE_DIR / "templates"],
        ...
    }
]

第四步：运行服务，查看效果

python manage.py runserver

打开浏览器输入 http://localhost:8000/，如果看到空白页面说明一切正常。

加入核心功能：数据拉取与图表渲染

第一步：封装接口请求模块

创建 api_client.py 来统一调用接口：

import requests
from datetime import datetime, timedelta

class MetricsAPIClient:
    BASE_URL = "https://internal.api.example.com/metrics"

    def get_trend(self, dimension='day', days=7):
        end = datetime.now()
        start = end - timedelta(days=days)

        params = {
            'start_date': start.strftime('%Y-%m-%d'),
            'end_date': end.strftime('%Y-%m-%d'),
            'dimension': dimension
        }

        resp = requests.get(f"{self.BASE_URL}/trend", params=params)
        if resp.status_code == 200:
            return resp.json().get('data', [])
        return []

第二步：在视图中调用并传递数据

修改 views.py：

from django.shortcuts import render
from dashboard.api_client import MetricsAPIClient

def index(request):
    client = MetricsAPIClient()
    trend_data = client.get_trend(dimension='day')

    context = {
        'trend_data': trend_data,
    }

    return render(request, 'index.html', context)

第三步：在模板中渲染 ECharts 图表

在 index.html 中加入脚本：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据看板</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
</head>
<body>
    <h1>业务指标趋势</h1>
    <div id="chart" style="width: 800px; height: 400px;"></div>

    <script>
        const chartData = {{ trend_data | safe }};

        const xAxisData = chartData.map(item => item.date);
        const seriesData = chartData.map(item => item.value);

        var myChart = echarts.init(document.getElementById('chart'));
        myChart.setOption({
            title: { text: '每日指标变化' },
            tooltip: {},
            xAxis: { type: 'category', data: xAxisData },
            yAxis: { type: 'value' },
            series: [{
                name: '指标值',
                type: 'line',
                data: seriesData
            }]
        });
    </script>
</body>
</html>

这段代码的核心是：

在模板里通过 Django 模板语法传入变量 {{ trend_data }}
在前端通过 JS 把这些数据解析成 ECharts 能理解的格式
最后绘制一张简单的折线图

踩坑经验分享：那些只有实战才知道的事儿

1. 模板中的变量不能直接作为 JSON 用！

一开始我以为把 Python 字典传给模板就能直接当 JSON 用，结果发现总是报错。

const chartData = {{ trend_data }};

这样会出错！因为 trend_data 是个 Python 列表，模板输出时会保留单引号或格式错误。解决办法是加 safe 过滤器，并确保数据结构合法：

const chartData = {{ trend_data | safe }};

当然更好的方式是在视图层先 json.dumps 一下，不过这里为了简化就用模板过滤器了。

2. 静态资源加载失败，404 错误频发

在开发环境下，我们通常直接通过 <script src="https://..."> 加载 CDN 上的 JS。但如果要用本地静态文件呢？比如放自己的 CSS、JS 文件怎么办？

这时候就需要配置 Django 的 static 设置。

解决方案：

新建 static/ 目录
修改 settings.py：

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

HTML 中使用 {% static %} 标签加载：

<script src="{% static 'js/echarts.min.js' %}"></script>

但要注意：开发环境没问题，生产环境中需要用 collectstatic 把所有静态文件收集到指定路径，否则 Nginx 找不到这些文件。

3. 使用 requests 访问内部服务超时？

有时候你会发现本地开发没问题，上线之后调外部接口就一直卡住，甚至出现 timeout。

原因可能有几个：

测试服务器网络限制，访问不了内部域名
DNS 解析失败
代理设置没有生效

解决方案：

确保线上服务器可以访问目标服务的域名/IP
使用 curl 或 wget 测试连通性
如果是内网地址，考虑做 DNS 配置或 hosts 映射
或者使用 IP 替换域名

4. 生产部署踩坑：Gunicorn + Nginx 搭配出问题

最常见问题是静态文件加载不出来、首页 404、Nginx 配置不对等。

建议做法：

使用 Gunicorn 启动 Django（如：gunicorn data_dashboard.wsgi:application）
Nginx 作为反向代理接收用户请求
静态文件路径单独由 Nginx 提供服务，不要让 Gunicorn 处理

示例 Nginx 配置：

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://127.0.0.1:8001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location /static/ {
        alias /path/to/your/static/files/;
    }
}

同时执行 python manage.py collectstatic 收集所有静态文件。

项目上线后的效果和收益

数据库设计模型-1

项目最终按时完成，在第二天晨会上成功演示，产品经理和运营都表示满意。虽然是个原型，但它展示了如下几点优势：

Django 足够灵活，可以不做 ORM，直接作为接口聚合+模板渲染工具使用
模板系统简单易用，适合中小规模的数据展示页
配合 ECharts 快速实现可视化
部署流程虽然有点门槛，但一旦掌握后就很顺畅

后续该原型被进一步演化为一个更复杂的数据分析平台，加入了权限控制、多指标切换等功能。

经验总结 & 给读者的建议

作为一名长期使用 Django 的开发者，我想给刚开始学习的朋友一些实用建议：

1. 学会“拆解需求”比掌握技术更重要

很多时候你不是不会写代码，而是不清楚该怎么下手。学会把一个模糊的功能需求拆解成若干个具体的小任务，才是解决问题的关键。

比如这个看板项目，我们可以把它拆解成：

如何获取数据？
怎么展示数据？
需要什么交互？
怎么打包上线？

每一步都可以逐步攻克。

2. 多写“最小可行代码”（MVP）

遇到新框架的时候，不要一开始就想着做一个完整的博客系统或者商城。那样很容易陷入细节而忘记主线。相反，应该专注于“我现在要做一个页面显示数据”，围绕这个目标去学相关知识即可。

3. 不怕试错，不怕重写

Django 足够灵活，你可以随时调整结构。比如我最开始尝试用类视图，后来觉得不合适又改回函数式。没关系，重构是成长的一部分。

4. 从实际项目中学 Django，比看文档更有效

文档讲的是通用逻辑，但工作中你会遇到很多文档没写的东西，比如：

怎么调试模板渲染？
请求异常该如何处理？
静态文件路径配置陷阱有哪些？
生产环境和开发环境差异大不大？

这些问题，必须在实战中才能真正理解。

5. 学会利用社区和工具

Django 有非常好的生态支持：

Django Debug Toolbar：调试神器，推荐本地开发启用
DRF（Django REST framework）：适合写 API，配合 Swagger 更佳
Django Crispy Forms：美化 form 表单样式很轻松
Django Admin：内置后台管理界面，对于需要简单 CRUD 的场景很有用

6. 当你准备深入 Django 时，这些知识点值得一看：

中间件（Middleware）机制
ORM 查询优化（select_related、prefetch_related）
缓存策略（Cache）
异步任务（Celery + Redis）
单元测试与覆盖率检查
部署最佳实践（比如 Whitenoise、Docker 化部署）

结语：Django 的魅力不止于简单

Django 给我的最大感受是：“它让你在追求效率的同时，也不失专业性和工程化。”

你可以用它快速做个 demo，也可以构建百万级流量的产品；你可以用它做传统网页，也可以做 RESTful API 接口服务；你可以用它搞 MVP 验证想法，也可以用来打造企业级应用。

这篇文章只是带你从零搭起了一个 Django 网站，但这只是一个起点。真正的精彩，是你自己动手去做一个属于你的网站，让它服务于你的业务、展现你的创意。

如果你正打算迈出这第一步，那今天就是最好的时机。

愿你在 Django 的世界里，写出优雅、高效、稳定的代码。共勉 🙌

本文作者：一名热爱后端开发的程序员，日常负责高并发系统的架构设计与落地实施。如果你也有类似经验，欢迎留言交流。

标签:Java前端

最热最新

暂无评论

为你推荐

暂无相关推荐