上一遍文章已经介绍uniapp界面布局的view和template，本章节介绍个人信息功能

一、个人信息功能操作界面

二、个人信息功能代码详解

2.1、页面代码路径位置

/pages/mine/info/index.vue

具体如下截图：

如下图：页面以列表的方式展示，代码使用<uni-list><uni-list-item>这两个标签来实现。

<uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="昵称" :rightText="user.nickName" />

如上述代码，标签数据解说

showExtraIcon="true"：标题左侧显示图标。

:extraIcon="{type: 'person-filled'}"：显示一个“人”的图标

效果图如下：

title="昵称" ：左侧显示的标题名称。

:rightText="user.nickName" ：右侧显示的内容值，这个内容值来源于页面创建的时候从后台api获取并完成赋值操作。

2.2、获取数据接口代码

如下代码是调用后台api接口。

onLoad()函数实现功能：页面加载的时候执行里面的函数。

 onLoad() {
      this.getUser()
    },
    methods: {
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data
          this.roleGroup = response.roleGroup
          this.postGroup = response.postGroup
        })
      }
    }

getUserProfile()：业务逻辑是调用后台api接口，

该接口代码封装在api目录下，实现代码如下：

// 查询用户个人信息
export function getUserProfile() {
  return request({
    url: '/system/user/profile',
    method: 'get'
  })
}

2.3、java 接口代码

/**
 * 个人信息
 */
@GetMapping
public AjaxResult profile()
{
    LoginUser loginUser = getLoginUser();
    SysUser user = loginUser.getUser();
    AjaxResult ajax = AjaxResult.success(user);
    ajax.put("roleGroup", userService.selectUserRoleGroup(loginUser.getUsername()));
    ajax.put("postGroup", userService.selectUserPostGroup(loginUser.getUsername()));
    return ajax;
}

api接口返回roleGroup和postGroup这两个数据，一个是用户角色，一个是岗位角色，用户基本信息放在data里面，处理代码是：AjaxResult.success(user)

uniapp接收到api接口后，通过赋值变量进行显示，赋值代码如下

this.user = response.data
          this.roleGroup = response.roleGroup
          this.postGroup = response.postGroup

2.4、界面显示用户信息

<uni-list>
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="昵称" :rightText="user.nickName" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'phone-filled'}" title="手机号码" :rightText="user.phonenumber" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'email-filled'}" title="邮箱" :rightText="user.email" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'auth-filled'}" title="岗位" :rightText="postGroup" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'staff-filled'}" title="角色" :rightText="roleGroup" />
      <uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar-filled'}" title="创建日期" :rightText="user.createTime" />
    </uni-list>

如上述的代码:rightText="user.nickName"：表示从user里面获取nickName的字段，user的数据是从api接口获取

下面是接口数据实列，关系如下截图。

{
    "msg": "操作成功",
    "postGroup": "董事长",
    "code": 200,
    "data": {
        "createBy": "admin",
        "createTime": "2022-12-11 16:51:52",
        "updateBy": null,
        "updateTime": null,
        "remark": "管理员",
        "userId": 1,
        "deptId": 103,
        "userName": "admin",
        "nickName": "若依",
        "email": "ry@163.com",
        "phonenumber": "15888888888",
        "sex": "1",
        "avatar": "",
        "password": "$2a$10$7JB720yubVSZvUI0rEqK/.VqGOZTH.ulu33dHOiBE8ByOhJIrdAu2",
        "status": "0",
        "delFlag": "0",
        "loginIp": "127.0.0.1",
        "loginDate": "2023-06-30T11:41:48.000+08:00",
        "dept": {
            "createBy": null,
            "createTime": null,
            "updateBy": null,
            "updateTime": null,
            "remark": null,
            "deptId": 103,
            "parentId": 101,
            "ancestors": "0,100,101",
            "deptName": "研发部门",
            "orderNum": 1,
            "leader": "若依",
            "phone": null,
            "email": null,
            "status": "0",
            "delFlag": null,
            "parentName": null,
            "children": []
        },
        "roles": [
            {
                "createBy": null,
                "createTime": null,
                "updateBy": null,
                "updateTime": null,
                "remark": null,
                "roleId": 1,
                "roleName": "超级管理员",
                "roleKey": "admin",
                "roleSort": 1,
                "dataScope": "1",
                "menuCheckStrictly": false,
                "deptCheckStrictly": false,
                "status": "0",
                "delFlag": null,
                "flag": false,
                "menuIds": null,
                "deptIds": null,
                "permissions": null,
                "admin": true
            }
        ],
        "roleIds": null,
        "postIds": null,
        "roleId": null,
        "admin": true
    },
    "roleGroup": "超级管理员"
}

未来计划

1、ruoyi非分离版本拆解

2、ruoyi-vue-pro：讲解工作流

3、ruoyi-vue-pro：支付模块，电商模块

4、基于ruoyi-vue-pro项目开发

5、JEECG低代码开发平台

请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。