美文网首页
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