二、前端整合
1、创建vue组件
core/user-info/list.vue
代码语言：javascript复制<template>
<div class="app-container">
user list
</div>
</template>2、配置路由
代码语言：javascript复制 {
path: '/core/user-info',
component: Layout,
redirect: '/core/user-info/list',
name: 'coreUserInfo',
meta: { title: '会员管理', icon: 'user' },
alwaysShow: true,
children: [
{
path: 'list',
name: 'coreUserInfoList',
component: () => import('@/views/core/user-info/list'),
meta: { title: '会员列表' }
}
]
},3、定义api模块
创建文件 src/api/core/user-info.js
代码语言：javascript复制import request from '@/utils/request'
export default {
getPageList(page, limit, searchObj) {
return request({
url: `/admin/core/userInfo/list/${page}/${limit}`,
method: 'get',
params: searchObj
})
}
}4、定义页面组件脚本
src/views/core/user-info/list.vue
代码语言：javascript复制<script>
import userInfoApi from '@/api/core/user-info'
export default {
data() {
return {
list: null, // 数据列表
total: 0, // 数据库中的总记录数
page: 1, // 默认页码
limit: 10, // 每页记录数
searchObj: {}, // 查询条件
loginRecordList: [], //会员登录日志
dialogTableVisible: false //对话框是否显示
}
},
created() {
// 当页面加载时获取数据
this.fetchData()
},
methods: {
fetchData() {
userInfoApi
.getPageList(this.page, this.limit, this.searchObj)
.then(response => {
this.list = response.data.pageModel.records
this.total = response.data.pageModel.total
})
},
// 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
changePageSize(size) {
this.limit = size
this.fetchData()
},
// 改变页码，page：回调参数，表示当前选中的“页码”
changeCurrentPage(page) {
this.page = page
this.fetchData()
},
// 重置表单
resetData() {
this.searchObj = {}
this.fetchData()
}
}
}
</script>5、定义页面组件模板
src/views/core/user-info/list.vue
代码语言：javascript复制<template>
<div class="app-container">
<!--查询表单-->
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="手机号">
<el-input v-model="searchObj.mobile" placeholder="手机号" />
</el-form-item>
<el-form-item label="用户类型">
<el-select v-model="searchObj.userType" placeholder="请选择" clearable>
<el-option label="投资人" value="1" />
<el-option label="借款人" value="2" />
</el-select>
</el-form-item>
<el-form-item label="用户状态">
<el-select v-model="searchObj.status" placeholder="请选择" clearable>
<el-option label="正常" value="1" />
<el-option label="锁定" value="0" />
</el-select>
</el-form-item>
<el-button type="primary" icon="el-icon-search" @click="fetchData()">
查询
</el-button>
<el-button type="default" @click="resetData()">清空</el-button>
</el-form>
<!-- 列表 -->
<el-table :data="list" border stripe>
<el-table-column label="#" width="50">
<template slot-scope="scope">
{{ (page - 1) * limit scope.$index 1 }}
</template>
</el-table-column>
<el-table-column label="用户类型" width="100">
<template slot-scope="scope">
<el-tag v-if="scope.row.userType === 1" type="success" size="mini">
投资人
</el-tag>
<el-tag
v-else-if="scope.row.userType === 2"
type="warning"
size="mini"
>
借款人
</el-tag>
</template>
</el-table-column>
<el-table-column prop="mobile" label="手机号" />
<el-table-column prop="name" label="用户姓名" />
<el-table-column prop="idCard" label="身份证号" />
<el-table-column prop="integral" label="用户积分" />
<el-table-column prop="createTime" label="注册时间" width="100" />
<el-table-column label="绑定状态" width="90">
<template slot-scope="scope">
<el-tag v-if="scope.row.bindStatus === 0" type="warning" size="mini">
未绑定
</el-tag>
<el-tag
v-else-if="scope.row.bindStatus === 1"
type="success"
size="mini"
>
已绑定
</el-tag>
<el-tag v-else type="danger" size="mini">绑定失败</el-tag>
</template>
</el-table-column>
<el-table-column label="用户状态" width="90">
<template slot-scope="scope">
<el-tag v-if="scope.row.status === 0" type="danger" size="mini">
锁定
</el-tag>
<el-tag v-else type="success" size="mini">
正常
</el-tag>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<el-pagination
:current-page="page"
:total="total"
:page-size="limit"
:page-sizes="[10, 20]"
style="padding: 30px 0; "
layout="total, sizes, prev, pager, next, jumper"
@size-change="changePageSize"
@current-change="changeCurrentPage"
/>
</div>
</template>锁定和解锁
一、后端接口实现
1、Service
接口：UserInfoService
代码语言：javascript复制void lock(Long id, Integer status);实现：UserInfoServiceImpl
代码语言：javascript复制@Override
public void lock(Long id, Integer status) {
// UserInfo userInfo = this.getById(id);//select
// userInfo.setStatus(1);
// this.updateById(userInfo);//update
UserInfo userInfo = new UserInfo();
userInfo.setId(id);
userInfo.setStatus(status);
baseMapper.updateById(userInfo);
}2、Controller
AdminUserInfoController
代码语言：javascript复制@ApiOperation("锁定和解锁")
@PutMapping("/lock/{id}/{status}")
public R lock(
@ApiParam(value = "用户id", required = true)
@PathVariable("id") Long id,
@ApiParam(value = "锁定状态（0：锁定 1：解锁）", required = true)
@PathVariable("status") Integer status){
userInfoService.lock(id, status);
return R.ok().message(status==1?"解锁成功":"锁定成功");
}二、前端整合
1、定义api
src/api/core/user-info.js
代码语言：javascript复制 lock(id, status) {
return request({
url: `/admin/core/userInfo/lock/${id}/${status}`,
method: 'put'
})
}2、定义页面组件脚本
src/views/core/user-info/list.vue
代码语言：javascript复制 // 锁定和解锁
lock(id, status) {
userInfoApi.lock(id, status).then(response => {
this.$message.success(response.message)
this.fetchData()
})
}3、定义页面组件模板
src/views/core/user-info/list.vue：
代码语言：javascript复制<el-table-column label="操作" align="center" width="200">
<template slot-scope="scope">
<el-button
v-if="scope.row.status == 1"
type="primary"
size="mini"
@click="lock(scope.row.id, 0)"
>
锁定
</el-button>
<el-button
v-else
type="danger"
size="mini"
@click="lock(scope.row.id, 1)"
>
解锁
</el-button>
</template>
</el-table-column>
