Java入门19:查询用户详情接口对接

该文章是Java入门系列的第十九章:查询用户详情接口对接

查询用户详情接口对接

上一章我们写好了查询用户详情的接口,这章我们开始对接接口,先打开src\api\SystemSet\UserManage.ts文件,将获取用户详细信息的接口代码改成如下:

/**
 * 获取用户详细信息
 * @method getUserDetail
 */

export const getUserDetail = (params: any) => Axios.get(`detail`, {
    params: params
});

我们再打开src\views\SystemSet\UserManage\AddEdit.vue文件,要修改的代码如下,按接口要求传入用户id参数:

const props = defineProps({
    editItem: Object
})
...
const getEditData = () => {
    getUserDetail({ id: props.editItem?.id }).then((res: any) => {
        res.roleIdList = res.roleIdList.split(',').map((el: any) => +el)
        Object.assign(ruleForm, res)
    })
}

src\views\SystemSet\UserManage\index.vue文件的代码也做一下修改,不然会有报错,修改如下:

let editItem = ref()

最后我们点击页面上的编辑按钮,成功拿到数据并回显在页面上:

image.png

写在最后

以上就是查询用户详情接口对接的全部说明,下一章节开发用户编辑接口

© 版权声明
THE END
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYklc9g1' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

图形验证码
取消
昵称代码图片