zoukankan      html  css  js  c++  java
  • Django框架学习----视图与模板(显示数据库数据到页面)

    开始这一步之前我们先学习几个模板语法

     

    {% if 判断条件 %} 判断语法
    {% for 每个元素 in 遍历对象 %} 遍历语法
    {% endfor %} 结束遍历
    {% else %} 
    {% endif %} 结束判断

    我们可以用这些语法将我们上篇文章写的两个页面变得更简洁一点。改变之后如下
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Django学习</title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>
    <body>
    <div class="container page-header">
        <h1>Django三小时入门
            <small>——四点</small>
        </h1>
    </div>
    <div class="container page-body">
        <div class="col-md-9" role="main">
            <div class="body-main">
                {% for article in article_list %}
                    <div>
                        <h2>{{ article.title }}</h2>
                        <p>{{ article.abstract }}</p>
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="col-md-3" role="complementary">
            <div>
                <h2>最新文章</h2>
                {% for article in article_list %}
                    <h4><a href="#">{{ article.title }}</a></h4>
                {% endfor %}
            </div>
        </div>
    </div>
    </body>
    </html>
    优化后的首页
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Django学习</title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>
    <body>
    <div class="container page-header">
        <h1>{{ currentArticle.title }}
            <small>——{{ currentArticle.author }}</small>
        </h1>
    </div>
    <div class="container page-body">
        <p>{{ currentArticle.content }}</p>
    </div>
    </body>
    </html>
    优化后的详情页
    可以看到优化之后的文件减少了很多,那么接下来就是页面里的article_list变量和currentArticle变量怎么来的呢,请看下图:

     

    一个快捷函数: render()

    载入模板,填充上下文,再返回由它生成的 HttpResponse 对」是一个非常常用的操作流程。于是 Django 提供了一个快捷函数,我们用它来重写 index() 视图:

    这个函数需要三个参数,第一个参数固定 request , 第二个参数需要引入变量的HTML文件,第三个参数就是引入的变量

    最后在配置好两个函数的路由就可以访问到数据了
     
     
     
     
  • 相关阅读:
    esp32-智能语音-mp3(sdcard)
    esp32-智能语音-ADF_PATH
    esp32-智能语音-wifi
    esp32-智能语音-led驱动
    esp32-智能语音-设计硬件问题
    技小新学习
    TVS管和ESD管
    电源IC
    天线2.4G阻抗匹配设计
    AD16建立集成库
  • 原文地址:https://www.cnblogs.com/humiao-0626/p/12623825.html
Copyright © 2011-2022 走看看