Django小白入门的实战教程(2020)

参考视频： https://www.bilibili.com/video/av78843746?t=10

讲解的很简洁！

概述：主要参考上面视频进行学习，此处是部分代码笔记. 展示github 用户信息.

工具：

vscode;
git bash;
chrome;
Django3.0
boostrap4.0

目录结构如下：

image.png

上传到我的github :

echo "# Django_demo" >> README.md
git init
git add README.md
git add .
git commit -m "first commit"
git remote add origin https://github.com/caokai001/Django_demo.git
git push -u origin master

Django 架构

2020年1月27日18:06:48

1.成果展示

无法加载gif,点击查看gif 效果

2.python 安装

2020年1月21日21:37:09

### 新建文件夹
mkdir 2020-1
cd 2020-1
### 检查python版本（高版本的Django 不支持python2.x）
16926@DESKTOP-NC9OOR3 MINGW64 ~/Desktop/2020-1
$ python -V
Python 3.6.4 :: Anaconda, Inc.

3.虚拟环境安装使用

### 查询base环境中存在哪些安装包（为了环境隔离，最好建立新的py环境）
$ pip freeze
... 好多包

### pip 加速下载
$ pip install -i https://pypi.douban.com/simple/ virtualenv
Collecting virtualenv
  Downloading https://files.pythonhosted.org/packages/05/f1/2e07e8ca50e047b9cc9ad56cf4291f4e041fa73207d000a095fe478abf84/virtualenv-16.7.9-py2.py3-none-any.whl (3.4MB)

### 建立虚拟环境
$ virtualenv.exe .
Using base prefix 'c:\\users\\16926\\anaconda3'
New python executable in C:\Users\16926\Desktop\2020-1\Scripts\python.exe
Installing setuptools, pip, wheel...
done.

### 激活虚拟环境
16926@DESKTOP-NC9OOR3 MINGW64 ~/Desktop/2020-1
$ source ./Scripts/activate

### 检查虚拟环境中包
(2020-1)
16926@DESKTOP-NC9OOR3 MINGW64 ~/Desktop/2020-1
$ pip freeze
(空)

4.安装Django

### 安装最新版django
(2020-1)
16926@DESKTOP-NC9OOR3 MINGW64 ~/Desktop/2020-1
$ pip install -i https://pypi.douban.com/simple/ django
Installing collected packages: asgiref, sqlparse, pytz, django
Successfully installed asgiref-3.2.3 django-3.0.2 pytz-2019.3 sqlparse-0.3.0

### 虚拟环境包
(2020-1)
16926@DESKTOP-NC9OOR3 MINGW64 ~/Desktop/2020-1
$ pip freeze
asgiref==3.2.3
Django==3.0.2
pytz==2019.3
sqlparse==0.3.0

5.启动Django 小程序

### 默认环境及其路径，下面将省略
(2020-1)
16926@DESKTOP-NC9OOR3 MINGW64 ~/Desktop/2020-1

### 建立mysite 项目
$ django-admin.exe startproject mysite

### 进入mysite项目
$ cd mysite/

### 运行实例app
(2020-1)
16926@DESKTOP-NC9OOR3 MINGW64 ~/Desktop/2020-1/mysite
$ python manage.py runserver

进入浏览器： http://127.0.0.1:8000/

2020年1月21日23:36:48

进入浏览器： http://127.0.0.1:8000/admin

2020年1月21日23:39:44

6.配置路由urls

### 创建一个app (misterwu)
(2020-1)
16926@DESKTOP-NC9OOR3 MINGW64 ~/Desktop/2020-1/mysite
$ python manage.py startapp misterwu

### 修改mysite目录下setting.py内容
# tips：将创建的app 与project 关联，告诉Django 这是一个app
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    "misterwu",
]

### 修改mysite目录下urls.py ,解析网址和视图函数关系

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('misterwu.urls')),  # 需要新建misterwu目录下urls.py文件
]

### 新建misterwu目录下urls.py文件
from django.urls import path

urlpatterns = [
    # 先省略
]

7.展示出html 页面

### 新建misterwu目录下urls.py文件
from django.urls import path
from . import views

urlpatterns = [
    path('',views.home,name="home") # 需要新建views.py 下home 方法
]

### 新建misterwu目录下views.py文件
from django.shortcuts import render

# Create your views here.
def home(request):
    return render(request,"home.html",{})  # 需要新建misterwu/templates目录下home.html文件
  
### 新建misterwu/templates目录下home.html文件
Hello world

进入浏览器： http://127.0.0.1:8000/

2020年1月22日00:09:39

梳理一下思路：

1.输入127.0.0.1:8000/ --> 请求mysite urls.py 路由函数

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

2.misterwu.urls 路由函数，配置视图函数 views.py 下home 方法

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

3.home方法，返回home.html 网页文件

def home(request):
    return render(request,"home.html",{})  # 需要新建misterwu目录下home.html文件

4.home.html 内容如下，返回Hello world

Hello world

8.创建公共html 模板

Boostrap4

8.1 . 修改base.html 文件，来源于bs4 初学者入门代码。（添加了block代码块）



  
    
    
    

    
    

    Hello, world!
  
  
    {% block content %}
    {% endblock %}

8.2 修改home.html

用extends 加载base.html模板.有点类似继承关系.

{% extends 'base.html' %}

{% block content %}
    Hello world
    测试是否可以看到我！
{% endblock %}

9.添加导航信息

1.
...
: 将信息居中显示

对base.html 进行修改，添加导航条



  
    
    
    

    
    

    米斯特吴
  
  
       
      米斯特吴
      
    
      
        
          
            Link
          
        
        
          
          
        
      
    




  

    
    {% block content %}
    {% endblock %}

效果如下：

2020年1月22日00:57:34

10.Github API 接口介绍

github API ： https://api.github.com/

image.png

jsonplaceholder 网站： http://jsonplaceholder.typicode.com/

image.png

11.接口请求和解析

下载 requests 模块

(2020-1)
16926@DESKTOP-NC9OOR3 MINGW64 ~/Desktop/2020-1
$ pip install -i https://pypi.douban.com/simple/ requests

修改misterwu目录下，views.py 请求函数

from django.shortcuts import render


# Create your views here.
def home(request):
    import requests
    import json
    api_request = requests.get("http://api.github.com/users?since=0")
    api = json.loads(api_request.content)

    return render(request, "home.html",
                  {"api": api})  # 需要新建misterwu目录下home.html文件

修改home.html ，添加api 变量

{% extends 'base.html' %}

{% block content %}
    Hello world
    测试是否可以看到我！
{% endblock %}

运行结果如下： python manage.py runserver

image.png

12.更好的展示数据信息

bs4 card 渲染card 形式

修改home.html : 对于HTML进行循环输出card 样式.

{% block content %}
    Hello world
    测试是否可以看到我！

    
        
            {% for x in api %}
            
                
                    
                    
                        {{x.login}}
                        {{x.login}}的github
                        访问
                    
                
                

                

            
            {% endfor %}
        
    

    {{api}}
{% endblock %}

效果如下：

2020年1月22日02:06:09

13.搜索页面跳转

1.添加user/ 路由, 实现路由访问 http://localhost:8000/user/

修改MYSITE/mysite目录下urls.py

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

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

from django.urls import path
from . import views

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

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

musterwu下template目录下，新建user.html

{% extends 'base.html' %}

{% block content %}

    Hello world!
    测试是否可以看到我！

{% endblock %}

测试结果：

2020年1月26日14:53:49

2.添加跳转功能 search ，请求单个人的信息

修改misterwu/template 目录下base from 表单，链接到user/路由函数上

**1.method="POST" action="{% url 'user' %}" **

**2.{{% csrf_token % }} **

3.将input 命名为user : name= "user"


    {% csrf_token %}

测试结果：

image.png

正常跳转到 user/路由解析

2020年1月26日14:53:49

3.点击search ，捕获输入内容

修改misterwu 目录下views.py ：捕获表单input,并且传递给user.html

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

修改misterwu/templates 目录下，user.html ,接受user 参数

{% extends 'base.html' %}

{% block content %}
    Hello {{user}}!
    测试是否可以看到我！
{% endblock %}

测试结果：(右上角输入内容:如kcao，点击search, 网页展示相应内容)

2020年1月26日15:55:24

14. 获取搜索数据：通过`search`不同的名字，请求获得不同的信息

2020年1月26日16:38:58

思路：

完善米斯特吴 和 查询 两个链接:

米斯特吴链接到home 路由，查询链接到 user 路由。ps:搜索也是链接到user路由。需要辨别两种请求

修改base.html . 对米斯特吴,link 两个link,添加链接

米斯特吴

查询

对views.py 进行修改

from django.shortcuts import render


# Create your views here.
def home(request):
    import requests
    import json
    api_request = requests.get("http://api.github.com/users?since=0")
    api = json.loads(api_request.content)

    return render(request, "home.html",
                  {"api": api})  # 需要新建misterwu目录下home.html文件


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})

3.对 user.html 进行修改。（ps: Django 自带的模板语言，类似python 语法）

{% extends 'base.html' %}

{% block content %}
    
    {% if notfound %}
        {{notfound}}
    {% else %}
        Hello {{user}}!
    {%endif%}

{% endblock %}

对两种请求方式进行判断，展示不同的信息

进一步完善search 功能，（通过表单提交，点击search 返回的结果）

misterwu/templates 目录下base 修改如下：

{% extends 'base.html' %}

{% block content %}
    
    {% if notfound %}
        {{notfound}}
    {% else %}
        
            
                
                
                    {{username.login}}
                    location: {{username.location}}的github
                    public_repos: {{username.public_repos}}的github
                    public_gists: {{username.public_gists}}的github
                    followers: {{username.followers}}的github
                    following: {{username.following}}的github
                    created_at: {{username.created_at}}的github
                    updated_at: {{username.updated_at}}的github
                
            
            

            

        
        Hello {{user}}!
    {%endif%}

{% endblock %}

运行效果：

2020年1月27日01:24:58

参考资料：

刘江的博客Django 教程
Heroku 部署Django
Heroku 部署教程2

Django小白入门的实战教程(2020)

Django 架构

1.成果展示

2.python 安装

3.虚拟环境安装使用

4.安装Django

5.启动Django 小程序

6.配置路由urls

7.展示出html 页面

Hello world

Hello world

8.创建公共html 模板

Boostrap4

Hello world

9.添加导航信息

10.Github API 接口介绍

11.接口请求和解析

Hello world

12.更好的展示数据信息

Hello world

{{x.login}}

13.搜索页面跳转

Hello world!

Hello {{user}}!

14. 获取搜索数据：通过search不同的名字，请求获得不同的信息

{{notfound}}

Hello {{user}}!

{{notfound}}

{{username.login}}

Hello {{user}}!

你可能感兴趣的:(Django小白入门的实战教程(2020))

14. 获取搜索数据：通过`search`不同的名字，请求获得不同的信息