Django快速入门

1 安装python
2 安装虚拟环境
3 安装Django
4 创建Django项目
5 配置路由urls
6 配置html页面
7 创建公共html模板
- 7.1 在文件夹 templates 下创建 base.html
- 7.2 home.html
8 展示导航信息
9 接口介绍
10 接口请求与解析
11 展示数据信息
- home.html
12 搜索页面跳转
13 获取和显示搜索数据

IDE:vscode
Django+bootstrap+github接口

1 安装python

2 安装虚拟环境

2.1 powershell配置：允许所有的script运行

Set-ExecutionPolicy Unrestricted

可以使用 cls 或者 clear 清空屏幕
查看python版本

python -V

2.2 安装虚拟环境

pip install virtualenv

查询虚拟环境是否安装成功

pip freeze

2.3 部署虚拟环境

新建文件夹 django-project，cd到这个目录下
输入

virtualenv .

2.4切换到虚拟环境

.Scriptsactivate

2.5退出虚拟环境

deactivate

3 安装Django

3.1 检查是否在虚拟环境下

3.2 安装最新Django

pip install django

如果想安装旧版本，可以在后面紧跟==版本号如：

pip install django==1.11.5

3.3查询是否安装成功

pip freeze

4 创建Django项目

4.1 创建项目

django-admin startproject mysite

4.2 cd到mysite文件夹

cd .mysite

4.3 通过vscode打开项目

code .

如果无法识别code请下载安装Git bash 和 VS Code

4.4 安装migration（Django与数据库的依赖）

python manage.py migrate

4.5 启动运行项目

在powershell或者vscode的终端（ctrl+shift+ `）处输入

python manage.py runserver

在浏览器中输入 http://127.0.0.1:8000/ 即可看到初始页面
可以输入 http://127.0.0.1:8000/admin 看到初始后台管理页面

Error：

若出现

Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。

说明端口被占用（默认是8000），切换其他端口即可

python manage.py runserver 8080

5 配置路由urls

5.1 cd到 mysite 下，确认在虚拟环境

5.2 创建展示项目

python manage.py startapp misteryu

5.3 配置mysite的settings.py使之关联

INSTALLED_APPS下加

"misteryu",

5.4 配置mysite的urls.py

加上

from django.urls import path,include

在urlpatterns加上

 path('', include('misteryu.urls')),

5.5 在misteryu下创建urls.py

from django.urls import path

urlpatterns = [
   
]

6 配置html页面

6.1 配置misteryu下的urls.py

from django.urls import path
from .import views
urlpatterns = [
   path('',views.home,name="home")
]

如果此处改为

path('home/',views.home,name="home")

则需要访问 http://127.0.0.1:8000/home/ 才能得到页面

6.2 配置misteryu下的views.py

from django.shortcuts import render

# Create your views here.
def home(request):
    return render(request,'home.html',{})

{}是参数列表

6.3 在misteryu下创建文件夹 templates，在文件夹下创建文件 home.html :

<h1>Hello World</h1>

7 创建公共html模板

7.1 在文件夹 templates 下创建 base.html

bootstrap4中文文档入门模板

<!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>
    
    {% block content %}
    {% endblock %}

    <!-- 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>

7.2 home.html

{% extends 'base.html'%}

{% block content %}
    <h1>Hello World!</h1>
    <p>测试是否可以看到我</p>
{% endblock %}

8 展示导航信息

导航条

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">沧海星空</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" >
          <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>

9 接口介绍

github的user接口
 github的user接口介绍
 jsonplaceholder

10 接口请求与解析

10.1 安装requests

pip install requests

10.2 views.py

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

10.3 home.html

{% extends 'base.html'%}

{% block content %}
    <h1>Hello World!</h1>
    <p>{{api}}</p>
{% endblock %}

11 展示数据信息

bootstrap的card

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">
                <div class="card" style=" 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>
 
    <!-- <p>{{api}}</p> -->
{% endblock %}

12 搜索页面跳转

12.1 misteryu中的urls.py

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

12.2 views.py 中添加

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

12.3 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" name="user" type="search"  placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
    </form>

12.4 创建user.html

{% extends 'base.html'%}

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

    <!-- <p>{{api}}</p> -->
{% endblock %}

13 获取和显示搜索数据

bootstrap的巨幕

13.1 misteryu的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>沧海星空</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="{% url 'home'%}">沧海星空</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" >
          <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" name="user" type="search"  placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</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>

13.2 misteryu的 home.html

{% extends 'base.html'%}

{% block content %}
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
        <h1 class="display-4">沧海星空</h1>
        <p class="lead">快速入门Django</p>
        </div>
    </div>

    <div class="container">
        <div class="row">
            {% for x in api %}
            <div class="col-sm">
                <div class="card" style=" 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>
 
    <!-- <p>{{api}}</p> -->
{% endblock %}

13.3 misteryu的 user.html

{% extends 'base.html'%}

{% block content %}
    <!-- <h1>Hello {{user}}！  </h1> -->
    {% if notfound %}
        <h2>{{notfound}}</h2>
    {% else %}
        <div class="card" style=" 18rem;">
            <img src="{{username.avatar_url}}" class="card-img-top" alt="...">
            <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>
            </div>
        </div>
    {% endif %}

{% endblock %}

13.4 misteryu的 urls.py

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

13.5 misteryu的 views.py

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


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