【Java】SpringBoot和前端联动实现存储浏览记录

Alkaid_slc

已于 2024-01-04 09:31:50 修改

阅读量921

点赞数 9

文章标签： java spring boot 开发语言

于 2024-01-03 10:27:57 首次发布

本文链接：https://blog.youkuaiyun.com/qq_32139191/article/details/135356357

版权

本文介绍了如何在用户离开页面时通过异步请求更新浏览历史记录，包括前端使用`navigator.sendBeacon`发送请求，后端Java中的`@PostMapping`处理添加和获取浏览历史的功能，以及数据库操作的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览课程历史记录表 Browsing history

id varchar(32) 非空主键索引浏览记录主键id

course_id varchar(32) 非空普通索引课程id

course_name varchar(1024) 非空课程名称

user_id varchar(32) 非空普通索引用户id

user_name varchar(1024) 可空用户名称

last_viewing_time datetime 非空最后观看时间

在关闭（跳转离开）该课程的时候，异步发请求，先使用用户id和课程id去查这个表，看看是否存在该条记录，存在，则获取并设置最新的时间，不存在，则设置最新时间，并插入该数据

离开当前页面出发异步请求（navigator.sendBeacon原理请搜索其他博客）

$(window).on('unload', function (e) {
    // 使用navigator.sendBeacon发请求
    const blob = new Blob([JSON.stringify({ 'courseId': courseId})], { type: 'application/json; charset=UTF-8'});
    navigator.sendBeacon(url,blob)
    console.log("离开了页面");
});

后端接受请求增加浏览记录

controller.java

后端接受请求增加浏览记录
@ApiOperation("添加该用户的浏览记录")
@PostMapping("/addBrowsingHistory")
public BaseResult<String> addBrowsingHistory(@RequestBody BrowsingHistory browsingHistory) {
    if (browsingHistory.getCourseId().isEmpty()){
        throw new RuntimeException("参数错误");
    }
    String userId = super.getOperatorId();//用户id
    browsingHistory.setUserId(userId);
    //根据用户id和课程id查询是否有该记录
    browsingHistoryService.addHistory(browsingHistory);
    return getBaseResultSuccess("ok","记录成功");
} 
@ApiOperation("获取该用户的浏览记录")
@PostMapping("/getBrowsingHistory")
public BaseResult<BaseQueryPageDTO<BrowsingHistory>> getBrowsingHistory(@RequestBody BrowsingHistory browsingHistory) {
    String userId = super.getOperatorId();
    browsingHistory.setUserId(userId);
    BaseQueryPageDTO<BrowsingHistory> page = browsingHistoryService.getHistoryPage(browsingHistory);
    return getBaseResultSuccess(page,"获取浏览记录成功");
}

service.java

//添加记录
public void addHistory(BrowsingHistory browsingHistory) {
    String userId = browsingHistory.getUserId();//用户id
    String courseId = browsingHistory.getCourseId();//课程id
    LambdaQueryWrapper<BrowsingHistory> eq = new LambdaQueryWrapper<BrowsingHistory>()
            .eq(BrowsingHistory::getUserId, userId)
            .eq(BrowsingHistory::getCourseId, courseId);
    BrowsingHistory oldHistory = baseMapper.selectOne(eq);
    Date date = new Date();
    if (BeanUtil.isNotEmpty(oldHistory)){
        //有记录，更新
        oldHistory.setLastViewingTime(date);
        oldHistory.setUpdateTime(date);
        baseMapper.updateById(oldHistory);
    }else{
        //无记录，新增
        //获取用户名，课程名，插入
        LambdaQueryWrapper<Examiner> eq1 = new LambdaQueryWrapper<Examiner>().eq(Examiner::getId, userId).select(Examiner::getName);
        String userName = examinerMapper.selectOne(eq1).getName();
        LambdaQueryWrapper<CaseShare> eq2 = new LambdaQueryWrapper<CaseShare>().eq(CaseShare::getId, courseId).select(CaseShare::getCaseName);
        String courseName = caseShareMapper.selectOne(eq2).getCaseName();
        browsingHistory.setLastViewingTime(date);
        browsingHistory.setUserName(userName);
        browsingHistory.setCourseName(courseName);
        browsingHistory.setCreateTime(date);
        browsingHistory.setUpdateTime(date);
        baseMapper.insert(browsingHistory);
    }
}

//获取浏览记录，需要按照最后浏览时间查询
public BaseQueryPageDTO<BrowsingHistory> getHistoryPage(BrowsingHistory browsingHistory) {
    IPage<BrowsingHistory> page =
            new Page<>(browsingHistory.getPageNum(), browsingHistory.getPageSize());
    IPage<BrowsingHistory> iPage = baseMapper.getPage(page, BrowsingHistory);
    return new BaseQueryPageDTO<>(
            iPage.getCurrent(),
            iPage.getSize(),
            iPage.getPages(),
            iPage.getTotal(),
            iPage.getRecords()
    );
} 

public interface BrowsingHistoryMapper extends BaseMapper<BrowsingHistory> {
    IPage<BrowsingHistory> getPage(IPage<BrowsingHistory> page,@Param("entity") BrowsingHistory browsingHistory);
}
<select id="getPage" resultType="com.xxx.entity.BrowsingHistory">
    select
        csbh.id as id,
        csbh.course_id as courseId,
        csbh.course_name as courseName,
        csbh.user_id as userId,
        csbh.user_name as userName,
        csbh.last_viewing_time as lastViewingTime
    from
        case_share_browsing_history csbh
        <where>
            <if test="entity.userId != null and entity.userId !=''">
                and csbh.user_id = #{entity.userId}
            </if>
        </where>
    order by csbh.last_viewing_time desc
</select>