专栏首页Devops专栏Django 2.1.7 模型 - MVT模型增删功能

Django 2.1.7 模型 - MVT模型增删功能

上一篇Django 2.1.7 模型类 - 字段类型讲述了关于模型字段类的内容,丰富了不少模型中的字段类型。

本篇章再来改改之前的服务器中间件信息查询列表,增加添加删除的功能。

参考文献

https://docs.djangoproject.com/zh-hans/2.1/topics/db/queries/

首先回顾一下之前项目的服务器中间件查询列表页面

好了,按照功能需求需要增加一个添加删除的功能。

简单编写一下功能页面,有点丑,应付一下吧。

HTML代码如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- 查询服务器信息表单 -->
        <div class="row mt-5">
            <form class="form-inline" method="POST" action="handler">
              <div class="form-group mb-2">
                <label for="serverinfo" class="sr-only">服务器信息</label>
                <input type="text" readonly class="form-control-plaintext" id="serverinfo" value="服务器信息">
              </div>
              <div class="form-group mx-sm-3 mb-2">
                <label for="inputPassword2" class="sr-only">服务器名称</label>
                <input type="text" class="form-control" id="servername" placeholder="服务器名称">
              </div>
              <button type="submit" class="btn btn-primary mb-2">查询</button>
            </form>
            <!-- 添加服务器信息 -->
            <a class="btn btn-primary mb-2 ml-2" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                添加中间件信息
            </a>
            <div class="collapse" id="collapseExample">
              <div class="card card-body">
                <!-- 提交中间件信息表单 -->
                <form method="POST" action="addmiddlewareinfo">
                  <div class="form-group">
                    <label for="servername1">服务器名称</label>
                    <input type="text" class="form-control" id="servername1" aria-describedby="serverHelp" placeholder="Enter server name">
                    <small id="emailHelp" class="form-text text-muted">输入中间件所属的服务器名称.</small>
                  </div>
                  <div class="form-group">
                    <label for="midname1">中间件名称</label>
                    <input type="text" class="form-control" id="midname1" placeholder="middleware name">
                  </div>
                  <div class="form-group">
                    <label for="midport1">中间件端口号</label>
                    <input type="text" class="form-control" id="midport1" placeholder="middleware port">
                  </div>
                  <button type="submit" class="btn btn-outline-primary">添加</button>
                </form>
              </div>
            </div>
        </div>
        <!-- 显示中间件信息表格 -->
        <div class="row mt-5">
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">服务器名称</th>
                  <th scope="col">中间件名称</th>
                  <th scope="col">端口号</th>
                  <th scope="col">#</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>测试服务器</td>
                  <td>redis</td>
                  <td>6379</td>
                  <td><a href="deleteMiddlewareinfo?id=1" class="btn btn-outline-primary">删除</a></td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>测试服务器</td>
                  <td>memcached</td>
                  <td>11211</td>
                  <td><a href="deleteMiddlewareinfo?id=1" class="btn btn-outline-primary">删除</a></td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>测试服务器</td>
                  <td>kafka</td>
                  <td>9092</td>
                  <td><a href="deleteMiddlewareinfo?id=1" class="btn btn-outline-primary">删除</a></td>
                </tr>
              </tbody>
            </table>
        </div>
    </div>
</body>
</html>

有了基本的静态页面之后,下面就是将这个页面的效果设置到Django的模板之中。然后用视图查询model数据获取展示效果。

将静态HTML设置模板

其他地方基本复制静态文件即可,然后对循环渲染的部分进行参数化delete操作,传送id作为删除的查询条件。

设置查询页面视图

def serverinfo(request):
    # 1、查询所有服务器的信息
    server_list = ServerInfo.objects.all()
    # 2、查询所有服务器的中间件信息
    info_list = []
    for server in server_list:
        # print(server.server_hostname)
        m_query = MiddlewareInfo.objects.filter(server=server)
        info_item = {"server_name": server.server_hostname, 'm_query': m_query}
        info_list.append(info_item)
    # 3、设置context内容
    context = {
        "info_list": info_list
    }
    # print(context)
    return render(request,'assetinfo/serverinfo.html', context=context)

修改模板的相应的渲染参数

                {% for info in info_list %}

                    {% for value in info.m_query %}
                    <tr>
                        <th scope="row">{{ value.id }}</th>
                        <td>{{ info.server_name }}</td>
                        <td>{{ value.name }}</td>
                        <td>{{ value.port }}</td>
                        <td><a href="deleteMiddlewareinfo?id={{ value.id }}" class="btn btn-outline-primary">删除</a></td>
                    </tr>
                    {% endfor %}

                {% endfor %}

浏览器访问效果如下

下面来编写添加中间件信息的功能。

主要分为三个步骤: 1、设置模板传递的参数 2、编写视图接收参数 3、往数据库插入数据 4、返回页面

编写视图url路径

编写视图内容

接收表单传递过来的参数,然后查询服务器信息,再插入中间件信息。 最后返回serverinfo页面。

浏览器执行效果如下

好了,增加功能已经有了。下面就要开始来编写删除功能了。

删除功能的实现步骤

目前查询列表是没有判断数据是否删除的,也就是没有is_delete字段的判断。 实现步骤如下:

  • 在serverinfo视图增加 is_delete 的判断。
  • 编写删除功能视图
  • 删除数据后返回页面

在serverinfo视图增加 is_delete 判断

def serverinfo(request):
    # 1、查询所有服务器的信息
    server_list = ServerInfo.objects.all()
    # 2、查询所有服务器的中间件信息
    info_list = []
    for server in server_list:
        # print(server.server_hostname)
        m_query = MiddlewareInfo.objects.filter(server=server)

        mid_info_list = []
        for i in range(0,len(m_query)):
            # print("is_delete = ", m_query[i].is_delete)
            if m_query[i].is_delete == False:
                mid_info_list.append(m_query[i])

        info_item = {"server_name": server.server_hostname, 'm_query': mid_info_list}
        info_list.append(info_item)
    # 3、设置context内容
    context = {
        "info_list": info_list
    }
    # print(context)
    return render(request,'assetinfo/serverinfo.html', context=context)

编写删除视图功能

def deleteMiddlewareinfo(request):
    # 1、接收需要删除中间件的id
    mid_id = request.GET.get('id','')
    # 2、根据id设置中间件的is_delete = True
    mid_ware = MiddlewareInfo.objects.get( id = mid_id )
    mid_ware.is_delete = True
    mid_ware.save()
    # return HttpResponse(mid_id)
    return redirect('/assetinfo/serverinfo')

测试删除功能

成功删除了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 16. Vue 常用列表操作实例 - 增加列表数据

    在前端开发中,对于列表的操作是最常见的,例如:增加列表数据、删除列表数据、查询列表的关键字等等。

    Devops海洋的渔夫
  • 43. Vue组件案例-评论列表

    好了,现在基本页面已经写好了。但是为了演示父组件与子组件之间的传值以及调用关系,我将上面提交评论的部分抽出来作为一个子组件。

    Devops海洋的渔夫
  • 66. Vue 结合webpack使用jquery以及boostrap

    有时候在 Vue 框架开发的时候,还是存在需要使用 jquery 以及 boostrap 的场景的,这个时候就需要安装 Jquery 以及 boostrap 了...

    Devops海洋的渔夫
  • 16. Vue 常用列表操作实例 - 增加列表数据

    在前端开发中,对于列表的操作是最常见的,例如:增加列表数据、删除列表数据、查询列表的关键字等等。

    Devops海洋的渔夫
  • 完美数据迁移-MongoDB Stream的应用

    最近微服务架构火的不行,但本质上也只是风口上的一个热点词汇。 作为笔者的经验来说,想要应用一个新的架构需要带来的变革成本是非常高的。

    美码师
  • Spring Boot (十五): Spring Boot + Jpa + Thymeleaf 增删改查示例

    先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个 Demo 来试试它的效果,越简单越容易上手最好。

    纯洁的微笑
  • laravel用crud之index列出产品items

      前面我们说了laravel用crud修改产品items-新建resource controller和routing,现在我们要把产品items罗列出来,需要...

    ytkah
  • springboot(十五):springboot+jpa+thymeleaf增删改查示例

    这篇文章介绍如何使用jpa和thymeleaf做一个增删改查的示例。 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一...

    纯洁的微笑
  • 【前端系列-2】layui+springboot实现表格增删改查

    本文将演示如何使用Springboot(后端框架)和layui(前端框架)将数据库中的数据渲染到前端页面,以及对前端页面的数据实现增删改。

    云深i不知处
  • 基于 Go 语言开发在线论坛(三):访问论坛首页

    前面两篇教程学院君分别给大家介绍了基于 Go 语言构建在线论坛的整体设计以及数据表的创建、模型类的编写,今天我们来看看如何在服务端处理用户请求。

    学院君

扫码关注云+社区

领取腾讯云代金券