项目9：会员列表的前后端联调

已于 2023-04-13 20:27:50 修改
阅读量501 收藏
点赞数
分类专栏： 项目1：金融借钱还钱 文章标签： java mybatis 前端
于 2023-04-13 19:45:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44724899/article/details/130138292
版权

项目9：会员列表的前后端联调

1.会员列表的需求

2.会员列表后端开发

3.会员列表前端开发

4.锁定和解锁功能需求

5.后端锁定解锁开发

6.前端锁定解锁开发

7.登录日志需求

8.后端根据id查询登录日志

9.前端展示日志

项目9：会员列表的前后端联调

1.会员列表的需求

  • 展示会员列表数据
  • 根据条件查询会员列表
    在这里插入图片描述
    在这里插入图片描述

2.会员列表后端开发

①封装查询数据的实体类

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

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;

@Data
@ApiModel(description="会员搜索对象")
public class UserInfoQuery {

    @ApiModelProperty(value = "手机号")
    private String mobile;

    @ApiModelProperty(value = "状态")
    private Integer status;

    @ApiModelProperty(value = "1：出借人 2：借款人")
    private Integer userType;
}

②根据查询条件查询的controller

  • 注意
    前端传入的参数为UserInfoQuery，查询时查询的对象仍然为UserInfo
package com.atguigu.srb.core.controller.admin;


import com.atguigu.common.result.R;
import com.atguigu.srb.core.pojo.entity.UserInfo;
import com.atguigu.srb.core.pojo.query.UserInfoQuery;
import com.atguigu.srb.core.service.UserInfoService;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;

/**
 * <p>
 * 用户基本信息 前端控制器
 * </p>
 *
 * @author Likejin
 * @since 2023-04-09
 */
@Api(tags = "会员管理")
@RestController
@RequestMapping("/admin/core/userInfo")
@Slf4j
@CrossOrigin
public class AdminUserInfoController {


    @Resource
    private UserInfoService userInfoService;
    @ApiOperation("获取会员分页列表")
    //get方法没有请求体，其他方式都可以有请求体，
    @GetMapping("/list/{page}/{limit}")
    public R listPage(
            @ApiParam(value = "当前页码")
            @PathVariable Long limit,
            @ApiParam(value = "每页记录")
            @PathVariable Long page,
            @ApiParam(value = "查询对象")
            UserInfoQuery userInfoQuery
    ){
        Page<UserInfo> pageParam = new Page<>(page,limit);
        IPage<UserInfo> pageModel = userInfoService.listPage(pageParam,userInfoQuery);
        return R.ok().data("pageModel",pageModel);
    }


}

③调用的service

package com.atguigu.srb.core.service;

import com.atguigu.srb.core.pojo.entity.UserInfo;
import com.atguigu.srb.core.pojo.query.UserInfoQuery;
import com.atguigu.srb.core.pojo.vo.LoginVO;
import com.atguigu.srb.core.pojo.vo.RegisterVO;
import com.atguigu.srb.core.pojo.vo.UserInfoVO;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;

/**
 * <p>
 * 用户基本信息 服务类
 * </p>
 *
 * @author Likejin
 * @since 2023-04-09
 */
public interface UserInfoService extends IService<UserInfo> {

    void register(RegisterVO registerVO);
	
	
    UserInfoVO login(LoginVO loginVO, String ip);


	//查询分页信息
    IPage<UserInfo> listPage(Page<UserInfo> pageParam, UserInfoQuery userInfoQuery);

}


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

import com.atguigu.common.exception.Assert;
import com.atguigu.common.result.ResponseEnum;
import com.atguigu.common.util.MD5;
import com.atguigu.srb.base.util.JwtUtils;
import com.atguigu.srb.core.mapper.UserAccountMapper;
import com.atguigu.srb.core.mapper.UserInfoMapper;
import com.atguigu.srb.core.mapper.UserLoginRecordMapper;
import com.atguigu.srb.core.pojo.entity.UserAccount;
import com.atguigu.srb.core.pojo.entity.UserInfo;
import com.atguigu.srb.core.pojo.entity.UserLoginRecord;
import com.atguigu.srb.core.pojo.query.UserInfoQuery;
import com.atguigu.srb.core.pojo.vo.LoginVO;
import com.atguigu.srb.core.pojo.vo.RegisterVO;
import com.atguigu.srb.core.pojo.vo.UserInfoVO;
import com.atguigu.srb.core.service.UserInfoService;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;


import javax.annotation.Resource;

/**
 * <p>
 * 用户基本信息 服务实现类
 * </p>
 *
 * @author Likejin
 * @since 2023-04-09
 */
@Service
public class UserInfoServiceImpl extends ServiceImpl<UserInfoMapper, UserInfo> implements UserInfoService {

    @Resource
    private UserAccountMapper userAccountMapper;

    @Resource
    private UserLoginRecordMapper userLoginRecordMapper;

    @Transactional(rollbackFor = Exception.class)
    @Override
    public void register(RegisterVO registerVO) {

        //判断当前用户是否已经被注册
        QueryWrapper<UserInfo> userInfoQueryWrapper = new QueryWrapper<>();
        userInfoQueryWrapper.eq("mobile",registerVO.getMobile());
        //baseMapper被封装为UserInfoMapper
        Integer count = baseMapper.selectCount(userInfoQueryWrapper);
        Assert.isTrue(count==0, ResponseEnum.MOBILE_EXIST_ERROR);

        //插入用户信息记录 user_info

        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(UserInfo.USER_AVATAR);

        baseMapper.insert(userInfo);
        //插入用户账户记录 user_account

        UserAccount userAccount = new UserAccount();
        userAccount.setUserId(userInfo.getId());
        userAccountMapper.insert(userAccount);
    }

    /**
     * @param loginVO:
     * @param ip:
     * @return UserInfoVO
     * @author Likejin
     * @description 用户登录功能
     * @date 2023/4/13 16:17
     */

    @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> userInfoQueryWrapper = new QueryWrapper<>();
        userInfoQueryWrapper
                .eq("mobile",mobile)
                .eq("User_type",userType);
        UserInfo userInfo = baseMapper.selectOne(userInfoQueryWrapper);
        Assert.notNull(userInfo,ResponseEnum.LOGIN_MOBILE_ERROR);
        //密码是否正确
        Assert.equals(MD5.encrypt(password),userInfo.getPassword(),ResponseEnum.LOGIN_PASSWORD_ERROR);
        //用户是否被禁用
        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.getPassword());
        //组装UserInfoVo
        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(userInfo.getUserType());

        return userInfoVO;
    }

    @Override
    public IPage<UserInfo> listPage(Page<UserInfo> pageParam, UserInfoQuery userInfoQuery) {
        //可能不传参数
        if(userInfoQuery==null){
            return baseMapper.selectPage(pageParam,null);
        }
        String mobile = userInfoQuery.getMobile();
        Integer status = userInfoQuery.getStatus();
        Integer userType = userInfoQuery.getUserType();

        //如果只输入了某一个字段如何解决
        //eq方法提供第一个参数为true才封装
        QueryWrapper<UserInfo> userInfoQueryWrapper = new QueryWrapper<>();
        userInfoQueryWrapper.eq(StringUtils.isNotBlank(mobile),"mobile",mobile)
                .eq(status!=null,"status",status)
                .eq(userType!=null,"User_type",userType);


//        if(StringUtils.isNotBlank(mobile)){
//            userInfoQueryWrapper.eq("mobile",mobile);
//        }
//        if(status!=null){
//            userInfoQueryWrapper.eq("status",status);
//        }
//        if(userType!=null){
//            userInfoQueryWrapper.eq("User_type",userType);
//        }


       return baseMapper.selectPage(pageParam,userInfoQueryWrapper);



    }
}

④时间格式的全局配置（针对localdatetime）

service-base包中

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;


//仅用于localdatetime日期类型
@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;

3.会员列表前端开发

①增加路由

srb-admin\src\router\index.js

 {
    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: '会员列表' },
      },
    ],
  },

②创建引用的request

srb-admin\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}`,
      //get形式传对象
      method: 'get',
      //用params，把参数的内容分散到url地址的？后面
      params: searchObj,

      //如果是post，且后台对应了@requestbody，则数据格式用data（在请求体中传递json）
    })
  },
}

③创建页面组件

srb-admin\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="[1, 3, 10]"
      style="padding: 30px 0"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="changePageSize"
      @current-change="changeCurrentPage"
    />
  </div>
</template>

<script>
import userInfoApi from '@/api/core/user-info'

export default {
  data() {
    return {
      list: null, // 数据列表
      total: 0, // 数据库中的总记录数
      page: 1, // 默认页码
      limit: 3, // 每页记录数
      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：回调参数，表示当前选中的“每页条数”，有默认的参数size为选中的page大小
    changePageSize(size) {
      this.limit = size
      this.fetchData()
    },

    // 改变页码，page：回调参数，表示当前选中的“页码”，有默认参数为page为选中的页码
    changeCurrentPage(page) {
      this.page = page
      this.fetchData()
    },

    // 重置表单
    resetData() {
      //还原表单
      this.searchObj = {}
      //重新查询
      this.fetchData()
    },
  },
}
</script>

4.锁定和解锁功能需求

  • 前后端传输数据
    前端传入id和status，后端根据id和status修改即可。

在这里插入图片描述
在这里插入图片描述

5.后端锁定解锁开发

①controller层

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


import com.atguigu.common.result.R;
import com.atguigu.srb.core.pojo.entity.UserInfo;
import com.atguigu.srb.core.pojo.query.UserInfoQuery;
import com.atguigu.srb.core.service.UserInfoService;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;

/**
 * <p>
 * 用户基本信息 前端控制器
 * </p>
 *
 * @author Likejin
 * @since 2023-04-09
 */
@Api(tags = "会员管理")
@RestController
@RequestMapping("/admin/core/userInfo")
@Slf4j
@CrossOrigin
public class AdminUserInfoController {


    @Resource
    private UserInfoService userInfoService;
    @ApiOperation("获取会员分页列表")
    //get方法没有请求体，其他方式都可以有请求体，
    @GetMapping("/list/{page}/{limit}")
    public R listPage(
            @ApiParam(value = "当前页码")
            @PathVariable Long limit,
            @ApiParam(value = "每页记录")
            @PathVariable Long page,
            @ApiParam(value = "查询对象")
            UserInfoQuery userInfoQuery
    ){
        Page<UserInfo> pageParam = new Page<>(page,limit);
        IPage<UserInfo> pageModel = userInfoService.listPage(pageParam,userInfoQuery);
        return R.ok().data("pageModel",pageModel);
    }


    @ApiOperation("锁定和解锁")
    @PutMapping("/lock/{id}/{status}")
    public R lock(
            @ApiParam(value = "用户id")
            @PathVariable("id") Long id,
            @ApiParam(value = "锁定状态（0锁定 1 正常）")
            @PathVariable("status") Integer status
    ){
        userInfoService.lock(id,status);
        return R.ok().message(status==1?"解锁成功":"锁定成功");
    }
}

②service层

package com.atguigu.srb.core.service;

import com.atguigu.srb.core.pojo.entity.UserInfo;
import com.atguigu.srb.core.pojo.query.UserInfoQuery;
import com.atguigu.srb.core.pojo.vo.LoginVO;
import com.atguigu.srb.core.pojo.vo.RegisterVO;
import com.atguigu.srb.core.pojo.vo.UserInfoVO;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;

/**
 * <p>
 * 用户基本信息 服务类
 * </p>
 *
 * @author Likejin
 * @since 2023-04-09
 */
public interface UserInfoService extends IService<UserInfo> {

    void register(RegisterVO registerVO);

    UserInfoVO login(LoginVO loginVO, String ip);


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

    /**
     * @param id:
     * @param status:
     * @return void
     * @author Likejin
     * @description 根据用户id来更改用户状态
     * @date 2023/4/13 19:46
     */

    void lock(Long id, Integer status);

}


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

import com.atguigu.common.exception.Assert;
import com.atguigu.common.result.ResponseEnum;
import com.atguigu.common.util.MD5;
import com.atguigu.srb.base.util.JwtUtils;
import com.atguigu.srb.core.mapper.UserAccountMapper;
import com.atguigu.srb.core.mapper.UserInfoMapper;
import com.atguigu.srb.core.mapper.UserLoginRecordMapper;
import com.atguigu.srb.core.pojo.entity.UserAccount;
import com.atguigu.srb.core.pojo.entity.UserInfo;
import com.atguigu.srb.core.pojo.entity.UserLoginRecord;
import com.atguigu.srb.core.pojo.query.UserInfoQuery;
import com.atguigu.srb.core.pojo.vo.LoginVO;
import com.atguigu.srb.core.pojo.vo.RegisterVO;
import com.atguigu.srb.core.pojo.vo.UserInfoVO;
import com.atguigu.srb.core.service.UserInfoService;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;


import javax.annotation.Resource;

/**
 * <p>
 * 用户基本信息 服务实现类
 * </p>
 *
 * @author Likejin
 * @since 2023-04-09
 */
@Service
public class UserInfoServiceImpl extends ServiceImpl<UserInfoMapper, UserInfo> implements UserInfoService {

    @Resource
    private UserAccountMapper userAccountMapper;

    @Resource
    private UserLoginRecordMapper userLoginRecordMapper;

    @Transactional(rollbackFor = Exception.class)
    @Override
    public void register(RegisterVO registerVO) {

        //判断当前用户是否已经被注册
        QueryWrapper<UserInfo> userInfoQueryWrapper = new QueryWrapper<>();
        userInfoQueryWrapper.eq("mobile",registerVO.getMobile());
        //baseMapper被封装为UserInfoMapper
        Integer count = baseMapper.selectCount(userInfoQueryWrapper);
        Assert.isTrue(count==0, ResponseEnum.MOBILE_EXIST_ERROR);

        //插入用户信息记录 user_info

        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(UserInfo.USER_AVATAR);

        baseMapper.insert(userInfo);
        //插入用户账户记录 user_account

        UserAccount userAccount = new UserAccount();
        userAccount.setUserId(userInfo.getId());
        userAccountMapper.insert(userAccount);
    }

    /**
     * @param loginVO:
     * @param ip:
     * @return UserInfoVO
     * @author Likejin
     * @description 用户登录功能
     * @date 2023/4/13 16:17
     */

    @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> userInfoQueryWrapper = new QueryWrapper<>();
        userInfoQueryWrapper
                .eq("mobile",mobile)
                .eq("User_type",userType);
        UserInfo userInfo = baseMapper.selectOne(userInfoQueryWrapper);
        Assert.notNull(userInfo,ResponseEnum.LOGIN_MOBILE_ERROR);
        //密码是否正确
        Assert.equals(MD5.encrypt(password),userInfo.getPassword(),ResponseEnum.LOGIN_PASSWORD_ERROR);
        //用户是否被禁用
        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.getPassword());
        //组装UserInfoVo
        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(userInfo.getUserType());

        return userInfoVO;
    }

    @Override
    public IPage<UserInfo> listPage(Page<UserInfo> pageParam, UserInfoQuery userInfoQuery) {
        //可能不传参数
        if(userInfoQuery==null){
            return baseMapper.selectPage(pageParam,null);
        }
        String mobile = userInfoQuery.getMobile();
        Integer status = userInfoQuery.getStatus();
        Integer userType = userInfoQuery.getUserType();

        //如果只输入了某一个字段如何解决
        //eq方法提供第一个参数为true才封装
        QueryWrapper<UserInfo> userInfoQueryWrapper = new QueryWrapper<>();
        userInfoQueryWrapper.eq(StringUtils.isNotBlank(mobile),"mobile",mobile)
                .eq(status!=null,"status",status)
                .eq(userType!=null,"User_type",userType);


//        if(StringUtils.isNotBlank(mobile)){
//            userInfoQueryWrapper.eq("mobile",mobile);
//        }
//        if(status!=null){
//            userInfoQueryWrapper.eq("status",status);
//        }
//        if(userType!=null){
//            userInfoQueryWrapper.eq("User_type",userType);
//        }


       return baseMapper.selectPage(pageParam,userInfoQueryWrapper);



    }

    /**
     * @param id:
     * @param status:
     * @return void
     * @author Likejin
     * @description 根据id修改状态
     * @date 2023/4/13 19:46
     */

    @Override
    public void lock(Long id, Integer status) {
        UserInfo userInfo = new UserInfo();
        userInfo.setId(id);
        userInfo.setStatus(status);
        baseMapper.updateById(userInfo);

    }
}

6.前端锁定解锁开发

①增加方法

  • request传参id和status
    srb-admin\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}`,
      //get形式传对象
      method: 'get',
      //用params，把参数的内容分散到url地址的？后面
      params: searchObj,

      //如果是post，且后台对应了@requestbody，则数据格式用data（在请求体中传递json）
    })
  },
  lock(id, status) {
    return request({
      url: `/admin/core/userInfo/lock/${id}/${status}`,
      method: 'put',
    })
  },
}

②页面组件

srb-admin\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>
    </el-table>


//加在methods方法中
    // 锁定和解锁
    lock(id, status) {
      userInfoApi.lock(id, status).then(response => {
        this.$message.success(response.message)
        this.fetchData()
      })
    }

7.登录日志需求

  • 前端传入id，后端根据id查询登录日志
  • 数据库
    日志对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8.后端根据id查询登录日志

①controller

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


import com.atguigu.common.result.R;
import com.atguigu.srb.core.pojo.entity.UserLoginRecord;
import com.atguigu.srb.core.service.UserLoginRecordService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

/**
 * <p>
 * 用户登录记录表 前端控制器
 * </p>
 *
 * @author Likejin
 * @since 2023-04-09
 */
@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")
            @PathVariable Long userId
    ){
        List<UserLoginRecord> userLoginRecords =  userLoginRecordService.listTop50(userId);
        return R.ok().data("list",userLoginRecords);

    }

}

②查询service

package com.atguigu.srb.core.service;

import com.atguigu.srb.core.pojo.entity.UserLoginRecord;
import com.baomidou.mybatisplus.extension.service.IService;

import java.util.List;

/**
 * <p>
 * 用户登录记录表 服务类
 * </p>
 *
 * @author Likejin
 * @since 2023-04-09
 */
public interface UserLoginRecordService extends IService<UserLoginRecord> {

    List<UserLoginRecord> listTop50(Long userId);

}


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

import com.atguigu.srb.core.pojo.entity.UserLoginRecord;
import com.atguigu.srb.core.mapper.UserLoginRecordMapper;
import com.atguigu.srb.core.service.UserLoginRecordService;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * <p>
 * 用户登录记录表 服务实现类
 * </p>
 *
 * @author Likejin
 * @since 2023-04-09
 */
@Service
public class UserLoginRecordServiceImpl extends ServiceImpl<UserLoginRecordMapper, UserLoginRecord> implements UserLoginRecordService {

    @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;
    }
}

9.前端展示日志

①前端封装方法

srb-admin\src\api\core\user-info.js

  //获取登录日志
  getuserLoginRecordTop50(userId) {
    return request({
      url: `/admin/core/userLoginRecord/listTop50/${userId}`,
      method: 'get',
    })
  },

②前端增加页面组件

srb-admin\src\views\core\user-info\list.vue

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

<!--放在table为操作中-->
          <el-button
            type="primary"
            size="mini"
            @click="showLoginRecord(scope.row.id)"
          >
            登录日志
          </el-button>

<!--放在/div前-->
 <!-- 用户登录日志 -->
    <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>

未更新

未更新

未更新

未更新

未更新

努力生活...
关注
专栏目录
项目面试总结
白长生的小窝
04-30 2112
1、项目描述 （1） 在线教育系统，分为前台网站系统和后台运营平台，B2C模式。 前台用户系统包括课程、讲师、问答、文章几大大部分，使用了微服务技术架构，前后端分离开发。 后端的主要技术架构是：SpringBoot + SpringCloud + MyBatis-Plus + HttpClient + MySQL + Maven+EasyExcel+ nginx 前端的架构是：Node.js + ...
《堂食点餐》APP代码前后端全部免费开源啦！
weixin_43947457的博客
06-02 855
《堂食点餐》云应用是一套在线点餐的行业应用模版，顾客可通过小程序/APP自助扫码订餐、加菜、买单，从而降低门店服务人员工作量及餐厅的运营成本。前端模版源码开源后，获得了很多开发者的好评，为了给开发者带去更好的学习和开发福利，《堂食点餐》后端数据云函数也开源啦！模板的数据云模型和云函数现已上线到数据云预置模型中了。通过导入模型，即可体验云端一体的《堂食点餐》完整案例。 数据云3.0是一个全新的服务端开发运维平台，提供从后端开发、接口联调到上线运营维护等一整套方案。开发者无需考虑数据库和服务器等基础设施，无需
项目8：用户注册和登录的前后端联调
qq_44724899的博客
04-13 753
测试过程中关闭sms的具体使用aliyun发送短信的业务，直接存入redis即可，省钱。user_account的user_id和user_info的user_id绑定。后端接收到前端封装的数据，需要校验短信验证码，需要保存数据到数据库。
前后端分离项目知识汇总（GateWay，Nacos配置中心，Jenkins自动化部署，项目总结）
全网粉丝10W+、全栈领域优质创作者、掘金、阿里云等社区博客专家、专注于全栈领域和毕业项目实战
05-26 1448
前后端分离项目知识汇总整合Gateway网关网关相关配置全局Filter自定义异常处理整合配置中心为什么需要配置中心jar包和war包区别及理解读取配置文件多配置文件加载整合Jenkins代码上传到码云环境配置构建作业项目总结和复盘前后端联调经常遇到的问题前后端分离项目中的跨域问题是如何解决的说说你做了哪个部分、遇到了什么问题、怎么解决的前端渲染和后端渲染有什么区别能画一下系统架构图吗Bug记录maven错误解决执行了全局异常处理常见的排错方式Feign调用异常FeignException$NotFound
【调优】网站前后端性能优化
在这里你大概率会有所收获，欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
12-31 1398
性能优化是一个复杂的话题，涉及的技能很多，如何通过优化网页性能提高用户体验?今天给大家介绍一些常见的方法。 1. 尽可能减少要传输的数据量 首先，删除所有未使用的部分，例如JavaScript中不可访问的函数、带有永远不匹配任何元素的选择器的样式，以及永远隐藏在CSS中的HTML标记。其次，删除所有重复项。然后，我建议设置一个自动缩小过程。例如，它应该删除后端服务的所有注释(但不是源代码)以及不包含其他信息的每个字符(例如JS中的空白字符)。完成后，我们剩下的可以是文本。这意味着我们可以安全地应用压缩算法，
微服务架构系列主题：聊聊前后端分离接口规范
Larry的博客
09-15 659
随着互联网的高速发展，前端页面的展示、交互体验越来越灵活、炫丽，响应体验也要求越来越高。 后端服务的高并发、高可用、高性能、高扩展等特性的要求也愈加苛刻，从而导致前后端研发各自专注于自己擅长的领域深耕细作。 然而带来的另一个问题：前后端的对接界面双方却关注甚少，没有任何接口约定规范情况下各自干各自的，导致我们在产品项目开发过程中，前后端的接口联调对接工作量占比在30%-50%左右，甚至会更高。 往往前后端接口联调对接及系统间的联调对接都是整个产品项目研发的软肋。 本文的主要初衷就是规范约定先行，尽量避免沟通
项目1：项目技术栈和项目功能实现
qq_44724899的博客
04-06 380
项目1：项目技术栈和项目功能实现 1.项目技术栈和项目架构 2.项目功能 3.项目实现流程 4.项目细节 未更新 项目1：项目技术栈和项目功能实现 1.项目技术栈和项目架构 项目架构 项目后端技术栈 SpringBoot 2.3.4.RELEASE SpringCloud Hoxton.SR8 SpringCloud Alibaba 2.2.2.RELEASE MyBatis Plus Lombok Swagger2：Api接口文档生成工具 Logback：日志系统 alibaba-ea
耗时9个月，1.34万行代码，这套分布式微服务架构项目，完结啦！
bugstack虫洞栈
08-20 772
耗时9个月，1.34万行代码，55节课程，全程视频手把手。这套微服务、分布式、DDD架构，涵盖了；抽奖、活动、积分、兑换，运用了分库分表、binlog同步数据、分段非竞态锁、动态配置、熔断、降级、限流、Nginx负载等综合前后端，Dev-Ops大型实战项目，大营销平台系统，终于完结了！💐
富文本 wangEditor 前后端交互例子
热门推荐
qq_33416416的博客
03-28 1万+
之前看了很多 但都不是很详细，这次贴上的代码，希望新手能少走弯路，与君共勉 参考文献 官方文档 https://www.kancloud.cn/wangfupeng/wangeditor3/332599 主要引入：<script type="text/javascript" src="../static/js/wangEditor.min.js"></script>...
SpringBoot 项目模板：摆脱步步搭建
好好学java
01-03 234
点击上方好好学java，选择星标公众号重磅资讯、干货，第一时间送达 今日推荐：硬刚一周，3W字总结，一年的经验告诉你如何准备校招！ 个人原创100W+访问量博客：点击前往，查...
需求分析：明确项目目标及产品功能树
横竖撇折点
09-22 2733
前言 本专栏开设的目的是通过一个完整的项目开发过程来带领大家掌握前端、后端、数据库等各个模块的核心开发知识。在学习之前，重要的是选择一个合适的项目。本专栏选择了一个云笔记项目，命名为 Keller 云笔记，具体要需要什么功能呢？ 无论项目大小，在动工之前，都是已经有了明确的目标，这个目标不是凭空想象的，需要经过一系列的分析与判断。百度百科上对项目需求分析做如下描述： 需求分析是指理解用户需求...
Java 后端开发实践 - 项目模板（16 步）
m0_70565884的博客
05-06 953
在我的工作中，我从零开始搭建了不少软件项目，其中包含了基础代码框架和持续集成基础设施等，这些内容在敏捷开发中通常被称为“第0个迭代”要做的事情。但是，当项目运行了一段时间之后再来反观，我总会发现一些不足的地方，要么测试分类没有分好，要么基本的编码架子没有考虑周全。 另外，我在工作中也会接触到很多既有项目，公司内部和外部的都有，多数项目的编码实践我都是不满意的。比如，我曾经新加入一个项目的时候，前前后后请教了3位同事才把该项目在本地运行起来；又比如在另一项目中，我发现前端请求对应的Java类命名规范不统一，
性能测试项目案例
m0_63409362的博客
06-05 1万+
一、接口测试流程 1.需求分析 2.api文档解析 3.编写测试用例 4.搭建工具或代码所需要的环境 5.搭建项目结构 6.编写脚本：封装测试接口，定义测试用例调用API接口 7.执行、生成测试报告 8.持续集成 二、搭建项目结构及实现 ...........................
HashMap为什么线程不安全？
rnnf_yyds的博客
11-03 583
HashMap底层是基于数组 + 链表（在 Java 8 以后，当链表长度超过一定阈值时会转换为红黑树）的数据结构。在多线程环境下，当多个线程同时对HashMap进行put操作时，可下面这种情况：假设两个线程 A 和 B 同时执行put操作，它们计算出的插入位置相同（假设为index线程 A 先获取到了当前index位置的节点，在它还没来得及将新节点插入链表（或树）时，线程 B 也获取到了这个位置的节点。
[自用，更新自day5]瑞吉外卖代码及笔记
lapiii的博客
11-01 1074
当使用ThreadLocal维护变量时，ThreadLocal为每个使用该变量的线程提供独立的变量副本，所以每一个线程都可以独立地改变自己的副本，而不会影响其它线程所对应的副本。Mybatis Plus公共字段自动填充，也就是在插入或者更新的时候为指定字段赋予指定的值，使用它的好处就是可以统一对这些字段进行处理，避免了重复代码。因为在分页查询的Dish的records(菜品记录中)，只有这个菜品所属的categoryId，但是我们需要分页的时候展示的是菜品名字。
spring循环依赖解决方式
qq_36400213的博客
11-04 735
字段注入和setter注入则提供了更多的灵活性，但需要更谨慎地管理对象的状态。方法注入和注解注入则适用于特定的场景。在Spring框架中，依赖注入（Dependency Injection，DI）是一种实现控制反转（Inversion of Control，IoC）的机制，用于将对象的依赖关系自动注入到对象中。这种方式不如构造器注入严格，但比字段注入更灵活，因为它可以在不创建新实例的情况下改变对象的依赖。这种方式是推荐的，因为它可以保证对象在创建时就处于完全初始化的状态，并且可以使得bean不可变。
基于 SpringBoot 实现QQ邮箱验证码注册功能
2301_79201049的博客
11-06 271
找到并开通以下的邮件协议服务，而且服务开启也较为简单，需要我们发送一个短信到指定的号码，开启后平台会提供一个授权码，一定要记住这个授权码，发邮件的时候需要这个。host 是根据服务主机区分，网易邮箱是 smtp.163.com, qq邮箱是 smtp.qq.com。其中的 username 是你第一步中操作的邮箱账号，nickname 是接收者收到邮件中显示的发件人。发送邮件的核心依赖是 mail ，由于该项目还涉及其他依赖就全都导进来了。（1）首先打开QQ邮箱，点击设置并来到账号页面。
java_方法重写/覆盖(override)
最新发布
HHppGo的博客
11-07 229
方法覆盖（重写）就是子类有一个方法，和父类的某个方法的名称、返回类型、参数一样，那么我们就说子类的这个方法覆盖了父类的方法。
信息学科平台系统开发：基于Spring Boot的最佳实践
2401_85761762的博客
11-02 986
在整个系统测试中，根据需求文档和设计文档，逐一对功能进行检测并写好测试用例，有效避免残片缺陷，因为产品出现缺陷不仅影响功能，而且可以导致数据的不准确，导致产品质量的降低，经过测试，才能使得产品的稳定性和成熟度得到极大的提升，产品质量也才有保证。本系统具有易操作、易管理、交互性好的特点，在操作上是非常简单的，因此在操作上具有很高的可行性。（2）该完整内容全面，管理方便可以及时的全面的处理各种错误，异常，这样避免了很多因用户的马虎操作而出现的失误，其操作方便，用户界面友好，能够上网的人都可以很好的进行操作。
sky-take-out项目代码解析：套餐管理与前后端联调
同时，会分析前端代码可能存在的问题以及前后端联调过程中可能面临的挑战。" 知识点: 1. 分页查询功能实现: 在IT行业中，分页查询是一种常见的数据处理方式，用于优化数据检索速度和用户体验。在后端框架如Spring ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值