短视频后台管理系统之举报视频模块

本文主要是介绍短视频后台管理系统之举报视频模块，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、前端

1.添加菜单
//menu.jsp

<!-- 举报管理 start --><li class="nav-item "><a href="javascript:;" class="nav-link nav-toggle"><i class="icon-envelope-letter"></i><span class="title">举报管理</span><span class="arrow"></span></a><ul class="sub-menu"><li class="nav-item "><a href="<%=request.getContextPath() %>/video/showReportList.action" class="ajaxify nav-link "><span class="title">举报列表</span></a></li></ul></li>

2.跳转出举报页面
//video.controller

  @GetMapping("/showReportList")public String showReportList() {return "video/reportList";}

而reportList.jsp中只有一个jqgrid的地址，调用jqgrid插件

3.js操作
首先把List进行初始化：

jQuery(document).ready(function() {debugger;UsersReportsList.init();
})

然后出使化过程中先调用后端查询举报信息列表

 url: hdnContextPath + "/video/reportList.action"

二、前端发送请求信息到后端
//video.controller中

@PostMapping("/reportList")
@ResponseBodypublic ResultByPage reportList(Integer page) {ResultByPage result = videoService.queryReportList(page, 10);return result;}

其中queryReportList的方法为
//VideoController.java

 @Overridepublic ResultByPage queryReportList(Integer page, Integer pageSize) {PageHelper.startPage(page, pageSize);List<Reports> reportsList = usersReportMapperCustom.selectAllVideoReport();PageInfo<Reports> pageList = new PageInfo<Reports>(reportsList);ResultByPage grid = new ResultByPage();grid.setTotal(pageList.getPages());grid.setRows(reportsList);grid.setPage(page);grid.setRecords(pageList.getTotal());return grid;}

//selectByExample(example)

<select id="selectAllVideoReport" resultType="com.atlantis.domain.vo.Reports" >select ur.id as id,ur.title as title,ur.content as content,ur.create_date as createDate,du.username as dealUsername,v.id as dealVideoId,v.video_desc as videoDesc,v.video_path as videoPath,v.status as status,u.username as submitUsernamefrom users_report ur left join users du on ur.deal_user_id = du.id left join videos v on ur.deal_video_id = v.id left join users u on ur.userid=u.idgroup by ur.create_date desc</select>

然后返回一个自定义的vo类，并封账为一个pageResult对象，返回到前端

三、前端接受后端发送的数据
1.拿到数据之后，jqgrid会进行渲染，按照列名，模块进行

 colNames: ['ID', '举报类型', '举报内容', '被举报人', '被举报视频id', '被举报视频', '视频状态', '提交用户', '举报日期', "操作"],  colModel: [  { name: 'id', index: 'id', width: 30, sortable: false, hidden: false },  { name: 'title', index: 'title', width: 30, sortable: false },{ name: 'content', index: 'content', width: 60, sortable: false },{ name: 'dealUsername', index: 'dealUsername', width: 20, sortable: false },{ name: 'dealVideoId', index: 'dealVideoId', width: 30, sortable: false },{ name: 'videoPath', index: 'videoPath', width: 30, sortable: false,formatter:function(cellvalue, options, rowObject) {var src = APIServer + cellvalue;var display = "<a href='" + src + "' target='_blank'>点我播放</a>"return display;}},{ name: 'status', index: 'status', width: 40, sortable: false, hidden: false,formatter:function(cellvalue, options, rowObject) {return cellvalue==1 ? '正常' : '禁播';}},{ name: 'submitUsername', index: 'submitUsername', width: 20, sortable: false },{ name: 'createDate', index: 'createDate', width: 40, sortable: false, hidden: false,formatter:function(cellvalue, options, rowObject) {var createTime = Common.formatTime(cellvalue,'yyyy-MM-dd HH:mm:ss');return createTime;}},{ name: '', index: '', width: 20, sortable: false, hidden: false,formatter:function(cellvalue, options, rowObject) {var button = '<button class="btn btn-outline blue-chambray" id="" οnclick=forbidVideo("' + rowObject.dealVideoId + '") style="padding: 1px 3px 1px 3px;">禁止播放</button>';return button;}}]

2.在点击禁播模块，会进行一个$.ajax的调用，并触发一个外面的方法

var forbidVideo = function(videoId) {var flag = window.confirm("是否禁播");if (!flag) {return;}$.ajax({url: $("#hdnContextPath").val() + "/video/forbidVideo.action?videoId=" + videoId,type: "POST",async: false,success: function(data) {if(data.status == 200 && data.msg == "OK") {alert("操作成功");var jqGrid = $("#usersReportsList");  jqGrid.jqGrid().trigger("reloadGrid");} else {console.log(JSON.stringify(data));}}})
}

然后调用forbidVideo这个方法，并把videoId传进去，利用定义的枚举类型，

 @PostMapping("/forbidVideo")@ResponseBodypublic ResultByJSON forbidVideo(String videoId) {videoService.updateVideoStatus(videoId, VideoStatusEnum.FORBID.value);return ResultByJSON.ok();}

//VideoServiceIml.java
里面的updateVideoStatus方法修改视频状态，把能播放状态改为不能播放状态

 @Overridepublic void updateVideoStatus(String videoId, Integer status) {Videos video = new Videos();video.setId(videoId);video.setStatus(status);videosMapper.updateByPrimaryKeySelective(video);}