上一篇我们讲了如何安装几创建django项目并展示一个hello_world的html页面,这一篇我们将调用github的api搭建一个简单的展示网页。

本篇文章的代码以放至github:https://github.com/yuaneuro/django_project2

7.创建公共html模板

这里我们使用bootstrap来使用,它是一个前端的ui框架:初学者模板链接


我们可以拷贝一份初学者模板到我们的yuaneuro/templates/base.html里。

  • 为什么要复制到base.html而不直接复制到home.html里呢?

这是为了防止代码冗余乱成一团,我们可以在home.html里引入base.html,具体做法在home.html中添加以下代码:

{% extends 'base.html' %}

然后要想使home.html中的内容展示到base.html的话,需要将home.html中的代码用一下代码包起来:

{% block content %}
......
{% endblock %}

并在base.html中也要添加以上两句代码。


8.展示导航信息

这里我们依然使用bootstrap中的导航栏现成的代码

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">yuaneuro</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">
            <a class="nav-link" href="#">Link</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
      </div>
    </nav>

将这些代码复制到我们的base.html中。

  • 这时我们运行我们的服务看看效果:

9.github接口调用

github的api调用网址是:https://api.github.com/(需要扶梯)

然后我们就可以在我们的yuaneuro/views.py里调用这个api接口

from django.shortcuts import render
import requests
import random

# Create your views here.

def home(request):
    api = requests.get('https://api.github.com/users?since='+str(random.randint(0, 99999)))
    api_json = api.json()
    return render(request, 'home.html', {'api': api_json})
  • 注意这里render的第三个参数就是我们要给html中传的参数

然后我们在templates/home.html中添加一个p标签来获取从views.py中传来的数据


这时访问我们的网站即可看到我们获取的api

下一步我们就将获取的api进行解析

10.对调用的数据进行解析展示

这里我们继续使用bootstrap里的card的代码

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

对应的是这样一个样式:

然后将其替换成我获取的到api,用for循环输入
home.html

{% extends 'base.html' %}

{% block content %}
    <h1>hello_world</h1>

    <div class="container">
        <div class="row">
            {% for x in api %}
            <div class="col-sm-auto">
                <div class="card" style="width: 18rem;">
                  <img src="{{x.avatar_url}}" class="card-img-top" alt="avatar_url">
                  <div class="card-body">
                    <h5 class="card-title">{{x.login}}</h5>
                      <p class="card-text">{{x.login}}的github</p>
                    <a href="{{x.html_url}} " target="_blank" class="btn btn-primary">访问</a>
                  </div>
                </div>
                <br/>
            </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}

运行后的效果图:

11.搜索页面跳转

  • 在我们搜索用户名时要展现出被搜索的用户

所以首先来到我们的urls.py里配置路由:在访问user/时让其访问user.html

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name="home"),
    path('user/', views.user, name="user"),
]

然后来到我们的views.py里,添加我们的user方法并在templates下新建一个user.html文件:

{% extends 'base.html' %}
{% block content %}
    <h1>hello_{{user}}!</h1>
{% endblock %}

然后我们修改base.html的表单部分:添加POST方法和调转到user的动作,并将input标签给一个名字方面我们在后面的view.py里调用

<form class="form-inline my-2 my-lg-0 " method="POST" action="{% url 'user' %}">
    {% csrf_token%}
 <input class="form-control mr-sm-2" name="user" type="search" placeholder="Search" aria-label="Search">
  • csrf_token
    csrf_token 用于form表单中,作用是跨站请求伪造保护。
    如果不用{% csrf_token %}标签,在用 form 表单时,要再次跳转页面会报403权限错误。
    用了{% csrf_token %}标签,在 form 表单提交数据时,才会成功。
    当我们点击搜索时就会跳转到搜索的页面。

  • 解析:
    首先,向浏览器发送请求,获取登录页面,此时中间件 csrf 会自动生成一个隐藏input标签,该标签里的 value 属性的值是一个随机的字符串,用户获取到登录页面的同时也获取到了这个隐藏的input标签。
    然后,等用户需要用到form表单提交数据的时候,会携带这个 input 标签一起提交给中间件 csrf,原因是 form 表单提交数据时,会包括所有的 input 标签,中间件 csrf 接收到数据时,会判断,这个随机字符串是不是第一次它发给用户的那个,如果是,则数据提交成功,如果不是,则返回403权限错误。

然后来到我们的views.py文件:添加一个user方法

def user(request):
    user = request.POST['user']
    return render(request, 'user.html', {'user': user})

这时我们往搜索框里输入东西就会跳转到user/路径下并显示hello_用户名

12.获取搜索数据并解析数据

所以我们在view.py里调用github的api然后将其传递给我们的user.html

def user(request):
    if request.method == 'POST':
        user = request.POST['user']
        api = requests.get('https://api.github.com/users/'+user)
        api_json = api.json()
        return render(request, 'user.html', {'user': user, 'api': api_json})
    else:
        notfound = 'please input user'
        return render(request, 'user.html', {'notfound': notfound})

然后我们在user.html里复制之前的那个卡片的代码:

{% extends 'base.html' %}

{% block content %}
    <!--<h1>hello_{{user}}!</h1>-->
    {% if notfound %}
        <h2>{{notfound}}</h2>
    {% else %}
        <div class="card" style="width: 18rem;">
          <img src="{{api.avatar_url}}" class="card-img-top" alt="avatar_url">
          <div class="card-body">
            <h5 class="card-title">{{api.login}}</h5>
              <p class="card-text">{{api.login}}的github</p>
            <a href="{{api.html_url}} " target="_blank" class="btn btn-primary">访问</a>
          </div>
        </div>
    {% endif %}

{% endblock %}

这样当我们在搜索框中搜索时就会搜索到对性的信息

结束

至此,这个案例就结束了,通过这个简单而小巧的案例让我明白了django框架的许多优点和好用之处,写这两篇文章的目的也是为了以后在学习中有遗忘的时候可以快速翻出来看一看而不至于一点一点的去找视频。这两节的代码我也放到github上,并且分了两个仓库分别学习两节而不受影响

从b站学习,:https://www.bilibili.com/video/BV1KJ41117HL

本文作者:Author:     文章标题:初学django(2)
本文地址:https://yuaneuro.cn/archives/42.html     
版权说明:若无注明,本文皆为“yuaneuro的小站”原创,转载请保留文章出处。
Last modification:July 6th, 2020 at 01:13 am