在前一篇我们已经建立了一套数据库用来存储我们的云资源资料以及有了一个简单的admin后台，但是这个后台毕竟太难看了，我们可以自己搭建一个更漂亮的界面来满足领导的需求，那么这个时候就需要template。在template中，我们存放HTML页面，并通过Django的API能够调用这些界面，同时能够把一些数据传递到这些页面上。
1.我们在之前已经建立好的Online文件夹里建立一个templates文件夹。
2.url.py里制定访问的网页路径，在这里我们先制定两个，一个是线上服务器的界面，另一个是数据库：
|
1
2
3
4
5
6
7
8
|
from django.conf.urls import url
from django.contrib import admin
import Online.views
urlpatterns = [ url(r'^admin/', admin.site.urls),
url(r'^alionlineecs/', Online.views.alionlineecs),
url(r'^rds/', Online.views.rds),
] |
3.在views.py里写上对应的函数：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
# -*- coding: UTF-8 -*-from django.shortcuts import render
from .models import alionlineECS,RDS #这里的import是来自model.py里的
def alionlineecs(request): data = alionlineECS.objects.all() #这里也是要跟model.py一样
context = {
'data': data,
}
#跳转到相应页面，并将值传递过去
return render(request,'alionlineecs.html',context) #规定alionlineecs.html作为展示页
def rds(request): data = RDS.objects.all()
context = {
'data':data,
}
return render(request,'rds.html',context)
|
这个代码里面我写了 data=alionlineECS.objects.all()，这是通过DJANGO的ORM来进行SQL操作，建立context这个字典，将data值传递到相应页面。
4.在template文件夹里面建立alionlineecs.html和rds.html 这两个文件，alionlineecs.html如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body> <table>
<tr>
<th>云服务器名称</th>
<th>云服务器类型</th>
<th>云服务器内网地址</th>
<th>云服务器外网地址</th>
<th>云服务器外网带宽</th>
<th>云服务器配置</th>
<th>备注</th>
</tr>
{% for item in data %}
<tr>
<td>{{ item.ecs_name }}</td>
<td>{{ item.ecs_type }}</td>
<td>{{ item.ecs_inip }}</td>
<td>{{ item.ecs_outip }}</td>
<td>{{ item.ecs_ipwidth }}</td>
<td>{{ item.ecs_spec }}</td>
<td>{{ item.ecs_remarks }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
|
而rds.html的内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body> <table>
<tr>
<th>数据库名称</th>
<th>数据库类型</th>
<th>mysql版本</th>
<th>数据库规格</th>
<th>数据库地址</th>
<th>备注</th>
<th>存储空间</th>
</tr>
{% for item in data %}
<tr>
<td>{{ item.rds_name }}</td>
<td>{{ item.rds_type }}</td>
<td>{{ item.rds_mysql }}</td>
<td>{{ item.rds_spec }}</td>
<td>{{ item.rds_ip }}</td>
<td>{{ item.rds_remark }}</td>
<td>{{ item.rds_status }}</td>
</tr>
{% endfor %}
</table>
</body>
</html>
|
可以看出item里面的各个项就是model.py里面的项，这样就会一一对应。其中用{% %}括起的就是django的模板语言，在django的模板语言中，包含了类似于for循环，if等条件判断语句，可以非常灵活地满足用户的各种需求。其中，` data `用来在页面上显示data的值。此后,我们还将提到的include和block功能，将会非常方便地继承网页。
5.现在去启动django，然后在浏览器进入admin后台，添加两个rds实例，比如：
然后在浏览器尝试url中定义的rds的路径，就可以访问相应页面了：
但是我们还是不希望进入admin去改，毕竟 admin是后台，我们还是更希望在页面里进行增删改查的工作，那么要通过页面往数据库里传递数据是要通过表单的，而django的表单就叫做forms。这里我们使用ModelForm，因为我们之前已经写了一个model.py，而要添加的内容肯定都是model.py里的项，所以就采用ModelForm，改动很小，甚至可以用ModelForm来改model.py。
-
首先现在Online这个文件夹里面建立一个叫form.py，内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
# -*- coding: UTF-8 -*- from django.forms import ModelForm
from .models import alionlineECS,SLB,RDS #这里暂时先加这三项
#定义Node的Form,Form名字为 模式名+Formclass alionlineForm(ModelForm):
#自定义ModelForm的内容
class Meta:
#该ModelForm参照Model: alionlineECS
model = alionlineECS
#在Form中不显示注册人这个字段，下面也是
exclude = ['ecs_signer']
class SLBForm(ModelForm):
class Meta:
model = SLB
exclude = ['slb_signer']
class RDSForm(ModelForm):
class Meta:
model = RDS
exclude = ['rds_signer']
|
2.由于要建立url与页面的关系， 我们要在url.py里追加这样的话：
|
1
2
3
|
url(r'^addalionlineecs/', Online.views.addalionlineecs),
url(r'^addslb/', Online.views.addslb),
url(r'^addrds/', Online.views.addrds),
|
3.然后还要在view.py里添加对应的函数关系：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
from forms import alionlineForm,SLBForm,RDSForm
def addalionlineecs(request):
#获取来自alionlineForm的表单数据
form = alionlineForm(request.POST or None)
#判断form是否有效
if form.is_valid():
#创建实例，需要做些数据处理，暂不做保存
instance = form.save(commit=False)
#将登录用户作为登记人
instance.node_signer = request.user
#保存该实例
instance.save()
#跳转至列表页面
return redirect('/alionlineecs/')
#创建context来集中处理需要传递到页面的数据
context = {
'form': form,
}
#如果没有有效提交，则仍留在原来页面
return render(request, 'addalionlineecs.html', context)
|
4.来到template里新写一个addalionlineecs.html，内容如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html><html><head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body> <form method='POST' action=''>{% csrf_token %}
{{ form }}
<input type='submit' value='提交' />
</form>
</body>
</html>
|
5.来到浏览器里，打开对应的addonlineecs.html就会看到添加的界面了，就不用在admin里添加了：
点击旁边的“提交”之后，看到地址栏机会跳到alionlineecs这个界面：
这样一个基于页面的增删改查的环境就搭建完毕了。
本文转自 苏幕遮618 51CTO博客，原文链接:http://blog.51cto.com/chenx1242/1946950