接口测试平台-23：项目列表的新增功能实现

1. 设计

a. 点击新增按钮，出现一个弹层，有输入框，要求用户输入项目名称。还有确定/取消 按钮。

这个弹层默认是隐藏的一个div，点击新增按钮，修改隐藏属性为显示。点击确定/取消按钮后，再把显示属性变为隐藏。

b. 点确定时，会发送给后台一个异步请求，带着用户写的新项目名字。让后端新建一个项目。等返回成功后，项目列表页面刷新，用户即可看到新增的那个项目了。

之后很多的设计，一开始都要考虑好步骤，这样可以大大减少中间调试所浪费的时间。

 

2. 增加弹框

修改project_list.html

<div style="width: 50%; background-color: white; border: 1px solid black; position: absolute;
            left: 25%; top: 30px; padding-left: 10px; box-shadow: 4px 4px 8px grey; border-radius: 5px">
    <h3>项目名称：(最多100字)</h3>
    <input type="text" placeholder="请输入项目名称" style="width: 95%">
    <br><br>
    <button class="btn-danger">取消</button>
    <button class="btn-success">确定</button>
    <br><br>
</div>

效果如下：

 

3. 让取消生效

取消按钮：修改div的显示属性为隐藏，要给这个div加个id以便定位：id=“add_project_div”，并给取消增加点击隐藏弹框的功能

注意，这种写法，语句前面一定要先写 javascript:，刷新页面看看效果

 

给这个div 写成默认隐藏的，需要用户点击 新增项目按钮才能显示～

刷新页面看看效果

 

4. 让确定生效

• 给项目名称输入框增加id标签：id="project_name"
• 给确定按钮增加点击属性

<button onclick="add_project()" class="btn-success">确定</button>

• 实现保存新增项目的add_project

<script>
    function add_project() {
        const project_name = document.getElementById('project_name').value;
        $.get('/add_project/', {
            'project_name': project_name
        }, function (ret) {
            document.location.reload();
        })
    }
</script>

 

添加映射

url.py

url(r'^add_project/$', add_project),  # 增加项目

views.py

它要做三件事：

1. 接收project_name

2. 去项目表新建项目

3. 返回给前端一个空证明已经成功完成

# 新增项目
def add_project(request):
    project_name = request.GET['project_name']
    DB_project.objects.create(name=project_name, remark='', user=request.user.username, other_user='')
    return HttpResponse('')

数据库新增数据：表的类名.objects.create()

效果如下：

 

可以自行加上其他字段来练习，下一节讲 这个项目的详情页的框架构造 和 进入按钮功能。