【django轻量级框架】一个Github用户检索信息网站(解析和代码)

最新推荐文章于 2024-06-20 11:52:47 发布

理想不闪火

最新推荐文章于 2024-06-20 11:52:47 发布

阅读量505

点赞数

分类专栏： # Django

本文链接：https://blog.csdn.net/weixin_43838785/article/details/114360015

版权

Django 专栏收录该内容

15 篇文章 4 订阅

订阅专栏

文章目录

1 预览
2 步骤详解
3 代码

1 预览

在这里插入图片描述

2 步骤详解

创建一个文件夹

django-admin startproject myweb

使用该命令创建一个项目。

cd myweb

python3 manage.py runserver

运行在服务器。

python manage.py startapp myapp

使用上面的命令创建一个模块。

code.

打开vscode 也可以直接使用pycharm打开。

pythone manage.py migrate

使用该命令消除404异常（与数据库相关）。
在myapp目录下穿件一个templates文件夹存放前端文件，具体含义和方法可以看该专栏其他文章！

在这里插入图片描述

3 代码

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

本文不涉及到数据库内容。
配置urls.py

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('myapp.urls')),

]

在app文件夹下创建urls.py 输入下面内容

from django.urls import path
from . import views

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

在views.py中解析api接口中的数据，来源于github。

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?since=0")
    api=json.loads(api_request.content)
    return render(request,'home.html',{"api":api})

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

def user(request):
    if request.method=="POST":
        import requests
        import json
        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',{'username':username})
    else:
        notfound="请在搜索框中输入您需要查询的用户"
        return render(request,'user.html',{'notfound':notfound})

base.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="{% url 'home' %}">Django demo</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="{% url 'user' %}">查询</a>
            </li>
    
          </ul>
          <form class="form-inline my-2 my-lg-0" method="POST" action="{% url 'user' %}">
              {% csrf_token %}
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="user">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
      <br/>
      <div class="container">
    {% block content %}
{% endblock %}
</div>
    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-LCPyFKQyML7mqtS+4XytolfqyqSlcbB3bvDuH9vX2sdQMxRonb/M3b9EmhCNNNrV" crossorigin="anonymous"></script>

    <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-gRC4eoaRyQ8xv2X6Mnf+eOIrtON3wId3dAkwO0HQX26OrFBoLpjX/XWOJacSiZhL" crossorigin="anonymous"></script>
    -->
  </body>
</html>

{% url 'user' %}表示请求的界面，user对应views中的name。

home.html

{% extends 'base.html' %}
{% block content %}

<div class="jumbotron">
    <h1 class="display-4">Hello, world!</h1>
    <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
    <hr class="my-4">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </div>
<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">{{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>
<ul>

</ul>


{% 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>
      <a href="{{username.html_url}}" class="btn btn-primary">访问</a>
    </div>
  </div>
{% endif %}

{% endblock %}