一、搜尋頁面跳轉

在 urls.py 中新增一個 user 路徑：

from django.urls import path
from . import views

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

在 views.py 中新增一個 user 方法：

def user(request):
    return render(request,'user.html',{})

再在 templates 建立 user.html：

{% extends 'base.html' %}

{% block content %}
    <h1>Hello User!</h1>


{% endblock %}

然後啟動 Django 服務，訪問 http://127.0.0.1:8000/user/ 可以看到如下頁面：

在 base.html 中修改如下程式碼：

<form class="form-inline my-2 my-lg-0" method="POST" action="{% url 'user' %}">

然後在搜尋框內搜尋一個使用者名稱，發現：

因此需要設定 CSRF，在上面那行程式碼下面新增一行程式碼：

{% csrf_token %}

在 views.py 中修改 user 方法：

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

再在 base.html 中在之前寫的 csrf 下面修改 input 這行程式碼如下：

<input class="form-control mr-sm-2" name="user" type="search" placeholder="Search" aria-label="Search">
 

再在 user.html 中修改：

{% extends 'base.html' %}

{% block content %}
    <h1>Hello {{user}}!</h1>


{% endblock %}

在頁面中的搜尋框輸入一個使用者名稱，可以看到如下頁面：

二、獲取搜尋資料

修改 base.html 部分程式碼：

<a class="navbar-brand" href="{% url 'home' %}">Wonz</a>

<a class="nav-link" href="{% url 'user' %}">查詢</a>

在 views.py 中修改 user 方法：

def user(request):
    if request.method == 'POST':
        user = request.POST['user']
        user_request = requests.get("https://api.github.com/users/"+user)
        username = json.loads(user_request.content)
        
        return render(request,'user.html',{'user':user, 'username':username})
    else:
        notfound = "請在搜尋框中輸入您需要查詢的使用者..."
        return render(request,'user.html',{'notfound':notfound})

在 user.html 中修改程式碼：

{% extends 'base.html' %}

{% block content %}
    
    {% if notfound %}
        <h2>{{notfound}}</h2>
    {% else %}
        <h1>{{username}}</h1>
    {% endif %}

{% endblock %}

在頁面中的搜尋框輸入一個使用者名稱，可以看到如下頁面，表示使用者資訊都獲取到了：

三、顯示所有資料

修改 user.html 程式碼，也做成卡片格式進行展示：

{% extends 'base.html' %}

{% block content %}
    
    {% if notfound %}
        <h2>{{notfound}}</h2>
    {% else %}
        <div class="card" style="width: 18rem;">
            <img src="{{username.avatar_url}}" class="card-img-top" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">{{username.name}}</h5>
                <p class="card-text">location: {{username.location}}</p>
                <p class="card-text">public_repos: {{username.public_repos}}</p>
                <p class="card-text">public_gists: {{username.public_gists}}</p>
                <p class="card-text">followers: {{username.followers}}</p>
                <p class="card-text">following: {{username.following}}</p>
                <p class="card-text">created_at: {{username.created_at}}</p>
                <p class="card-text">updated_at: {{username.updated_at}}</p>
            </div>
        </div>
    {% endif %}

{% endblock %}

在Bootstrap4巨幕複製示例程式碼，拷貝到 home.html 中，並進行相應修改：

    <div class="jumbotron jumbotron-fluid">
        <div class="container">
        <h1 class="display-4">用 Django 搭一個 GitHub 使用者展示網站</h1>
        <p class="lead">快速入門 Django</p>
        </div>
    </div>

最終成果網站主頁展示如下：

搜尋使用者展示如下：

四、程式碼地址

GitHub

五、參考教程

Django小白入門到實戰教程(2020) P13-P15