template，html模板和接口数据

最新推荐文章于 2024-06-29 10:47:50 发布

小霖同学onism

最新推荐文章于 2024-06-29 10:47:50 发布

阅读量512

点赞数

分类专栏： Django

本文链接：https://blog.csdn.net/weixin_49206002/article/details/107292337

版权

Django 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

URL配置
在这里插入图片描述

template

return render(request,'index.html',{'hello':'hellow blog'})#参数，模板字符串，后端到前端数据

base.html

ad>
<body>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Github</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">主页 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            下载
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">文章</a>
            <a class="dropdown-item" href="#">视频</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">代码</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">帮助</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="here you can search" aria-label="search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
      </form>
    </div>
  </nav>

  <br       />
<div class="container">
    {% block content %}
  {% endblock %}
</div>

从bootstrap获取导航条模板
导航条
从github、jsonplaceholder获取接口
github
用户信息
获取接口地址，得到用户信息
jsonplaceholder
展示数据信息
index.html文件

<div class="container">
        <div class="row">
            {% for x in api %}
           <!--<div class="col-sm">-->


                <div class="card" style="width: 18rem;">
                  <img src="{{x.avatar_url}}" class="card-img-top" alt="card image cap">
                    <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">{{x.login}}的github</p>
                    <a href="{{html_url}}" class="btn btn-primary">点这里点这里</a>
                    </div>
                </div>
                    <br> <br>
            <!--</div>-->
             {% endfor %}
        </div>
    </div>



    <p>{{api}}</p>
{% endblock %}

小霖同学onism

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
template，html模板和接口数据

return render(request,'index.html',{'hello':'hellow blog'})#参数，模板字符串，后端到前端数据base.htmlad><body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Github</a> <button clas
复制链接

扫一扫

专栏目录