微服务项目：尚融宝（32）（后端搭建：会员列表搭建（3））

2022-09-24 271

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

MSE Nacos/ZooKeeper 企业版试用，1600元额度，限量50份

服务治理 MSE Sentinel/OpenSergo，Agent数量不受限

任务调度 XXL-JOB 版免费试用，400 元额度，开发版规格

简介： 微服务项目：尚融宝（32）（后端搭建：会员列表搭建（3））

认清现实，放弃幻想，准备斗争

显示登录日志

一、后端接口实现

1、Controller

AdminUserLoginRecordController

@Api(tags = "会员登录日志接口")
@RestController
@RequestMapping("/admin/core/userLoginRecord")
@Slf4j
@CrossOrigin
public class AdminUserLoginRecordController {
    @Resource
    private UserLoginRecordService userLoginRecordService;
    @ApiOperation("获取会员登录日志列表")
    @GetMapping("/listTop50/{userId}")
    public R listTop50(
            @ApiParam(value = "用户id", required = true)
            @PathVariable Long userId) {
        List<UserLoginRecord> userLoginRecordList = userLoginRecordService.listTop50(userId);
        return R.ok().data("list", userLoginRecordList);
    }
}

2、Service

接口：UserLoginRecordService

List<UserLoginRecord> listTop50(Long userId);

实现：UserLoginRecordServiceImpl

@Override
public List<UserLoginRecord> listTop50(Long userId) {
    QueryWrapper<UserLoginRecord> userLoginRecordQueryWrapper = new QueryWrapper<>();
    userLoginRecordQueryWrapper
        .eq("user_id", userId)
        .orderByDesc("id")
        .last("limit 50");
    List<UserLoginRecord> userLoginRecords = baseMapper.selectList(userLoginRecordQueryWrapper);
    return userLoginRecords;
}

这里进行了按照登录时间进行了排序，并截取前50登录的数据

二、前端整合

1、定义api

src/api/core/user-info.js

  getuserLoginRecordTop50(userId) {
    return request({
      url: `/admin/core/userLoginRecord/listTop50/${userId}`,
      method: 'get'
    })
  }

2、定义页面组件脚本

    // 根据id查询会员日志记录
    showLoginRecord(id) {
      //打开对话框
      this.dialogTableVisible = true
      //加载数据列表
      userInfoApi.getuserLoginRecordTop50(id).then(response => {
        this.loginRecordList = response.data.list
      })
    }

3、定义页面组件模板

src/views/core/user-info/list.vue

在操作列添加按钮：

<el-button
           type="primary"
           size="mini"
           @click="showLoginRecord(scope.row.id)"
           >
    登录日志
</el-button>

在模板最后添加对话框

<!-- 用户登录日志 -->
<el-dialog title="用户登录日志" :visible.sync="dialogTableVisible">
    <el-table :data="loginRecordList" border stripe>
        <el-table-column type="index" />
        <el-table-column prop="ip" label="IP" />
        <el-table-column prop="createTime" label="登录时间" />
    </el-table>
</el-dialog>