美文网首页
2018-09-13Djingo模板设计基础

2018-09-13Djingo模板设计基础

作者: BIGBOSS_93d6 | 来源:发表于2018-09-13 20:24 被阅读0次

知识点

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

相关文章

网友评论

      本文标题:2018-09-13Djingo模板设计基础

      本文链接:https://www.haomeiwen.com/subject/ktjggftx.html