2018-09-13Djingo模板设计基础
知识点
1. 加载静态配置文件
在settings.py中最底下有一个叫做static的文件夹（），主要用来加载一些模板中用到的资源，提供给全局使用
这个静态文件主要用来配置css，html，js 图片，文字文件等
STATIC_URL = ‘/static/’
STATICFILES_DIRS = [
os.path.join(BASE_DIR, ‘static’)
]
只后在模板中，首先加载静态文件，之后调用静态，就不用写绝对全路径了
2. 使用静态配置文件
a) 加载渲染静态配置文件 模板中声明
{% load static %} 或者 {% load staticfiles %}
在引用资源的时候使用
{% static ‘xxx’ %} xxx就是相当于staticfiles_dirs的一个位置
b) 直接定义静态配置
<img src="/static/images/mvc.png">
其中: 展示static文件夹下有一个images文件夹，下面有一个mvc.png的图片
3. 模板摘要
3.1 模板主要有两个部分
HTML静态代码
动态插入的代码段（挖坑，填坑）也就是block
3.2 动态填充
模板中的动态代码断除了做基本的静态填充，还可以实现一些基本的运算，转换和逻辑 如下:
{% if stu.stu_sex %}
男
{% else %}
女
{% endif %}
模板中的变量： 视图传递给模板的数据 标准标识符规则 语法 {{ var }} 如果变量不存在，则插入空字符串
3.3 模板重的点语法
对象.属性或者方法
索引 （student.0.name）
{{stu.s_name}} 学生的姓名
{{stu.s_age}} 学生的年龄
3.4模板中的小弊端
调用对象的方法，不能传递参数
3.5 模板的标签
语法 {% tag %}
作用 a）加载外部传入的变量
b）在输出中创建文本
c）控制循环或逻辑
4. if表达式
格式1：
{% if 表达式 %}
{% endif %}
格式2：
{% if表达式 %}
{% else %}
{% endif %}
格式3：
{% if表达式 %}
{% elif 表达式 %}
{% endif %}
5. for表达式
格式1：
{% for 变量 in 列表 %}
{% empty %}
{% endfor %}
{% for stu in student %}
{{stu.s_name}}
{{stu.s_age}}
{% endfor %}
注意：当列表为空或者不存在时，执行empty之后的语句
注意一下用法:
{{ forloop.counter }} 表示当前是第几次循环，从1开始
{{ forloop.counter0 }} 表示当前从第几次循环，从0开始
{{forloop.revcounter}}表示当前是第几次循环，倒着数数，到1停
{{forloop.revcounter0}}表示当前是第几次循环，倒着数数，到0停
{{forloop.first}}是否是第一个 布尔值
{{forloop.last}}是否是最后一个 布尔值
6. 注释
6.1 注释可见，可运行
<!-- 注释内容 -->
6.1 单行注释注释不可见，不可运行
单行注释(页面源码中不会显示注释内容)
{# 被注释掉的内容 #}
6.2 多行注释注释不可见，不可运行
{% comment %}
中间为多行注释的内容
{% endcomment %}
实例操作
这里省略最开始创建工程文件的过程
首先在创建工程文件（例：工程文件名为day03）的目录下创建两个个新的文件夹，templates和static分别用来加载一些模板和模板中用到的资源（css，js，图片等）
下一步就是加载静态配置文件
在setting.py文件的最后面有static的文件夹，进行修改
STATIC_URL = '/static/'
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'static')
]
然后设置url，这里分为两个步骤
在app文件中创建urls.py文件，在其中添加以下代码
from django.conf.urls import url
from app import views
urlpatterns=[
url(r'^stu/',views.index,name='index'),
# url(r'^del_stu/(\d+)/',views.del_stu,name='del_stu'),
url(r'^del_stu/(?P<s_id>\d+)/',views.del_stu,name='del_stu'),
]
然后在day03文件中的urls.py中的urlpatterns进行添加来进行两个urls之间的连接，以确保输入127.0.0.1:8000/app/stu/能进入制作的页面
url(r'app/',include('app.urls',namespace='app'))
然后在app中的views中定义类来实现功能
展示学生信息（数据库连接部分参考昨天的内容）
def index(request):
if request.method=='GET':
# return HttpResponse('hello')
stus=Student.objects.all()
#返回学生信息
# return render(request,'index.html',{'students':stus})
return render(request, 'stus.html', {'students': stus})
删除学生信息
def del_stu(request,s_id):
if request.method=='GET':
# 删除
'''
1.获取url中id值
2.获取id对应的学生对象
3.对象.delete（）
'''
# id=request.GET.get('id') #获取学生id
stu=Student.objects.get(pk=id) #通过id获取学生
stu.delete() #删除学生信息
# return HttpResponseRedirect('/app/stu/') 删除后返回到原来的网页，即127.0.0.1:8000/app/stu/
return HttpResponseRedirect(reverse('app:index')) #删除后返回到原来的网页，即127.0.0.1:8000/app/stu/
(分别对应app/urls 中的url)
接下来设置网页布局
（在static文件夹中创建次文件夹css和js，用于存放js和css文件）
在创建的templates创建文件index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--加载渲染静态配置文件 模板中声明-->
{% load static %}
<!--引用资源，这里也可以使用直接定义静态配置的方法-->
<link rel="stylesheet" href="{% static 'css/index.css' %}">
<script src="{% static 'js/xxx.js' %}"></script>
</head>
<body>
<p>学生信息</p>
<table>
<thead>
<th>序号</th>
<th>id</th>
<th>name</th>
<th>age</th>
</thead>
<tobdy>
<!--for循环的用法-->
{%for stu in students%}
<tr>
<td>{{forloop.counter}}</td>
<td>{{stu.id}}</td>
<!--if语句进行判断，并添加属性-->
<td {% if forloop.first %}style="color:red;"{%endif%}>{{stu.s_name}}</td>
<td>{{stu.s_age}}</td>
</tr>
{%endfor%}
</tobdy>
</table>
</body>
</html>
其中的js和css文件可以自己添加
这样就可以在访问127.0.0.1:8000/app/stu/的时候出现数据库中存储的学生类中的所有学生的id，name，age几种信息组成的表格
关于动态插入的代码段（挖坑，填坑）也就是block，就是上面定义的第二种类的使用了
首先在templates中创建一个新的html文件（base.html），用于存储框架（挖坑）
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
{% block title %}
{% endblock %}
</title>
{% block extCss %}
{% endblock %}
{% block extJs %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
其中只有block，其他新建的html文件可以直接继承这个base.html的框架，只需要在block中添加内容即可
继承代码为{% extends '文件名.html' %}
我们在创建一个base_main.html来继承base.html的框架
<!--继承base.html的框架-->
{% extends 'base.html' %}
<!--在block中添加内容-->
{% block extJs %}
<!--在引用资源时，可以直接在网站上找在线的资源-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
{% endblock %}
然后我们再创建一个关于删除学生信息的stus.html文件，并继承base_main.html的框架（其实相当于继承了base.html和base_main.html）
{% extends 'base_main.html' %}
{% block title %}
学生列表页面
{% endblock %}
{% block extJs %}
{{block.super}}
{% load static %}
<!--继承后也可自己添加引用资源-->
<script src="{% static 'js/xxx.js' %}"></script>
{% endblock %}
{% block content %}
<table>
<thead>
<th>序号</th>
<th>id</th>
<th>name</th>
<th>age</th>
<th>操作</th>
</thead>
<tobdy>
{%for stu in students%}
<tr>
<td>{{forloop.counter}}</td>
<td>{{stu.id}}</td>
<td>{{stu.s_name}}</td>
<td>{{stu.s_age}}</td>
<td>
<!--<a href="/app/del_stu/?id={{stu.id}}">删除</a>-->
<a href="{% url 'app:del_stu' stu.id %}">删除</a>
|
<a href="">查看</a>
</td>
</tr>
{%endfor%}
</tobdy>
</table>
{% endblock %}
登录127.0.0.1:8000/app/stu/即可登录以下界面
image.png
查看功能还没有设置，原理和删除功能相似
删除功能中的
<a href="/app/del_stu/?id={{stu.id}}">删除</a> 和
<a href="{% url 'app:del_stu' stu.id %}">删除</a>
都是删除学生信息的功能，不同之处在用第一条代码时不需要在views中定义del_stu时其参数只需要request即（def del_stu(request):）；而第二条代码的定义参数为def del_stu(request,s_id):
查看功能可看作业
