Django案例之ORM数据修改案例_django orm 查询将 < 10的字段内容替换为100-优快云博客

本文介绍了一个基于Python的Web应用，用于管理和编辑主机信息，包括主机名、IP地址、端口和业务线名称。通过ORM操作数据库，实现了主机数据的增加、编辑和显示。前端使用HTML和jQuery处理用户交互，包括添加、编辑主机数据的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

◆ 实现效果：

对数据进行增加和编辑操作
在这里插入图片描述

◆ models文件：

一共涉及两张关联表操作

class Business(models.Model):
    caption = models.CharField(max_length=32)
    code = models.CharField(max_length=32,null=True,default="SA")

class Host(models.Model):
    nid = models.AutoField(primary_key=True)
    hostname = models.CharField(max_length=32,db_index=True)
    ip = models.GenericIPAddressField(protocol="ipv4",db_index=True)
    port = models.IntegerField()
    b = models.ForeignKey(to="Business", to_field='id',on_delete=models.CASCADE)

◆ views文件：

增加和编辑数据请求处理逻辑：

def host(request):
    if request.method == "GET":
        v1 = models.Host.objects.filter(nid__gt=0)
        v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption')
        v3 = models.Host.objects.filter(nid__gt=0).values_list('nid','hostname','b_id','b__caption')
        b_list = models.Business.objects.all()
        return render(request, 'host.html', {'v1': v1,'v2': v2,'v3': v3,'b_list':b_list})

    elif request.method == "POST":
        h = request.POST.get('hostname')
        i = request.POST.get('ip')
        p = request.POST.get('port')
        b = request.POST.get('b_id')
        models.Host.objects.create(hostname=h,
                                   ip=i,
                                   port=p,
                                   b_id=b
                                   )
        return redirect('/host')

//ajax请求处理
def test_ajax(request):
    ret = {'status': True, 'error': None, 'data': None}
    try:
        h = request.POST.get('hostname')
        i = request.POST.get('ip')
        p = request.POST.get('port')
        b = request.POST.get('b_id')
        if h and len(h) > 5:
            models.Host.objects.create(hostname=h,
                                           ip=i,
                                           port=p,
                                           b_id=b)
        else:
            ret['status'] = False
            ret['error'] = "太短了"
    except Exception as e:
        ret['status'] = False
        ret['error'] = '请求错误'
    return HttpResponse(json.dumps(ret))

◆ html文件：

前端页面设计：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .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 red;
            background: white;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <h1>主机列表(对象)</h1>
    <div>
        <input id="add_host" type="button" value="添加" />
    </div>
    <table border="1">
        <thead>
            <tr>
                <th>序号</th>
                <th>主机名</th>
                <th>IP</th>
                <th>端口</th>
                <th>业务线名称</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

                {% for row in v1 %}
                    <tr hid="{{ row.nid }}" bid="{{ row.b_id }}">
                        <td>{{ forloop.counter }}</td>  <!-- counter0;parentloop -->
                        <td>{{ row.hostname }}</td>
                        <td>{{ row.ip }}</td>
                        <td>{{ row.port }}</td>
                        <td>{{ row.b.caption }}</td>
                        <td>
                            <a class="edit">编辑</a>|<a class="delete">删除</a>
                        </td>
                    </tr>
                {% endfor %}


        </tbody>
    </table>

    <!--遮罩层-->
    <div class="shade hide"></div>
    <!--增加数据界面-->
    <div class="add-modal hide">
        <form id="add_form" method="POST" action="/host">
            <div class="group">
                <input id="host" type="text" placeholder="主机名" name="hostname" />
            </div>

            <div class="group">
                <input id="ip" type="text" placeholder="IP" name="ip" />
            </div>

            <div class="group">
                <input id="port" type="text" placeholder="端口" name="port" />
            </div>

            <div class="group">
                <select id="sel" name="b_id">
                    {% for op in b_list %}
                    <option value="{{ op.id }}">{{ op.caption }}</option>
                    {% endfor %}
                </select>
            </div>

            <input type="submit" value="提交" />
            <a id="ajax_submit" >悄悄提交</a>
            <input id="cancel" type="button" value="取消" />
            <span id="erro_msg" style="color: red"></span>
        </form>
    </div>

    <!--编辑数据界面-->
    <div class="edit-modal hide">
        <form id="edit_form" method="POST" action="/host">
                <input type="text" name="nid" style="display:none" />
                <input type="text" placeholder="主机名" name="hostname" />
                <input type="text" placeholder="IP" name="ip" />
                <input  type="text" placeholder="端口" name="port" />
                <select name="b_id">
                    {% for op in b_list %}
                    <option value="{{ op.id }}">{{ op.caption }}</option>
                    {% endfor %}
                </select>
            <a id="ajax_submit_edit" >确认编辑</a>
        </form>
    </div>

    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        $(function(){

            $('#add_host').click(function(){
                $('.shade,.add-modal').removeClass('hide');
            });

            $('#cancel').click(function(){
                $('.shade,.add-modal').addClass('hide');
            });

            $('#ajax_submit').click(function(){
                $.ajax({
                    url: "/test_ajax",
                    type: 'POST',
                    //data: {'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(), 'b_id': $('#sel').val()},
                    data: $('#add_form').serialize(),
                    success: function(data){
                        var obj = JSON.parse(data);
                        if(obj.status){
                            location.reload();
                        }else{
                            $('#erro_msg').text(obj.error);
                        }
                    }
                })
            });


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

                var bid = $(this).parent().parent().attr('bid');
                var nid = $(this).parent().parent().attr('hid');

                $('#edit_form').find('select').val(bid);
                $('#edit_form').find('input[name="nid"]').val(nid);

                // 修改
                /*
                $.ajax({
                    data: $('#edit_form').serialize()
                });
                */
                // models.Host.objects.filter(nid=nid).update()
            })
        })

    </script>
</body>
</html>