本节基本会快速的一起做完 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中配置好映射：
然后去后台写好这个save_project_set()函数：
然后继续写，从request中拿出刚刚的三个字段值，然后更新数据库项目表。
后端我们写好后。就再回到html前端：
我们这里要增加一个功能点，就是这三个输入框 要默认显示 项目当前的具体字段值，而不是现在这样空。
这里之所以可以直接展示 项目字段。是因我们之前已经在child_json函数中返回了项目的所有属性了。所以这里直接写没问题。
接下来就是测试：
我们随便输入好数据，然后点击保存按钮。然后我们重新进入这个项目设置 看看 能不展示对了：
刷新页面：
左上角也正确：
项目列表也正确：
所以这个功能就算是开发完成。
本文使用 文章同步助手 同步
