SpringBoot 仿抖音短視訊小程式開發（二）

SpringBoot · 發表 2019-04-07 20:08:06

摘要：一、註冊和登入功能這兩個功能比較簡單，就不詳細記錄了，需要注意的是【密碼】出於安全考慮用了@JsonIgnore，這樣返回的VO的json資料給前端的時候就忽略掉。 public class UsersVO { private String id; ...

一、註冊和登入功能

這兩個功能比較簡單，就不詳細記錄了，需要注意的是【密碼】出於安全考慮用了@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
});
},

前端確認留言，儲存：