1、下载
python -m pip install Django==3.0.8 -i https://pypi.tuna.tsinghua.edu.cn/simple
2、新建一个项目
python django-admin.py startproject FirstDjango
django-admin.py目录
可切换到自己想要的目录创建，否则创建出的项目和django-admin.py同级
创建完后的目录：
urls.py中可以配置访问的url
settings.py中可以配置基础信息
3、启动服务
python manage.py runserver 0.0.0.0:8090
0.0.0.0表示其他机器通过IP可以访问你的部署（同一局域网下或者使用服务器发布，需要能ping通）
127.0.0.1表示仅本机可以访问
8090为端口号
打开网页输入http://127.0.0.1:8090/即可访问
4、添加默认登录页
（1）创建请求路径的py文件
在urls.py同级目录下创建一个views.py文件
views.py内容
from django.shortcuts import render
def login(request):
return render(request, 'login.html')
（2）创建静态资源文件夹
在manage.py同级目录下创建一个templates文件夹，在templates文件夹下创建css和js和img文件夹以及login.html文件
css和js以及img文件夹中放入bootstrap和jquery以及背景图片
login.html内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<script src="/static/js/jquery-1.11.3.min.js"></script>
</head>
<body background="/static/img/bk.jpg">
<div style="width: 300px;margin-top: 30%;margin-left: 70%;">
<div style="padding: 0px 0px 0px 0px;">
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon">用户名</span>
<input type="text" class="form-control" placeholder="">
</div>
<br>
<div class="input-group">
<span class="input-group-addon">密  码</span>
<input type="password" class="form-control" placeholder="">
</div>
</form>
</div>
<div style="text-align: right;">
<div class="btn-group">
<button type="button" class="btn btn-default">注册</button>
<button type="button" class="btn btn-default" id="login">登录</button>
</div>
</div>
</div>
</body>
<script>
$(function () {
$('#login').click(function () {
$(window).attr('location', 'back_data')
})
})
</script>
</html>
（3）在urls.py中添加代码
（4）在settings.py中添加代码
（5）访问127.0.0.1:8090
5、后台数据与前端数据的传递
views.py添加代码
from django.shortcuts import render def login(request): return render(request, 'login.html') def get_data(request): data = {'data': '普通数据', 'data_list': ['列表数据1', '列表数据2', '列表数据3'], 'data_dict': {'name': '李华', 'age': 20}, 'data_list_dict': [{'name': '小白', 'age': 21}, {'name': '袁华', 'age': 20}], } return render(request, 'background.html', data)
urls.py添加代码
在login.html同级添加background.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<script src="/static/js/jquery-1.11.3.min.js"></script>
</head>
<body>
<p>这是正常取key，获取的后台数据为：{{data}}</p>
<p>这是列表的后台数据(所有)：{{data_list}}</p>
<p>这是列表的后台数据（取下标2）：{{data_list.2}}</p>
<p>这是字典的后台数据(所有)：{{data_dict}}</p>
<p>这是字典的后台数据（取key为name）：{{data_dict.name}}</p>
<p>这是字典的后台数据（取key为age）：{{data_dict.age}}</p>
<p>两者结合：{{data_list_dict.0.name}}</p>
<p>两者结合：{{data_list_dict.1.age}}</p>
<div style="width: 300px;">
<table class="table table-bordered">
<caption>遍历列表</caption>
<thead>
</thead>
<tbody>
<tr>
{% for i in data_list %}
<td>{{i}}</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
<div style="width: 300px;">
<table class="table table-bordered">
<caption>遍历字典kyes</caption>
<thead>
</thead>
<tbody>
<tr>
{% for i in data_dict.keys %}
<td>{{ i }}</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
<div style="width: 300px;">
<table class="table table-bordered">
<caption>遍历字典values</caption>
<thead>
</thead>
<tbody>
<tr>
{% for i in data_dict.values %}
<td>{{ i }}</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
<div style="width: 300px;">
<table class="table table-bordered">
<caption>遍历字典items</caption>
<thead>
</thead>
<tbody>
<tr>
{% for i,j in data_dict.items %}
<td>{{ i }}----{{j}}</td>
{% endfor %}
</tr>
</tbody>
</table>
</div>
<div style="width: 300px;">
<table class="table table-bordered">
<caption>遍历字典+列表</caption>
<thead>
<tr>
{% for i in data_list_dict.0.keys %}
<td>{{i}}</td>
{% endfor %}
</tr>
</thead>
<tbody>
{% for i in data_list_dict %}
<tr>{% for j in i.values %}
<td>{{ j }}</td>
{% endfor %}</tr>
{% endfor %}
</tbody>
</table>
</div>
</body>
</html>
假设后台返回字典形式
data = {'data': '普通数据',
'data_list': ['列表数据1', '列表数据2', '列表数据3'],
'data_dict': {'name': '李华', 'age': 20},
'data_list_dict': [{'name': '小白', 'age': 21}, {'name': '袁华', 'age': 20}],
}
（1）正常取字典key
<p>这是正常取key，获取的后台数据为：{{data}}</p>
（2）字典中有列表
<p>这是列表的后台数据(所有)：{{data_list}}</p>
<p>这是列表的后台数据（取下标2）：{{data_list.2}}</p>
（3）字典中有字典
<p>这是字典的后台数据(所有)：{{data_dict}}</p>
<p>这是字典的后台数据（取key为name）：{{data_dict.name}}</p>
<p>这是字典的后台数据（取key为age）：{{data_dict.age}}</p>
（4）字典中有列表，列表中有字典
<p>两者结合：{{data_list_dict.0.name}}</p>
<p>两者结合：{{data_list_dict.1.age}}</p>
（5）遍历列表
<div style="width: 300px;"> <table class="table table-bordered"> <caption>遍历列表</caption> <thead> </thead> <tbody> <tr> {% for i in data_list %} <td>{{i}}</td> {% endfor %} </tr> </tbody> </table> </div>
（6）遍历字典
<div style="width: 300px;"> <table class="table table-bordered"> <caption>遍历字典kyes</caption> <thead> </thead> <tbody> <tr> {% for i in data_dict.keys %} <td>{{ i }}</td> {% endfor %} </tr> </tbody> </table> </div> <div style="width: 300px;"> <table class="table table-bordered"> <caption>遍历字典values</caption> <thead> </thead> <tbody> <tr> {% for i in data_dict.values %} <td>{{ i }}</td> {% endfor %} </tr> </tbody> </table> </div> <div style="width: 300px;"> <table class="table table-bordered"> <caption>遍历字典items</caption> <thead> </thead> <tbody> <tr> {% for i,j in data_dict.items %} <td>{{ i }}----{{j}}</td> {% endfor %} </tr> </tbody> </table> </div> <div style="width: 300px;"> <table class="table table-bordered"> <caption>遍历字典+列表</caption> <thead> <tr> {% for i in data_list_dict.0.keys %} <td>{{i}}</td> {% endfor %} </tr> </thead> <tbody> {% for i in data_list_dict %} <tr>{% for j in i.values %} <td>{{ j }}</td> {% endfor %}</tr> {% endfor %} </tbody> </table> </div>
运行
