1. 显示header
views.py:child_json,给它添加上请求头的数据
然后打开P_apis.html,找到相应的请求头设置代码,在里面先写个for循环来显示出这俩个请求头:
<div id="header_plan">
{% for i in project_header %}
<input type="text" value="{{ i.name }}" style="width: 20%;margin-top: 3px" placeholder="请求头name"> = {"
<input type="text" value="{{ i.key }}" style="width: 15%" placeholder="请求头key"> " : "
<input type="text" value="{{ i.value }}" style="width: 50%" placeholder="请求头value"> "}
<br>
{% endfor %}
</div>
看看效果:
2. 新增header
创建一个新增按钮
创建这个新增js函数:
{# 新增 #}
function add_project_header() {
var header_plan = document.getElementById('header_plan');
var i1 = document.createElement('input');
i1.style = 'width: 20%;margin-top: 3px';
i1.placeholder = '请求头name';
var i2 = document.createElement('input');
i2.style = 'width: 15%';
i2.placeholder = '请求头key';
var i3 = document.createElement('input');
i3.style = 'width: 50%';
i3.placeholder = '请求头value';
header_plan.appendChild(i1);
header_plan.appendChild(document.createTextNode(' = {" '));
header_plan.appendChild(i2);
header_plan.appendChild(document.createTextNode(' " : " '));
header_plan.appendChild(i3);
header_plan.appendChild(document.createTextNode(' "}'));
header_plan.appendChild(document.createElement("br"));
}
看看效果:
注意这里的新增功能,只是用js在前端 增加了空input框,并没有真实的去修改数据库,一刷新就没了。
3. 保存header
保存功能就遍历所有这个输入框,然后成为数组传递给后端。如果name是空的,那么直接抛弃掉后面的key-value,当做删除功能了。
但是要靠什么东西一下获取到所有的input框呢?很显然,是name,name属性可以重复,可以用getElementsByname方法直接获取到所有。
但是目前这些input并没有name,所以要先加上name属性。
之后在js方法中有一个按照name数量进行的大循环,每次循环一行3个input,判断如果第一个input也就是name不为空,那么就添加到最终要发送给后端的数据中。
{# 保存 #}
function project_header_save() {
var names = document.getElementsByName('header_name');
var keys = document.getElementsByName('header_key');
var values = document.getElementsByName('header_value');
var req_names= [];
var req_keys=[];
var req_values=[];
for(var i=0; i<names.length; i++){
if (names[i].value !== '') {
req_names.push(names[i].value);
req_keys.push(keys[i].value);
req_values.push(values[i].value);
}
}
console.log(req_names)
console.log(req_keys)
console.log(req_values)
}
获取了所有的input,并且新建了准备发送用的空列表。然后进行大循环,其中判断如果name框非空,则给这三个空列表都添加上数据。最后打印一下这三个数组列表看看效果:
写一个请求传递给后端后就算ok;
$.get('/save_project_header/',{
"project_id":"{{ project.id }}",
"req_names":req_names.toString(),
"req_keys":req_keys.toString(),
"req_values":req_values.toString()
},function (ret) {
document.location.reload();
})
这里也要加上project.id,不然后台不知道是给哪个项目更新公共请求头
添加映射:
urls.py
url(r'^save_project_header/$', save_project_header), # 保存项目公共请求头
views.py
# 保存项目公共请求头
def save_project_header(request):
project_id = request.GET['project_id']
req_names = request.GET['req_names']
req_keys = request.GET['req_keys']
req_values = request.GET['req_values']
print(req_names)
return HttpResponse('')
因为传输时把列表转变成了字符串,所以这里打印一下,看看这个字符串是什么样的,以便再变回列表
重启服务,刷新页面,保存请求头:
显然js自动用英文逗号拼接了这个数组列表,所以给反编译回来就行。代码上用一个循环遍历即可:
# 保存项目公共请求头
def save_project_header(request):
project_id = request.GET['project_id']
req_names = request.GET['req_names']
req_keys = request.GET['req_keys']
req_values = request.GET['req_values']
names = req_names.split(',')
keys = req_keys.split(',')
values = req_values.split(',')
DB_project_header.objects.filter(project_id=project_id).delete()
for i in range(len(names)):
DB_project_header.objects.create(project_id=project_id, name=names[i], key=keys[i], value=values[i])
return HttpResponse('')
上图中,修改了旧的俩个的key和value,然后新增的有个空白行和俩个正常的。然后点击保存。然后再次打开:
遗留不紧急问题:当value是json且不止1个key,就会有问题