SpringBoot 仿抖音短視訊小程式開發(二)
一、註冊和登入功能
這兩個功能比較簡單,就不詳細記錄了,需要注意的是【密碼】出於安全考慮用了@JsonIgnore,這樣返回的VO的json資料給前端的時候就忽略掉。
public class UsersVO { private String id; private String username; private String userToken; @JsonIgnore private String password; }
二、上傳個人頭像並展示
1. 微信小程式前端只需要把圖片的臨時路徑傳給後端介面,後臺再儲存到本地和資料庫
前端:
後臺介面:
@PostMapping("/uploadFace") public IMoocJSONResult uploadFace(String userId, @RequestParam("file") MultipartFile[] files) throws Exception { if(StringUtils.isBlank(userId)){ return IMoocJSONResult.errorMsg("使用者Id不能為空"); } //檔案儲存的名稱空間 String fileSpace = FILE_SPACE; //儲存到資料庫的相對路徑 String uploadPathDB = "/" + userId +"/face"; FileOutputStream fileOutputStream = null; InputStream inputStream = null; try { if(files !=null && files.length>0){ String fileName = files[0].getOriginalFilename(); if(StringUtils.isNoneBlank(fileName)){ //檔案上傳的最終儲存路徑 String finalFacePath = fileSpace + uploadPathDB + "/" +fileName; //設定資料庫儲存的路徑 uploadPathDB += ("/" + fileName); File outFile = new File(finalFacePath); if(outFile.getParentFile() !=null || !outFile.getParentFile().isDirectory()){ //建立父資料夾 outFile.getParentFile().mkdirs(); } fileOutputStream = new FileOutputStream(outFile); inputStream = files[0].getInputStream(); IOUtils.copy(inputStream,fileOutputStream); } }else{ IMoocJSONResult.errorMsg("上傳出錯"); } } catch (IOException e) { e.printStackTrace(); IMoocJSONResult.errorMsg("上傳出錯"); }finally { if(fileOutputStream!=null){ fileOutputStream.flush(); fileOutputStream.close(); } } Users user = new Users(); user.setId(userId); user.setFaceImage(uploadPathDB); userService.updateUserInfo(user); return IMoocJSONResult.ok(uploadPathDB); }
2. 靜態資源配置,顯示圖片
三、上傳視訊、選擇BGM(可選)
上傳視訊和上傳頭像的實現是差不多的,多了截圖、與BGM合併的操作
//將視訊和BGM合併 MergeVideoMp3 tool = new MergeVideoMp3(FFMPEG_EXE); String videoInputPath = finalVideoPath; String videoOutputName = UUID.randomUUID().toString() + ".mp4"; uploadPathDB = "/" + userId + "/video/" + videoOutputName; finalVideoPath = FILE_SPACE + uploadPathDB; tool.convertor(videoInputPath,mp3InputPath,videoSeconds,finalVideoPath); 。。。。。 //對視訊進行截圖 FetchVideoCover videoCover = new FetchVideoCover(FFMPEG_EXE); videoCover.getCover(finalVideoPath, FILE_SPACE + coverPathDB);
三、首頁展示視訊列表,分頁
======================== 前端 ===============================
後端分頁查詢
PageHelper.startPage(page, pageSize); List<VideosVO> list = videosMapper.queryAllVideos(desc, userId); PageInfo<VideosVO> pageList = new PageInfo<>(list); PagedResult pagedResult = new PagedResult(); pagedResult.setPage(page); pagedResult.setTotal(pageList.getPages()); pagedResult.setRows(list); pagedResult.setRecords(pageList.getTotal()); return pagedResult;
前端成功回撥函式,對視訊列表進行拼接
var videoList = res.data.data.rows; var newVideoList = me.data.videoList; me.setData({ videoList: newVideoList.concat(videoList), page: page, totalPage: res.data.data.total, serverUrl: serverUrl });
上拉重新整理,即下一頁
onReachBottom: function(){ var me = this; var currentPage = me.data.page; var totalPage = me.data.totalPage; //判斷當前頁數和總頁數是否相等,如果相等則無需查詢 if(currentPage == totalPage){ wx.showToast({ title: '已經沒有視訊啦!!', icon: "none" }); return; } var page = currentPage + 1; me.getAllVideoList(page,0); }
下拉重新整理回到第一頁
onPullDownRefresh: function(){ wx.showNavigationBarLoading(); this.getAllVideoList(1,0); },
四、點選播放視訊
點選視訊觸發事件,跳轉頁面
showVideoInfo: function(e){ console.log(e); var me = this; var videoList = me.data.videoList; var arrIndex = e.target.dataset.arrindex; console.log(arrIndex); var videoInfo = JSON.stringify(videoList[arrIndex]); wx.redirectTo({ url: '../videoinfo/videoinfo?videoInfo=' + videoInfo }) }
五、點贊和關注視訊
點贊和取消
@Override @Transactional(propagation = Propagation.REQUIRED) public void userLikeVideo(String userId, String videoId, String videoCreaterId) { //1. 儲存使用者和視訊的喜歡點贊關聯關係表 String likeId = sid.nextShort(); UsersLikeVideos ulv = new UsersLikeVideos(); ulv.setId(likeId); ulv.setUserId(userId); ulv.setVideoId(videoId); usersLikeVideosMapper.insert(ulv); //2. 視訊喜歡數量累加 videosMapper.addVideoLikeCount(videoId); //3. 使用者受喜歡數量的累加 usersMapper.addReceiveLikeCount(userId); } @Override @Transactional(propagation = Propagation.REQUIRED) public void userUnLikeVideo(String userId, String videoId, String videoCreaterId) { //1. 刪除使用者和視訊的喜歡點贊關聯關係表 UsersLikeVideosExample example = new UsersLikeVideosExample(); example.createCriteria().andUserIdEqualTo(userId).andVideoIdEqualTo(videoId); usersLikeVideosMapper.deleteByExample(example); //2. 視訊喜歡數量累減 videosMapper.reduceVideoLikeCount(videoId); //3. 使用者受喜歡數量的累減 usersMapper.reduceReceiveLikeCount(userId); }
關注使用者和取消關注
@Override @Transactional(propagation = Propagation.REQUIRED) public void saveUserFanRelation(String userId, String fanId) { UsersFans userFan = new UsersFans(); String relId = sid.nextShort(); userFan.setId(relId); userFan.setUserId(userId); userFan.setFanId(fanId); usersFansMapper.insert(userFan); usersMapper.addFansCount(userId); usersMapper.addFollersCount(fanId); } @Override @Transactional(propagation = Propagation.REQUIRED) public void deleteUserFanRelation(String userId, String fanId) { UsersFansExample example = new UsersFansExample(); example.createCriteria().andFanIdEqualTo(fanId).andUserIdEqualTo(userId); usersFansMapper.deleteByExample(example); usersMapper.reduceFansCount(userId); usersMapper.reduceFollersCount(fanId); }
六、視訊熱搜關鍵詞
使用了一個 微信小程式搜尋框元件 : https://github.com/mindawei/w...
前端頁面載入事件:
熱搜詞的查詢語句:
<select id="getHotWords" resultType="string"> SELECT content FROM search_records GROUP BY content ORDER BY COUNT(content) DESC </select>
六、顯示我點過讚的視訊(即收藏)
<!-- 查詢我喜歡的視訊 --> <select id="queryMyLikeVideos" resultMap="BaseResultMap" parameterType="String"> select v.*,u.face_image as face_image,u.nickname as nickname from videos v left join vuser u on v.user_id = u.id where v.id in (select ulv.video_id from users_like_videos ulv where ulv.user_id = #{userId}) and v.status = 1 order by v.create_time desc </select>
七、查詢我關注的人發的視訊
<!-- 查詢我關注的人發的視訊 --> <select id="queryMyFollowVideos" resultMap="BaseResultMap" parameterType="String"> select v.*,u.face_image as face_image,u.nickname as nickname from videos v left join vuser u on v.user_id = u.id where v.user_id in (select uf.user_id from users_fans uf where uf.fan_id = #{userId}) and v.status = 1 order by v.create_time desc </select>
八、舉報
獲取舉報的內容然後傳送請求:
九、評論留言和回覆
POJO設計:
public class Comments { private String id; private String fatherCommentId; private String toUserId; private String videoId; private String fromUserId;//留言者,評論的使用者id private Date createTime; private String comment; //評論內容 }
點選某條評論,回覆:
replyFocus:function(e){ var me = this; var fatherCommentId = e.currentTarget.dataset.fathercommentid; var toUserId = e.currentTarget.dataset.touserid; var toNickname = e.currentTarget.dataset.tonickname; me.setData({ placeholder: "回覆 " + toNickname, replyToUserId: toUserId, replyFatherCommentId: fatherCommentId, commentFocus: true }); },
前端確認留言,儲存: