zoukankan html css js c++ java

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" id="navbarSupportedContent">
          <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" 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" 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})

查看全文

相关阅读:
leetcode231 2的幂 leetcode342 4的幂 leetcode326 3的幂
 leetcode300. Longest Increasing Subsequence 最长递增子序列、674. Longest Continuous Increasing Subsequence
leetcode64. Minimum Path Sum
leetcode 20 括号匹配
 算法题待做
 leetcode 121. Best Time to Buy and Sell Stock 、122.Best Time to Buy and Sell Stock II 、309. Best Time to Buy and Sell Stock with Cooldown 、714. Best Time to Buy and Sell Stock with Transaction Fee
rand7生成rand10，rand1生成rand6，rand2生成rand5(包含了rand2生成rand3)
依图
 leetcode 1.Two Sum 、167. Two Sum II
从分类,排序,top-k多个方面对推荐算法稳定性的评价

原文地址：https://www.cnblogs.com/xingkongcanghai/p/14470402.html