{% extends "base.html" %} {% block css %} <style> /* 按钮悬浮*/ .float-button { position: fixed; bottom: 100px; right: 100px; z-index: 99; border: none; outline: none; background-color: #1dc5a3; cursor: pointer; padding: 15px; border-radius: 10px; } .btn-primary:hover { color: red; } </style> {% endblock %} {% block crumbs %} <div class="row"> <div class="col-md-12"> <ol class="breadcrumb"> <li> <a href="/yqjr/index">主页</a> </li> <li class="active"> <a class="this">基础信息</a> </li> <li class="active"> <a class="this-page" href="{% url 'interface' %}">接口管理</a> </li> <li class="active"> <a class="">添加接口</a> </li> </ol> </div> </div> {% endblock %} {% block body %} <div class="row"> <div class="col-md-12"> <div class="panel"> <div class="panel-heading"> <h3 class="panel-title">添加接口</h3> </div> <form method="post" class="form-horizontal" action="{% url 'interface_add' %}"> <div class="panel-body"> <div class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">接口名称</label> <div class="col-sm-8"> <input type="text" id="if_name" name="if_name" class="form-control" value="{{ name }}"> </div> {% if name_error %} <span style="color: red; font-size: 10px;">{{ name_error }}</span> {% endif %} </div> <div class="form-group"> <label class="col-sm-2 control-label">所属项目</label> <div class="col-sm-8"> <select type="text" id="prj_id" class="form-control" required="required" name='prj_id'> {% for prj in prj_list %} {% ifequal prj.prj_id project_c.prj_id %} <option value={{ prj.prj_id }} selected>{{ prj.prj_name }}</option> {% else %} <option value={{ prj.prj_id }}>{{ prj.prj_name }}</option> {% endifequal %} {% endfor %} </select> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">URL</label> <div class="col-sm-8"> <input type="text" id="url" name="url" class="form-control" value="{{ url }}"> </div> {% if url_error %} <span style="color: red; font-size: 10px;">{{ url_error }}</span> {% endif %} </div> <div class="form-group"> <label class="col-sm-2 control-label">请求方式</label> {% for item in method_types %} <div class="col-sm-1 control-label"> <label class="fancy-radio"> {% ifequal item method %} <input name="method" value={{ item }} type="radio" checked><span><i></i>{{ item }}</span> {% else %} <input name="method" value={{ item }} type="radio" ><span><i></i>{{ item }}</span> {% endifequal %} </label> </div> {% endfor %} {% if method_error %} <span style="color: red; font-size: 10px;">{{ method_error }}</span> {% endif %} </div> <div class="form-group"> <label class="col-sm-2 control-label">数据传输方式</label> <div class="col-sm-8"> <select type="text" id="data_type" name="data_type" class="form-control"> {% for item in data_types %} {% ifequal item data_type %} <option value="{{ item }}" selected>{{ item }}</option> {% else %} <option value="{{ item }}">{{ item }}</option> {% endifequal %} {% endfor %} </select> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">接口描述</label> <div class="col-sm-8"> <textarea name="description" placeholder="请输入内容" class="form-control" rows="3">{{ description }}</textarea> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">请求header</label> <div class="col-sm-8"> <button id="add_request_header" class="btn btn-primary" type="button"><i class="fa fa-plus-square-o"></i> 添加行 </button> </div> {% if headers_error %} <span style="color: red; font-size: 10px;">{{ headers_error }}</span> {% endif %} <div class="col-sm-offset-2 col-sm-8"> <table id="request_header" class="table col-sm-10"> <thead> <tr> <th>参数名</th> <th>参数值</th> <th></th> </tr> </thead> <tbody> {% if request_headers %} {% for request_header in request_headers %} <tr> <td><input class='form-control' name="request_header_key" value="{{ request_header.0 }}"> </td> <td><input class='form-control' name="request_header_value" value="{{ request_header.1 }}"> </td> <td> <button class='btn btn-danger' onclick='del_step(this)'><i class='fa fa-close'></i> 删除行 </button> </td> </tr> {% endfor %} {% endif %} </tbody> </table> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">请求params</label> <div class="col-sm-8"> <button id="add_request_params" class="btn btn-primary" type="button"><i class="fa fa-plus-square-o"></i> 添加行 </button> </div> {% if params_error %} <span style="color: red; font-size: 10px;">{{ params_error }}</span> {% endif %} <div class="col-sm-offset-2 col-sm-8"> <table id="request_params" class="table col-sm-10"> <thead> <tr> <th>参数名</th> <th>参数值</th> <th></th> </tr> </thead> <tbody> {% if request_params %} {% for request_param in request_params %} <tr> <td><input class='form-control' name="request_params_key" value="{{ request_param.0 }}"> </td> <td><input class='form-control' name="request_params_value" value="{{ request_param.1 }}"> </td> <td> <button class='btn btn-danger' onclick='del_step(this)'><i class='fa fa-close'></i> 删除行 </button> </td> </tr> {% endfor %} {% endif %} </tbody> </table> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">请求body</label> <div class="col-sm-8"> <button id="add_request_body" class="btn btn-primary" type="button"><i class="fa fa-plus-square-o"></i> 添加行 </button> </div> {% if body_error %} <span style="color: red; font-size: 10px;">{{ body_error }}</span> {% endif %} <div class="col-sm-offset-2 col-sm-8"> <table id="request_body" class="table col-sm-10"> <thead> <tr> <th>参数名</th> <th>参数值</th> <th></th> </tr> </thead> <tbody> {% if request_body %} {% for request_body_item in request_body %} <tr> <td><input class='form-control' name="request_body_key" value="{{ request_body_item.0 }}"> </td> <td><input class='form-control' name="request_body_value" value="{{ request_body_item.1 }}"> </td> <td> <button class='btn btn-danger' onclick='del_step(this)'><i class='fa fa-close'></i> 删除行 </button> </td> </tr> {% endfor %} {% endif %} </tbody> </table> </div> </div> <div class="form-group"> <div class="col-sm-offset-4 col-sm-6"> <button id="sumbit" class="btn btn-primary float-button" type="submit"><i class="fa fa-save"></i> 保存 </button> </div> </div> </div> </div> </form> </div> </div> </div> {% endblock %} {% block javascript %} <script> function del_step(obj) { var tr = obj.parentNode.parentNode; var tbody = tr.parentNode; tbody.removeChild(tr); } $(document).ready(function () { //添加请求头参数行 $("#add_request_header").click(function () { var newRow = "<tr> <td name='var_name' ><input class='form-control' name='request_header_key'></td>" + "<td name='var_remark' ><input class='form-control' name='request_header_value'></td> " + "<td> <button class='btn btn-danger' onclick='del_step(this)'><i class='fa fa-close'></i> 删除行</button> </td> </tr>"; $("#request_header tbody").append(newRow); }); $("#add_request_params").click(function () { var newRow = "<tr> <td name='var_name'><input class='form-control' name='request_params_key'></td>" + "<td name='var_remark' ><input class='form-control' name='request_params_value'></td> " + "<td> <button class='btn btn-danger' onclick='del_step(this)'><i class='fa fa-close'></i> 删除行</button> </td> </tr>"; $("#request_params tbody").append(newRow); }); $("#add_request_body").click(function () { var newRow = "<tr> <td name='var_name'><input class='form-control' name='request_body_key'></td>" + "<td name='var_remark' ><input class='form-control' name='request_body_value'></td>" + " <td> <button class='btn btn-danger' onclick='del_step(this)'><i class='fa fa-close'></i> 删除行</button> </td> </tr>"; $("#request_body tbody").append(newRow); }); //删除行 }); $('#get_table_data').click(function () { var args = {}; $('#request_header tr').each(function (i) { // 遍历 tr if (i == 0) return true; var data = new Object(); $(this).find("td[name]").each(function () { var name = $(this).attr("name"); data[name] = $(this).text(); }); args[i] = data; }); send_data = JSON.stringify(args); alert(send_data); }); // 检查输入框 function check(att) { strValue = att.replace(/\n/g, ''); if (javaTrim(strValue) == "") { alert('输入有误,请检查!'); return false; } } function javaTrim(str) { for (var i = 0; (str.charAt(i) == ' ') && i < str.length; i++) ; if (i == str.length) return ''; //whole string is space var newstr = str.substr(i); for (var i = newstr.length - 1; newstr.charAt(i) == ' ' && i >= 0; i--) ; newstr = newstr.substr(0, i + 1); return newstr; } </script> {% endblock %}