初学django(2)

博主： yuaneuro
发布时间：2020 年 06 月 22 日
1196 次浏览
暂无评论
5099字数
分类： python

上一篇我们讲了如何安装几创建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.获取搜索数据并解析数据

要想搜索获取数据，我们需要调用github的用户信息的api
例如：https://api.github.com/users/yuaneuro

所以我们在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 %}

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