【金融项目】尚融宝项目（七）

最新推荐文章于 2024-05-12 17:48:15 发布
最新推荐文章于 2024-05-12 17:48:15 发布
阅读量1k 收藏 4
点赞数
分类专栏： Java项目 文章标签： 金融 java spring boot spring cloud vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chovy_pyc/article/details/127490462
版权

13、用户注册

13.1、前端整合发送短信验证码

13.1.1、运行srb-site

13.1.1.1、解压

srb_site

13.1.1.2、运行
npm run dev

13.1.2、前端页面整合

pages/register.vue

  methods: {
    //发短信  
    send() {
      if (!this.userInfo.mobile) {
        this.$message.error('请输入手机号')
        return
      }
      //防止重复提交
      if (this.sending) return
      this.sending = true
      //倒计时
      this.timeDown()
      //远程调用发送短信的接口
      this.$axios
        .$get('/api/sms/send/' + this.userInfo.mobile)
        .then((response) => {
          this.$message.success(response.message)
        })
    },
    //倒计时
    timeDown() {
      console.log('进入倒计时')
      this.leftSecond = this.second
      //创建定时器
      const timmer = setInterval(() => {
        //计数器减一
        this.leftSecond--
        if (this.leftSecond <= 0) {
          //停止定时器
          clearInterval(timmer)
          //还原计数器
          this.leftSecond = this.second
          //还原按钮状态
          this.sending = false
        }
      }, 1000)
    },
  },

13.2、实现用户注册

13.2.1、需求

在这里插入图片描述

在这里插入图片描述

13.2.2、后端接口

13.2.2.1、创建VO对象

service-core中创建vo

package com.atguigu.srb.core.pojo.vo;
@Data
@ApiModel(description="注册对象")
public class RegisterVO {
    @ApiModelProperty(value = "用户类型")
    private Integer userType;
    @ApiModelProperty(value = "手机号")
    private String mobile;
    @ApiModelProperty(value = "验证码")
    private String code;
    @ApiModelProperty(value = "密码")
    private String password;
}
13.2.2.2、定义常量

UserInfo中添加常量

public static final Integer STATUS_NORMAL = 1;
public static final Integer STATUS_LOCKED = 0;
13.2.2.3、引入MD5工具类

guigu-common中util包，引入工具类：

MD5.java：MD5加密

13.2.2.4、Controller

注意：将controller包中的UserInfoController移植到controller.api包下

package com.atguigu.srb.core.controller.api;

@Api(tags = "会员接口")
@RestController
@RequestMapping("/api/core/userInfo")
@Slf4j
@CrossOrigin
public class UserInfoController {
    @Resource
    private UserInfoService userInfoService;
    @Resource
    private RedisTemplate redisTemplate;
    @ApiOperation("会员注册")
    @PostMapping("/register")
    public R register(@RequestBody RegisterVO registerVO){
        String mobile = registerVO.getMobile();
        String password = registerVO.getPassword();
        String code = registerVO.getCode();
        //MOBILE_NULL_ERROR(-202, "手机号不能为空"),
        Assert.notEmpty(mobile, ResponseEnum.MOBILE_NULL_ERROR);
        //MOBILE_ERROR(-203, "手机号不正确"),
        Assert.isTrue(RegexValidateUtils.checkCellphone(mobile), ResponseEnum.MOBILE_ERROR);
        //PASSWORD_NULL_ERROR(-204, "密码不能为空"),
        Assert.notEmpty(password, ResponseEnum.PASSWORD_NULL_ERROR);
        //CODE_NULL_ERROR(-205, "验证码不能为空"),
        Assert.notEmpty(code, ResponseEnum.CODE_NULL_ERROR);
        //校验验证码
        String codeGen = (String)redisTemplate.opsForValue().get("srb:sms:code:" + mobile);
        //CODE_ERROR(-206, "验证码不正确"),
        Assert.equals(code, codeGen, ResponseEnum.CODE_ERROR);
        //注册
        userInfoService.register(registerVO);
        return R.ok().message("注册成功");
    }
}
13.2.2.5、Service

接口：UserInfoService

package com.atguigu.srb.core.service;

public interface UserInfoService extends IService<UserInfo> {
    void register(RegisterVO registerVO);
}

实现：UserInfoServiceImpl

package com.atguigu.srb.core.service.impl;

@Service
public class UserInfoServiceImpl extends ServiceImpl<UserInfoMapper, UserInfo> implements UserInfoService {
    @Resource
    private UserAccountMapper userAccountMapper;
    @Transactional(rollbackFor = {Exception.class})
    @Override
    public void register(RegisterVO registerVO) {
        //判断用户是否被注册
        QueryWrapper<UserInfo> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("mobile", registerVO.getMobile());
        Integer count = baseMapper.selectCount(queryWrapper);
        //MOBILE_EXIST_ERROR(-207, "手机号已被注册"),
        Assert.isTrue(count == 0, ResponseEnum.MOBILE_EXIST_ERROR);
        //插入用户基本信息
        UserInfo userInfo = new UserInfo();
        userInfo.setUserType(registerVO.getUserType());
        userInfo.setNickName(registerVO.getMobile());
        userInfo.setName(registerVO.getMobile());
        userInfo.setMobile(registerVO.getMobile());
        userInfo.setPassword(MD5.encrypt(registerVO.getPassword()));
        userInfo.setStatus(UserInfo.STATUS_NORMAL); //正常
        //设置一张静态资源服务器上的头像图片
        userInfo.setHeadImg("https://srb-file.oss-cn-beijing.aliyuncs.com/avatar/07.jpg");
        baseMapper.insert(userInfo);
        //创建会员账户
        UserAccount userAccount = new UserAccount();
        userAccount.setUserId(userInfo.getId());
        userAccountMapper.insert(userAccount);
    }
}

13.2.3、前端整合

pages/register.vue

//注册
register() {
  this.$axios
    .$post('/api/core/userInfo/register', this.userInfo)
    .then((response) => {
      this.step = 2
    })
},

14、用户认证

14.1、实现用户登录

14.1.1、需求

在这里插入图片描述

14.1.2、后端的接口

14.1.2.1、集成JWT

service-base中添加依赖

<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt</artifactId>
</dependency>
14.1.2.2、JWT工具

service-base中添加util包

添加JwtUtils类

14.1.2.3、创建VO对象

service-core中创建登录对象

package com.atguigu.srb.core.pojo.vo;

@Data
@ApiModel(description="登录对象")
public class LoginVO {
    
    @ApiModelProperty(value = "用户类型")
    private Integer userType;
    @ApiModelProperty(value = "手机号")
    private String mobile;
    @ApiModelProperty(value = "密码")
    private String password;
}

用户信息对象

package com.atguigu.srb.core.pojo.vo;

@Data
@ApiModel(description="用户信息对象")
public class UserInfoVO {
    @ApiModelProperty(value = "用户姓名")
    private String name;
    @ApiModelProperty(value = "用户昵称")
    private String nickName;
    
    @ApiModelProperty(value = "头像")
    private String headImg;
    
    @ApiModelProperty(value = "手机号")
    private String mobile;
    @ApiModelProperty(value = "1：出借人 2：借款人")
    private Integer userType;
    @ApiModelProperty(value = "JWT访问令牌")
    private String token;
}
14.1.2.4、Controller

UserInfoController

@ApiOperation("会员登录")
@PostMapping("/login")
public R login(@RequestBody LoginVO loginVO, HttpServletRequest request) {
    String mobile = loginVO.getMobile();
    String password = loginVO.getPassword();
    Assert.notEmpty(mobile, ResponseEnum.MOBILE_NULL_ERROR);
    Assert.notEmpty(password, ResponseEnum.PASSWORD_NULL_ERROR);
    String ip = request.getRemoteAddr();
    UserInfoVO userInfoVO = userInfoService.login(loginVO, ip);
    return R.ok().data("userInfo", userInfoVO);
}
14.1.2.5、Service

接口：UserInfoService

UserInfoVO login(LoginVO loginVO, String ip);

实现：UserInfoServiceImpl

@Resource
private UserLoginRecordMapper userLoginRecordMapper;

@Transactional( rollbackFor = {Exception.class})
@Override
public UserInfoVO login(LoginVO loginVO, String ip) {
    String mobile = loginVO.getMobile();
    String password = loginVO.getPassword();
    Integer userType = loginVO.getUserType();
    //获取会员
    QueryWrapper<UserInfo> queryWrapper = new QueryWrapper<>();
    queryWrapper.eq("mobile", mobile);
    queryWrapper.eq("user_type", userType);
    UserInfo userInfo = baseMapper.selectOne(queryWrapper);
    //用户不存在
    //LOGIN_MOBILE_ERROR(-208, "用户不存在"),
    Assert.notNull(userInfo, ResponseEnum.LOGIN_MOBILE_ERROR);
    //校验密码
    //LOGIN_PASSWORD_ERROR(-209, "密码不正确"),
    Assert.equals(MD5.encrypt(password), userInfo.getPassword(), ResponseEnum.LOGIN_PASSWORD_ERROR);
    //用户是否被禁用
    //LOGIN_DISABLED_ERROR(-210, "用户已被禁用"),
    Assert.equals(userInfo.getStatus(), UserInfo.STATUS_NORMAL, ResponseEnum.LOGIN_LOKED_ERROR);
    //记录登录日志
    UserLoginRecord userLoginRecord = new UserLoginRecord();
    userLoginRecord.setUserId(userInfo.getId());
    userLoginRecord.setIp(ip);
    userLoginRecordMapper.insert(userLoginRecord);
    //生成token
    String token = JwtUtils.createToken(userInfo.getId(), userInfo.getName());
    UserInfoVO userInfoVO = new UserInfoVO();
    userInfoVO.setToken(token);
    userInfoVO.setName(userInfo.getName());
    userInfoVO.setNickName(userInfo.getNickName());
    userInfoVO.setHeadImg(userInfo.getHeadImg());
    userInfoVO.setMobile(userInfo.getMobile());
    userInfoVO.setUserType(userType);
    return userInfoVO;
}

14.1.3、前端整合

14.1.3.1、登录脚本

pages/login.vue

methods: {
    //登录
    login() {
      this.$axios
        .$post('/api/core/userInfo/login', this.userInfo)
        .then((response) => {
          // 把用户信息存在cookie中
          cookie.set('userInfo', response.data.userInfo)
          window.location.href = '/user'
        })
    },
},
14.1.2.2、页面头信息

components/AppHeader.vue

脚本

<script>
import cookie from 'js-cookie'
export default {
  data() {
    return {
      userInfo: null,
    }
  },
  mounted() {
    this.showInfo()
  },
  methods: {
    //显示用户信息  
    showInfo() {
      // debugger
      let userInfo = cookie.get('userInfo')
      if (!userInfo) {
        console.log('cookie不存在')
        this.userInfo = null
        return
      }  
      userInfo = JSON.parse(userInfo)  
      this.userInfo = userInfo
    },
    //退出  
    logout() {
      cookie.set('userInfo', '')
      //跳转页面
      window.location.href = '/login'
    },
  },
}
</script>

14.2、校验用户登录

14.2.1、后端的接口

14.2.1.1、添加令牌校验接口

service-core 中 UserInfoController添加令牌校验接口

@ApiOperation("校验令牌")
@GetMapping("/checkToken")
public R checkToken(HttpServletRequest request) {
    String token = request.getHeader("token");
    boolean result = JwtUtils.checkToken(token);
    if(result){
        return R.ok();
    }else{
        //LOGIN_AUTH_ERROR(-211, "未登录"),
        return R.setResult(ResponseEnum.LOGIN_AUTH_ERROR);
    }
}
14.2.1.2、Swagger请求头添加header

step1：service-base添加依赖

<dependency>
    <groupId>com.github.xiaoymin</groupId>
    <artifactId>swagger-bootstrap-ui</artifactId>
    <version>1.9.2</version>
</dependency>

step2：访问

http://localhost:8110/doc.html

step3：添加全局参数

在这里插入图片描述

step4：测试

在这里插入图片描述

14.2.2、前端整合

14.2.2.1、优化showInfo

components/AppHeader.vue

脚本

showInfo() {
    // debugger
    let userInfo = cookie.get('userInfo')
    if (!userInfo) {
        console.log('cookie不存在')
        this.userInfo = null
        return
    }
    userInfo = JSON.parse(userInfo)
    
    //先在服务器端校验token
    this.$axios({
        url: '/api/core/userInfo/checkToken',
        method: 'get',
        headers: {
            //如果token校验成功，再展示user信息
            token: userInfo.token,
        },
    }).then((response) => {
        console.log('校验成功')
        this.userInfo = userInfo
    })
},
14.2.2.2、axios请求拦截（了解）

可以在axios请求拦截器中统一添加header

  $axios.onRequest((config) => {
    // 添加请求头：token
    let userInfo = cookie.get('userInfo')
    if (userInfo) {
      console.log('添加header')
      userInfo = JSON.parse(userInfo)
      config.headers['token'] = userInfo.token
    }
    console.log('Making request to ' + config.url)
  })
14.2.2.3、axios响应拦截（了解）

plugins/axios.js：处理未登录状况

  $axios.onResponse((response) => {
    console.log('Reciving resposne', response)
    if (response.data.code === 0) {
      return response
    } else if (response.data.code === -211) {
      console.log('token校验失败')
      cookie.set('userInfo', '')
      //debugger
      //跳转到登录页面
      window.location.href = '/login'
    } else {
      Message({
        message: response.data.message,
        type: 'error',
        duration: 5 * 1000,
      })
      return Promise.reject(response)
    }
  })

15、会员管理

15.1、会员分页列表

15.1.1、需求

在这里插入图片描述

在这里插入图片描述

15.1.2、后端接口实现

15.1.2.1、创建查询对象

UserInfoQuery

package com.atguigu.srb.core.pojo.query;

@Data
@ApiModel(description="会员搜索对象")
public class UserInfoQuery {
    @ApiModelProperty(value = "手机号")
    private String mobile;
    @ApiModelProperty(value = "状态")
    private Integer status;
    @ApiModelProperty(value = "1：出借人 2：借款人")
    private Integer userType;
}
15.1.2.2、Service

接口：UserInfoService

IPage<UserInfo> listPage(Page<UserInfo> pageParam, UserInfoQuery userInfoQuery);

实现：UserInfoServiceImpl

@Override
public IPage<UserInfo> listPage(Page<UserInfo> pageParam, UserInfoQuery userInfoQuery) {
    String mobile = userInfoQuery.getMobile();
    Integer status = userInfoQuery.getStatus();
    Integer userType = userInfoQuery.getUserType();
    QueryWrapper<UserInfo> userInfoQueryWrapper = new QueryWrapper<>();
    if(userInfoQuery == null){
        return baseMapper.selectPage(pageParam, null);
    }
    userInfoQueryWrapper
        .eq(StringUtils.isNotBlank(mobile), "mobile", mobile)
        .eq(status != null, "status", userInfoQuery.getStatus())
        .eq(userType != null, "user_type", userType);
    return baseMapper.selectPage(pageParam, userInfoQueryWrapper);
}
15.1.2.3、Controller

AdminUserInfoController

package com.atguigu.srb.core.controller.admin;

@Api(tags = "会员管理")
@RestController
@RequestMapping("/admin/core/userInfo")
@Slf4j
@CrossOrigin
public class AdminUserInfoController {
    @Resource
    private UserInfoService userInfoService;
    @ApiOperation("获取会员分页列表")
    @GetMapping("/list/{page}/{limit}")
    public R listPage(
            @ApiParam(value = "当前页码", required = true)
            @PathVariable Long page,
            @ApiParam(value = "每页记录数", required = true)
            @PathVariable Long limit,
            @ApiParam(value = "查询对象", required = false)
            UserInfoQuery userInfoQuery) {
        Page<UserInfo> pageParam = new Page<>(page, limit);
        IPage<UserInfo> pageModel = userInfoService.listPage(pageParam, userInfoQuery);
        return R.ok().data("pageModel", pageModel);
    }
}
15.1.2.4、LocalDateTime的json格式化问题

service-base中添加json格式化配置文件

package com.atguigu.srb.base.config;

import com.fasterxml.jackson.datatype.jsr310.ser.LocalDateTimeSerializer;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.autoconfigure.jackson.Jackson2ObjectMapperBuilderCustomizer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
@Configuration
public class LocalDateTimeSerializerConfig {
    @Value("${spring.jackson.date-format:yyyy-MM-dd HH:mm:ss}")
    private String pattern;
    public LocalDateTimeSerializer localDateTimeDeserializer() {
        return new LocalDateTimeSerializer(DateTimeFormatter.ofPattern(pattern));
    }
    @Bean
    public Jackson2ObjectMapperBuilderCustomizer jackson2ObjectMapperBuilderCustomizer() {
        return builder -> builder.serializerByType(LocalDateTime.class, localDateTimeDeserializer());
    }
}

上面的方案全局生效，当全局的格式化方式无法满足我们需求时，我们对日期格式要做特殊的处理：在类的属性上添加注解

@JsonFormat(pattern = "yyyy-MM-dd")
@ApiModelProperty(value = "创建时间")
private LocalDateTime createTime;

15.1.3、前端整合

15.1.3.1、创建vue组件

core/user-info/list.vue

<template>
  <div class="app-container">
    user list
  </div>
</template>
15.1.3.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: '会员列表' }
      }
    ]
  },
15.1.3.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
    })
  }
}
15.1.3.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>
15.1.3.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>

15.2、锁定和解锁

15.2.1**、后端接口实现**

15.2.1.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);
}
15.2.1.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?"解锁成功":"锁定成功");
}

15.2.2、前端整合

15.2.2.1、定义api

src/api/core/user-info.js

  lock(id, status) {
    return request({
      url: `/admin/core/userInfo/lock/${id}/${status}`,
      method: 'put'
    })
  }
15.2.2.2、定义页面组件脚本

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

    // 锁定和解锁
    lock(id, status) {
      userInfoApi.lock(id, status).then(response => {
        this.$message.success(response.message)
        this.fetchData()
      })
    }
15.2.2.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>

15.3、显示登录日志

15.3.1、后端接口实现

15.3.1.1、Controller

AdminUserLoginRecordController

package com.atguigu.srb.core.controller.admin;

@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);
    }
}
15.3.1.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;
}

15.3.2、前端整合

15.3.2.1、定义api

src/api/core/user-info.js

  getuserLoginRecordTop50(userId) {
    return request({
      url: `/admin/core/userLoginRecord/listTop50/${userId}`,
      method: 'get'
    })
  }
15.3.2.2、定义页面组件脚本
    // 根据id查询会员日志记录
    showLoginRecord(id) {
      //打开对话框
      this.dialogTableVisible = true
      //加载数据列表
      userInfoApi.getuserLoginRecordTop50(id).then(response => {
        this.loginRecordList = response.data.list
      })
    }
15.3.2.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>

本文章参考B站 尚硅谷《尚融宝》Java微服务分布式金融项目，仅供个人学习使用，部分内容为本人自己见解，与尚硅谷无关。

BugMaker.Chovy
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
尚硅谷尚融宝项目手敲代码
09-11
自己手敲的
01-尚融宝课程介绍.ziw
01-05
01-尚融宝课程介绍.ziw
NuxtJS服务器端渲染
Logan的博客
08-15 914
01-服务端渲染技术 一、搜索引擎优化 1、什么是SEO 总结：seo是网站为了提高自已的网站排名，获得更多的流量，对网站的结构及内容进行调整和优化，以便搜索引擎 （百度，google等）更好抓取到优质网站的内容。 2、搜索引擎工作流程 常见的SEO方法比如： 对url链接的规范化，多用restful风格的url，多用静态资源url； 注意keywords、description、title的设置； h1-h6、a标签的使用 – 等等 注意：spider对javascript支持不好，ajax获取
最新微服务项目：尚融宝（19）（后端搭建：阿里云短信服务整合，2024年最新自学编程找工作
最新发布
2401_84182146的博客
05-12 303
创建常量读取工具类：SmsProperties.java+@Setter@Getter //idea2020.2.3版配置文件自动提示需要这个@Component//注意prefix要写到最后一个 "." 符号之前//调用setter为成员赋值//当私有成员被赋值后，此方法自动被调用，从而初始化常量@OverrideIdea报告如下错误信息（不影响程序的编译和运行）：解决方案参考文档：解决步骤：step1：添加-- 配置文件处理器 -->
尚融宝30（终）-资金记录和个人中心展示
m0_62946761的博客
05-05 3054
微服务项目尚融宝（终）——完成个人中心和投资记录的展示，并整合rabbitmq
尚融宝-实战
duanmy的博客
07-19 1836
一、项目介绍和前后端核心框架 二、
金融小项目前端页面
weixin_73603602的博客
12-04 466
【代码】金融小项目前端页面。
前端互联网金融项目总结
qq_49496611的博客
01-04 1902
vue项目练习
java springbcloud互联网金融项目《尚融宝》前端后端完整代码+资料、源码和课件
06-15
尚融宝是一个投资理财类系统，作为全栈项目涉及的知识涵盖：前端、后端及项目的业务开发，整体内容分为四个篇章：一、项目介绍和前后端核心框架 二、项目基本功能的实现 三、SpringCloud基础设施 四、核心业务流程的...
金融宝理财管理系统平台
10-21
一套集结了互联网金融所有功能于一身，理财 、借贷 、众筹、众投， 一套集结了WEB端、ANDROID客户端、IOS客户端， 不在为了一个模块或一个端而再去重新购买或定制其他系统。 所有模块独立设置开关功能，轻轻一点，...
金融社区项目-vue
01-23
vue+nuxt.js+vue-quill+editor+axios+element-ui。涉及富文本编辑
p2p金融借贷项目源码+前端页面+数据库脚本
05-16
p2p金融借贷理财平台项目，包括java源码+前端页面+数据库脚本
financejs：React金融项目的前端
02-26
如何使用应用程式 财务是个人财务经理，可让您跟踪交易。 但是在到达那里之前，我们需要先进行一些设置。 分类目录 登录“财务”时，要做的第一件事是创建一些类别。 类别可以有两种类型：费用和收入。 支出是您花钱购买的东西，例如食品或汽车。 收入是您可以赚钱的东西，例如工作中的薪水或股票市场中的收入。 帐目 交易属于帐户，因此下一步是创建一些帐户。 这些可以是您的银行帐户，信用卡，甚至是用于现金交易的电子钱包。 交易次数 使用类别和帐户，您现在可以创建交易。 交易具有值，类别，日期和可选的描述。 如果您创建了费用交易，它将从您的帐户中扣除资金。 如果您创建了收入交易，它将为您的帐户增加资金。 该帐户跟踪您的所有交易并计算余额。 转账 转账是一种特殊的交易。 他们没有类别，但是有一个原始帐户（“发件人”）和一个目标帐户（“收件人”），以及可选的描述。 创建转帐时，它将从原始帐户中扣除资金，然后将
尚融宝谷粒商城代码 笔记 自己跟着视频敲得 可运行 自己完善了功能 希望给你帮助
04-08
尚融宝谷粒商城代码 笔记 自己跟着视频敲得 可运行 自己完善了功能 希望给你帮助 妈妈再也不用担心你面试的时候没有项目经验了
金融宝P2P网贷平台系统试用版
03-28
国内最专业，最全面的P2P网络贷款平台系统-金融宝P2P网络贷款平台系统。应用目前市面上最火的网站编程语言：PHP编程语言，并采用了国内最火的PHP框架-THINKPHP框架。系统前台和后台，目录分层明确，便于管理。金融宝...
尚融宝SpringCloud Alibaba全栈项目技术要点
IT大神帅杰的博客
03-31 1950
尚融宝作为全栈项目涉及的知识涵盖：前端、后端及项目的业务开发， 一、项目介绍和前后端核心框架 二、项目基本功能的实现 三、SpringCloud基础设施 四、核心业务流程的实现 项目涉及的技术架构：一、后端技术栈 二、前端技术栈 三、第三方资金托管平台 Java技术栈： SpringBoot 2.3.4.RELEASE SpringCloud Hoxton.SR8：微服务基础设施 - 服务注册、服务发现、服务熔断、微服务网关、配置中心等 SpringCloudA...
2. 尚融宝开发环境和工具
UnityAlvin
04-14 1461
一、前置知识 Java基础、HTML、CSS、JavaScript、Spring、SpringMVC、MyBatis、SpringBoot、SpringCloud Alibaba MySQL、Redis、RabbitMQ、nginx、idea、maven、VMWare 虚拟机、CentOS 操作系统 二、技术栈 1、后端 SpringBoot 2.3.4.RELEASE SpringCloud Hoxton.SR8：微服务基础设施 - 服务注册、服务发现、服务熔断、微服务网关、配置中心等 SpringClo
25. 尚融宝网关配置
UnityAlvin
04-28 352
一、创建模块service-gateway 1、pom <dependencies> <!-- 网关 --> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-gateway</artifactId> </dependency>
QueryWrapper多条件插叙
08-24
- *1* [尚融宝04-mybatis-plus插件和条件构造器](https://blog.csdn.net/m0_62946761/article/details/129614633)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值