上一遍文章已经介绍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低代码开发平台
请关注我,本星球会持续推出更多的开源项目代码解析,如有更好的意见请留言回复或者私信。