Django项目--用户管理系统(二)

最新推荐文章于 2023-06-16 09:10:29 发布

置顶小小练习生

最新推荐文章于 2023-06-16 09:10:29 发布

阅读量754

点赞数

分类专栏： Django 文章标签： python django

本文链接：https://blog.csdn.net/qq_42149144/article/details/106880027

版权

Django 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

展示导航信息

设置导航之前，我们想要给他一个好看的样式
导航条 https://v4.bootcss.com/docs/components/navbar/
复制Supported content的内容

来到 base.html的body部分

#<body>
	#粘贴
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">  # light --> dark 背景颜色更深
  <a class="navbar-brand" href="#">Navbar</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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</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">Search</button>
    </form>
  </div>
</nav>
	
	<div class='container'> # CSS容器
		{% block content %}
		{% endblock %}
	</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kbXpsr50-1592669235743)()]

删掉用不到的标签，更改标签名字，只留下 Navbar Link (之间在上面删掉，在对应位置更改即可)

接口介绍

https://api.github.com github直接提供的接口地址,这里有很多，我们随便进入一个
你也可以获取所有的用户，点击 list user
还有很多接口 https://jsonplaceholder.typicode.com

接口请求和解析

我们把 https://api.github.com/users?since=135 看到的数据展示到我们的django项目

在app视图中请求数据

# library/views.py
from django.shortcuts import render # 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})

则home.html得接收上面传入的参数

#library/templates/home.html

{% extends 'base.html' %}
{% block content %}
    <h1>hello word!!!</h1>
    {{api}}  # 接收数据
{% endblock %}

- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3YB4UR5l-1592669235760)()]

现在我们看到数据已经全部得到

展示数据信息

我们从原网页可以看到，数据的显示方式整齐排列
所以我们用到 bootstrp 的 cards 进行创建每一个用户的信息卡片

我们就复制第一个模板内容，并且把我们的数据添加进模板相应位置

# library/templates/home.html

{% extends 'base.html' %}

{% block content %}
<h1>hello word!!!</h1>
<div class="container">
    <div class="row">
        {% for x in api %} # 注意：{ 和 % 不能有空格
        <div class="col-sn">
            <div class="card" style="width: 18rem;">
                <img src="{{x.avatar_url}}" class="card-img-top" alt="...">
                <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>
{% endblock %}

具体结果读者可以自行运行查看

搜索页面跳转

来到library/urls.py,修改如下：

from django.urls import path
from . import views

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

来到library/templates,建立user.html,编辑如下内容

{% extends 'base.html' %}

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

{% endblock %}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EEkxnJlT-1592669235762)()]

来到 base.html

# 找到提交表单
<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" name="user" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>

来到 library/views.py

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

获取搜索数据

先完成头部标签的点击跳转

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZPIdqNwz-1592669235763)()]

现在我们发现如果输入内容点击搜索框可以达到目的，但是直接点击查找我们没有任何动作，因而，来到 library/views.py 设置

# 进行判断
def user(request):
    if request.method=='POST':
        user = request.POST['user']
        return render(request,'user.html',{'user':user})

    else：
        notfound = '请在搜索框输入您要搜索的用户 >>>'
        return render(request,'user.html',{'notfound':notfound}) # 此时需要到 user.html 接收参数notfound

user.html

{% extends 'base.html' %}

{% block content %}
    {% if notfound %}

        <h2>{{notfound}}</h2>
    {% else %}
        <h1>hello {{user}}!!!</h1>
    {% endif %}
    
{% endblock %}

现在解决了我们的问题
我们看

接下来显示我们提交的用户的信息，修改我们的 views.py中的user函数

def user(request):
    if request.method=='POST':
        import requests
        import json
        user = request.POST['user']
        user_request = requests.get('https://api.github.com/users/{}'.format(user))
        user_info = json.loads(user_request.content)
        return render(request,'user.html',{'user_info':user_info})
    else:

        notfound = "请在搜索框输入您要搜索的用户 >>>"
        return render(request,'user.html',{'notfound':notfound}) # 提交全部数据

再user.html设置接收格式，拷贝一份前面的 cards模板

{% extends 'base.html' %}

{% block content %}

    {% if notfound %}
        <h2>{{notfound}}</h2>
    {% else %}

        <div class="card" style="width: 18rem;">
            <img src="{{user_info.avatar_url}}" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">{{user_info.name}}</h5>
                <p class="card-text">location：{{}user_info.location}</p>
                <p class="card-text">email：{{}user_info.email}</p>
                <p class="card-text">public_repos：{{}user_info.public_repos}</p>
                <p class="card-text">public_gists：{{}user_info.public_gists}</p>
                <p class="card-text">followers：{{}user_info.followers}</p>
                <p class="card-text">followering：{{}user_info.followering}</p>
                <p class="card-text">created_at：{{}user_info.created_at}</p>
                <p class="card-text">updated_at：{{}user_info.updated_at}</p>
                <a href="{{user_info.html_url}}" class="btn btn-primary">访问</a>
            </div>
        </div>
    {% endif %}
    
{% endblock %}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u7INcbi8-1592669235765)()]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SuxJUtyy-1592669235766)()]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8kNF1oY9-1592669235767)()]

$C:\Users\21323\AppData\Roaming\Typora\typora-user-images\image-20200620234849535.png$

over

小小练习生

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Django项目--用户管理系统(二)

文章目录展示导航信息接口介绍接口请求和解析展示数据信息搜索页面跳转获取搜索数据展示导航信息设置导航之前，我们想要给他一个好看的样式导航条 https://v4.bootcss.com/docs/components/navbar/复制Supported content的内容来到 base.html的body部分#<body> #粘贴 <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> #
复制链接

扫一扫