(2)urls.py文件学习;urls.py文件中的path,转换器;include学习;path中的参数kwargs;页面重定向;path中的参数name;Django调用HTML前端页面的方式

url路由及模板渲染方式

(1)url基本概念及格式

1.url概念:

URL(Uniform Resoure Locator)统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。

2.url格式:

http://127.0.0.1:8000/hello/
URL解释:
schema://host[:port#]/path/.../[?query-string][#anchor]
schema:指定使用的协议(例如:http, https, ftp)
host:Http服务器的IP地址或者域名
port:端口号,http默认是80端口
path:访问资源的路径
query-string:发送给http服务器的数据
anchor:锚点# 

3.urls.py文件的作用(重点!)

URL配置(URLconf)就像是Django所支撑网站的目录。**它的本质是URL模式以及要为该URL模式调用的视图函数之间的映射表。**以这样的方式告诉Django,对于那个URL调用那段代码。url的加载就是从配置文件中开始(也就是说我们浏览器中输入URL,首先经过的后台就是此文件)

Django项目中url例子:

(1)urls.py文件是创建Django项目后自动创建的:
"""dj_test URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path           
from . import views

urlpatterns = [     #主路由
    path('admin/', admin.site.urls),
    #URL配置的本质是URL模式以及要为该URL模式调用的视图函数之间的映射表
    path('test/', views.test),    
	#两个参数: 第一个参数是URL中的路径参数;第二个参数是和此URL关联的视图函数。
]
(2)views.py视图函数文件是要自己在项目中创建的:
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
#视图操作

def test(request):   #函数视图
    return HttpResponse("这里是帅哥")

注意:
(2)urls.py文件学习;urls.py文件中的path,转换器;include学习;path中的参数kwargs;页面重定向;path中的参数name;Django调用HTML前端页面的方式

(2)urls.py文件中的path和re_path

1.path基本规则:

(2)urls.py文件学习;urls.py文件中的path,转换器;include学习;path中的参数kwargs;页面重定向;path中的参数name;Django调用HTML前端页面的方式

2.默认支持的转换器:

str,匹配除了路径分隔符(/)之外的非空字符串,这是默认的形式  <str:xx>
int,匹配正整数,包含0。
slug,匹配字母、数字以及横杠、下划线组成的字符串。
uuid,匹配格式化的uuid,如 075194d3-6885-417e-a8a8-6c931e272f00。(这是唯一的!)
path,匹配任何非空字符串,包含了路径分隔符


3.转换器的作用:(默认是str转换器:所以如果不设置转换器,那么接收到的一切值都是str字符串格式,如果要改变这个格式就使用到了转换器!)

(2)urls.py文件学习;urls.py文件中的path,转换器;include学习;path中的参数kwargs;页面重定向;path中的参数name;Django调用HTML前端页面的方式

一般情况下,使用path即可。但是,如果要匹配的过于复杂,使用path中的转换器无法解决的时候,就要使用到re_path(实则是使用正则匹配!)

4.re_path正则匹配:(浏览器中输入的ULR的地址参数可以任意多,只要包括规定的路径即可!)

(2)urls.py文件学习;urls.py文件中的path,转换器;include学习;path中的参数kwargs;页面重定向;path中的参数name;Django调用HTML前端页面的方式
示范:

1.urls.py文件:
"""dj_test URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path,re_path                    #导入re_path,使用正则
from . import views

urlpatterns = [     #主路由
    path('admin/', admin.site.urls),
    path('test/', views.test),    #路径  关联的视图

    path('test2/<name>/<int:age>/', views.test2),       #变量默认接收的是字符串形式    改变格式是通过转换器  <int:age>规定所接收的类型


    re_path('^test3/(?P<bb>[0-9]+)',views.test3)
]

2.views.py视图函数文件:
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
#视图操作

def test(request):   #函数视图
    return HttpResponse("这里是帅哥")

#url传参(url参数)
def test2(request,name,age):   #函数视图
    return HttpResponse("我叫%s,今年%s岁"%(name,age))

def test3(request,bb):   #函数视图
    return HttpResponse("哈哈哈")
3.效果:

(2)urls.py文件学习;urls.py文件中的path,转换器;include学习;path中的参数kwargs;页面重定向;path中的参数name;Django调用HTML前端页面的方式
(2)urls.py文件学习;urls.py文件中的path,转换器;include学习;path中的参数kwargs;页面重定向;path中的参数name;Django调用HTML前端页面的方式


(3)include的作用(一个url对应一个视图函数,但我们的视图越来越多时,url也就越来越多。如果我们都将它们放进主路由里,不仅杂乱而且难找;所以引入include!)

1.include的作用:

一个project有一个总的urls.py
各个app也可以自己建立自己的urls.py(但是浏览器中访问url的时候最先访问的仍是总的urls.py文件)
所以用include()函数在project的urls.py文件进行注册(分配)

示范:

(1)项目目录下的主urls.py文件:
from django.contrib import admin
from django.urls import path,include	#使用include要导入
from . import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('music/',include('music.urls')),	#第一个路径是app的路径
]

(2)App music里面的urls.py文件:
from django.urls import path
from . import views
urlpatterns = [
    path('sing/',views.sing),
    ]

(3)App music里面的views.py文件:
from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
def sing(request):
    return HttpResponse('让我们一起摇摆!!')

(4)本地浏览器问:127.0.0.1:8000/music/sing。即可得到正确视图!

(2)拓展:path()中的参数kwargs

Kwargs为字典类型
可以传递额外的参数到views中
使用include的时候
需要统一给下面的url一些参数的时候
显得尤其有用

1.App music里面的urls.py文件:
from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [     #子路由
	#传递一个Python 字典作为额外的参数传递给视图函数。
    path("sing/",views.sing,{"name":"小明","age":18}),        #对应的路径可以给对应的视图传值

]

2.App music里面的views.py文件:
from django.shortcuts import render      
from django.http import HttpResponse
import time
# Create your views here.

#音乐app下面的视图函数
def sing(request,**kwargs):     	#**表示接受字典型数据    
	#本地浏览器访问:127.0.0.1:8000/music/sing在pycharm终端中会输出!
    print(kwargs)                   #输出:{"name":"小明"}
    print(kwargs.get("name"))       #输出:小明
    name=kwargs.get("name")
    age=kwargs.get("age")
    return HttpResponse("{}太帅了,年龄是{}".format(name,age))   #输出:小明太帅了,年龄是18

(4)页面重定向

(例如:在页面中登录QQ空间,登录成功后会跳转到你的QQ空间的页面)

1.App music里面的views.py文件:
from django.shortcuts import render,redirect        #redirect是重定向;reverse
from django.http import HttpResponse
import time
# Create your views here.

def test01(request):
    print("登录成功")           
    time.sleep(3)
    return redirect("/")        #如果登录成功,返回到首页,首页没有地址,所以是/       *做了路由跳转=====重定向*

2.App music里面的urls.py文件:
from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [     #子路由
    path("test01/",views.test01),
]
3.项目目录下的urls.py文件:
from django.contrib import admin
from django.urls import path,re_path,include                 #include用来分配的
from . import views

urlpatterns = [     #主路由:只用来分配
    path('admin/', admin.site.urls),
    path('', views.index),                                  #地址栏不写,则为首页
    path('music/', include("music.urls")),
]   
4.项目目录下的views.py文件:
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.

def index(request):  
    return HttpResponse("这里是首页")
5.如果现在在本地浏览器输入127.0.0.1:8000/music/test01,那么效果是等待3S后页面自动跳转到首页中!

拓展:如果某个被多次重定向地址,这个地址名发生改变,那将会引发我们要接连更改好多对他重定向的代码。想想都恐怖,所以path()中提供了一个name参数帮助我们解决这个难题!!!

**
name参数可以给这个url取一个合适的名字。通过给url取名字,以后在view或者模板中使用这个URL,就只需要通过这个名字就可以了。这样做的原因是防止url的规则更改,会导致其他地方用了这个url的地方都需要更改,但是如果取名字了,就不要做任何改动了。
**

1.项目目录下的urls.py文件:
from django.contrib import admin
from django.urls import path,re_path,include                 #include用来分配的
from . import views

urlpatterns = [     #主路由:只用来分配
    path('admin/', admin.site.urls),
    path('music/', include("music.urls")),
]

我们现在跳转的仍是App music下的路由,所以不需要编写项目目录下的views.py文件

2.App music里面的urls.py文件:
from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [     #子路由
    path("test01/",views.test01),
    path("sing/",views.sing,{"name":"小明","age":18},name="bb"),       

]

3.App music里面的views.py文件:
from django.shortcuts import render,redirect,reverse        #redirect是重定向,reverse是将url的name解析成url本身的函数
from django.http import HttpResponse
import time
# Create your views here.

#音乐app下面的视图函数
def sing(request,**kwargs):
    name=kwargs.get("name")
    age=kwargs.get("age")
    return HttpResponse("{}太帅了,年龄是{}".format(name,age))

#登录页
def test01(request):
    print("登录成功")
    time.sleep(3)
    #下面两者作用一模一样:
    # return redirect("/music/sing")    #跳转到唱歌页面
    return redirect(reverse("bb"))      #reverse可以将当前这个bb的这个名称解析为它所对应的url地址,    即(当前视图的url路径):/music/sing
        #解决无论url的地址如何改变,只要它的name属性不变这些关于他的重定向都可以正常执行!

4.在本地浏览器中输入:127.0.0.1:8000/music/test01,等待3S会跳转到唱歌页面。显示:小明太帅了,年龄是18

(5)Django怎样去调用漂亮的HTML前端页面呢?

(render方法是django封装好用来渲染模板的方法)

很方便,很好用!!!

1.模板放在哪?

1.在主目录下创建一个templates目录用来存放所有的html的模板文件.
2.templates目录里面在新建各个以app名字命名的目录来存放各个app中模板文件.
(2)urls.py文件学习;urls.py文件中的path,转换器;include学习;path中的参数kwargs;页面重定向;path中的参数name;Django调用HTML前端页面的方式

(1)App music里面的views.py文件:
from django.shortcuts import render,redirect,reverse       
from django.http import HttpResponse
import time
# Create your views here.

def login(request):   #登陆
    return render(request,"music/test01.html")     #返回HTML模板       
    #第二个html文件的路径可以直接写templates下的:因为在settings.py文件中已经配置好了!

(2)urls.py文件学习;urls.py文件中的path,转换器;include学习;path中的参数kwargs;页面重定向;path中的参数name;Django调用HTML前端页面的方式

(2)App music里面的views.py文件:
from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [     #子路由
    path("login/",views.login),
]

(3)HTML模板文件:

(2)urls.py文件学习;urls.py文件中的path,转换器;include学习;path中的参数kwargs;页面重定向;path中的参数name;Django调用HTML前端页面的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面</title>
    <link rel="stylesheet" href="RESETCSS.css">
    <style>
        div{
            width: 300px;
            height: 350px;
            border: 1px solid grey;
            margin: 8px 0 0 8px;
        }
        span{
            border-bottom: 3px solid purple;
            padding-bottom: 3px;
        }
        a{
            text-decoration: none;
            float: right;
            padding-top: 3px;
            color: deepskyblue;
        }
        .first{
            width: 290px;
            height: 30px;
            border: 1px solid grey;
            border-radius: 5px;
            margin: 5px 4px;
        }
        .second{
            width: 200px;
            height: 30px;
            border: 1px solid grey;
            border-radius: 5px;
            margin: 5px 4px;
        }
        .third{
            width: 79px;
            height: 30px;
            border: 1px solid blue;
            border-radius: 5px;
            color: blue;
        }
        .fourth{
            width: 79px;
            height: 30px;
            border: 1px solid blue;
            border-radius: 5px;
            vertical-align: middle;
            background-image: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1378353400,959510337&fm=26&gp=0.jpg");
            background-size: 79px 30px;
        }
        .zc{
            width: 290px;
            height: 30px;
            border: 1px solid grey;
            border-radius: 5px;
            margin: 5px 4px;
            background-color: skyblue;
            color: white;
        }
    </style>
</head>
<body>

<div>
    <form action="">
        <span>请注册</span>
        <a href="">立即登录&lt;</a>
        <hr>
        <input type="text" class="first" placeholder="请输入手机号"><br>
        <input type="text" class="second" placeholder="请输入短信验证码">
        <input type="button" class="third" value="发送验证码"><br>
        <input type="text" class="first" placeholder="请输入用户名"><br>
        <input type="password" class="first" placeholder="请输入密码"><br>
        <input type="password" class="first" placeholder="请再次输入密码"><br>
        <input type="text" class="second" placeholder="请输入图形验证码">
        <input type="button" class="fourth"><br>
        <input type="submit" class="zc" value="立即注册"><br>
    </form>
</div>

</body>
</html>
重置代码:
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
(4)实现效果:

(2)urls.py文件学习;urls.py文件中的path,转换器;include学习;path中的参数kwargs;页面重定向;path中的参数name;Django调用HTML前端页面的方式

上一篇:python测试开发django-73.django视图 CBV 和 FBV


下一篇:vue 参数传递以及重定向