主机管理项目-（html文件源码，ajax的使用,模板导入与继承）

Posted 2020-11-03 qiangayz

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了主机管理项目-（html文件源码，ajax的使用,模板导入与继承）相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">
    <style>
        .head{
            width: 100%;
            height: 40px;
            background-color: dodgerblue;
        }
        .head1{
            width: 70%;
            height: 40px;
            background-color: dodgerblue;
            margin: 0 auto;
            line-height: 40px;
        }
        .head1 span{
            float: right;
            padding-left: 10px;
            padding-right: 10px;
            margin-left: 20px;
            background-color: lightskyblue;
            text-align: center;
        }
        .head11 span:hover{
            float: right;
            background-color: blue;
        }
        .head11{
            margin-top: 5px;
            float: left;
        }
        .left_menu{
            position: absolute;
            width: 300px;
            margin-left: 0;
            top: 40px;
            bottom: 0;
            background-color: green;
        }
        .left_menu .menu1{
            width: 100%;
            height: 40px;
            background-color: yellow;
            color: black;
            margin-top:10px ;
            line-height: 40px;
            text-align: center;
        }
        .left_menu .menu1:hover{
            width: 100%;
            height: 40px;
            background-color: red;
            color: white;
            margin-top:10px ;
            line-height: 40px;
            text-align: center;
        }
        .content{
            position: absolute;
            overflow: auto;
            left: 300px;
            top: 40px;
            right: 0;
            bottom: 0;
            background-color: cornsilk;
            padding-left: 300px;
        }
        .hide{
            display: none;
        }
        span{
            background-color: yellow;
            color: black;
        }
        span:hover{
            background-color: red;
            color: white;
        }
        .shade{
            background-color: black;
            opacity: 0.5;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 10;
        }
        .add-modal{
            position: fixed;
            background-color: lightskyblue;
            width: 500px;
            height: 300px;
            top: 35%;
            left: 35%;
            border: 2px solid red;
            z-index: 11;
        }
        .adddata{
            display: inline-block;
            width: 100px;
            height: 30px;
            background-color: dodgerblue;
            color: black;
        }
        .cancel{
            display: inline-block;
            width: 100px;
            height: 30px;
            background-color: dodgerblue;
            color: black;
        }
        .edit{
            background-color: lawngreen;
        }
        .manyspan{
            border: 1px solid red;
        }
        .appdel{
            border: 1px;
        }
        .appedit{
            border: 1px;
        }
        option{
            width: 150px;
        }
    </style>
</head>
<body style="margin: 0">
<div class="head">
    <div class="head1">
        <h3 class="head11">自动化测试调度平台</h3>
        <span>联系我</span>
        <span>帮助</span>
    </div></div>
<div class="left_menu">
    <div con="con3" class="menu1">用户信息</div>
    <div con="con2" class="menu1">用户类型</div>
    <div con="con1" class="menu1">主机类型</div>
    <div con="con4" class="menu1">测试项目</div>
    <div con="con5" class="menu1">主机多对多</div>
</div>
<div >
<div id="con1" class="content">
{% include ‘hostinfo.html‘ %}
</div>
<div id="con2" class="content hide">
{% include ‘usertype.html‘ %}
</div>
<div id="con3" class="content hide">
{% include ‘userinfo.html‘ %}
</div>
<div id="con4" class="content hide">
{% include ‘testitem.html‘ %}
</div>
    <div id="con5" class="content hide">
{% include ‘manyToMany.html‘ %}
</div>
</div>
<div class="shade hide"></div>
<script src="/static/jquery.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
    $(function () {


        $(‘.menu1‘).click(function () {
            var a = $(this).attr(‘con‘);
            console.log(a);
            $(‘#‘+a).removeClass(‘hide‘).siblings().addClass(‘hide‘);
        });
        $(‘.adddata‘).click(function () {
         $(‘.shade,.add-modal‘).removeClass(‘hide‘);
        });
        $(‘.cancel‘).click(function () {
         $(‘.shade,.add-modal‘).addClass(‘hide‘);
        });
        $(‘#ajaxcommit‘).click(function () {
            $.ajax({
                url:"/hostApp/test_ajax",
                type:"POST",
                data:{‘hostname‘:$(‘#envinfo‘).val(),
                       "ip":$("#ipinfo").val(),
                       "port":$("#portinfo").val(),
                       "usernameinfo":$("#usernameinfo").val(),
                       "passwordinfo":$("#passwordinfo").val(),
                       "iteminfo":$("#iteminfo").val(),
                },
                success:function (data) {
                    var dict = JSON.parse(data);
                    if(dict.status){
                        location.reload()
                    }else {
                        $(‘#error_msg‘).text(dict.error)
                    }
                }
                })
        });
        $("span[delid=‘delitem‘]").click(function () {
            var hid =$(this).parent().parent().attr(‘hid‘);
            $(this).parent().parent().remove();
            $.ajax(
                {
                    url: "/hostApp/test_ajax1",
                    type: "POST",
{#                    data: $(‘#add_form‘).serialize(),#}
                    data: {
                        ‘tablename‘: ‘host‘,
                        ‘hid‘: hid
                    },
                    success: function (data) {
                        var dict = JSON.parse(data);
                        if (dict.status) {
                            console.log(‘success‘)
                        }
                        {#                        location.reload()#}
                        {#                    }else {#}
                        {#                        $(‘#error_msg‘).text(dict.error)#}
                        {#                    }#}
                    },
                }
            )
        });
        $(".edit").click(function () {
            var hid =$(this).parent().parent().attr(‘hid‘);
            var str="/hostApp/edit_data-"+hid;
            location.href=str
        });
        $(‘#appinfocommit‘).click(function () {
            $.ajax({
                url:‘/hostApp/many_to_many‘,
                type:‘POST‘,
                data:$(‘#appaddform‘).serialize(),
                dataType: ‘JSON‘, // 内部
                traditional: true,
                success:function (obj) {
                      alert(‘success‘);
                      location.reload()
                }
            })
        });
        $(‘#appinfoedit‘).click(function () {
            console.log(‘wo yao kai shi xiu gai le ‘);
            $.ajax({
                url:‘/hostApp/many_to_many_edit‘,
                type:‘POST‘,
                data:$(‘#appeditform‘).serialize(),
                dataType: ‘JSON‘, // 内部
                traditional: true,
                success:function (obj) {
                      alert(‘success‘);
                      location.reload()
                }
            })
        });
        $(‘.appdel‘).click(function () {
            var appid =$(this).parent().parent().attr(‘appid‘);
            $(this).parent().parent().remove();
            $.ajax(
                {
                    url: "/hostApp/test_ajax1",
                    type: "POST",
{#                    data: $(‘#add_form‘).serialize(),#}
                    data: {
                        ‘tablename‘: ‘application‘,
                        ‘appid‘: appid
                    },
                    success: function (data) {
                        var dict = JSON.parse(data);
                        if (dict.status) {
                            console.log(‘success‘)
                        }
                        {#                        location.reload()#}
                        {#                    }else {#}
                        {#                        $(‘#error_msg‘).text(dict.error)#}
                        {#                    }#}
                    },
                }
            )
        });
        $(‘.appedit‘).click(function () {
            $(‘#appedit‘).removeClass(‘hide‘);
            var appname = $(this).parent().prev().prev().text();
            var appid = $(this).parent().parent().attr(‘appid‘);
            $(‘#appname_edit‘).val(appname);
            var host_list_id=[];
            $(this).parent().prev().children().each(
                function () {
                    var hostid = $(this).attr(‘hostid‘);
                    host_list_id.push(hostid)
                }
            );
            console.log(host_list_id);
            $(‘#hostlist_edit‘).val(host_list_id);
{#                .children().each(#}
{#                function () {#}
{#                    if($(this)[0].selected){#}
{#                        $(this).css({"color": "#ff0011", "background": "blue"})#}
{#                    }else{#}
{#                        $(this).css({"color": "lawngreen", "background": "yellow"})#}
{#                    }#}
{#                }#}
{#            );#}
            $(‘#appid‘).val(appid)

        });
        $(‘.fa, .fa-times‘).click(function () {
            var appid=$(this).parent().parent().parent().attr(‘appid‘);
            var tdobj=$(this).parent().parent()
            $(this).parent().remove();
            var host_list_id=[];
            tdobj.children().each(
                function () {
                    var hostid = $(this).attr(‘hostid‘);
                    host_list_id.push(hostid)
                }

            );
             $.ajax({
                url:‘/hostApp/many_to_many_edit‘,
                type:‘POST‘,
                data:{
                    appid:appid,
                    hostlist:host_list_id
                },
                dataType: ‘JSON‘, // 内部
                traditional: true
            })
        })
        })
    </script>

</body>
</html>

　　《many_to_many.html》

<input class="adddata" type="button" value="增加"/>
    <table border="1">
    <thread>
        <tr>
            <td>业务名称</td>
            <td style="width: 400px">主机列表</td>
            <td>操作</td>
        </tr>
    </thread>
    <tbody>
    {% for row in appinfo %}
    <tr appid="{{ row.id }}">
        <td>
            {{ row.name }}
        </td>
    <td>
        {% for cow in row.r.all %}
            <span hostid="{{ cow.id }}" class="manyspan">{{ cow.envid}}<a class="fa fa-times"></a></span>
        {% endfor %}
    </td>
    <td><span class="appedit">编辑</span>|<span class="appdel">删除</span></td>
    </tr>
    {% endfor %}
    </tbody>
    </table>
<div style="z-index: 100" class="add-modal hide">
        <form id="appaddform" action="/hostApp/many_to_many/">
            <div><input id="appname" type="text" name="appname" placeholder="业务名称"> </div>
            <div><select id="hostlist"  name="hostlist" multiple>
                {% for row in hostobj %}
                    <option value="{{ row.id }}">{{ row.envid }}</option>
                {% endfor %}
            </select> </div>
            <div><input id="appinfocommit" type="button" value="ajax提交">
                <input type="button" class="cancel" value="取消"></div>
            <div id="error_msg" style="color: red"></div>
        </form>
    </div>
<div id=‘appedit‘ style="z-index: 99" class="add-modal hide">
        <form id="appeditform" action="/hostApp/many_to_many/">
            <div><input id="appid" type="text" name="appid"  class="hide"> </div>
            <div><input id="appname_edit" type="text" name="appname" placeholder="业务名称"> </div>
            <div><select id="hostlist_edit"  name="hostlist" multiple>
                {% for row in hostobj %}
                    <option value="{{ row.id }}">{{ row.envid }}</option>
                {% endfor %}
            </select> </div>
        <br/>
        <br/>
        <br/>
            <div><input id="appinfoedit" type="button" value="保存更改">
                <input type="button" class="cancel" value="取消"></div>
            <div id="error_msg" style="color: red"></div>
        </form>
    </div>

　　《hostinfo.html》

{% extends ‘master.html‘ %}
{% block title %}主机管理{% endblock %}
{% block content1 %}
    <input class="adddata" type="button" value="增加"/>
    <table border="1">
    <thread>
        <tr >
            <td>序号</td>
            <td>环境标识</td>
            <td>环境地址</td>
            <td>环境端口</td>
            <td>环境用户名</td>
            <td>环境密码</td>
            <td>环境测试项目</td>
            <td>环境测试版本</td>
            <td>操作</td>
        </tr>
    </thread>
        <tbody>
        {% for row in hostobj %}
        <tr hid="{{ row.id }}" iid="{{ row.item.id }}">
            <td>{{ forloop.counter }}</td>
            <td>{{ row.envid }}</td>
            <td>{{ row.ip }}</td>
            <td>{{ row.port }}</td>
            <td>{{ row.username }}</td>
            <td>{{ row.password }}</td>
            <td>{{ row.item.item }}</td>
            <td>{{ row.item.versionNum }}</td>
            <td><span class="edit">编辑</span>|<span delid="delitem" >删除</span></td>
            {% endfor %}
        </tr>
        </tbody>
    </table>
    <div class="add-modal hide">
        <form action="/hostApp/host/">
            <div><input id="envinfo" type="text" name="envinfo" placeholder="环境信息"> </div>
            <div><input id="ipinfo" type="text" name="ipinfo" placeholder="ip"> </div>
            <div><input id="portinfo" type="text" name="portinfo" placeholder="端口"> </div>
            <div><input id="usernameinfo" type="text" name="usernameinfo" placeholder="用户名"> </div>
            <div><input id="passwordinfo" type="password" name="passwordinfo" placeholder="密码"> </div>
            <div><select id="iteminfo"  name="iteminfo">
                {% for row in test_item_data %}
                    <option value="{{ row.id }}">{{ row.item }}</option>
                {% endfor %}
            </select> </div>
            <div><input id="ajaxcommit" type="button"value="ajax提交"> <input type="button" class="cancel" value="取消"></div>
            <div id="error_msg" style="color: red"></div>
        </form>
    </div>
{% endblock %}

以上是关于主机管理项目-（html文件源码，ajax的使用,模板导入与继承）的主要内容，如果未能解决你的问题，请参考以下文章

分享一套spring+springMVC+mybaits+EasyUI+jQuery+Ajax+面向接口编程进销存管理系统源码！

达达前端Ajax实战项目源码讲解（快速入门的实例）Github源码

像Maven一样构建java项目的目录，更好的管理java工程的源码

比较简单的初学者模仿毕业设计项目springboot人力资源管理系统.rar(项目源码+数据库文件)

本地主机和打开html文件的区别

saltstack主机管理项目day39:主机管理项目开发