一，前后端交互的介绍
一般我们在一个页面里面展示的一些文字或者视频图片信息，要么是来自我们在该页面里面写的死代码，或者我们也可以通过请求接口的方式从我们的后端数据库里面去提取我们想要的信息，文字图片等，所以该篇文章主要是学习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代码使用模板语法：
<div class="skin-name"> {{ skin }} </div>
<div class="hero-name"> {{ name }} </div>
<div class="hero-type"> {{ type }} </div>
补充一些配置项：
配置相应函数，使得我们的前端能够拿到我们后端的数据，就是使以上的代码有用。
我们先写一些死数据做示范：
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变量
示例一个：
（3）动态数据展示：
我们现在来带调用数据库里面的数据展示在网页上。
因为我们的db的格式是这样的：
是列表的形式，所以我们循环提取并放入hero_data中，后按照上述完成我们动态数据的导入；
如果我们的数据库做出相应的修改，我们的前端就可以反应。
最终效果：
