接口测试平台代码实现28:子页面-项目设置

打开P_project_set.html：

这里我们准备先放三个设置点：

1. 项目名称
   
2. 项目备注
   
3. 项目其他管理者
   

三个设置点，其实都是静态文案span标签 + 输入框 组成。最后再做个保存按钮即可。

如上图所示，先用俩个br 换行，往下撑一撑位置。然后在一个div标签（div有个子内容居中的属性）内，写好三组（h3+textarea）

看看效果：

然后我们给他们三个textarea多行输入框 加上id，以便我们把他们的值传递给后端保存起来。顺便加上约束默认文案

placeholder

代码如下

效果如下：

好了，我们接下来制作一个保存按钮：

<br><br>
<div style="text-align: center">
<h3>项目名称</h3>
<textarea name="" id="name" placeholder="最大100字" style="width: 70%" rows="4"></textarea> <br>
<h3>项目描述</h3>
<textarea name="" id="remark" placeholder="最大500字"  style="width: 70%" rows="4"></textarea> <br>
<h3>其他管理员</h3>
<textarea name="" id="other_user" placeholder="多个成员之间用英文逗号,来隔开"  style="width: 70%" rows="4"></textarea>
</div>
<br><br>
<button type="button" style="margin-left: 15%;width: 70%" class="btn btn-primary btn-lg btn-block">保存</button>

接下来 给它加一个onclick属性，调用一个save() 的 js函数：

然后save函数中 我们要先得到三个输入框的内容，再写一个异步请求发送给后端。

代码如下：

<script>
    function save() {
        var name = document.getElementById('name').value;
        var remark = document.getElementById('remark').value;
        var other_user = document.getElementById('other_user').value;
        $.get('/save_project_set/'+'{{ project.id }}'+'/',{
            'name':name,
            'remark':remark,
            'other_user':other_user,
        },function (ret) {
            alert('保存成功')
        })
    }
</script>

然后去urls.py中配置好映射：

然后去后台写好这个save_project_set()函数：

然后继续写，从request中拿出刚刚的三个字段值，然后更新数据库项目表。

后端我们写好后。就再回到html前端：

我们这里要增加一个功能点，就是这三个输入框 要默认显示 项目当前的具体字段值，而不是现在这样空。

刷新页面：

左上角也正确：

所以这个功能就算是开发完成。