$(window).on('unload', function (e) {
    // 使用navigator.sendBeacon發(fā)請(qǐng)求
    const blob = new Blob([JSON.stringify({ 'courseId': courseId})], { type: 'application/json; charset=UTF-8'});
    navigator.sendBeacon(url,blob)
    console.log("離開了頁(yè)面");
});

后端接受請(qǐng)求增加瀏覽記錄
@ApiOperation("添加該用戶的瀏覽記錄")
@PostMapping("/addBrowsingHistory")
public BaseResult<String> addBrowsingHistory(@RequestBody BrowsingHistory browsingHistory) {
    if (browsingHistory.getCourseId().isEmpty()){
        throw new RuntimeException("參數(shù)錯(cuò)誤");
    }
    String userId = super.getOperatorId();//用戶id
    browsingHistory.setUserId(userId);
    //根據(jù)用戶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,"獲取瀏覽記錄成功");
}

//添加記錄
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{
        //無(wú)記錄，新增
        //獲取用戶名，課程名，插入
        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);
    }
}
//獲取瀏覽記錄，需要按照最后瀏覽時(shí)間查詢
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>