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

一、前端

• 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")
@ResponseBody
    public ResultByPage reportList(Integer page) {
        ResultByPage result = videoService.queryReportList(page, 10);
        return result;
    }

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

 @Override
 public 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 submitUsername
	 	from 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.id
		group 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")
 @ResponseBody
    public ResultByJSON forbidVideo(String videoId) {
        videoService.updateVideoStatus(videoId, VideoStatusEnum.FORBID.value);
        return ResultByJSON.ok();
    }

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

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