Django 搭建质控平台——关于前后端交互

Django 搭建质控平台——关于前后端交互

一.首选为什么选用django框架搭建质控平台

django开发的好处：

1.前后端的分离

2.django易上手，Django就像拼图一样，所有的图块都提供给你了，重点是你要知道下一块拼图是哪个

平台的好处：项目管理，用例管理，测试报告管理不只针对于测试

二.Django的前后端交互

1.路由配置

from django.urls import path, re_path
from APPS.qcdata.views import projectdata, manpowerload, loaddaily, task_speed

urlpatterns = [
    path('humantask/', manpowerload.load_human_task),
    path('daliywork/', loaddaily.load_daliywork),
    path('s_humantask/', manpowerload.search_humantask),
    path('daliyinfo/',loaddaily.daliyinfo),
    path('project_daily/', projectdata.load_project_daily),
    path('projectinfo/',projectdata.project_task_info),
    path('pbugs/', projectdata.load_project_bugs),
    path('perror/',task_speed.load_project_error ),
    path('dept_bug/',task_speed.load_daliywork)

2.后端先把数据塞给前端页面

@checkLogin
def load_daily_test(request):
    data = {

        'username': request.session['username'],
        'group':group,

    }
    return render(request, 'qcdata/project_daily_test.html', data)

3.前端接收数据以后，再对数据进行处理

{% extends 'base/base.html' %}
{% block content %}

     <div class="card">
        <div class="card-header"><h4>查询条件</h4></div>
        <div class="card-body">
            <form class="form-inline"  onsubmit="return false;" >
                <label>部门</label>


                <select  class="form-control" name="department" id="department" style="width: 140px;font-size:12px">
                    {% for gid,gname in group %}
                    <option value="{{ gname }}" >{{ gname }}</option>
                    {% endfor %}
                </select>
                &nbsp; &nbsp; &nbsp; &nbsp;
                <label>时间范围&nbsp; </label>
                <label class="inline_label" for="byweek">
                    <input type="radio" id="byweek" name="sway" checked="checked" value="yesterday">
                    日统计 （注：查前一天，若周一则查询上周五）
                </label>
                
                <button class="btn btn-w-md btn-round btn-info" id="s_humantask" style="float:right" onclick="project_info()">查询</button>
            </form>
        </div>
    </div>
        <div class="card">
    <div class="card-body">


        <div id="main" style="min-width: 95%;max-width: 100%; min-height: 520px;max-height: 800px; margin: 0 auto; overflow:auto">

                  <table class="table table-bordered">
                    <thead>
                      <tr>


                        <th>执行人</th>
                        <th>项目</th>
                        <th>任务名</th>
                        <th>剩余工时</th>
                        <th>日期</th>
                      </tr>
                    </thead>
                      <tbody id="dailyTable" style="">


                    </tbody>
                  </table>


        </div>
        

    </div>
    </div>
    <script>
         function project_info() {
            var product_name=$("#department").val();
            var sway=$('input[name="sway"]:checked').val();
            $.getJSON('/qcdata/dept_daily_data',{"product_name":product_name,"sway":sway},function(data){
                if(data)
                {
                    //负载
                    toastr.success("success");

                if(data.person_name.length) {
                    document.getElementById('dailyTable').innerHTML = "";

                    var str = '';
                    data.person_name.forEach(function(item,index){
                        var row = ['person_name','project','task','consum','date',];
                        var rowStr='';
                        row.forEach(function(col){
                            rowStr += "<td>"+data[col][index]+"</td>"
                        });
                        str+="<tr>"+rowStr+"</tr>"
                    });
                    $('#dailyTable').append(str);
                }
            }
                else
                {
                   toastr.error("数据出错，请联系管理员");
                }
            });
        }



    </script>


{% endblock %}

4.再将前端选择的项传给后端，后端做好逻辑处理以后再给返回内容，前端再处理返回内容

@checkLogin
def load_daily_data_test(request):
    product_name = request.GET.get('product_name', "")
    w = request.GET.get('sway', "")
    if w == "yesterday":

        res = list(Taskinfo().yesterday_taskinfo_data_deal(product_name))
        person_name, project, work,task, consum, date = res
        data = {

            'person_name': person_name,
            'project': project,
            'task':task,
            'work':work,
            'consum':consum,
            'date':date
        }
        return JsonResponse(data)
    else:
        data= {
            'errormsg':'没查询到数据',

        }

  <script>
         function project_info() {
            var product_name=$("#department").val();
            var sway=$('input[name="sway"]:checked').val();
            $.getJSON('/qcdata/dept_daily_data',{"product_name":product_name,"sway":sway},function(data){
                if(data)
                {
                    //负载
                    toastr.success("success");

                if(data.person_name.length) {
                    document.getElementById('dailyTable').innerHTML = "";

                    var str = '';
                    data.person_name.forEach(function(item,index){
                        var row = ['person_name','project','task','consum','date',];
                        var rowStr='';
                        row.forEach(function(col){
                            rowStr += "<td>"+data[col][index]+"</td>"
                        });
                        str+="<tr>"+rowStr+"</tr>"
                    });
                    $('#dailyTable').append(str);
                }
            }
                else
                {
                   toastr.error("数据出错，请联系管理员");
                }
            });
        }



    </script>