第二章 Django简单步骤记录 — View层

半斗烟草

已于 2022-02-07 20:13:03 修改

阅读量233

点赞数

分类专栏： python web 文章标签： python javascript html5 css

于 2021-07-05 20:41:49 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40494873/article/details/118498194

版权

python web 专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了Django中视图层的作用，包括如何创建H5页面并存放于templates目录，设置STATIC_URL和STATICFILES_DIRS以管理静态资源如图片、CSS和JS文件。在views.py中，数据被渲染到templates的index.html中，利用Django模板语言展示。博客还展示了如何改写HTML页面，使用模板标签显示动态数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

View层：获取数据，渲染页面的一个过程

创建 H5 页面存放templates目录，该目录可以随意放置，一般建议放在最顶层。将该路径配置到setting.py中，这样django每次加载都会自动扫描该目录。
BASE_DIR 配置了项目根目录：

TEMPLATE中注册扫描路径，注意这里可以配置多个路径：
创建静态资源存放路径 static目录，一般用来存放图片、js文件、css文件等，注意与setting.py 中的STATIC_URL保持一致。通常按照如下格式进行存放。
静态资源详解参考（写的比较清晰）：https://blog.youkuaiyun.com/J_wb49/article/details/103055817?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultBlogCommendFromMachineLearnPai2_{default-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2}default_{BlogCommendFromMachineLearnPai2}default-1.control
views.py中写页面情况，将index和img_list的数据渲染到teplates目录下的index.html 文件h5中
改写templates下的h5页面，使用dajngo模板语言进行改写，如下例子中包含了基本的几个模板写法

<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <script src="{% static 'js/image.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">

</head>
<style>
    .view{
        width: 100%;
        height: 400px;
        border: 1px solid red;
    }
</style>
<body>
    <img src="{% static 'img/001.jpg' %}" alt="" style="width: 100%; height: 400px;">
    <div class="view">
        <h1>{{ index }}</h1>
        <ul>
            {% for img in img_list %}
            <li>{{ img }}</li>
            {% endfor %}
        </ul>
    </div>
    <div class="continer">
        <div class="row">
            <div class="col-4" style="height:500px; background-color: red;"></div>
            <div class="col-8" style="height:500px; background-color:green"></div>
        </div>
    </div>
</body>
</html>