上一遍文章已经介绍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 接口代码
/**
* 个人信息
*/@GetMappingpublic 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低代码开发平台
请关注我,本星球会持续推出更多的开源项目代码解析,如有更好的意见请留言回复或者私信。
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表