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

我去热饭

发布于 2022-05-19 08:42:45

6620

发布于 2022-05-19 08:42:45

文章被收录于专栏：测试开发干货

本节基本会快速的一起做完 3个子页面的最简单的项目设置。

整体会提高节奏。重复的简单知识不会再过多阐述，给大家先熟悉下快节奏的感觉，以便后面把主要精力放在复杂的功能实现上。

打开P_project_set.html：

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

项目名称
项目备注
项目其他管理者

三个设置点，其实都是静态文案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中配置好映射：