前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微服务项目:尚融宝(32)(后端搭建:会员列表搭建(3))

微服务项目:尚融宝(32)(后端搭建:会员列表搭建(3))

作者头像
一个风轻云淡
发布2022-11-15 14:41:06
2660
发布2022-11-15 14:41:06
举报
文章被收录于专栏:java学习java

显示登录日志

一、后端接口实现

1、Controller

AdminUserLoginRecordController

代码语言:javascript
复制
@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

代码语言:javascript
复制
List<UserLoginRecord> listTop50(Long userId);

实现:UserLoginRecordServiceImpl 

代码语言:javascript
复制
@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

代码语言:javascript
复制
  getuserLoginRecordTop50(userId) {
    return request({
      url: `/admin/core/userLoginRecord/listTop50/${userId}`,
      method: 'get'
    })
  }

2、定义页面组件脚本 

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

3、定义页面组件模板

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

在操作列添加按钮:

代码语言:javascript
复制
<el-button
           type="primary"
           size="mini"
           @click="showLoginRecord(scope.row.id)"
           >
    登录日志
</el-button>

在模板最后添加对话框 

代码语言:javascript
复制
<!-- 用户登录日志 -->
<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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-09-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 显示登录日志
  • 一、后端接口实现
    • 1、Controller
      • 2、Service
      • 二、前端整合
        • 1、定义api
          • 2、定义页面组件脚本 
            • 3、定义页面组件模板
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档