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项目入门的所有内容了, 如果有哪里不懂的地方,可以把问题打在评论区, 欢迎大家在评论区交流!!!

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

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

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

相关推荐
Piper蛋窝4 分钟前
我所理解的 Go 的 `panic` / `defer` / `recover` 异常处理机制
后端·go
clk660741 分钟前
Spring Boot
java·spring boot·后端
秃头摸鱼侠1 小时前
MySQL查询语句（续）
数据库·mysql
睡觉待开机1 小时前
6. MySQL基本查询
数据库·mysql
皮皮高1 小时前
itvbox绿豆影视tvbox手机版影视APP源码分享搭建教程
android·前端·后端·开源·tv
弱冠少年1 小时前
golang入门
开发语言·后端·golang
Humbunklung2 小时前
Rust 函数
开发语言·后端·rust
喜欢踢足球的老罗2 小时前
在Spring Boot 3.3中使用Druid数据源及其监控功能
java·spring boot·后端·druid
jakeswang2 小时前
StarRocks
后端·架构
龙云飞谷2 小时前
从原理到调参，小白也能读懂的大模型微调算法Lora
后端
热门推荐
01基于STM32的智能电池管理系统02KGG转MP3工具|非KGM文件|解密音频03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04海康Visionmaster-常见问题排查方法-启动阶段05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！07VMware虚拟机安装Win7专业版保姆级教程（附镜像包）08DeepSeek各版本说明与优缺点分析09组基轨迹建模 GBTM的介绍与实现（Stata 或 R）10神经网络架构KAN确实具有一些独特的特点及底层原理和应用场景