Django项目入门

声声codeGrandMaster2025-03-26 2:39

Django项目入门

目录

1.html模板语法继承

2.表格设计(models)

3.实现部门的添加删除功能

一、html模板语法继承

比如说, 我们想要index.html继承model_tmp.html, 我们就需要用到模板继承。

用法:

语法是{% block 自定义名称 %}, 后面再跟上{% endblock %}。

model_tmp.html文件:

html 复制代码 
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    {% block css %}
    {% endblock %}
</head>
<body>

{% block content %}
{% endblock %}
<script src="{% static 'js/jquery3.7.1.js' %}"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
{% block js %}
{% endblock %}
</body>
</html>

index.html文件:

html 复制代码 
{% extends "index/model_tmp.html" %}

{% block css %}
    <style>
        #div-i1{
            width: 200px;
            height: 200px;
            background-color: orange;
            text-align: center;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container" id="div-i1">
        <span>我是span, 是在div的盒子里面。</span>
    </div>
{% endblock %}

我们在index.html文件里面, 删除了整个html文件的内容, 只添加了{% block css %}{% endblock %}和{% block content %}{% endblock %}这两个代码段, 在index.html文件里面, block css和block content里面写的内容, 都会在model_tmp.html页面里面去展示, 因为index.html继承了model_tmp.html。所以当我们在django项目里面要访问model-tmp.html文件的时候, 网页里面的内容, 会有index.html文件里面写代码的内容。

二、表格设计

我们在做表格之前, 还是和往常一样, 创建项目。

找到你想要创建项目的目录, 创建项目命令如下:

bash 复制代码 
django-admin startproject 项目名
cd 项目名
python manage.py startapp app名

然后在pycharm里面打开项目

我们打开settings.py, 找到对应的代码, 先把app的ProjectOneConfig注册上:

然后再配置一下数据库:

配置数据库代码:

python 复制代码 
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': '28_class_03',
        'USER': 'root',
        'PASSWORD': '123456',
        'HOST': '127.0.0.1',
        'PORT': '3306',
    }
}

考虑到大家把数据库配置代码输入进去很麻烦, 所以直接写在这里面了, 里面的相关信息, 比如NAME, USER和PASSWORD等信息, 都要根据自己的情况, 来填写。还有, 要确保28_class_03这个数据库已存在。

然后我们开始创建表格, 两张表格分别是部门表和员工表:

部门表(Department):

我们打开models.py文件:

Department部门表设计:

python 复制代码 
class Department(models.Model):
    title = models.CharField(verbose_name="部门名称", max_length=255)

表结构:

ID 部门名称
1 销售部
2 财务部
3 市场部

UserInfo员工表设计:

python 复制代码 
class UserInfo(models.Model):
    name = models.CharField(verbose_name="姓名", max_length=255)
    gender_choices = (
        (1, "男"), (2, "女")
    )
    gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choices)
    salary = models.IntegerField(verbose_name="薪水")
    age = models.IntegerField(verbose_name="年龄")
    create_time = models.DateTimeField(verbose_name="入职时间")
    department = models.ForeignKey(verbose_name="部门", max_length=255, to="Department", to_field="id", on_delete=models.CASCADE, null=True, blank=True)

表结构:

ID 姓名 性别 年龄 薪水 入职时间 部门
1 张三 男 18 8000 2024-12-01 9:20:10 销售部
2 李四 女 19 10000 2024-12-02 9:10:25 财务部
3 王五 男 20 9000 2024-12-03 9:50:40 市场部

注:表里面的数据, 都是自己随便写的, 之后我们需要再django项目里面写增加部分信息的操作, 那个时候才会有信息。

UserInfo表设计, 以下的几个点需要注意:

1.gender_choices = (

(1, "男"), (2, "女")

)

这行代码, 考虑到性别只有男和女这两种结果, 所以我们直接用1表示男, 用2表示女, 在数据库存数据的过程中, 文字的大小肯定比数字要大。然后在gender对应的SmallIntegerField（短整型）里面, 需要写choices=gender_choices。

department作为外键, 对应的ForeignKey里面, to这个参数代表和哪张表关联, to_field代表关联到Department这张表的id字段。

on_delete有两种模式, 一种是级联删除, 还有一种是置空。null这个参数代表在数据库当中此字段是否允许为空, blank这个参数代表在表单验证中，这个字段是否可以为空。

models.py代码汇总:

python 复制代码 
from django.db import models


# Create your models here.
class Department(models.Model):
    title = models.CharField(verbose_name="部门名称", max_length=255)


class UserInfo(models.Model):
    name = models.CharField(verbose_name="姓名", max_length=255)
    gender_choices = (
        (1, "男"), (2, "女")
    )
    gender = models.SmallIntegerField(verbose_name="性别", choices=gender_choices)
    salary = models.IntegerField(verbose_name="薪水")
    age = models.IntegerField(verbose_name="年龄")
    create_time = models.DateTimeField(verbose_name="入职时间")
    department = models.ForeignKey(verbose_name="部门", max_length=255, to="Department", to_field="id", on_delete=models.CASCADE, null=True, blank=True)

然后在pycharm或者cmd里面找到django项目对应的目录, 输入生成数据表格的命令:

bash 复制代码 
python manage.py makemigrations

然后打开migrations文件夹, 会出现0001_initial.py这样的文件:

然后再执行以下命令:

bash 复制代码 
python manage.py migrate

执行完命令之后, 我们可以打开pycharm右边的数据库连接, 我们可以看到, 在数据库里面, 生成了很多表格:

三、实现部门的添加删除功能

我们在项目的app里面(我的项目里面的app名叫project_one)创建一个templates, 然后再里面创建两个文件夹, 分别是index和depart。

在index文件夹里面创建model_tmp.html还有index.html这两个文件。

接下来我们要写首页的内容(包括顶部导航栏和body简单部分的内容):

这就是我们大概要实现的效果图。

这个顶部导航栏, 不需要自己写代码, 在网上面有相应的代码模板, 直接可以去复制粘贴。

模板代码的网址是: https://v5.bootcss.com/

打开网页之后, 在右上角选择版本为3.4.1的版本:

然后找到上面的组件, 再点击导航条:

随后, 我们就找到了以下相关的代码:

这串代码, 就是实现example里面的内容的, 我们可以直接复制黏贴到model_tmp.html文件里面, 代码copy的同时, 我们也要相应的对数据进行修改。

model_tmp.html代码:

html 复制代码 
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    {% block css %}
    {% endblock %}
</head>
<body>
<div class="navbar navbar-default">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">管理系统</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="depart/">部门页面</a></li>
                <li class="active"><a href="#">员工页面</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">暂时保留<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Nathan<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</div>

{% block content %}
{% endblock %}
<script src="{% static 'js/jquery3.7.1.js' %}"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
{% block js %}
{% endblock %}
</body>
</html>

然后我们在index.html里面写入代码:

index.html代码:

html 复制代码 
{% extends "index/model_tmp.html" %}

{% block css %}
    <style>
        #div-i1{
            width: 200px;
            height: 200px;
            background-color: orange;
            text-align: center;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="container" id="div-i1">
        <span>我是span, 是在div的盒子里面。</span>
    </div>
{% endblock %}

接下来, 我们需要写后端的代码:

views.py代码:

python 复制代码 
from django.shortcuts import render, redirect

from project_one import models


# Create your views here.
def index(request):
    return render(request, "index/index.html")

然后, 我们需要在urls.py里面设置路由:

urls.py代码:

python 复制代码 
"""project_simple URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/4.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from project_one import views

urlpatterns = [
    path("", views.index)
]

启动后端, 访问网页url: http://localhost:8000/

最终, 我们可以看到网页运行的效果图:

注意: 在开启网页之前, 一定一定要开启后端, 千万不能忘记。还有一个很重要的，就是要把bootstrap里面的资源, 都下载下来, 然后放到项目的static文件夹里面去(static要自己手动创建)。

下载资源的办法:

打开任意浏览器, 然后再网址那栏输入以下url: http://121.40.144.4:880/bootstrap_resources.zip 。

下载好后解压缩, 然后把解压缩后的文件夹里面的四个文件夹css, fonts, img, js都放到jdango项目中的static文件夹里面去。


接下来我们需要在depart目录下创建depart.html和depart_add.html文件:

depart.html代码:

html 复制代码 
{% extends "index/model_tmp.html" %}

{% block content %}

    <div class="container">
        <a href="/depart/add/" class="btn btn-success">添加信息</a>
        <div class="panel panel-danger">
            <div class="panel-heading">
                <h3 class="panel-title">部门表</h3>
            </div>
            <div class="panel-body">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>部门</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for data in data_list %}
                        <tr>
                            <th scope="row">{{ data.id }}</th>
                            <td>{{ data.title }}</td>
                            <td style="color: green">
                                <a href=""><span style="color: green;" class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
                                <a href="/depart/{{ data.id }}/del/"><span style="color: red;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
                            </td>

                        </tr>



                    {% endfor %}

                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

这里面是展示部门信息的页面, 也包含删除数据的功能。

<td style="color: green">
<a href=""><span style="color: green;" class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
<a href="/depart/{``{ data.id }}/del/"><span style="color: red;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
</td>

我们对这段代码有所讲解:

这个td里面的第一个span标签里面的内容, 是那个铅笔图标, 将它设置为绿色, 第二个span标签里面的内容, 是那个垃圾桶图标, 将它设置为红色, 第一个图标是用来修改数据(这个功能暂时先不写), 第二个图标是用来删除本行数据的, 代码后面会写。

这个图标的来源, 还是我刚才说到的模板代码里面的资源, 模板代码的网址是: https://v5.bootcss.com/, 也是找到组件, 然后第一个翻下去就是图标内容。


两个图标分别是:

1.glyphicon glyphicon-pencil
2.glyphicon glyphicon-trash

后端代码:

views.py:

python 复制代码 
from django.shortcuts import render, redirect

from project_one import models


# Create your views here.
def index(request):
    return render(request, "index/index.html")


def depart(request):
    data_list = models.Department.objects.all()
    return render(request, "depart/depart.html", {"data_list": data_list})

def del_depart(request, nid):
    models.Department.objects.filter(id=nid).delete()
    return redirect("/depart/")

urls.py:

python 复制代码 
"""project_simple URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/4.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from project_one import views

urlpatterns = [
    # path('admin/', admin.site.urls),
    path("", views.index),
    path("depart/", views.depart),
    path("depart/<int:nid>/del/", views.del_depart)
]

注意: 前面引号里面的depart后面要加/, 否则对应的路径失效。views.index和views.depart, 后面都不要加(), 之后往这里面添加数据的时候, 也一样(比如:path("abc/", views.abc))。
views.py里面的depart方法里面的{"data_list": data_list}我要说一下, 这个是将data_list数组传给depart.html文件, 再depart.html里面使用到了{% for data in data_list %}{% endfor %}这样的写法, 那个大括号里面的data_list就是后端数据传过来的。
还有一点, 就是urls.py里面有个写法:

python 复制代码 
"depart/<int:nid>/del/"

中间的

reStructuredText 复制代码 
<int:nid>

在depart/del/路径里面传入了一个参数, 左边的int代表nid参数是整形的。

在前端里面使用<a href="/depart/{``{ data.id }}/del/"><span style="color: red;" class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>这种写法, /depart/{{ data.id }}/del/在中间添加了对应的参数, 这个参数正好是data里面的id的值。

后端的views里面的del_depart方法里面, 也要传值。
depart.html里面的内容, 全部写在了block代码块里面, 而且这个文件继承了model_tmp.html文件, 所以这个页面的内容, 会在model_tmp.html里面展示出来, 但前提是要对应到相应的地址http://localhost:8000/depart/, 就是对应的depart/这个路由。

运行结果:

接下来, 我们要写添加信息的功能。

我们打开depart_add.html

编辑代码:

html 复制代码 
{% extends "index/model_tmp.html" %}


{% block content %}
    <div class="container">
        <form method="post">
            {% csrf_token %}
            <input type="text" class="form-control" name="title" placeholder="部门">
            <button type="submit" class="btn btn-success">添加</button>
        </form>
    </div>
{% endblock %}

同样也是继承model_tmp.html。

在block里面写了网页的主体部分, 主体部分的内容是添加数据的表单。

注意:

html 复制代码 
{% csrf_token %}

这行代码必须加, 否则表单校验不成功, 会导致数据添加失败。

views.py:

python 复制代码 
from django.shortcuts import render, redirect

from project_one import models


# Create your views here.
def index(request):
    return render(request, "index/index.html") # 返回相应的页面index.html


def depart(request):
    data_list = models.Department.objects.all()
    return render(request, "depart/depart.html", {"data_list": data_list}) # 返回depart.html页面内容, 并传递参数给前端页面供前端使用


def del_depart(request, nid):
    models.Department.objects.filter(id=nid).delete() # 删除对应id号的那条数据
    return redirect("/depart/") # 删除完数据之后, 重定向/depart/路由


def add_depart(request):
    if request.method == "GET": # 请求网页一般都采用GET方法请求, 提交表单一般都用POST方法请求, 由此可见, 这个if判断是打开页面的时候, 里面的值为true, 因为我们打开页面请求网页的时候, 就会用到GET请求方法。
        return render(request, "depart/depart_add.html") # 请求网页之后, 返回相应的网页的页面depart_add.html
    title = request.POST.get("title") # 获取前端页面的name属性的值, 在前端以<input type="text" class="form-control" name="title" placeholder="部门">这样的代码展示, 这就相当于是获取输入框里面的数据。POST是请求方法, get()是获取html里面name属性值的对应标签
    models.Department.objects.create(title=title) # 新增数据
    return redirect("/depart/") # 添加完数据之后, 重定向/depart/路由

urls.py:

python 复制代码 
"""project_simple URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/4.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from project_one import views

urlpatterns = [
    # path('admin/', admin.site.urls),
    path("", views.index),
    path("depart/", views.depart),
    path("depart/add/", views.add_depart),
    path("depart/<int:nid>/del/", views.del_depart)
]

那个修改功能呢, 等之后有实战用到的时候, 再去写, 包括还有员工表的增删改查, 之后有机会再做补充。

运行结果:

首页:

点击导航栏的部门页面:

点击添加信息按钮:

填写部门信息:

点击添加按钮:

添加完数据以后, 会重定向页面.

这里面的ID号, 我是设置了自增, 由于之前有删除过数据, 所以ID值没有从0开始且不连续, 这个不必担心。

好了，这篇文章的内容到此结束了。

以上就是Django项目入门的所有内容了, 如果有哪里不懂的地方,可以把问题打在评论区, 欢迎大家在评论区交流!!!

如果我有写错的地方, 望大家指正, 也可以联系我, 让我们一起努力, 继续不断的进步.

学习是个漫长的过程, 需要我们不断的去学习并掌握消化知识点, 有不懂或概念模糊不理解的情况下,一定要赶紧的解决问题, 否则问题只会越来越多, 漏洞也就越老越大.

人生路漫漫, 白鹭常相伴!!!

相关推荐
gywl2 分钟前
【MySQL】索引 & 事务
数据库·mysql·事务·索引·隔离性
金融数据出海3 分钟前
使用Java对接印度股票数据源
后端
uhakadotcom8 分钟前
Kubernetes Ingress NGINX Controller 详解
后端·面试·github
uhakadotcom11 分钟前
代码混淆：保护软件安全的利器
后端·面试·github
aiopencode12 分钟前
android crash_log 文件分析
后端
失业写写八股文14 分钟前
如何选择栈与堆？堆跟栈的区别
java·后端
星星电灯猴17 分钟前
Flutter布局入门：新手必看教程
后端
bcbnb22 分钟前
Flutter语法资料：新手入门教程
后端
uhakadotcom22 分钟前
Kubernetes惊现9.8分核弹级漏洞！四成云环境面临被接管风险
后端·面试·github
涡能增压发动积26 分钟前
10分钟让你用SpringAI接入百度地图MCP服务
人工智能·后端
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek各版本说明与优缺点分析04本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程05本地部署DeepSeek教程（Mac版本）06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07苍穹外卖面试总结08FreeCAD傻瓜教程之创建参数化几何图形-螺旋体、平面、球体、椭球体、圆柱体、圆锥体、棱柱、椭圆09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10JS闭包不理解？一杯咖啡的时间带你轻松理解闭包！