lanbos'blog

django 初学(二)

django路由和模板的初步学习

#利用路由对地址栏获取和操作
假设之前建立的项目名称叫testPython工程名字叫learn,进入learn/views.py文件:

1
2
3
4
5
6
7
8
9
10
11
12
from django.shortcuts import render
from django.http import HttpResponse

def add(request):
a = request.GET['a']
b = request.GET['b']
c = int(a)+int(b)
return HttpResponse(str(c))

def add2(request, a, b):
c = int(a) + int(b)
return HttpResponse(str(c))

再进入testPython/urls.py文件:

1
2
3
4
5
6
7
8
9
from django.conf.urls import url
from django.contrib import admin
from calc import views as calc_views

urlpatterns = [
url(r'^add/$', calc_views.add, name='add'),
url(r'^add/(\d+)/(\d+)/$', calc_views.add2, name='add2'),
url(r'^admin/', admin.site.urls),
]

这样我们可以通过地址栏进行两个参数的加减法运算:
1.第一种为传参运算,在浏览器地址栏中输入http://127.0.0.1:5000/learn/add/?a=4&b=5页面显示结果为9;
2.为地址运算,在地址栏输入http://127.0.0.1:5000/learn/add/7/8/页面小时结果为15.

##路由中url的name属性
name属性主要用来对应模板文件,修改learn/views.py:

1
2
3
4
5
from django.http import HttpResponse
from django.shortcuts import render

def index(request):
return render(request, 'home.html')

render是渲染模板的函数,此时之前应该已修改项目目录下的settings.py文件,把learn加入了app列表中。随后在learn文件中新建文件夹templates并在文件夹中新建文件:home.html,在learn/templates/home.html中写入:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title>document</title>
</head>
<body>

<a href="/learn/add?a=4&b=5">计算 4+5</a>

</body>
</html>

然后在testPython/urls.py文件中继续添加:

1
2
3
4
5
6
7
urlpatterns = [
# url(r'^learn/index/$',learn.views.index),
url(r'^admin/', admin.site.urls),
url(r'^learn/add/$',learn.views.add,name="add"),
url(r'^learn/add/(\d+)/(\d+)/$',learn.views.add2,name="add2"),
url(r'^$',learn.views.index,name="home"),
]

这样用浏览器输入http://127.0.0.1:5000/就进入了home页,点击链接后跳转到计算页面,进行计算。

##django模板
虽然在实际的开发过程中通常会采用前后分离的开发方式,模板渲染的过程会交给前端js来完成,但是有一些常见的参数还需要在django中完成获取和渲染,还有部分参数需要django放置到html的隐藏域中,js通过dom操作来获取。进入learn/views.py,修改为:

1
2
3
4
5
6
7
8
import json
def index(request):
page_info={
"pageName":"home",
"pageNum":0,
"pageList":["jquery","ng","underscore","echarts"]
}
return render(request,'learn/home.html',{"pageInfo":json.dumps(page_info)})

注意,python的字典必须用json.dumps()转换为前端可以识别的json格式,否则前端无法转换为对象。再打开learn/templates/learn/home.html进行更改(注意,一定要在templates文件夹下建一个和app名字相同的文件夹,html文件要放在这个文件夹下,这样可以防止多个app中的html文件名字冲突导致django识别模版错误):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>document</title>
</head>
<body>
<a href="/learn/add?a=4&b=5">计算 4+5</a>
<h2>{{request.path}}</h2>
<h3>当前网址</h3>
<h2>{{request.GET.urlencode}}</h2>
<h3>当前get参数</h3>
<script type="text/javascript">
var domNew=document.getElementById('pageInfo');
var domInfo=domNew.getAttribute("backInfo");
console.log(domInfo);
var infoDic=JSON.parse(domInfo);//把json格式的字符串转换为js的对象
console.log(infoDic);
console.log(infoDic.pageNum);
</script>

</body>
</html>

然后访问http://127.0.0.1:5000/?getInofo=1打开控制台在控制台中就可以看到输出内容

1
2
3
{"pageName": "home", "pageList": ["jquery", "ng", "underscore", "echarts"], "pageNum": 0}
{pageName: "home", pageList: Array[4], pageNum: 0}
0

页面显示出当前网址和get的参数。