Django模子使用和前后端交互

灌篮少年 · 2025-3-9 09:05:45

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

一，前后端交互的先容

一般我们在一个页面里面展示的一些文字或者视频图片信息，要么是来自我们在该页面里面写的死代码，或者我们也可以通过请求接口的方式从我们的后端数据库里面去提取我们想要的信息，文字图片等，以是该篇文章重要是学习django的框架开辟后端，以及我们的前后端交互。
下面是关于前后端交互的逻辑示意图：

从上面来看，在一个项目中，后端是起着非常重要的作用的。
比如说，我们这次的练习内容是某者光彩的一个英雄页面，我们需要向我们的后端请求相干的英雄数据，我们的大致逻辑如下：

，怎么来的，怎么返回。
二，后端开辟框架

我们学习后端并非是从底层一步一步开始写的，我们多是使用前人给我们写好后的后端框架。如许可以节省很多的时间和精力，我们要做的只是学会熟悉和熟练这些框架。
1，Django框架先容：

高级的Python Web开辟框架，已成为全球最流行的Python Web开辟框架之一。python web 就是通过python编程语言实现网站的开辟

2，Django框架的特性

ORM体系（python代码-一个类）：用我们的python代码来操纵我们的数据库，不需要写贫苦的SQL语句了。
其次是它可以生成一个自动化的管理界面（我们不需要单独去写）。
支持多种数据库，sqlite MySQL等、

因为django较为复杂，以是其灵活性不如flask。
三，构建项目

步骤：
（1）安装django：

pip install django==4.1.3
（2）创建文件并打开：

先创建一个django文件，并打开此窗口（存储）
下面的路径都是可更改的，我们可以写相应的路径，然后项目名。

（3）创建应用：

打开终端，然后实行指令：
python manage.py startapp 应用名

（4）修改设置文件

1，将我们创建的应用名添加到项目setting里面的installed_apps里面：

2，修改我们的时区和语言（因为这个是外国佬的服务器）

一些文件的先容：

setting设置项就像是插头，我们在交互时要想不堕落，我们的插头尺寸等都要对应，否则我们就得不到我们想要的功能。
urls是我们路由的设置项。
templates里面是放我们的html文件的，如许我们的django就能访问其中的信息了。
manage.py是负责管理我们的manage命令的。
项目文件的migrations是记录我们的项目数据变更。
admin是记录我们管理员数据的。
models是我们书写创建表的一些代码的地方。
views是管我们的函数的。
四，模子

里面django里面的模子来完成我们的一些想要的功能：设置表结构，数据操纵。优点：只是python代码，无SQL语句。
1，构建表

1，打开models文件然后输入下列代码：

from django.db import models
2，设置类名和表的列名：

hero右括号里面是我们需要用的模子。

3，现在来写表名的一些属性的类：

4，设置我们的返回值：

设置目的：使我们的数据可以或许被查询到；
代码：

def __str__(self):
return f'{self.name,self.type,self.data,self.skin}'

复制代码

注意：我们的f'{}'是使我们的self成为形参。否则无法查询。
以是，综上，我们创建表的过程就是如下图：

先设列名和一些属性，然后设表名，末了返回值。（注意格式即可）
5，记录改动数据，生成迁移文件：

大致意思：我们假如需要对我们的数据库进行修改，而我们现在创建的文件就负责装载我们的修改操纵，可以看成快递的作用。
语法：python manage.py makemigrations 应用名称

6，将迁移文件数据保存到数据库；（趁便帮我们把表建立，因为我们刚开始没建）

python manage.py migrate

这里全是ok，表示我们的数据改动比力成功。
打开数据库后。我们就可以看到我们创建的表了。
同时，以下的表是我们django创建数据库所附带的表，存储管理员等一些用户信息等等。

2，数据的增删改查

使用调试工具，编写python代码；
启动：python manage.py shell
（1）数据添加：

书写代码：
from 应用名.models import 类名 -----导入类

hero_data=[ ----需要添加的数据

Hero(name='花木兰', type='战式', data='生存本领55%:攻击伤害75%:技能效果51%:上手难度82%', skin='燃星之曲:http://xx.yy.zz/rxzq.png'),

Hero(name='镜', type='刺客', data='生存本领22%:攻击伤害55%:技能效果93%:上手难度54%', skin='破镜之刃:http://xx.yy.zz/pjzr.png')

]

Hero.objects.bulk_create(hero_data) ----实行添加操纵

（2）数据修改：

书写代码：

up=Hero.objects.get(条件)

up.需要修改的模块 ="需要修改的内容"

up.save() --保存操纵

（3）数据删除：

代码：
de=Hero.objects.get(条件) ---先查找
de.delete() ---实行删除
（4）查找数据：

<1>查找全部：

代码：
Hero.objects.all()
<2>按照条件查找：

代码：
Hero.object.filter(条件)

注意：我们查找并返还的数据是个结果集，我们不能直接使用，需要使用循环去提取里面的内容。
五，模板 --前端获取后端信息

（1）模板语法-变量：

变量语法1：{{ 变量名 }}

html代码使用模板语法：

补充一些设置项：

设置相应函数，使得我们的前端可以或许拿到我们后端的数据，就是使以上的代码有用。

我们先写一些死数据做示范：

html网页最初代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀英雄信息</title>
<style>
*{
margin: 0;
}
body{
/* 注意这个图片的位置一定要写对，..是从当前文件所在目录（templates）返回上级目录（mydjango），然后从mydjango目录中找到media文件夹并进入，然后再找到hero-hml.png这个图片 */
background-image: url('../media/hero-hml.png');
background-size: 1920px 800px;
}
.skin-name{
color: #FFD700;
font-size: 25px;
font-weight: 600;
margin-top: 150px;
margin-left: 375px;
}
.hero-name{
color: white;
font-size: 50px;
font-weight: 800;
margin-left: 370px;
}
.hero-type{
margin-top: 16px;
font-size: 28px;
color: white;
margin-left: 450px;
}
.hero-sx{
font-size: 18px;
color: white;
margin-left: 480px;
margin-top: 150px;
}
p{
padding-top: 5px;
padding-bottom: 5px;
}
.hero-skin{
color: white;
margin-left: 650px;
margin-top: 170px;
font-size: 14px;
}
.hero-bottom{
left: 0;
position: fixed;
bottom: 0;
display: flex;
background-color: black;
width: 1920px;
height: 153px;
opacity: 0.93;
}
</style>
</head>
<body>
<div class="skin-name"></div>
<div class="hero-name"></div>
<div class="hero-type"></div>
<div class="hero-sx"></div>
<div class="hero-skin"></div>
<div class="hero-bottom"></div>
</body>
</html>

复制代码

这个

我们事先得先将我们的html网页文件放在templates里面，然后：

在settings里面我们的背景图片访问设置代码：

然后再给我们的访问设置路由：

现在项目文件里面找到urls文件打开后设置以下：

下面if语句的意思是假如是开辟模式走下面：加载settings里面设置的MEDIA_ROOT。这是我们处理静态文件所用的。

在views文件里面书写以下代码：

def wz_hero_data(request):
name = "花木兰"
type = "战士"
data = "生存能力15%:攻击伤害99%:技能效果30%:上手难度36%"
skin = "电玩小子:http://xx.yy.zz/dwxz.png"
return render(request,"index.html",{
"name":name,
"type":type,
"data":data,
"skin":skin,
})

复制代码

request是我们的请求，这是我们传输死数据的固定写法。

然后接下来在应用的urls里面书写以下的代码；

from django.urls import path
from .views import wz_hero_data
urlpatterns = [path('hero',wz_hero_data)]

复制代码

这是我们的二级路由

以上都是固定写法，一般我们不做更改的。

实行服务的命令：

python manage.py runserver 8126 ----背面的数字的自己写

访问：http://127.0.0.1:8126/detail/hero

我们实行完上面的实行服务命令会出现下述环境：

下面是我们的访问路径；

我们打开了以下的路径后展示的是404，缘故原由如下：

以是我们访问：

http://127.0.0.1:8166/data/hero 就可以得到我们的网页。

做完了准备工作就是往里面填信息了。

我们接着来运用我们的模板语法来书写网页内容：

我们直接如许套用模板语法就可以了：

变量语法2：{{ 变量名.key }}

这种语法适用于我们的字典格式，提取里面的key值的作用，比如：

与之前的代码效果雷同。这种写法的好处是我们可以节省一些空间，同时在一个字典里面提取所需项。
（2）django模板语法-标签

1，标签语法1：if判定

{% if 条件表达式1 %}
……
{% elif 条件表达式2 %}
……
{% elif 条件表达式3 %}
……
{% else %}
……
{% endif %} ---结束我们的if语句，这句必须写。
例子：

前后端不分离写法，否则我们是额外写js代码。
2.标签语法2：for循环

{% for 变量 in 可迭代对象 %}
…… 循环体
{% endfor %} ---这个跟if一样，不能丢

注意：我们的<p>标签是不会偕行展示的，以是我们使用标签是用于换行的。然后假如我们的可迭代对象是字符串，那么我们的每一个字符都是一个循环变量，会有很多哦。
3，标签语法3：for 循环
for循环的特殊环境：循环变量为空时：
{% for 变量 in 可迭代对象 %}
…… 循环体
{% empty %}
可迭代对象没有数据时表现的信息，列表为空
{% endfor %}

3，forloop变量