您当前位置：首页 > 互联网 > openstack页面自定义插件使用详解（django、ajax、post）（zTree为例）

openstack页面自定义插件使用详解（django、ajax、post）（zTree为例）

来源：程序员人生发布时间：2014-10-04 08:00:00 阅读次数：3537次

1、鉴于国内java开发人员比较多，java web方面的技术比较成熟。所以用python django(openstack)框架和java的strurs做个类比，让大家能够更直观的理解、更快的进入到开发中：

附图大致对比下，具体细节，自行查找相关资料：

2、接下来正式开始讲解，如何在openstack中使用自定义插件，本文以Jquery zTree树形插件为例。

第一步封装url地址，请求数据，在urls中自定义url：

为了方便后续大家复制代码，也顺带附上源代码

urlpatterns = patterns('',

url(r'^$', views.IndexView.as_view(), name='index'),

url(r'^(?P<tenant_id>[^/]+)/update/$',views.UpdateIsolationView.as_view(), name='update'),

url(r'^(?P<tenant_id>[^/]+)/tree/$',views.TreeView.as_view(), name='tree'),

url(r'^(?P<tenant_id>[^/]+)/get_tree_data/$',views.JSONGetView.as_view(), name='get_tree_data'),

url(r'^(?P<tenant_id>[^/]+)/set_tree$',views.JSONSetView.as_view(), name='set_tree'),

)

3、根据url规则匹配到对应的views的JSONGetView类：

from django.views import generic

from django.http import HttpResponse # noqa

import json

class JSONGetView(generic.View):

def get(self, request, *args, **kwargs): #定义get方法

tenant_id = self.kwargs["tenant_id"] #从url中截取参数值tenant_id

aggregates = []

try:

aggregates = api.nova.aggregate_details_list(self.request)

api.nova.isolatation_tree_list(self.request, tenant_id)

except Exception:

exceptions.handle(request,

_('Unable to retrieve host aggregates list.'))

aggregates.sort(key=lambda aggregate: aggregate.name.lower())

#调用底层api 构造 zTree的数据

tree_list = []

for ag in aggregates:

tree_data = {}

tree_data['id'] = ag.availability_zone

tree_data['name'] = ag.availability_zone

tree_data['pId'] = 'NULL'

tree_data['open'] = 'true'

if tree_data not in tree_list:

tree_list.append(tree_data)

tree_data = {}

tree_data['id'] = ag.name

tree_data['name'] = ag.name

tree_data['pId'] = ag.availability_zone

tree_data['open'] = 'true'

if tree_data not in tree_list:

tree_list.append(tree_data)

for hostname in ag.hosts:

tree_data = {}

tree_data['id'] = hostname

tree_data['name'] = hostname

tree_data['pId'] = ag.name

tree_data['open'] = 'true'

if tree_data not in tree_list:

tree_list.append(tree_data)

result = json.dumps(tree_list) #此处将python对象转换成json对象

print (result)

return HttpResponse(result,content_type="application/json")

4、到此获取数据的url完成，测试下url（浏览器直接访问）：

http://192.168.10.31/dashboard/admin/isolations/2a4fe5e733e44982b1d576c5a0fe4bfd/get_tree_data/

得到数据：

[{

"open": "true",

"pId": "NULL",

"id": "zone1",

"name": "zone1"

{

"open": "true",

"pId": "zone1",

"id": "ag1",

"name": "ag1"

{

"open": "true",

"pId": "ag1",

"id": "node32",

"name": "node32"

{

"open": "true",

"pId": "ag1",

"id": "node31",

"name": "node31"

{

"open": "true",

"pId": "zone1",

"id": "ag2",

"name": "ag2"

{

"open": "true",

"pId": "ag2",

"id": "node33",

"name": "node33"

{

"open": "true",

"pId": "NULL",

"id": "zone2",

"name": "zone2"

{

"open": "true",

"pId": "zone2",

"id": "ag3",

"name": "ag3"

{

"open": "true",

"pId": "ag3",

"id": "node35",

"name": "node35"

{

"open": "true",

"pId": "ag3",

"id": "node34",

"name": "node34"

}]

url能正确获取数据，测试通过。

5、用ajax在html页面中请求该url获取数据：

先附上页面模板代码：

其中javascript要写在标签{% block modal-body %}中才能失效，具体的zTree的js导入本文使用了为压缩的方式，直接导入。

{# add by ttx 2014-9-25#}

zTree插件路径：

详解ajax请求：

var url = '/dashboard/admin/isolations/{{ tenant_id }}/get_tree_data'; #此处为ajax的url地址，与步骤4中浏览器访问一致

$.ajax({ #其中$代表Jquery插件，ajax为Jquery插件的方法

type: "get", #type主要有get、post。其中get用于获取数据，是幂等操作、post用于跟新数据

async: false, #false代码同步刷新，true代表异步刷新。本示例需要等到数据返回再进行tree的渲染，因此需要同步

url: url, #请求的url地址

dataType: "json", #数据返回类型为json

success: function (data) { #ajax请求成功之后得到数据data，执行success：后面function里面代码

json = JSON.stringify(data);

host_tree_data = JSON.parse(json)

}

});

更多ajax详细使用讲解请自行参考相关资料。

后续就是具体的zTree根据得到的数据host_tree_data ，生成zone、aggregate、host的节点树，附上简单代码，不详解：

{% extends "horizon/common/_modal_form.html" %}

{% load i18n %}

{% load url from future %}

{% block form_id %}create_image_form{% endblock %}

{% block form_action %}{% url 'horizon:admin:images:create' %}{% endblock %}

{% block form_attrs %}enctype="multipart/form-data"{% endblock %}

{% block modal-header %}{% trans "Isolatation tree" %}{% endblock %}

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 大型网站系统架构的演化

下一篇 Unity3D游戏开发之实现血条技能培训

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点