二、前端整合
1、创建vue组件
core/user-info/list.vue
<template> <div class="app-container"> user list </div> </template>
2、配置路由
{ 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
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
<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
<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
void lock(Long id, Integer status);
实现：UserInfoServiceImpl
@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
@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
lock(id, status) { return request({ url: `/admin/core/userInfo/lock/${id}/${status}`, method: 'put' }) }
2、定义页面组件脚本
src/views/core/user-info/list.vue
// 锁定和解锁 lock(id, status) { userInfoApi.lock(id, status).then(response => { this.$message.success(response.message) this.fetchData() }) }
3、定义页面组件模板
src/views/core/user-info/list.vue：
<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>
