Django-website 程序案例系列-7 创建多对多关系表

创建多对多关系表：

方式一：一共三张表其中有一张中间表需要手工建立（建议使用第一种方式自定制程度高）

class Host(models.Model):

    hostname = models.CharField(max_length=32, db_index=True)

    ip = models.GenericIPAddressField(db_index=True,protocol="ipv4")

    port = models.IntegerField()

    b = models.ForeignKey('Business', to_field='id')  

class Application(models.Model):

    name = models.CharField(max_length=32)

class HostToApp(models.Model):        #多对多关系的中间表

    hobj = models.ForeignKey(to='Host', to_field='id')

    aobj = models.ForeignKey(to='Application', to_field='id')

方式二：一共两张表没有中间表，中间表又django自动生成（默认只能生成3列数据，如果需要更多数据就需要使用方式一来建立多对多关系）

class Host(models.Model):

    hostname = models.CharField(max_length=32, db_index=True)

    ip = models.GenericIPAddressField(db_index=True,protocol="ipv4")

    port = models.IntegerField()

    b = models.ForeignKey('Business', to_field='id')  

class Application(models.Model):

    name = models.CharField(max_length=32)

    r = models.ManyToManyField("Host")   #建立多对多的关系，django自动生成中间表

#操作第三章表
obj = Application.objects.get(id=1)
obj.r.add(1)            #增加第三张表的关系
obj.r.add(2,3)
obj.r.add(*[1,2,3,4])

obj.r.remove(1)　　　　　　#删除
obj.r.remove(2,3)
obj.r.remove(*[1,2,3])
　　
obj.r.clear()　　　　　　　　#清空
obj.r.set([3,5,7])　　　　  #修改
obj.r.all()     #获取所有相关host对象列表（QuerySet）

views.py

#传统模式使用GET和POST方式来接收表单数据
def app(request):

    if request.method == "GET":

        app_list = models.Application.objects.all()

        host_list = models.Host.objects.all()

        return render(request, 'app.html',{'app_list': app_list, 'host_list': host_list})

    elif request.method == "POST":

        app_name = request.POST.get('app_name')                    #拿到前端传来的增加app的名字

        host_list = request.POST.getlist('host_list')　　　　　　　　 #拿到前端传来的增加host关联的数据，使用getlist()获取列表

        obj = models.Application.objects.create(name=app_name)　　　　#Application表中创建新的appname

        obj.r.add(*host_list)　　　　#创建第三章表中的关系数据

        return redirect('/app')　　　　#刷新页面

#使用aja来实现表单数据的接收
def ajax_add_app(request):

    ret = {'status': True, 'error': None, 'data': None}    #设置一个json格式的字符串

    app_name = request.POST.get('app_name')　　　　　　　　　

    host_list = request.POST.getlist('host_list')

    obj = models.Application.objects.create(name=app_name)

    obj.r.add(*host_list)　　　　　　　　　　　　　　

    return HttpResponse(json.dumps(ret))　　　　#返回一个json格式的字符串

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .host-tag{　　　　　　　　　　　　　　#显示主机关系标签的样式

            display: inline-block;

            padding: 3px;

            border: 1px solid red;

            background-color: #0169eb;

        }

        .hide{

            display: none;

        }

        .shade{

            position: fixed;

            top: 0;

            right: 0;

            left: 0;

            bottom: 0;

            background: black;

            opacity: 0.6;

            z-index: 100;

        }

        .add-modal,.edit-modal{

            position: fixed;

            height: 300px;

            width: 400px;

            top: 100px;

            left: 50%;

            z-index: 101;

            border: 1px solid black;

            background: white;

            margin-left: -200px;

        }

    </style>

</head>

<body>

    <h1>应用列表</h1>

    <div>

        <input type="button" id="add_host" value="添加"/>

    </div>

    <table border="1">

        <thead>

            <tr>

                <td>应用名称</td>

                <td>应用主机列表</td>

            </tr>

        </thead>

        <tbady>

            {% for app in app_list %}　　　　　　　　　　　　#添加页面中显示Application表的相关信息

                <tr aid="{{ app.id }}">

                    <td>{{ app.name }}</td>

                    <td>

                        {% for host in app.r.all %}     #通过中间表拿到主机表信息

                            <span class="host-tag" hid="{{ host.id }}">{{ host.hostname }}</span>

                        {% endfor %}

                    </td>

                    <td>

                        <a class="edit">编辑</a>

                    </td>

                </tr>

            {% endfor %}

        </tbady>

    </table>

    <div class="shade hide"></div>

    <div class="add-modal hide">

        <form action="/app" method="POST" id="add_form">

            <div class="group">

                <input type="text" id="host" placeholder="应用名称" name="app_name"/>

            </div>

            <div class="group">

                <select id="host_list" name="host_list" multiple>

                    {% for op in host_list %}　　　　　　

                        <option value="{{ op.id }}">{{ op.hostname }}</option>　　

                    {% endfor %}

                </select>

            </div>

            <input type="submit" value="提交"/>

            <input type="button" id="cancel" value="取消"/>

            <input type="button" id="add_submit_ajax" value="ajax提交"/>

        </form>

    </div>

        <div class="edit-modal hide">      #编辑Application表页面（修改）

            <form action="/host" method="POST" id="edit_form" >

                    <input type="text" name="hid" style="display: none;"/>

                    <input type="text"  placeholder="应用名称" name="app"/>

                    <select  name="host_list" multiple>

                        {% for op in host_list %}

                            <option value="{{ op.id }}">{{ op.hostname }}</option>

                        {% endfor %}

                    </select>

                <a id="ajax_submit_edit">确认编辑</a>

            </form>

        </div>

</body>

    <script src="static/js/jquery.min.js"></script>

    <script>

        $(function() {

            $('#add_host').click(function () {

                $('.shade,.add-modal').removeClass('hide');

            });

            $('#cancel').click(function () {

                $('.shade,.add-modal').addClass('hide');

            });

            $('#add_submit_ajax').click(function () {     #增加Application表操作的JS

                $.ajax({

                    url: '/ajax_add_app',　　　　　　　　　　#对应的url

                    //data: {'user': 123, 'host_list': [1,2,3,4]},  #使用传统方式传数据

                    data: $('#add_form').serialize(),　　　　　　　　#使用简单的方式，直接使用<form>表单的ID然后serialize()直接自动形成键值方式提交

                    type: "POST",　　　　　　#使用POST方式提交

                    dataType: 'JSON',　　　　#使用JSON格式

                    traditional: true,　　　　#开启列表接收，如‘host_List’: [1,2,3,4]这样后台就能拿到列表

                    success: function (obj) {

                       console.log(obj);    #前端调试台打印响应的数据

                    },

                    error: function () {　　

                    }

                })

            });

            $('.edit').click(function () {

                $('.edit-modal,.shade').removeClass('hide');

                hid_list = [];　　　　#设置一个空列表

                $(this).parent().prev().children().each(function () {  #信息表中找到主机关系对应的每一个对象标签做循环

                    var text = $(this).text();　　　　　　　　#拿到appname

                    var hid = $(this).attr('hid');　　　　　　#拿到主机ID

                    hid_list.push(hid);　　　　　　　　　　　　#将主机ID放入空列表

                    console.log(hid,text);　　　　　　　　　　

                })

                //console.log(hid_list)

                $('#edit_form').find('select').val(hid_list);　　#将主机列表放到多选框中得到默认选中的选项

            });

        })

    </script>

</html>

Django-website 程序案例系列-7 创建多对多关系表的更多相关文章

多对多关系表的创建方式、forms组件
目录多对多关系表的三种创建方式 1.全自动,Django自动创建 2.纯手撸 3.半自动(推荐使用) forms组件小例子 forms组件校验器钩子函数局部钩子全局钩子 forms组件常用 ...
用SQLAlchemy创建一对多，多对多关系表
多对多关系表的创建: 如果建立好多对多关系后,我们就可以通过关系名进行循环查找,比如laowang = Teacher.query.filter(Teacher.name=='laowang').fi ...
Django-website 程序案例系列-18 多表跨表操作优化
详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化在数据库有外键的时候,使用 select_related() 和 pref ...
EF架构~关于多对多关系表无法更新与插入的问题
回到目录在EF里,我们设计模型时,会设计到多对多关系,在EF里会把这种关系会转成两个一对多的关系表,这是比较友好的,因为多对多来说,对于业务本身没什么意思,所以隐藏了,没什么坏处,但对于这个隐藏来说 ...
基于.net mvc的校友录（七、文件上传以及多对多关系表的LINQ查询实现）
图片的上传与调用图片的上传就是文件的上传,在前台使用的是type="file"的input,但是,要将表单声明为multipart/form-data模式,方法是在BeginFo ...
多对一关系表 java类描述
少的一方把它查询出来,多的一方看需求把它查出来涉及java对象涉及到多个对象相互引用,要尽量避免使用一对多,或多对多关系,而应使用多对一描述对象之间的关系(或使用延迟加载的方式). 下个例子empl ...
Django-website 程序案例系列-17 forms表单验证的字段解释
1.Django内置字段如下: Field required=True, 是否允许为空 widget=None, HTML插件 label=None, 用于生成Label标签或显示内容 initial ...
Django-website 程序案例系列-16 modle.form(表单验证)
案例程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
Django-website 程序案例系列-15 singnal分析
在django框架中singnal的应用相当于在你执行某些重要函数语句时在这条语句的前后放置两个预留的钩子,这两个钩子就是singnal,这个钩子也可以理解成两个触发器,当出现执行语句前后是触发执行某 ...

随机推荐

【Codeforces 1132E】Knapsack
Codeforces 1132 E 题意:给\(cnt_i\)个\(i\)(\(1\leq i\leq 8\)),问用这些数所能构成的最大的不超过\(W\)的数. 思路:随机+贪心... 我们考虑将贪 ...
BZOJ 2784 时间流逝
BZOJ 2784 时间流逝古典概率论... 可以发现由于能量圈数量限制,所以所构成的必定为树状结构(即便是转成最小能量圈和能量圈权值和之后存在重复状态,但是每个状态的含义不同,而且不能自身转移自身 ...
dpkg打包与解包
1.打包 dpkg -b 2.解包 2.1 dpkg -X 解出包内容 2.2 dpkg -e 输出包控制信息
Topshelf的Ioc实现
在前面使用Topshelf的文章里,我们的工作类TownCrier使用的是无参数的构造函数,满足测试的目的.在实际的开发过程中,我们常常需要使用带有参数的构造函数,就不可避免的使用Ioc的技术.在这里 ...
POJ1850&&1019&&1942
这三道题都水的难以想象,所以就放在一起写 1850 题目大意:有一种一种序列排列方式(如同题目中给出的例子),然后给你一个序列,问你这个序列的排名首先我们先判断无解的情况,这个就很简单了. 由于题目 ...
TiDB入门（四）：从入门到“跑路”
前言前面三章基本把 TiDB 的环境弄好了,也做了一下简单测试,有兴趣的同学可以看一下: TiDB 入门(一):TiDB 简介 TiDB 入门(二):虚拟机搭建 TiDB-Ansible 部署方案 ...
Asp.Net_ 服务端向客户端写JavaScript脚本
在Asp.net 服务端处理脚本,一般都用 ClientScriptManager ,即web窗体服务端的this.ClientScript.该对象比较常用的方法: 1.RegisterArrayDe ...
CF 910 C. Minimum Sum
链接 [http://codeforces.com/group/1EzrFFyOc0/contest/910/problem/C] 题意给你n个字符串,每个字符串的字符是a~j,每个字符都可以是0~ ...
705 B. Spider Man
传送门 [http://codeforces.com/contest/705/problem/B] 题意这题意看原文的真tm难懂Woc,但结合样例就知道大概意思了两个轮流分环,可以这么理解两个人轮 ...
【M2】软件工程终期总结报告——阅读作业
PhylabWeb——阅读作业问题回顾提问博客地址:http://www.cnblogs.com/kibbon/p/4831104.html 尚待解决的问题: Alpha/Beta,ZBB/RC阶 ...

Django-website 程序案例系列-7 创建多对多关系表

Django-website 程序案例系列-7 创建多对多关系表的更多相关文章

随机推荐

热门专题