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):
查看功能可看作业

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,100评论 18 139
  • 切换到创建项目的目录 cd C:\Users\admin\Desktop\DjangoProject创建名为pr...
    在努力中阅读 3,195评论 2 3
  • 模块间联系越多,其耦合性越强,同时表明其独立性越差( 降低耦合性,可以提高其独立性)。软件设计中通常用耦合度和内聚...
    riverstation阅读 2,020评论 0 8
  • 月光洒在我和她的身上,这世上最美的初恋也不过如此。最软弱和最柔和的部分已经被你占据,我逃不过,任谁也不能。 初雪给...
    向阳光奔跑xd阅读 127评论 0 0
  • 简介 ​ Splinter是一个使用Python开发的开源Web应用自动化测试工具,它可以帮助你实现自动浏览站...
    JemmyChen阅读 1,087评论 1 4