在SaaS上要开发一个类似评论功能,需要掌握何从页面上进行数据的异步提交,如何通过Django编写接口,如何通过ORM对数据进行增删改查,如何通过Admin界面管理DB中数据等技术。
题目
1.实现“选择业务”功能。调用cmdb的search_business接口,将获取到的业务渲染到“执行任务”页面的“选择业务”下拉框。 2.实现 “选择主机“功能。 a> 当页面初次加载时,或”选择业务”下拉框选到某业务时,查询选择主机接口。 b> 实现选择主机接口,接收页面传上的json数据。 c> 接口调用cmdb的search_host接口,将主机IP, 操作系统等信息返回 d> 将返回的IP数据以表格形式渲染,每行显示一台主机 将该功能实现后,上线到生产环境。 |
思路
选择业务
在model.py中建立search_business表
class search_business(models.Model):
businessname=models.CharField(max_length=50,verbose_name='业务名称')
businesscontent=models.TextField(verbose_name='业务内容')
def __str__(self):
return self.businessname
在admin.py中注册该表
from django.contrib import admin
from .models import search_business
admin.site.register(search_business)
在命令窗口更新
python manage.py makemigrations
python manage.py migrate
在html中修改代码读取对应值
需要在view.py中将数据表search_business传入
#view.py
from .models import SelectScript,search_business
def tasks(request):
tasks=SelectScript.objects.all()
businesses=search_business.objects.all()
data={"tasks":tasks,"businesses":businesses}
return render(request,'home_application/tasks.html',data)
原本担心如何把多个参数传入render函数中,但上次提供的教程采用字典格式,解决我的疑惑。
修改tasks.html遍历businesses
……
<select class="form-control">
{% for business in businesses %}
<option value={{business.id}}>{{business.businessname}}</option>
{% endfor %}
</select>
此时,可以现在admin页面增添数据项测试
选择主机
新增一个选择框
内容需要从页面中获取数据
可以筛选出表格的每一行,但出于可重用性考虑,建立主机数据表
class search_server(models.Model):
serverIP=models.CharField(max_length=50,verbose_name='IP')
serverOS=models.CharField(max_length=50,verbose_name='操作系统')
def __str__(self):
return self.serverIP
与第一步相同,在admin.py中注册,再在命令行窗口更新数据表。之后在admin界面加入数据,在view.py像html传入数据,再修改html渲染传入的数据即可:
同理让选择框读取相应的数据
进行主机的选择
对选择框的内容进行读取,点击提交后,就可以刷新界面,将选定的得出。
通过选择器可以得到目前处于筛选框中的是哪个主机地址。
我们写script实现对页面内容的调整:表格重新加载为指定的那个
<script>
function particular() {
$("#tablecontent").remove()
}
$("#submit").click(function () {
particular()
})
</script>
一个小小的尝试,实现页面内容的改动:点击提交按钮将表格内容删除。
因此我们只需要将表格只展示为符合条件的主机即可
简单的实现方法:将提交时产生的条件筛选产生新的数据项:再次渲染页面即可
通过ajax直接改变失败
表格中新增一项筛选特定主机
<tbody id="tablecontent">
{% for server in particularservers %}
<tr>
访问成功,提交ajax请求
但并没有减少表格显示,调试发现,此时的页面内容并没有跳转或更新。而且根据需求,最好只进行页面部分内容的更新而非刷新整个页面,继续其他方向的尝试——
通过属性改变失败
可以把不被标签内的属性设为不可见,但此外不行,因此必须对内容进行替换。
最终方法
实现思路
首先通过逆向分析一个含有表格网页的代码
得知可以获得ajax返回的data并进行处理,找到了思路:
- 将页面此时拉取的特定主机编号通过ajax返回到筛选特定服务器的函数
- 函数利用条件筛选出特定主机
- 将特定主机的数据项返回至data
- JavaScript通过对data的处理填写入表格
- 将页面中表格的内容更新为新的表格
实现过程
处理返回为json格式的data数据
def particularServer(request):
data={
'info':
[
{
'id':3,
'IP':'3.5.2.1',
'OS':'WIN7',
},
{
'id':4,
'IP':'3.6.2.1',
'OS':'WIN8',
}
]
,
}
return JsonResponse(data, safe=False)
数据解析出来:
success: function (data) {
console.log(data)
var obj = data['info']
console.log(obj)
$(obj).each(function (index) {
var val = obj[index];
console.log(val);
var id = val['id'];
var IP = val['IP'];
var OS = val['OS'];
console.log(id);
console.log(IP);
console.log(OS);
})
}
将表格内容动态替换为新的数据
先测试一组数据
观察格式,调整一下
var tbody = $('<tbody id="tablecontent"></tbody>')
var tr = $('<tr id="serverid"> \
< td > \
<input type="checkbox" value=""> \
</td> \
<td id="">8</td> \
<td>8.8.8.8</td> \
<td>new</td>\
<td>\
<button class="btn btn-xs btn-primary" title="编辑">\
<i class="glyphicon glyphicon-edit"></i>\
</button>\
<button class="btn btn-xs btn-danger" title="删除">\
<i class="glyphicon glyphicon-remove"></i>\
</button>\
</td>\
</tr >')
tbody.append(tr);
$("#tablecontent").replaceWith(tbody)
现在只需要把传入数据替换位置即可
最后一步便是把数据库中的数据转换为json格式的数据
success: function (data) {
console.log(data)
var obj = eval(data)
console.log(obj)
$(obj).each(function (index) {
var val = obj[index];
console.log(val);
var id = val['pk'];
var IP = val.fields.serverIP;
var OS = val.fields.serverOS;
console.log(id);
console.log(IP);
console.log(OS);
})
}
实现
var tbody = $('<tbody id="tablecontent"></tbody>');
$(obj).each(function (index) {
var val = obj[index];
console.log(val);
var id = val['pk'];
var IP = val.fields.serverIP;
var OS = val.fields.serverOS;
var tr = $('<tr id="serverid+' + id + '"> \
< td > \
<input type="checkbox" value=""> \
</td> \
<td id="">'+ id + '</td> \
<td>'+ IP + '</td> \
<td>'+ OS + '</td>\
<td>\
<button class="btn btn-xs btn-primary" title="编辑">\
<i class="glyphicon glyphicon-edit"></i>\
</button>\
<button class="btn btn-xs btn-danger" title="删除">\
<i class="glyphicon glyphicon-remove"></i>\
</button>\
</td>\
</tr >')
tbody.append(tr);
})