同福

做个用户管理系统(25)——修改个人资料(二)表单数据载入【20201212】

介绍

介绍

福哥今天带着大家完成修改个人资料表单的后一部分,实现表单的数据载入功能。要实现表单数据的载入首先得开发一个表单数据的接口,这个表单数据接口需要对应一个单独的实体对象。根据资源路径命名规范,路径里只能出现资源名称,不能出现事件行为。提交表单和数据载入都属于用户的个人资料数据,不能建立两个个人资料接口,怎么办?

我们可以使用资源路径地址实现表单数据的读取功能,然后使用资源事件地址实现表单数据的提交功能。

资源路径地址和资源事件地址的区别就是后者在前者的后面增加了一个以下划线开头的事件参数,有了这个参数就表单该地址是用来处理事件的。

接口控制器

doSave

protected function doSave(){
    $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");
}

doLoad

private function doLoad(){
    $user = new user($this->tfphp);
    $userProfile = new userProfile();

    $userProfile = $user->getProfile($this->permission->getLoginStatus()->userID);
    $userProfile->iGender = Dictionary::getArrId(Dictionary::$genderArr, $userProfile->gender);
    $userProfile->iTopEdu = Dictionary::getArrId(Dictionary::$eduArr, $userProfile->topEdu);

    return $this->tfphp->getResponse()->responseJSON(200, $userProfile->toArray());
}

user_process

protected function user_process(){
    switch ($this->tfphp->getRequest()->server->get("ACTION_URI")){
        case "save":
            $this->doSave();
            break;
        default:
            $this->doLoad();
            break;
    }
}

视图模板

JS代码

$(function(){
    // form
    $('form').form({
        url: "<% $TFReq->server->BASE_URI %>api/member/profile/_save",
        method: "post",
        validations: [
            {type:"empty", name:"nick", msg:"请填写昵称"},
            {type:"empty", name:"gender", msg:"请选择性别"},
            {type:"empty", name:"year", msg:"请选择生日"},
            {type:"empty", name:"month", msg:"请选择生日"},
        ],
        dataUrl: "<% $TFReq->server->BASE_URI %>api/member/profile",
        dataMethod: "post",
        dataMapRules: [
            {name:"nick", dataKey:"nickName"},
            {name:"gender", dataKey:"gender"},
            {name:"year", dataKey:"year"},
            {name:"month", dataKey:"month"},
            {name:"edu", dataKey:"topEdu"},
            {name:"note", dataKey:"descript"}
        ],
        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();
        },
        onDataMap: function (form, name, data) {

        }
    });
});

讲解

接口控制器

doSave

这个方法就是之前的user_process,因为我们需要在api/member/profile接口里完成表单提交和数据加载两个功能,所以需要把表单提交单独放一个方法里面。

doLoad

这个方法是用来加载修改个人资料表单的数据的。

user_process

我们使用TFPHP自带的系统参数ACTION_URI来判断是否有事件参数,如果有则进行分流处理。

ea1e0abac01745f2.jpg

总结

今天福哥带着童鞋们完成了修改个人资料的表单数据载入的功能,完成了这个功能之后,修改个人资料表单也就算完成了。

下一课,福哥将开始带着童鞋们制作设置头像表单了哦~~