介绍
介绍
福哥今天要带着大家完成修改个人资料表单的功能。修改个人资料表单和注册、登录表单不同，它不仅仅是将用户填写的数据提交到服务器，还要在进入修改个人资料表单的时候将上一次填写的内容展示到表单里面。也就是说，用户可以修改其中一部分，也可以什么都不修改，用户需要知道每个表单项自己曾经填写的数据是什么。
将用户填写的表单数据提交到服务器这部分，我们轻车熟路了，今天福哥就先带着大家把这一部分完成。
个人资料修改表单里面，生日的年份要符合实际情况，未来的时间不行（不能给没出生的人注册），太久远的时间也不行（160年以前的人应该已经上天堂了），所以我们设置的时间段在160年前到今年为止这一段。
视图模板
HTML代码
<!-- profile form begin --> <div class="row login-form"> <div class="col-sm-12"> <h3 class="text-center">个人资料修改</h3> <p>这里是修改个人资料的地方</p> <form> <div class="form-group"> <label><span class="form-required-tag">*</span> 昵称</label> <input class="form-control" type="text" name="nick" /> </div> <div class="form-group"> <label><span class="form-required-tag">*</span> 性别</label> <div> <label> <input type="radio" name="gender" value="male" /> 男士 </label> <label> <input type="radio" name="gender" value="female" /> 女士 </label> </div> </div> <div class="form-group"> <label><span class="form-required-tag">*</span> 生日</label> <div> <select class="form-control d-inline" name="year" style="width: 80px;"> <option value="">年份</option> <% foreach item=cItem from=$birthYearArr %> <option value="<% $cItem %>"><% $cItem %></option> <% /foreach %> </select> <label>年</label> <select class="form-control d-inline" name="month" style="width: 80px;"> <option value="">月份</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select> <label>月</label> </div> </div> <div class="form-group"> <label>学历</label> <select class="form-control" name="edu"> <option>学历选择</option> <option value="hs">中学</option> <option value="ts">中专/技校</option> <option value="cg">大学专科</option> <option value="ug">大学专科</option> <option value="md">硕士</option> <option value="dc">博士</option> </select> </div> <div class="form-group"> <label>介绍</label> <textarea class="form-control" name="note"></textarea> </div> <div class="form-group"> <button class="btn btn-primary btn-sm form-control">保存</button> </div> </form> </div> </div> <!-- profile form end -->
JS代码
$('form').form({
url: "<% $TFReq->server->BASE_URI %>api/member/profile",
method: "post",
validations: [
{type:"empty", name:"nick", msg:"请填写昵称"},
{type:"empty", name:"gender", msg:"请选择性别"},
{type:"empty", name:"year", msg:"请选择生日"},
{type:"empty", name:"month", msg:"请选择生日"},
],
onSuccess: function (d) {
if(d.errcode == 0){
document.location = '<% $TFReq->server->BASE_URI %>member/profile.htm';
}
else{
$('form').tips({
text:d.errmsg
});
}
},
onError: function (d) {
$('form').tips({
text:"服务器响应错误"
});
},
onValidationError: function (form, name, msg) {
$('form').tips({
text:msg
});
$('form').find('[name="'+ name +'"]').focus();
}
});页面控制器
代码
protected function user_process(){
$this->title = "修改个人资料 - 会员中心首页";
//
$this->setTplVar("birthYearArr", Dictionary::getBirthYearArr());
}接口控制器
代码
protected function user_process(){
$req = $this->tfphp->getRequest();
$post = $req->post;
$user = new user($this->tfphp);
$nick = $post->get("nick");
$gender = $post->get("gender");
$iGender = Dictionary::getArrId(Dictionary::$genderArr, $gender);
$year = $post->get("year");
$month = $post->get("month");
$edu = $post->get("edu");
$iEdu = Dictionary::getArrId(Dictionary::$eduArr, $edu);
$note = $post->get("note");
try{
// request test
if($nick == "" || $gender == "" || $year == "" || $month == ""){
return $this->tfphp->getResponse()->responseJSON_CM(200, 1001031, "错误请求");
}
// create user
$ret = $user->setProfile($this->permission->getLoginStatus()->userID,
$nick,
$iGender,
$year."-".$month."-1",
$iEdu,
$note);
switch ($ret){
case 1:
return $this->tfphp->getResponse()->responseJSON_CM(200, 1001032, "用户名不存在");
break;
case 2:
return $this->tfphp->getResponse()->responseJSON_CM(200, 1001033, "保存个人资料失败");
break;
}
}
catch(\TypeError $e){
return $this->tfphp->getResponse()->responseJSON_CM(200, 1001031, "错误请求");
}
// output
return $this->tfphp->getResponse()->responseJSON_CM(200, 0, "OK");
}讲解
视图模板
HTML
模板没什么可说的，这里面用到了一个Smarty的循环语法，将控制器传进来的$birthYearArr数组遍历之后输出了一个下拉框的选项的HTML代码。
JS
JS代码相比注册、登录要简单一些，因为没有验证码的逻辑。
页面控制器
这里面调用了字典库的一个方法getBirthYearArr得到了比较合理的生日年份时间段的数组。
接口控制器
一个标准的表单处理程序，有几点福哥特别说明一下。
性别的数据库字段类型是整型，而表单提交的数据是字符串，需要使用字典库转换一下
生日的数据库字段类型是日期，需要将表单的year和month拼起来并且在后面加上一个“-1”，因为标准日期是年、月、日，就补上一个“1日”保持格式正确。
学历的数据库字段类型是整型，而表单提交的数据也是字符串，也需要转换一下。
总结
今天福哥带着童鞋们完成了修改个人资料表单的提交功能。现在通过表单填写的各种形式的数据都已经可以正常提交到数据库里了。不过，再次进入修改个人资料表单之后会发现表单是空的，刚刚填写的都没有了。是的，这就是我们还没有完成的部分了。
下一课，福哥将带着童鞋们完成修改个人资料表单的后一部分功能，表单数据载入。