番外-新主页

最新推荐文章于 2024-06-07 10:14:57 发布

一块从容淡定的叉烧

最新推荐文章于 2024-06-07 10:14:57 发布

阅读量192

点赞数

分类专栏：跟练接口测试平台

本文链接：https://blog.csdn.net/weixin_45497936/article/details/117751204

版权

跟练同时被 2 个专栏收录

123 篇文章 0 订阅

订阅专栏

接口测试平台

123 篇文章 0 订阅

订阅专栏

【1】

参考大佬文章：1

默认主页打开是隐藏菜单

左侧分为个人项目和请求记录两块

个人项目：页面上半部分，循环显示，可展开显示相关信息，可快速进入个人项目｛后台child_json函数中添加从项目数据表中获取数据的语句，并返回｝

请求记录：在页面下半部分，请求类型和url组合显示

before：

在这里插入图片描述

after：
在这里插入图片描述

【2】–保存右侧请求接口到对应的个人项目中

参考大佬文章：2

js函数：save_api()
与首页请求send按钮的ts_send函数相同

【3】–后台/home_save_api

参考大佬文章：3

新的save_api()函数中，发送请求的请求体中添加对应的项目id字段
与Api_send_home和Api_save相似
将请求数据保存到DB_apis数据表中

完成效果：
在这里插入图片描述

【4】–首页右侧下方增加个人数据统计

参考大佬文章：4

完成效果：
在这里插入图片描述

【5】–主页、退出按钮+数据统计

参考大佬文章：5

修改css文件里的样式/高度，刷新网页后不生效：
勾选Disables cache
在这里插入图片描述
完成效果：

【6】–根据实际情况修改统计图

参考大佬文章：6
用户的资源占平台总的比。
资源暂时定为项目数比、接口数比、用例数。

python保留小数点的个数：round（a，1） —1位小数点

完成效果：
在这里插入图片描述

【7】–上区位置+搜索框

参考大佬文章：7

样式一般都放在head里面的style里

完成效果：
在这里插入图片描述

【8】–搜索框相关函数

参考大佬文章：8

在这里插入图片描述

【9】–搜索范围+搜索结果显示前端

参考大佬文章：9
在这里插入图片描述

home.html

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/homepagedown/css/progresscircle.css">
    <style>
        .circlechart {
            float: left;
            padding: 20px;
            width: 90px;
        }

        .search_input {
            width: 100%;
            height: 35px;
            padding-left: 13px;
        }

        .search_button {
            height: 35px;
            /*width:42px;*/
            cursor: pointer;
            position: absolute;
        }

        .bar input {
            border: 3px solid #66defd;
            border-radius: 5px;
            background: transparent;
            top: 0;
            right: 0;
        }

        .bar button {
            background-color: #66defd;;
            /*background: linear-gradient(to right, #be0063, #ffcbd4);*/
            border-radius: 0 5px 5px 0;
            width: 20px;
            top: 0;
            right: 0;
            color: white;
        }

        .bar button:before {
            font-size: 13px;
            color: #a7eded;
        }

        button {
            border: none;
            outline: none;
        }
    </style>
</head>

{#搜索框#}
<div class="search bar" style="position: absolute;top: 10px; left:40%;width: 300px;">
    <div id="search_button">
        <strong>
            <input class="search_input" id="search_input" placeholder="输入搜索关键词" name="keys" type="text"
                   value="{{ keys }}">
        </strong>
        <button class="search_button" id="search_submit" onclick="search()" style="width: 100px">
            <strong>搜 索</strong>
        </button>
    </div>
</div>
{#搜索结果显示框#}
<div id="search_show" style="display: none;z-index: 999;position: absolute;top: 80px;left: 30%;width: 40%;min-height: 200px;
            background:white;padding: 5px;
            border-radius: 2px;box-shadow: 4px 4px 8px #bcbcbc">
    <strong style="padding-left: 10px">搜索结果：</strong>
    <button id="search_close" onclick="search_close()" style="float: right;background-color: white">[X]</button>
    <br>
    <div id="search_result"></div>
</div>

<script>
    function search() {
        key = document.getElementById('search_input').value;
        document.getElementById('search_result').innerHTML = '';
        //判断是否继续进行
        if (key == '' || key == ' ') {
            return
        }
        $.get('/search/', {
            'key': key
        }, function (ret) {
            //显示结果
            var show = document.getElementById('search_show');
            show.style.display = 'block';
            var s = document.getElementById('search_result');
            results = ret.results;
            for (var i = 0; i < results.length; i++) {
                var a = document.createElement('a');
                a.href = results[i].url;
                a.target = '__blank';
                a.innerText = '【' + results[i].type + '】:' + results[i].text;
                s.appendChild(a);
                s.appendChild(document.createElement('br'))
            }
        })
    }

    function search_close() {
        document.getElementById('search_show').style.display = 'none';
        document.getElementById('search_input').value = '';  //搜索框清空
    }
</script>

{#个人项目列表#}
<div style="height: 310px;overflow-y: scroll;padding-left: 20px;padding-right:5px;width: 320px;"
     class="panel-group" id="accordion"
     role="tablist" aria-multiselectable="true">
    <h4>您的项目如下：</h4>
    {% for i in user_projects %}
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="heading{{ i.id }}">
                <h4 class="panel-title">
                    <a class="collapsed" style="text-decoration: none;" role="button" data-toggle="collapse"
                       data-parent="#accordion" href="#collapse{{ i.id }}" aria-expanded="false"
                       aria-controls="collapse{{ i.id }}">
                        <span style="color: #01a2cb"> {{ i.name }} </span>
                    </a>
                </h4>
            </div>
            <div id="collapse{{ i.id }}" class="panel-collapse collapse" role="tabpanel"
                 aria-labelledby="heading{{ i.id }}">
                <div style="padding-left: 10px;font-size: xx-small">
                    备注：{{ i.remark }} <br>
                    其他管理员：{{ i.other_user }} <br>
                    <a href="/apis/{{ i.id }}/"
                       style="background-color: #47ba04;color: white;font-size: medium;border-radius: 5px">&nbsp;立即进入&nbsp;</a>
                    &nbsp;
                    <a href="#" onclick="save_api('{{ i.id }}')"
                       style="background-color: #e92f6c;color: white;font-size: medium;border-radius: 5px">&nbsp;保存请求&nbsp;</a>
                    <br>
                </div>
            </div>
        </div>
    {% endfor %}
</div>
<script>
    function save_api(id) {
        // 获取接口的所有数据
        var ts_method = document.getElementById('ts_method').value;
        var ts_url = document.getElementById('ts_url').value;
        var ts_host = document.getElementById('ts_host').value;
        var ts_header = document.getElementById('ts_header').value;
        // 判断顶部的数据是否填充完
        if (ts_method == 'none') {
            alert('请选择请求方式！');
            return
        }
        if (ts_url == '') {
            alert('请输入url！');
            return
        }
        if (ts_host == '') {
            alert('请输入host！');
            return
        }
        //判断关键数据是否符合规则
        if (ts_host.slice(0, 7) != 'http://' && ts_host.slice(0, 8) != 'https://') {
            alert('host必须以http://或https://开头！');
            return
        }
        if (ts_header != '') {
            try {
                JSON.parse(ts_header)
            } catch (e) {
                alert('header请求头不符合json规范！');
                return
            }
        }
        var ts_body_method = $('ul#myTab li[class="active"]')[0].innerText;
        if (ts_body_method == 'none') {
            var ts_api_body = ''
        }
        if (ts_body_method == 'form-data') {
            var ts_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#mytable tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children; //获取下面所有tr，每个tr就是一个键值对实际上
            for (var i = 0; i < trlist.length; i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                ts_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            ts_api_body = JSON.stringify(ts_api_body);
        }
        if (ts_body_method == 'x-www-form-urlencoded') {
            var ts_api_body = []; //新建这个空列表用来存放后续的数据
            var tbody_ = $("table#mytable2 tbody")[0]; //获取该表格的内容部分
            var trlist = tbody_.children; //获取下面所有tr，每个tr就是一个键值对实际上
            for (var i = 0; i < trlist.length; i++) {
                var tdarr = trlist[i].children; // 获取tr下的俩个td
                var key = tdarr[0].innerText; // 获取key
                var value = tdarr[1].innerText; // 获取value
                ts_api_body.push([key, value]);// 作为一个数组，存放到这个大数组里。
            }
            ts_api_body = JSON.stringify(ts_api_body);
        }
        if (ts_body_method == 'Text') {
            var ts_api_body = document.getElementById('raw_Text').value;
        }
        if (ts_body_method == 'JavaScript') {
            var ts_api_body = document.getElementById('raw_JavaScript').value;
        }
        if (ts_body_method == 'Json') {
            var ts_api_body = document.getElementById('raw_Json').value;
        }
        if (ts_body_method == 'Html') {
            var ts_api_body = document.getElementById('raw_Html').value;
        }
        if (ts_body_method == 'Xml') {
            var ts_api_body = document.getElementById('raw_Xml').value;
        }

        if (ts_body_method == 'GraphQL') {
            body_plan_G_Q = document.getElementById('body_plan_G_Q').value;
            body_plan_G_G = document.getElementById('body_plan_G_G').value;
            var ts_api_body = body_plan_G_Q + '*WQRF*' + body_plan_G_G
        }
        // 发送请求给后台
        $.get('/home_save_api/', {
            'project_id': id,
            'ts_method': ts_method,
            'ts_url': ts_url,
            'ts_host': ts_host,
            'ts_header': ts_header,
            'ts_body_method': ts_body_method,
            'ts_api_body': ts_api_body,
        }, function (ret) {
            alert('保存成功！')
        })
    }
</script>

<div style="min-height: 100px;width:-webkit-calc(100% - 340px);
            margin-left: 342px;position: fixed;bottom: 0px;box-shadow: -2px -2px 4px #e3e3e3;padding: 10px">
    <div style="width: 120px;height: 80px;background-color: #105f72;border-radius: 5px;color: white;padding: 3px;font-size: small">
        当前项目数: <span>{{ count_project }}</span> <br>
        当前接口数: <span>{{ count_api }}</span> <br>
        当前用例数: <span>{{ count_case }}</span> <br>
        当前报告数: <span>{{ count_report }}</span>
    </div>
    <div id="demo" style="position: fixed;left: 470px;bottom: 5px;">
        <div class="circlechart" data-percentage="{{ ziyuan }}"></div>
        {#        <div class="circlechart" data-percentage="30">30%</div>#}
        {#        <div class="circlechart" data-percentage="85">85%</div>#}
        <span style="position:fixed;bottom: 5px;left: 500px;font-size: xx-small;">资源比</span>
        {# <span style="position:fixed;bottom: 5px;left: 598px;font-size: xx-small;">待定</span>#}
        {# <span style="position:fixed;bottom: 5px;left: 688px;font-size: xx-small;">待定</span>#}
    </div>
</div>
<script>
    var h = document.documentElement.clientHeight;
    document.getElementById('shu').style.height = (h - 85).toString() + 'px';
    document.getElementById('home_log_plan').style.maxHeight = '300px';
</script>
<script>
    document.getElementById('menu_btn').click();
</script>
<script src="/static/homepagedown/js/progresscircle.js"></script>
<script>
    $('.circlechart').circlechart(); // Initialization
</script>

views.py

def child_json(eid, oid='', ooid=''):
....
    if eid == 'home.html':
        date = DB_home_href.objects.all()
        home_log = DB_apis_log.objects.filter(user_id=oid)[::-1]
        hosts = DB_host.objects.all()

        from django.contrib.auth.models import User
        user_projects = DB_project.objects.filter(user=User.objects.filter(id=oid)[0].username)

        # 个人数据看板
        count_project = len(user_projects)
        count_api = sum([len(DB_apis.objects.filter(project_id=i.id)) for i in user_projects])
        count_case = sum([len(DB_cases.objects.filter(project_id=i.id)) for i in user_projects])
        # 资源定为项目数比、接口数比、用例数
        ziyuan_all = len(DB_project.objects.all()) + len(DB_apis.objects.all()) + len(DB_cases.objects.all())
        ziyuan_user = count_project + count_api + count_case
        ziyuan = round(ziyuan_user / ziyuan_all * 100, 1)

        new_res = {
            "count_project": count_project,
            "count_api": count_api,
            "count_case": count_case,
            "count_report": '',
            "ziyuan": ziyuan,
        }

        if ooid == '':
            res = {"hrefs": date, "home_log": home_log, "hosts": hosts, "user_projects": user_projects}
        else:
            log = DB_apis_log.objects.filter(id=ooid)[0]
            res = {"hrefs": date, "home_log": home_log, "log": log, "hosts": hosts, "user_projects": user_projects}

        res.update(new_res)

# 首页保存请求数据
def home_save_api(request):
    # 获取数据
    project_id = request.GET['project_id']
    ts_method = request.GET['ts_method']
    ts_url = request.GET['ts_url']
    ts_host = request.GET['ts_host']
    ts_header = request.GET['ts_header']
    ts_body_method = request.GET['ts_body_method']
    ts_api_body = request.GET['ts_api_body']

    # 写入到数据库中
    DB_apis.objects.create(project_id=project_id,
                           name='首页保存接口',
                           api_method=ts_method,
                           api_url=ts_url,
                           api_host=ts_host,
                           api_header=ts_header,
                           body_method=ts_body_method,
                           api_body=ts_api_body,
                           )
    return HttpResponse('')


# 首页搜索
def search(request):
    key = request.GET['key']

    # 项目搜索
    projects = DB_project.objects.filter(name__contains=key)
    plist = [{"url": "/apis/%s/" % i.id, "text": i.name, "type": 'project'} for i in projects]
    # 接口搜索
    apis = DB_apis.objects.filter(name__contains=key)
    alist = [{"url": "/apis/%s/" % i.project_id, "text": i.name, "type": 'api'} for i in apis]
    # 用例搜索
    cases = DB_cases.objects.filter(name__contains=key)
    clist = [{"url": "/cases/%s/" % i.project_id, "text": i.name, "type": 'case'} for i in cases]

    res = {"results": plist + alist + clist}
    return HttpResponse(json.dumps(res), content_type='application/json')

一块从容淡定的叉烧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
番外-新主页

【1】参考大佬文章：1默认主页打开是隐藏菜单左侧分为个人项目和请求记录两块个人项目：页面上半部分，循环显示，可展开显示相关信息，可快速进入个人项目｛后台child_json函数中添加从项目数据表中获取数据的语句，并返回｝请求记录：在页面下半部分，请求类型和url组合显示before：after：【2】–保存右侧请求接口到对应的个人项目中参考大佬文章：2js函数：save_api()与首页请求send按钮的ts_send函数相同【3】–后台/home_save_api参考大佬文章
复制链接

扫一扫