蓝鲸实践作业——Django基础(二)

在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页面增添数据项测试

{主机地址}/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并进行处理,找到了思路:

  1. 将页面此时拉取的特定主机编号通过ajax返回到筛选特定服务器的函数
  2. 函数利用条件筛选出特定主机
  3. 将特定主机的数据项返回至data
  4. JavaScript通过对data的处理填写入表格
  5. 将页面中表格的内容更新为新的表格

实现过程

处理返回为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);
                        })

Leave a comment

Your email address will not be published. Required fields are marked *