Java入门17：用户查询接口对接-五八三

该文章是Java入门系列的第十七章：前端对接用户查询接口

对接用户查询接口

上一章我们写好了查询接口，这章我们开始对接接口，先打开src\api\SystemSet\UserManage.ts文件，将获取用户列表的接口代码改成如下：

/**
 * 获取用户列表
 * @method getUser
 */
export const getUser = (params: any) => Axios.get(`list`, {
    params: params
});

我们再打开src\views\SystemSet\UserManage\index.vue文件，需要修改的代码如下，分页以后再做，部门和角色页面也还没有先写死，等以后写了页面和接口后再改成动态的：

<el-table-column prop="orgName" label="部门">
    <template #default="scope">
        <span>{{ orgs.find(el => scope.row.orgId === el.id)?.name }}</span>
    </template>
</el-table-column>
...
<el-table-column prop="roleNameList" label="角色">
    <template #default="scope">
        <span>{{ roleIds.filter(el => scope.row.roleIdList.split(',').includes('' + el.id)).map(el => el.name).join(",") }}</span>
    </template>
</el-table-column>
...
const orgs = [
    { id: 1, name: '研发部' },
    { id: 2, name: '销售1部' },
    { id: 3, name: '销售2部' },
]
const roleIds = [
    { name: '管理员', id: 1 },
    { name: '开发人员', id: 2 },
    { name: '销售人员', id: 3 }
]
const getTableData = () => {
    getUser({ page: page.value, limit: limit.value, keyWord: keyWord.value }).then((res: any) => {
        tableData.value = res
        // total.value = res.total
    })
}

还需要改一下src\api\request.ts文件中响应拦截器的代码，因为我们接口返回的内容很简单，没有进行封装，所以先这样改一下，等以后统一封装了再改：

//  http response 响应拦截器
service.interceptors.response.use(
    response => {
        ...
        return res // return null 改成 return res
    },
    error => {
        return Promise.reject(error)
    }
)

最后我们的页面展示效果如下：