Django 实战 | 搭一个 GitHub 用户展示网站 03

﹏ヽ暗。殇╰゛Y 2022-12-02 00:47 125阅读 0赞

### 一、GitHub API 接口 ###

查看[GitHub API 接口文档][GitHub API]，找到获取 users 的方法：

![format_png][]

于是，找到这个获取用户的接口地址：https://api.github.com/users?sinceid=0

### 二、接口请求和解析 ###

在 views.py 中使用 requests 请求地址，再使用 json 解析数据，注意需要安装 requests，再在 render 中增加一个 key，起名为 api，对应值也是 api。

from django.shortcuts import render
    
    # Create your views here.
    
    def home(request):
        import requests
        import json
        api_request = requests.get("https://api.github.com/users?sinceid=0")
        api = json.loads(api_request.content)
    
        return render(request,'home.html',{ "api":api})

再在 home.html 中修改代码如下：

{% extends 'base.html' %}
    
    {% block content %}
    	<h1>Hello World!</h1>
    	<p>{
       {api}}</p>
    {% endblock %}

运行 Django 服务，在浏览器输入 `127.0.0.1:8000` 可以看到如下页面：

![format_png 1][]

### 三、展示数据信息 ###

在 home.html 中修改代码如下：

{% extends 'base.html' %}
    
    {% block content %}
        <h1>Hello World!</h1>
    
        <url>
            {% for x in api %}
                <li>{
       {x}}</li>
            {% endfor %}
        </url>
    
        <p>{
       {api}}</p>
    {% endblock %}

然后运行 Django 服务，可以看到如下页面：

![format_png 2][]

然后进行美化，在[Bootstrap4卡片模板][Bootstrap4]找到代码，选择实例代码，然后修改如下：

{% extends 'base.html' %}
    
    {% block content %}
        <h1>Hello World!</h1>
    
        <div class="container">
            <div class="row">
                {% for x in api %}
                <div class="col-sm-4">
                    <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">{
       {x.login}}</h5>
                            <p class="card-text">{
       {x.login}}的GitHub</p>
                            <a href="{ {x.html_url}}" class="btn btn-primary">访问</a>
                        </div>
                    </div>
                    <br>
                </div>
                {% endfor %}
            </div>
        </div>
    
        <p>{
       {api}}</p>
    {% endblock %}

运行 Django 服务，可以看到如下页面：

![format_png 3][]

### 四、代码地址 ###

[GitHub][]

### 五、参考教程 ###

[Django小白入门到实战教程(2020) P10-P12][Django_2020_ P10-P12]

[GitHub API]: https://docs.github.com/en/rest/reference/users#get-a-user
[format_png]: /images/20221123/965d4ecff7c54dc9997918b0f7746871.png
[format_png 1]: /images/20221123/73318360d72a4e6dbed7d8f72e137136.png
[format_png 2]: /images/20221123/d86c2647a1804b3aad1308075a4268f5.png
[Bootstrap4]: https://v4.bootcss.com/docs/components/card/
[format_png 3]: /images/20221123/2dc8d378545b46d998e2c392f07c9a17.png
[GitHub]: https://github.com/Wonz5130/GitHub-Show-Site
[Django_2020_ P10-P12]: https://www.bilibili.com/video/BV1KJ41117HL?p=10