接口测试平台代码实现25:项目列表页的新增功能

本节主要来实现新增一个项目的功能：

我的设计是：

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

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

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

上述的设计中，我们最好先着手开发这个div弹层，不要一开始把它设置成隐藏。不然我们中间的数次调试，每次都要先点击 新增按钮 才能看到结果，比较麻烦。所以就让它先一直显示着，等我们调好之后。再写好默认隐藏属性。

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

打开我们的project_list.html， 在最底下(我说的最底下，都是在 </body > 上且紧贴的位置) 新建一个div

然后给这个div加上 如下的css属性：

其中，高度属性不设置，由内容决定，以免出现大部分留白或者溢出。

然后我们要给它添加一个输入框和俩个按钮：

看看效果

现在我们要让取消按钮生效：

取消按钮：点击后 修改这个div的隐藏属性为隐藏，所以要给这个div加个id以便定位：id="add_project_div"

因为取消按钮要执行的js语句只有一句，我们可以偷懒直接写在onclick属性中，而不需要先写个js函数，然后onclick再调用这个函数。

注意，这种写法，语句前面一定要先写 javascript:

现在我们在页面上刷新后试一下，点击取消按钮，发现这个弹层成功隐藏了。

接下来就是我们顺便给这个div 写成默认隐藏的，需要用户点击 新增项目按钮才能显示～

所以给它加上一个display属性：

然后给新增项目按钮 增加一个onclick的属性：

让我们刷新页面试试效果：

发现默认是不显示的，点击新增按钮后显示，点击取消按钮后消失。没问题了

接下来就是要让这个新增项目功能真实生效。

我们先在底部加一个script标签，里面新建一个function函数，取名add_project()

然后我们要获取到 用户输入的那个项目名字，也就是那个input标签的内容，为了定位，就先给那个input加一个id

然后我们写add_project()函数：

我们新定义的变量可以获取到这个输入框的内容，也就是value

然后就要写个异步请求，发给后台：

url依然是/add_project/ ，注意前后都必须有/

然后带一个参数，就是project_name

等收到接口成功返回后，直接刷新页面，用语句:document.location.reload()；

然后我们要给这个弹层的确定按钮，加上onclick属性，来调用这个add_project()函数

好了，写到这里，我们前端页面基本做完了，开始写urls.py和views.py了 准备：

urls.py加入：

注意，可能有同学这里的设置和我的不一样，其实本质上都差不多。因为django版本不同，所以写法不一样，可以多百度学习一下，找个demo就知道后面都怎么弄了，不要着急走火入魔。

然后我们去写views.py：

新建了这个 add_project函数：

它要做三件事：

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()

括号内写各个字段的值，这里我们的项目名字已经获取到，创建者名字就从request参数中的user.username方法获取到(只要有登陆态的都肯定有名字)

其他俩个参数 备注/其他管理员 都是空。

然后我们重启服务，刷新页面。测试一下：

可以看到 新增功能也成功了。

今天就学到这里了。下一节我们讲 这个项目的详情页的框架构造 和 进入按钮功能。

大家代码可能有这样那样的问题，当解决不了的时候可以留言询问留言板 ，或者直接下载本系列教程中的这个项目代码的打包，解压到本地对比一下。

链接: https://pan.baidu.com/s/1ILWSZl4iJpzrEV59i6EVFg 密码: c3vl

能跟到现在的同学属实不易，已经成功超过99%的同行了(粗略估计中国测试人数超过100万，能做测开写平台的不到1万甚至更少)

当然作者免费分享这些技术以来，受到过至少10几个同行高级测开和机构的恶意中伤和辱骂，所以大家多点赞分享给作者点动力哈～