怎樣實現小程序的舉報功能？

這篇文章主要為大家詳細介紹了實現小程序的舉報功能的方法，文中示例代碼介紹的非常詳細，零基礎也能參考此文章，感興趣的小伙伴們可以參考一下。

后臺開發

獲取發布人的userId，videoId，創建者的Id

• controller

UserController.java

package com.idig8.controller;

import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.idig8.pojo.Users;
import com.idig8.pojo.UsersReport;
import com.idig8.pojo.vo.PublisherVideo;
import com.idig8.pojo.vo.UsersVO;
import com.idig8.service.UserService;
import com.idig8.utils.JSONResult;
import com.idig8.utils.file.FileUtil;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiImplicitParams;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;

@RestController
@Api(value="用戶接口",tags={"用戶的controller"})
@RequestMapping(value = "/user")
public class UserController extends BasicController{
    
    @Autowired
    private UserService userService;
    
    @Value("${server.file.path}")
    private String fileSpace;
    
    @ApiOperation(value="用戶上傳頭像",notes="用戶上傳頭像的接口")
    @ApiImplicitParams({
        @ApiImplicitParam(name="userId",value="用戶id",required=true,dataType="String",paramType="query"),
    })
    @PostMapping(value="/uploadFace",headers="content-type=multipart/form-data")
    public JSONResult uploadFace(String userId,@ApiParam(value="圖片",required=true) MultipartFile file) {
        if (StringUtils.isBlank(userId)) {
            return JSONResult.errorMsg("用戶id不能為空...");
        }        
        // 文件保存的命名空間
        String fileName = file.getOriginalFilename();        // 保存到數據庫中的相對路徑
        String path = "";
         try {
             path = FileUtil.uploadFile(file.getBytes(), fileSpace, fileName);
            } catch (Exception e) {
                e.getStackTrace();
                return JSONResult.errorMsg(e.getMessage());
            }
         
         Users user = new Users();
         user.setId(userId);
         user.setFaceImage(path);
         userService.updateUser(user);
        
    
        return JSONResult.ok(path);
    }
    
    @ApiOperation(value="通過用戶Id獲取用戶信息",notes="通過用戶Id獲取用戶信息的接口")
    @ApiImplicitParam(name="userId",value="用戶id",required=true,dataType="String",paramType="query")
    @PostMapping("/queryByUserId")
    public JSONResult queryByUserId(String userId, String fanId) {
        if (StringUtils.isBlank(userId)) {
            return JSONResult.errorMsg("用戶id不能為空...");
        }
        
        Users user = userService.queryUserId(userId);
        UsersVO usersVO= new UsersVO();
        BeanUtils.copyProperties(user, usersVO);
        
        usersVO.setFollow(userService.queryIfFollow(userId, fanId));
        return JSONResult.ok(usersVO);
    }
    
    @PostMapping("/queryPublisher")
    public JSONResult queryPublisher(String loginUserId, String videoId, 
            String publishUserId) throws Exception {
        
        if (StringUtils.isBlank(publishUserId)) {
            return JSONResult.errorMsg("");
        }        
        // 1. 查詢視頻發布者的信息
        Users userInfo = userService.queryUserInfo(publishUserId);
        UsersVO publisher = new UsersVO();
        BeanUtils.copyProperties(userInfo, publisher);        
        // 2. 查詢當前登錄者和視頻的點贊關系
        boolean userLikeVideo = userService.isUserLikeVideo(loginUserId, videoId);
        
        PublisherVideo bean = new PublisherVideo();
        bean.setPublisher(publisher);   
        bean.setUserLikeVideo(userLikeVideo);
        
        return JSONResult.ok(bean);
    }
    
    
    @PostMapping("/beyourfans")
    public JSONResult beyourfans(String userId, String fanId) throws Exception {
        
        if (StringUtils.isBlank(userId) || StringUtils.isBlank(fanId)) {
            return JSONResult.errorMsg("");
        }
        
        userService.saveUserFanRelation(userId, fanId);
        
        return JSONResult.ok("關注成功...");
    }
    
    @PostMapping("/dontbeyourfans")
    public JSONResult dontbeyourfans(String userId, String fanId) throws Exception {
        
        if (StringUtils.isBlank(userId) || StringUtils.isBlank(fanId)) {
            return JSONResult.errorMsg("");
        }
        
        userService.deleteUserFanRelation(userId, fanId);
        
        return JSONResult.ok("取消關注成功...");
    }
    
    @PostMapping("/reportUser")
    public JSONResult reportUser(@RequestBody UsersReport usersReport) throws Exception {        
        // 保存舉報信息
        userService.reportUser(usersReport);
        
        return JSONResult.errorMsg("舉報成功...有你平臺變得更美好...");
    }
    

}

···

* service
UserService.java
``` java
package com.idig8.service;

import com.idig8.pojo.Users;
import com.idig8.pojo.UsersReport;

public interface UserService {    /**
     * 判斷用戶名是否存在
     * @param username
     * @return
     */
    public boolean queryUsernameIsExist(String username);    
    /**
     * 保存用戶
     * @param user
     * @return
     */
    public void saveUser(Users user);    
    /**
     * 查詢用戶對象
     * @param username
     * @return
     */
    public Users queryUserIsExist(Users user);    
    /**
     * 更新對象
     * @param username
     * @return
     */
    public void updateUser(Users user);    
    
    /**
     * userId查詢用戶對象
     * @param username
     * @return
     */
    public Users queryUserId(String userId);    
    /**
     * 查詢用戶信息
     */
    public Users queryUserInfo(String userId);    
    /**
     * 查詢用戶是否喜歡點贊視頻
     */
    public boolean isUserLikeVideo(String userId, String videoId);    
    /**
     * @Description: 增加用戶和粉絲的關系
     */
    public void saveUserFanRelation(String userId, String fanId);    
    /**
     * @Description: 刪除用戶和粉絲的關系
     */
    public void deleteUserFanRelation(String userId, String fanId);    
    /**
     * @Description: 查詢用戶是否關注
     */
    public boolean queryIfFollow(String userId, String fanId);    
    /**
     * @Description: 舉報用戶
     */
    public void reportUser(UsersReport userReport);
    
    
}

• service UserServiceImpl.java

package com.idig8.service.Impl;

import java.util.Date;
import java.util.List;

import org.apache.commons.lang3.StringUtils;
import org.n3r.idworker.Sid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import com.idig8.mapper.UsersFansMapper;
import com.idig8.mapper.UsersLikeVideosMapper;
import com.idig8.mapper.UsersMapper;
import com.idig8.mapper.UsersReportMapper;
import com.idig8.pojo.Users;
import com.idig8.pojo.UsersFans;
import com.idig8.pojo.UsersLikeVideos;
import com.idig8.pojo.UsersReport;
import com.idig8.service.UserService;
import com.idig8.utils.MD5Utils;

import tk.mybatis.mapper.entity.Example;
import tk.mybatis.mapper.entity.Example.Criteria;

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UsersMapper usersMapper;
    
    @Autowired
    private UsersLikeVideosMapper usersLikeVideosMapper;
    
    @Autowired
    private UsersMapper userMapper;
    
    @Autowired
    private Sid sid;
    
    @Autowired
    private UsersFansMapper usersFansMapper;
    
    @Autowired
    private UsersReportMapper usersReportMapper;
    
    @Transactional(propagation =Propagation.SUPPORTS)
    @Override
    public boolean queryUsernameIsExist(String username) {
        Users user = new Users();
        user.setUsername(username);
        Users result = usersMapper.selectOne(user);
        return result==null? false:true;
    }

    @Transactional(propagation =Propagation.REQUIRED)
    @Override
    public void saveUser(Users user) {
        String userId =sid.nextShort();
        user.setId(userId);
        usersMapper.insert(user);
    }

    @Transactional(propagation =Propagation.SUPPORTS)
    @Override
    public Users queryUserIsExist(Users user) {
        Example queryExample = new Example(Users.class);
        Criteria criteria = queryExample.createCriteria();
        criteria.andEqualTo("username",user.getUsername());
        try {
            criteria.andEqualTo("password",MD5Utils.getMD5Str(user.getPassword()));
        } catch (Exception e) {            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        Users userOne =  usersMapper.selectOneByExample(queryExample);
        return userOne;
    }
    
    @Transactional(propagation =Propagation.REQUIRED)
    @Override
    public void updateUser(Users user) {
        
        Example userExample = new Example(Users.class);
        Criteria criteria = userExample.createCriteria();
        criteria.andEqualTo("id", user.getId());
        usersMapper.updateByExampleSelective(user, userExample);
    }
    
    @Transactional(propagation =Propagation.SUPPORTS)
    @Override
    public Users queryUserId(String userId){
        Example queryExample = new Example(Users.class);
        Criteria criteria = queryExample.createCriteria();
        criteria.andEqualTo("id",userId);
        Users userOne =  usersMapper.selectOneByExample(queryExample);
        return userOne;
    }
    
    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public Users queryUserInfo(String userId) {
        Example userExample = new Example(Users.class);
        Criteria criteria = userExample.createCriteria();
        criteria.andEqualTo("id", userId);
        Users user = userMapper.selectOneByExample(userExample);
        return user;
    }

    @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public boolean isUserLikeVideo(String userId, String videoId) {

        if (StringUtils.isBlank(userId) || StringUtils.isBlank(videoId)) {
            return false;
        }
        
        Example example = new Example(UsersLikeVideos.class);
        Criteria criteria = example.createCriteria();
        
        criteria.andEqualTo("userId", userId);
        criteria.andEqualTo("videoId", videoId);
        
        List<UsersLikeVideos> list = usersLikeVideosMapper.selectByExample(example);
        
        if (list != null && list.size() >0) {
            return true;
        }
        
        return false;
    }

    @Transactional(propagation = Propagation.REQUIRED)
    @Override
    public void saveUserFanRelation(String userId, String fanId) {

        String relId = sid.nextShort();
        
        UsersFans userFan = new UsersFans();
        userFan.setId(relId);
        userFan.setUserId(userId);
        userFan.setFanId(fanId);
        
        usersFansMapper.insert(userFan);
        
        userMapper.addFansCount(userId);
        userMapper.addFollersCount(fanId);
        
    }

    @Transactional(propagation = Propagation.REQUIRED)
    @Override
    public void deleteUserFanRelation(String userId, String fanId) {
        
        Example example = new Example(UsersFans.class);
        Criteria criteria = example.createCriteria();
        
        criteria.andEqualTo("userId", userId);
        criteria.andEqualTo("fanId", fanId);
        
        usersFansMapper.deleteByExample(example);
        
        userMapper.reduceFansCount(userId);
        userMapper.reduceFollersCount(fanId);
        
    }
    

    @Override
    public boolean queryIfFollow(String userId, String fanId) {

        Example example = new Example(UsersFans.class);
        Criteria criteria = example.createCriteria();
        
        criteria.andEqualTo("userId", userId);
        criteria.andEqualTo("fanId", fanId);
        
        List<UsersFans> list = usersFansMapper.selectByExample(example);
        
        if (list != null && !list.isEmpty() && list.size() > 0) {
            return true;
        }
        
        return false;
    }
    
    @Transactional(propagation = Propagation.REQUIRED)
    @Override
    public void reportUser(UsersReport userReport) {
        
        String urId = sid.nextShort();
        userReport.setId(urId);
        userReport.setCreateDate(new Date());
        
        usersReportMapper.insert(userReport);
    }

}

小程序開發

• videoInfo videoInfo.js

var videoUtils = require('../../utils/videoUtils.js')
const app = getApp()
Page({

  data: {
    cover:'cover',
    videoContext:"",
    videoInfo:{},
    videId:'',
    src:'',
    userLikeVideo:false,
    serverUrl:'',
    publisher:[]
  },
  

  showSearch:function(){
    wx.navigateTo({
      url: '../videoSearch/videoSearch',
    })
  },
  onLoad:function(params){
    var me = this;
    me.videoContext = wx.createVideoContext('myVideo', me);
    var videoInfo = JSON.parse(params.videoInfo);
    var videoWidth = videoInfo.videoWidth;
    var videoHeight = videoInfo.videoHeight;
    var cover = 'cover';
    if (videoWidth > videoHeight){
      cover = '';
    }
    me.setData({
      videId: videoInfo.id,
      src: app.serverUrl + videoInfo.videoPath,
      videoInfo: videoInfo,
      cover: cover
    })

    var serverUrl = app.serverUrl;
    var user = app.getGlobalUserInfo();
    var loginUserId = "";
    if (user != null && user != undefined && user != '') {
      loginUserId = user.id;
    }
    wx.request({
      url: serverUrl + '/user/queryPublisher?loginUserId=' + loginUserId + "&videoId=" + videoInfo.id + "&publishUserId=" + videoInfo.userId,
      method: 'POST',
      success: function (res) {
        console.log(res.data);

        var publisher = res.data.data.publisher;
        var userLikeVideo = res.data.data.userLikeVideo;

        me.setData({
          serverUrl: serverUrl,
          publisher: publisher,
          userLikeVideo: userLikeVideo
        });
      }
    })




  },
  showIndex:function(){
    wx.redirectTo({
      url: '../index/index',
    })
  },

  onShow:function(){
    var me = this;
    me.videoContext.play();
  },
  onHide:function(){
    var me = this;
    me.videoContext.pause();
  },
  upload:function(){
 
    var me = this;
    var userInfo = app.getGlobalUserInfo();

    var videoInfo = JSON.stringify(me.data.videoInfo);
    var realUrl = '../videoInfo/videoInfo#videoInfo@' + videoInfo;

    if (userInfo.id == '' || userInfo.id == undefined) {
      wx.navigateTo({
        url: '../userLogin/userLogin?realUrl=' + realUrl,
      })
    } else {
      videoUtils.uploadVideo();
    }


  },
  showMine: function () {
    var me = this;
    var userInfo = app.getGlobalUserInfo();

    var videoInfo = JSON.parse

    if (userInfo.id == '' || userInfo.id == undefined){
      wx.navigateTo({
        url: '../userLogin/userLogin',
      })
    }else{
      wx.navigateTo({
        url: '../mine/mine',
      })
    }
    
   
  },

  likeVideoOrNot: function () {
    var me = this;
    var userInfo = app.getGlobalUserInfo();


    var videoInfoStr = JSON.stringify(me.data.videoInfo);
    var realUrl = '../videoInfo/videoInfo#videoInfo@' + videoInfoStr;
    if (userInfo.id == '' || userInfo.id == undefined) {
      wx.navigateTo({
        url: '../userLogin/userLogin?realUrl=' + realUrl,
      })
    } else {
      var videoInfo = me.data.videoInfo;
      var userLikeVideo = me.data.userLikeVideo;
      var url = "/video/userLike?userId=" + userInfo.id + "&videoId=" + videoInfo.id + "&videoCreaterId=" + userLikeVideo.userId;

      if (userLikeVideo){
        var url = "/video/userUnLike?userId=" + userInfo.id + "&videoId=" + videoInfo.id + "&videoCreaterId=" + userLikeVideo.userId;
      }
      wx.showLoading({
        title: '....',
      })
      wx.request({
        url: app.serverUrl + url,
        method: "POST",
        header: {
          'content-type': 'application/json', // 默認值
          'headerUserId': userInfo.id,
          'headerUserToken': userInfo.userToken
        },
        success: function (res) {
          wx.hideLoading();
          me.setData({
            userLikeVideo: !userLikeVideo,
          })
        }
      })

    }


  },
  showPublisher:function(){
    var me = this;
    var userInfo = app.getGlobalUserInfo();


    var videoInfo = me.data.videoInfo;
    var realUrl = '../mine/mine#publisherId@' + videoInfo.userId;
    if (userInfo.id == '' || userInfo.id == undefined) {
      wx.navigateTo({
        url: '../userLogin/userLogin?realUrl=' + realUrl,
      })
    } else {
      wx.navigateTo({
        url: '../mine/mine?publisherId=' + videoInfo.userId,
      })

    }
  },
  shareMe:function(){
    var me = this;
    var user = app.getGlobalUserInfo();
    wx.showActionSheet({
      itemList: ["下載到本地","舉報用戶","分享到好友"],
      success:function(res){
        if (res.tapIndex==0){

        } else if (res.tapIndex==1){          // 舉報
          var videoInfo = JSON.stringify(me.data.videoInfo);
          var realUrl = '../videoInfo/videoInfo#videoInfo@' + videoInfo;

          if (user == null || user == undefined || user == '') {
            wx.navigateTo({
              url: '../userLogin/userLogin?realUrl=' + realUrl,
            })
          } else {
            var publishUserId = me.data.videoInfo.userId;
            var videoId = me.data.videoInfo.id;
            var currentUserId = user.id;
            wx.navigateTo({
              url: '../report/report?videoId=' + videoId + "&publishUserId=" + publishUserId
            })
          }

        } else{

        }
      }
    })
  }
})

• report

const app = getApp()

Page({
    data: {
        reasonType: "請選擇原因",
        reportReasonArray: app.reportReasonArray,
        publishUserId:"",
        videoId:""
    },

    onLoad:function(params) {
      var me = this;

      var videoId = params.videoId;
      var publishUserId = params.publishUserId;

      me.setData({
        publishUserId: publishUserId,
        videoId: videoId
      });
    },

    changeMe:function(e) {
      var me = this;

      var index = e.detail.value;
      var reasonType = app.reportReasonArray[index];

      me.setData({
        reasonType: reasonType
      });
    },

    submitReport:function(e) {
      var me = this;

      var reasonIndex = e.detail.value.reasonIndex;
      var reasonContent = e.detail.value.reasonContent;

      var user = app.getGlobalUserInfo();
      var currentUserId = user.id;

      if (reasonIndex == null || reasonIndex == '' || reasonIndex == undefined) {
        wx.showToast({
          title: '選擇舉報理由',
          icon: "none"
        })
        return;
      }

      var serverUrl = app.serverUrl;
      wx.request({
        url: serverUrl + '/user/reportUser',
        method: 'POST',
        data: {
          dealUserId: me.data.publishUserId,
          dealVideoId: me.data.videoId,
          title: app.reportReasonArray[reasonIndex],
          content:reasonContent,
          userid: currentUserId
        },
        header: {
          'content-type': 'application/json', // 默認值
          'headerUserId': user.id,
          'headerUserToken': user.userToken
        },
        success:function(res) {
          wx.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: 'none',
            success: function() {
              wx.navigateBack();
            }
          })
        }

      })

    }
    
})<view>

    <form bindsubmit='submitReport'>

        <view class='container-reason'>
            <label class='label'>舉報理由:</label>
            <picker name="reasonIndex" value="{{index}}" range="{{reportReasonArray}}" bindchange="changeMe">
                <view class="picker">
                    {{reasonType}}
                </view>
            </picker>
        </view>

        <view class='container-content'>
            <label class='label'>舉報描述（選填）:</label>
            <textarea name="reasonContent" class='content' placeholder='請詳細說明舉報原因...'>
            </textarea>
        </view>

        <view class='container-tips'>
            <image src='../../resource/images/report_face.png' class='report-face'></image>
            收到舉報后，我們會在12小時內處理，感謝您的舉報，互聯網環境因你更美好！~~
        </view>

        <view>
            <button class="submitBtn" type="" form-type='submit'>提  交</button>
        </view>

    </form>
</view>page {
    background-color: #0e0f1a;    /* background-color: red; */}

.container-reason {
    display: flex;
    color: whitesmoke;
    padding: 15px;
    background-color: #161823;
}

.label {    /* margin-left: 15px; */
    margin-right: 15px;
    color: white;
}

.container-content {
    margin-top: 10px;
    color: whitesmoke;
    padding: 15px;
    background-color: #161823;
}

.content {
    margin-top: 10px;
    padding: 10px;
    color: white;
    background-color: #242630;
    width: 95%;
}

.container-tips{
    padding: 25px;
    color: #56575e;
    font-size: 15px;
}

.report-face{
    width:12px;
    height:13px;
}

.submitBtn {
    width: 80%;
    margin-top: 10px;
    background-color: #fe2c55;
    color: white;
}

• app.js

//app.jsApp({
  serverUrl:"http://127.0.0.1:8081/",
  userInfo:null,
  setGlobalUserInfo:function(user){
    wx.setStorageSync("userInfo", user);
  },
  getGlobalUserInfo: function () {
    return wx.getStorageSync("userInfo");
  },
  reportReasonArray: [
    "色情低俗",
    "政治敏感",
    "涉嫌詐騙",
    "辱罵謾罵",
    "廣告垃圾",
    "誘導分享",
    "引人不適",
    "過于暴力",
    "違法違紀",
    "其它原因"
  ]
})

看完上述內容，你們掌握實現小程序的舉報功能的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！