本节主要来实现新增一个项目的功能：
我的设计是：
点击新增按钮，出现一个弹层，这个弹层上有输入框，要求用户输入项目的名称。还有确定/取消 按钮。
这个弹层默认是隐藏的一个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函数：
它要做三件事：
- 接收project_name
- 去项目表新建项目
- 返回给前端一个空证明已经成功完成
代码如下可复制：
# 新增项目 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
