微信小程序_(校园视)开发视频的展示页_下
微信小程序_(校园视) 开发用户注册登陆 传送门
微信小程序_(校园视) 开发上传视频业务 传送门
微信小程序_(校园视) 开发视频的展示页-上 传送门
微信小程序_(校园视) 开发视频的展示页-下 传送门
小程序的页面拦截
当页面点击右下角的小图标后，触发showMain()事件，跳转到mine.wxml，展示个人信息页面，点击做下表的小房子跳转到视频首页
<!-- 我的按钮 -->
<cover-image class='' src='../resource/images/mine.png' class="size-bottom" bindtap='showMine'></cover-image>
<!-- 首页按钮 -->
<cover-image class='' src='../resource/images/index.png' class="size-bottom" bindtap='showIndex'></cover-image>
showIndex:function(){
wx.redirectTo({
url: '../index/index',
})
},
showMine:function(){
var user = app.getGlobalUserInfo();
if(user ==null || user == undefined||user == ''){
wx.navigateTo({
url: '../userLogin/login',
})
}else{
wx.navigateTo({
url: '../mine/mine',
})
}
}
在api层添加MiniInterceptor.class对拦截器进行配置与注册
//拦截请求，在controller调用之前
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
throws Exception {
if(true)
{
System.out.println("请求拦截...");
return false;
} //false:请求被拦截
//true:放行请求
return true;
}
package com.imooc; import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; import com.imooc.controller.interceptor.MiniInterceptor; @Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter { @Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/**")
.addResourceLocations("classpath:/META-INF/resources/")
.addResourceLocations("file:F:/imooc-video-gary/");
} @Bean
public MiniInterceptor miniInterceptor() { return new MiniInterceptor();
} @Override
public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(miniInterceptor()).addPathPatterns("/user/**"); super.addInterceptors(registry);
} }
WebMvcConfig.java
package com.imooc.controller.interceptor; import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView; public class MiniInterceptor implements HandlerInterceptor { //拦截请求，在controller调用之前
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
throws Exception {
if(true)
{
System.out.println("请求拦截...");
return false;
} //false:请求被拦截
//true:放行请求
return true;
} //请求controller之后，渲染视图之前
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
ModelAndView modelAndView) throws Exception {
// TODO Auto-generated method stub } //请求controller之后，视图渲染之后
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
throws Exception {
// TODO Auto-generated method stub } }
MiniInterceptor.java
完善拦截并且限制用户只能在一台手机上登陆
在加载个人页面mine.js的header中添加userId和userToken两个参数
header: {
'content-type': 'application/json', // 默认值
'userId':user.id,
'userToken':user.userToken
},
在MiniInterceptor.java中接收到小程序端传递的Header消息后进行拦截器的配置
//拦截请求，在controller调用之前
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response,
Object handler)throws Exception { //获取来自小程序的两个参数
String userId = request.getHeader("userId");
String userToken = request.getHeader("userToken"); if(StringUtils.isNotBlank(userId)&&StringUtils.isNotBlank(userToken))
{ String uniqueToken = redis.get(USER_REDIS_SESSION + ":" + userId);
if(StringUtils.isEmpty(uniqueToken)&&StringUtils.isBlank(uniqueToken)) {
returnErrorResponse(response,new IMoocJSONResult().errorTokenMsg("请登录..."));
return false;
}else {
if(!uniqueToken.equals(userToken)) {
returnErrorResponse(response,new IMoocJSONResult().errorTokenMsg("账号被挤出..."));
return false;
}
} }else{
returnErrorResponse(response,new IMoocJSONResult().errorTokenMsg("请登录..."));
return false;
} //false:请求被拦截
//true:放行请求
return true;
}
要将后端控制台的消息返回给小程序端，需要用到returnErrorResponse(HttpServletResponse response, IMoocJSONResult result) 将消息转换成JSON数据格式，再传递给小程序端口
//转换成JSON数据格式
public void returnErrorResponse(HttpServletResponse response, IMoocJSONResult result)
throws IOException, UnsupportedEncodingException {
OutputStream out=null;
try{
response.setCharacterEncoding("utf-8");
response.setContentType("text/json");
out = response.getOutputStream();
//抛出信息
out.write(JsonUtils.objectToJson(result).getBytes("utf-8"));
out.flush();
} finally{
if(out!=null){
out.close();
}
}
}
package com.imooc.controller.interceptor; import java.io.IOException;
import java.io.OutputStream;
import java.io.UnsupportedEncodingException; import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView; import com.imooc.utils.IMoocJSONResult;
import com.imooc.utils.JsonUtils;
import com.imooc.utils.RedisOperator; public class MiniInterceptor implements HandlerInterceptor { @Autowired
public RedisOperator redis; public static final String USER_REDIS_SESSION = "user-redis-session"; //拦截请求，在controller调用之前
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response,
Object handler)throws Exception { //获取来自小程序的两个参数
String userId = request.getHeader("userId");
String userToken = request.getHeader("userToken"); if(StringUtils.isNotBlank(userId)&&StringUtils.isNotBlank(userToken))
{ String uniqueToken = redis.get(USER_REDIS_SESSION + ":" + userId);
if(StringUtils.isEmpty(uniqueToken)&&StringUtils.isBlank(uniqueToken)) {
returnErrorResponse(response,new IMoocJSONResult().errorTokenMsg("请登录..."));
return false;
}else {
if(!uniqueToken.equals(userToken)) {
returnErrorResponse(response,new IMoocJSONResult().errorTokenMsg("账号被挤出..."));
return false;
}
} }else{
returnErrorResponse(response,new IMoocJSONResult().errorTokenMsg("请登录..."));
return false;
} //false:请求被拦截
//true:放行请求
return true;
} //转换成JSON数据格式
public void returnErrorResponse(HttpServletResponse response, IMoocJSONResult result)
throws IOException, UnsupportedEncodingException {
OutputStream out=null;
try{
response.setCharacterEncoding("utf-8");
response.setContentType("text/json");
out = response.getOutputStream();
//抛出信息
out.write(JsonUtils.objectToJson(result).getBytes("utf-8"));
out.flush();
} finally{
if(out!=null){
out.close();
}
}
} //请求controller之后，渲染视图之前
@Override
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
ModelAndView modelAndView) throws Exception {
// TODO Auto-generated method stub } //请求controller之后，视图渲染之后
@Override
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
throws Exception {
// TODO Auto-generated method stub } }
MiniInterceptor.java
前后端联调测试拦截器
注：IMoocJSONResult errorTokenMsg(String msg)方法返回的状态status是502
public static IMoocJSONResult errorTokenMsg(String msg) {
return new IMoocJSONResult(502, msg, null);
}
在微信小程序端进行状态吗的判断
if (res.data.status == 502){
wx.showToast({
title: res.data.msg,
duration:3000,
icon:"none",
success:function(){
wx.redirectTo({
url: '../userLogin/login',
})
}
实现点赞与取消点赞功能前后端联调
微信小程序点赞按钮前端模块
<!-- 喜欢收藏按钮 -->
<block wx:if="{{userLikeVideo}}">
<cover-image class="size-me" src='../resource/images/like.png' style='margin-top:30rpx;' bindtap='likeVideoOrNot'></cover-image>
</block>
<block wx:else>
<cover-image class="size-me" src='../resource/images/unlike.png' style='margin-top:30rpx;' bindtap='likeVideoOrNot'></cover-image>
</block>
VideosMapperCustom.java类中添加视频喜欢的数量方法
//对视频喜欢的数量进行累加
public void addVideoLikeCount(String videoId); //对视频喜欢的数量进行累减
public void reduceVideoLikeCount(String videoId);
VideosMapperCustom.xml中添加对数据库中进行查询的SQL语句
<update id="addVideoLikeCount" parameterType="String">
update videos set like_counts = like_counts + 1 where id=#{videoId}
</update> <update id="reduceVideoLikeCount" parameterType="String">
update videos set like_counts = like_counts - 1 where id=#{videoId}
</update>
同理UsersMapper.java中添加用户对视频是否喜欢
//用户受喜欢数累加
public void addReceiveLikeCount(String userId); //用户受喜欢数累减
public void reduceReceiveLikeCount(String userId);
在UsersMapper.xml中添加对数据库进行查询的语句
<update id="addReceiveLikeCount" parameterType="String">
update users set receive_like_counts = receive_like_counts + 1 where id=#{userId}
</update> <update id="reduceReceiveLikeCount" parameterType="String">
update users set receive_like_counts = receive_like_counts - 1 where id=#{userId}
</update>
Service层中添加删除用户和视频的喜欢和点赞关联表
@Transactional(propagation = Propagation.REQUIRED)
@Override
public void userLikeVideo(String userId, String videoId, String videoCreateId) { //保存用户和视频的喜欢点赞关联关系表
String likeId = sid.nextShort();
UsersLikeVideos ulv = new UsersLikeVideos();
ulv.setId(likeId);
ulv.setUserId(userId);
ulv.setVideoId(videoId); usersLikeVideosMapper.insert(ulv); //视频喜欢数量累加
videosMapperCustom.addVideoLikeCount(videoId); //用户受喜欢数量的累加
usersMapper.addReceiveLikeCount(userId); } @Transactional(propagation = Propagation.REQUIRED)
@Override
public void userUnLikeVideo(String userId, String videoId, String videoCreateId) { //1.删除用户和视频的喜欢点赞关联关系表 Example example = new Example(UsersLikeVideos.class);
Criteria criteria = example.createCriteria(); criteria.andEqualTo("userId",userId);
criteria.andEqualTo("videoId",videoId); usersLikeVideosMapper.deleteByExample(example); //视频喜欢数量累减
videosMapperCustom.reduceVideoLikeCount(videoId); //用户受喜欢数量的累减
usersMapper.reduceReceiveLikeCount(userId); }
package com.imooc.server.impl; import java.util.List; 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.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.imooc.mapper.BgmMapper;
import com.imooc.mapper.SearchRecordsMapper;
import com.imooc.mapper.UsersLikeVideosMapper;
import com.imooc.mapper.UsersMapper;
import com.imooc.mapper.VideosMapper;
import com.imooc.mapper.VideosMapperCustom;
import com.imooc.pojo.Bgm;
import com.imooc.pojo.SearchRecords;
import com.imooc.pojo.Users;
import com.imooc.pojo.UsersLikeVideos;
import com.imooc.pojo.Videos;
import com.imooc.pojo.vo.VideosVO;
import com.imooc.service.BgmService;
import com.imooc.service.UserService;
import com.imooc.service.VideoService;
import com.imooc.utils.PagedResult; import tk.mybatis.mapper.entity.Example;
import tk.mybatis.mapper.entity.Example.Criteria; @Service
public class VideoServiceImpl implements VideoService { @Autowired
private VideosMapper videosMapper; @Autowired
private UsersMapper usersMapper; @Autowired
private VideosMapperCustom videosMapperCustom; @Autowired
private SearchRecordsMapper searchRecordsMapper; @Autowired
private UsersLikeVideosMapper usersLikeVideosMapper; @Autowired
private Sid sid; @Transactional(propagation = Propagation.REQUIRED)
@Override
public String saveVideo(Videos video) { String id = sid.nextShort();
video.setId(id); videosMapper.insertSelective(video); return id;
} @Transactional(propagation = Propagation.REQUIRED)
@Override
public void updateVideo(String videoId, String coverPath) { Videos video = new Videos();
video.setId(videoId);
video.setCoverPath(coverPath);
videosMapper.updateByPrimaryKeySelective(video); } @Transactional(propagation = Propagation.REQUIRED)
@Override
public PagedResult getAllVideos(Videos video,Integer isSaveRecord,
Integer page, Integer pageSize) { //保存热搜词
String desc = video.getVideoDesc();
if(isSaveRecord!=null && isSaveRecord==1) {
SearchRecords record = new SearchRecords();
String recordId = sid.nextShort();
record.setId(recordId);
record.setContent(desc);
searchRecordsMapper.insert(record);
} PageHelper.startPage(page,pageSize);
List<VideosVO> list= videosMapperCustom.queryAllVideos(desc); 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;
} @Transactional(propagation = Propagation.SUPPORTS)
@Override
public List<String> getHotwords() { return searchRecordsMapper.getHotwords();
} @Transactional(propagation = Propagation.REQUIRED)
@Override
public void userLikeVideo(String userId, String videoId, String videoCreateId) { //保存用户和视频的喜欢点赞关联关系表
String likeId = sid.nextShort();
UsersLikeVideos ulv = new UsersLikeVideos();
ulv.setId(likeId);
ulv.setUserId(userId);
ulv.setVideoId(videoId); usersLikeVideosMapper.insert(ulv); //视频喜欢数量累加
videosMapperCustom.addVideoLikeCount(videoId); //用户受喜欢数量的累加
usersMapper.addReceiveLikeCount(userId); } @Transactional(propagation = Propagation.REQUIRED)
@Override
public void userUnLikeVideo(String userId, String videoId, String videoCreateId) { //1.删除用户和视频的喜欢点赞关联关系表 Example example = new Example(UsersLikeVideos.class);
Criteria criteria = example.createCriteria(); criteria.andEqualTo("userId",userId);
criteria.andEqualTo("videoId",videoId); usersLikeVideosMapper.deleteByExample(example); //视频喜欢数量累减
videosMapperCustom.reduceVideoLikeCount(videoId); //用户受喜欢数量的累减
usersMapper.reduceReceiveLikeCount(userId); } }
VideoServiceImpl.java
package com.imooc.controller; import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.Date;
import java.util.UUID; import org.apache.commons.lang3.StringUtils;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
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.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile; import com.imooc.enums.VideoStatusEnum;
import com.imooc.pojo.Bgm;
import com.imooc.pojo.Users;
import com.imooc.pojo.Videos;
import com.imooc.service.BgmService;
import com.imooc.service.VideoService;
import com.imooc.utils.FetchVideoCover;
import com.imooc.utils.IMoocJSONResult;
import com.imooc.utils.MergeVideoMp3;
import com.imooc.utils.PagedResult; 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("/video")
public class VideoController extends BasicController{ @Autowired
private BgmService bgmService; @Autowired
private VideoService videoService; @ApiOperation(value="上传视频", notes="上传视频的接口")
@ApiImplicitParams({
@ApiImplicitParam(name="userId",value="用户id",required=true,
dataType="String" ,paramType="form"),
@ApiImplicitParam(name="bgmId",value="背景音乐id",required=false,
dataType="String" ,paramType="form"),
@ApiImplicitParam(name="videoSeconds",value="背景音乐播放长度",required=true,
dataType="String" ,paramType="form"),
@ApiImplicitParam(name="videoWidth",value="视频的宽度",required=true,
dataType="String" ,paramType="form"),
@ApiImplicitParam(name="videoHeight",value="视频的高度",required=true,
dataType="String" ,paramType="form"),
@ApiImplicitParam(name="desc",value="视频的描述",required=false,
dataType="String" ,paramType="form")
})
@PostMapping(value="/upload",headers="content-type=multipart/form-data")
public IMoocJSONResult uploadFace(String userId,
String bgmId,double videoSeconds,int videoWidth,int videoHeight,String desc,
@ApiParam(value="短视频",required=true)
MultipartFile file) throws Exception { if(StringUtils.isBlank(userId)) {
return IMoocJSONResult.errorMsg("用户id不能为空...");
} //文件保存命名空间
//String fileSpace = "F:/imooc-video-gary";
//保存到数据库中的相对路径
String uploadPathDB = "/" + userId + "/video";
String coverPathDB = "/" + userId + "/video"; FileOutputStream fileOutputStream = null;
InputStream inputStream = null;
String finalVideoPath = "";
try {
if( file != null ) { String fileName = file.getOriginalFilename();
//Gary.mp4 使用spilt进行分割
String fileNamePrefix = fileName.split("\\.")[0]; if(StringUtils.isNoneBlank(fileName)) {
//文件上传的最终保存路径 finalVideoPath = FILE_SPACE + uploadPathDB + "/" + fileName;
//设置数据库保存的路径
uploadPathDB += ("/" + fileName);
coverPathDB = coverPathDB + "/" + fileNamePrefix + ".jpg"; File outFile = new File(finalVideoPath);
if(outFile.getParentFile()!=null || !outFile.getParentFile().isDirectory()) {
//创建父文件夹
outFile.getParentFile().mkdirs();
} fileOutputStream = new FileOutputStream(outFile);
inputStream = file.getInputStream();
IOUtils.copy(inputStream, fileOutputStream);
} }else {
return IMoocJSONResult.errorMsg("上传出错...");
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
return IMoocJSONResult.errorMsg("上传出错...");
}finally {
if(fileOutputStream != null) {
fileOutputStream.flush();
fileOutputStream.close();
}
} //判断bgmId是否为空，
//如果不为空，那就查询bgm的信息，并且合并视频生成新的视频 if(StringUtils.isNotBlank(bgmId)) {
Bgm bgm = bgmService.queryBgmById(bgmId);
String mp3InputPath = FILE_SPACE + bgm.getPath();
//System.out.println("1:mp3InputPath + "+mp3InputPath);
MergeVideoMp3 tool = new MergeVideoMp3(FFMPEG_EXE);
String videoInputPath = finalVideoPath; String videdoOutputName = UUID.randomUUID().toString() + ".mp4";
uploadPathDB = "/" + userId + "/video" + "/" +videdoOutputName;
finalVideoPath = FILE_SPACE + uploadPathDB;
tool.convertor(videoInputPath, mp3InputPath, videoSeconds, finalVideoPath); } //对视频封面进行截图
FetchVideoCover videoInfo = new FetchVideoCover(FFMPEG_EXE);
videoInfo.getCover(finalVideoPath,FILE_SPACE + coverPathDB); //保存视频信息到数据库
Videos video = new Videos();
video.setAudioId(bgmId);
video.setUserId(userId);
video.setVideoSeconds((float)videoSeconds);
video.setVideoHeight(videoHeight);
video.setVideoWidth(videoWidth);
video.setVideoDesc(desc);
video.setVideoPath(uploadPathDB);
video.setCoverPath(coverPathDB);
video.setStatus(VideoStatusEnum.SUCCESS.value);
video.setCreateTime(new Date()); String videoId = videoService.saveVideo(video); return IMoocJSONResult.ok(videoId);
} @ApiOperation(value="上传封面", notes="上传封面的接口")
@ApiImplicitParams({
@ApiImplicitParam(name="userId",value="用户id",required=true,
dataType="String" ,paramType="form"),
@ApiImplicitParam(name="videoId",value="视频主键id",required=true,
dataType="String" ,paramType="form")
})
@PostMapping(value="/uploadCover",headers="content-type=multipart/form-data")
public IMoocJSONResult uploadCover(String userId,String videoId,
@ApiParam(value="视频封面",required=true)
MultipartFile file) throws Exception { if(StringUtils.isBlank(userId) ||StringUtils.isBlank(videoId) ) {
return IMoocJSONResult.errorMsg("视频主键id和用户id不能为空...");
} //文件保存命名空间
//String fileSpace = "F:/imooc-video-gary";
//保存到数据库中的相对路径
String uploadPathDB = "/" + userId + "/video"; FileOutputStream fileOutputStream = null;
InputStream inputStream = null;
String finalCoverPath = "";
try {
if( file != null ) { String fileName = file.getOriginalFilename();
if(StringUtils.isNoneBlank(fileName)) {
//文件上传的最终保存路径 finalCoverPath = FILE_SPACE + uploadPathDB + "/" + fileName;
//设置数据库保存的路径
uploadPathDB += ("/" + fileName); File outFile = new File(finalCoverPath);
if(outFile.getParentFile()!=null || !outFile.getParentFile().isDirectory()) {
//创建父文件夹
outFile.getParentFile().mkdirs();
} fileOutputStream = new FileOutputStream(outFile);
inputStream = file.getInputStream();
IOUtils.copy(inputStream, fileOutputStream);
} }else {
return IMoocJSONResult.errorMsg("上传出错...");
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
return IMoocJSONResult.errorMsg("上传出错...");
}finally {
if(fileOutputStream != null) {
fileOutputStream.flush();
fileOutputStream.close();
}
} videoService.updateVideo(videoId, uploadPathDB); return IMoocJSONResult.ok();
} //分页和搜索查询视频列表
//isSaveRecord：1 需要保存 0 不需要保存或为空
@PostMapping(value="/showAll")
public IMoocJSONResult showAll(@RequestBody Videos video,Integer isSaveRecord ,
Integer page) throws Exception { if(page == null) {
page = 1;
} PagedResult result = videoService.getAllVideos(video,isSaveRecord,page,PAGE_SIZE);
return IMoocJSONResult.ok(result); } @PostMapping(value="/hot")
public IMoocJSONResult hot() throws Exception { return IMoocJSONResult.ok(videoService.getHotwords());
} @PostMapping(value="/userLike")
public IMoocJSONResult userLike(String userId,String videoId,String videoCreateId) throws Exception { videoService.userLikeVideo(userId, videoId, videoCreateId); return IMoocJSONResult.ok();
} @PostMapping(value="/userUnLike")
public IMoocJSONResult userUnLike(String userId,String videoId,String videoCreateId) throws Exception { videoService.userUnLikeVideo(userId, videoId, videoCreateId); return IMoocJSONResult.ok();
} }
VideoController.java
小程序点赞与取消点赞功能前后端联调
在videoinfo.js中编写用户点赞与取消功能
likeVideoOrNot:function(){
var me = this;
var videoInfo = me.data.videoInfo;
var user = app.getGlobalUserInfo();
if (user == null || user == undefined || user == '') {
wx.navigateTo({
url: '../userLogin/login',
})
} else {
var userLikeVideo = me.data.userLikeVideo;
var url = '/video/userLike?userId=' + user.id + '&videoId=' + videoInfo.id +'&videoCreaterId='+videoInfo.userId;
if(userLikeVideo){
var url = '/video/userUnLike?userId=' + user.id + '&videoId=' + videoInfo.id + '&videoCreaterId=' + videoInfo.userId;
}
var serverUrl = app.serverUrl;
wx.showLoading({
title: '...',
})
wx.request({
url: serverUrl+url,
method:'POST',
header: {
'content-type': 'application/json', // 默认值
'userId': user.id,
'userToken': user.userToken
},
success:function(res){
wx.hideLoading();
me.setData({
userLikeVideo:!userLikeVideo
});
}
})
}
}
<view style='width:100%;height:100%;'>
<video id="myVideo" src="{{src}}"
muted="{{true}}"
autoplay="{{true}}"
loop="{{true}}"
enable-progress-gesture="{{false}}"
style='width:100%;height:100%;'
objectFit='{{cover}}'
>
<cover-view class='container'>
<!-- 上传视频 -->
<cover-image src='../resource/images/camera.png' style='width:50rpx;height:50rpx;' bindtap='upload'></cover-image>
<!-- 搜索按钮 -->
<cover-image src='../resource/images/search.png' style='width:45rpx;height:45rpx;' bindtap='showSearch'></cover-image>
</cover-view>
<cover-view class='container-me'>
<!-- 头像 -->
<cover-image class="face" src='{{publisher.faceImage}}' bindtap='showPublisher'></cover-image>
<!-- 喜欢收藏按钮 -->
<block wx:if="{{userLikeVideo}}">
<cover-image class="size-me" src='../resource/images/like.png' style='margin-top:30rpx;' bindtap='likeVideoOrNot'></cover-image>
</block>
<block wx:else>
<cover-image class="size-me" src='../resource/images/unlike.png' style='margin-top:30rpx;' bindtap='likeVideoOrNot'></cover-image>
</block>
<!-- 评论按钮 -->
<cover-image class="size-me" src='../resource/images/comments.png' style='margin-top:30rpx;' bindtap='leaveComment'></cover-image>
<!-- 分享按钮 -->
<cover-image class="size-me" src='../resource/images/share.png' style='margin-top:30rpx;' bindtap='shareMe'></cover-image>
</cover-view>
<cover-view class='container-words'>
<cover-view>@{{publisher.nickname}}</cover-view>
<cover-view class='video-desc'>{{videoInfo.videoDesc}}</cover-view>
</cover-view>
<cover-view class='container-bottom'>
<!-- 首页按钮 -->
<cover-image class='' src='../resource/images/index.png' class="size-bottom" bindtap='showIndex'></cover-image>
<!-- 我的关注 -->
<cover-image class='' src='../resource/images/follow.png' class="size-bottom" bindtap='showFollow'></cover-image>
<!-- 我的按钮 -->
<cover-image class='' src='../resource/images/mine.png' class="size-bottom" bindtap='showMine'></cover-image>
</cover-view>
</video>
</view>
videoinfo.wxml
var videoUtil = require('../../utils/videoUtil.js')
const app = getApp()
Page({
data: {
cover:"cover",
videoId:"",
src:"",
videoInfo:{},
userLikeVideo:false
},
videoCtx:{
},
onLoad:function(params){
var me = this;
me.videoCtx = wx.createVideoContext("myVideo", me);
//获取上一个页面传入的参数
var videoInfo = JSON.parse(params.videoInfo);
var height = videoInfo.videoHeight;
var width = videoInfo.videoWidth;
var cover = "cover";
if(width>=height){
cover="";
}
me.setData({
videoInfo: videoInfo.id,
src:app.serverUrl + videoInfo.videoPath,
videoInfo: videoInfo,
cover:cover
});
},
onShow:function(){
var me = this;
me.videoCtx.play();
},
onHide:function(){
var me = this;
me.videoCtx.pause();
},
showSearch:function(){
wx.navigateTo({
url: '../searchVideo/searchVideo',
})
},
upload:function(){
var me = this;
var user = app.getGlobalUserInfo();
var videoInfo = JSON.stringify(me.data.videoInfo);
var realUrl = '../videoinfo/videoinfo#videoInfo@'+videoInfo;
if (user == null || user == undefined || user == '') {
wx.navigateTo({
url: '../userLogin/login?redirectUrl=' +realUrl,
})
} else {
videoUtil.uploadVideo();
}
},
showIndex:function(){
wx.redirectTo({
url: '../index/index',
})
},
showMine:function(){
var user = app.getGlobalUserInfo();
if(user ==null || user == undefined||user == ''){
wx.navigateTo({
url: '../userLogin/login',
})
}else{
wx.navigateTo({
url: '../mine/mine',
})
}
},
likeVideoOrNot:function(){
var me = this;
var videoInfo = me.data.videoInfo;
var user = app.getGlobalUserInfo();
if (user == null || user == undefined || user == '') {
wx.navigateTo({
url: '../userLogin/login',
})
} else {
var userLikeVideo = me.data.userLikeVideo;
var url = '/video/userLike?userId=' + user.id + '&videoId=' + videoInfo.id +'&videoCreaterId='+videoInfo.userId;
if(userLikeVideo){
var url = '/video/userUnLike?userId=' + user.id + '&videoId=' + videoInfo.id + '&videoCreaterId=' + videoInfo.userId;
}
var serverUrl = app.serverUrl;
wx.showLoading({
title: '...',
})
wx.request({
url: serverUrl+url,
method:'POST',
header: {
'content-type': 'application/json', // 默认值
'userId': user.id,
'userToken': user.userToken
},
success:function(res){
wx.hideLoading();
me.setData({
userLikeVideo:!userLikeVideo
});
}
})
}
}
})
videoinfo.js
当用户对某一视频点赞后，数据库中后台会得到该用户与点赞视频对应的属性值与视频点赞数量
进入视频展示页面查询后端接口信息
UserController.java中编写后端queryPublisher请求信息
@PostMapping("/queryPublisher")
public IMoocJSONResult queryPublisher(String loginUserId,String videoId,
String publishUserId) throws Exception {
if(StringUtils.isBlank(publishUserId)) {
return IMoocJSONResult.errorMsg("");
}
//查询视频发布者的信息
Users userInfo = userService.queryUserInfo(publishUserId);
UsersVO publisher = new UsersVO();
BeanUtils.copyProperties(userInfo, publisher);
//查询当前登陆者和视频的点赞关系
boolean userLikeVideo = userService.isUserLikeVideo(loginUserId, videoId);
PublisherVideo bean = new PublisherVideo();
bean.setPublisher(publisher);
bean.setUserLikeVideo(userLikeVideo);
return IMoocJSONResult.ok(bean);
}
videoindo.js中编写获得用户信息请求方法
wx.request({
url: serverUrl + '/user/queryPublisher?loginUserId=' + loginUserId + "&videoId=" + videoInfo.id +"&publishUserId="+videoInfo.userId,
method:'POST',
success:function(res){
var publisher = res.data.data.publisher;
var userLikeVideo = res.data.data.userLikeVideo;
me.setData({
serverUrl: serverUrl,
publisher: publisher,
userLikeVideo: userLikeVideo,
});
}
})
},
进入index.js视频页面后，会展示该视频上传用户者头像及是否被当前用户点赞
var videoUtil = require('../../utils/videoUtil.js')
const app = getApp()
Page({
data: {
cover:"cover",
videoId:"",
src:"",
videoInfo:{},
userLikeVideo:false
},
videoCtx:{
},
onLoad:function(params){
var me = this;
me.videoCtx = wx.createVideoContext("myVideo", me);
//获取上一个页面传入的参数
var videoInfo = JSON.parse(params.videoInfo);
var height = videoInfo.videoHeight;
var width = videoInfo.videoWidth;
var cover = "cover";
if(width>=height){
cover="";
}
me.setData({
videoInfo: 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){
var publisher = res.data.data.publisher;
var userLikeVideo = res.data.data.userLikeVideo;
me.setData({
serverUrl: serverUrl,
publisher: publisher,
userLikeVideo: userLikeVideo,
});
}
})
},
onShow:function(){
var me = this;
me.videoCtx.play();
},
onHide:function(){
var me = this;
me.videoCtx.pause();
},
showSearch:function(){
wx.navigateTo({
url: '../searchVideo/searchVideo',
})
},
upload:function(){
var me = this;
var user = app.getGlobalUserInfo();
var videoInfo = JSON.stringify(me.data.videoInfo);
var realUrl = '../videoinfo/videoinfo#videoInfo@'+videoInfo;
if (user == null || user == undefined || user == '') {
wx.navigateTo({
url: '../userLogin/login?redirectUrl=' +realUrl,
})
} else {
videoUtil.uploadVideo();
}
},
showIndex:function(){
wx.redirectTo({
url: '../index/index',
})
},
showMine:function(){
var user = app.getGlobalUserInfo();
if(user ==null || user == undefined||user == ''){
wx.navigateTo({
url: '../userLogin/login',
})
}else{
wx.navigateTo({
url: '../mine/mine',
})
}
},
likeVideoOrNot:function(){
var me = this;
var videoInfo = me.data.videoInfo;
var user = app.getGlobalUserInfo();
if (user == null || user == undefined || user == '') {
wx.navigateTo({
url: '../userLogin/login',
})
} else {
var userLikeVideo = me.data.userLikeVideo;
var url = '/video/userLike?userId=' + user.id + '&videoId=' + videoInfo.id +'&videoCreaterId='+videoInfo.userId;
if(userLikeVideo){
var url = '/video/userUnLike?userId=' + user.id + '&videoId=' + videoInfo.id + '&videoCreaterId=' + videoInfo.userId;
}
var serverUrl = app.serverUrl;
wx.showLoading({
title: '...',
})
wx.request({
url: serverUrl+url,
method:'POST',
header: {
'content-type': 'application/json', // 默认值
'userId': user.id,
'userToken': user.userToken
},
success:function(res){
wx.hideLoading();
me.setData({
userLikeVideo:!userLikeVideo
});
}
})
}
}
})
videoinfo.js
package com.imooc.controller; import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.UUID; import org.apache.commons.lang3.StringUtils;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
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.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile; import com.imooc.pojo.Users;
import com.imooc.pojo.vo.PublisherVideo;
import com.imooc.pojo.vo.UsersVO;
import com.imooc.service.UserService;
import com.imooc.utils.IMoocJSONResult;
import com.imooc.utils.MD5Utils; import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiOperation; @RestController
@Api(value="用户相关业务的接口",tags= {"用户相关业务的controller"})
@RequestMapping("/user")
public class UserController extends BasicController { @Autowired
private UserService userService; @ApiOperation(value="用户上传头像", notes="用户上传头像的接口")
@ApiImplicitParam(name="userId",value="用户id",required=true,
dataType="String" ,paramType="query")
@PostMapping("/uploadFace")
public IMoocJSONResult uploadFace(String userId,
@RequestParam("file") MultipartFile[] files) throws Exception { if(StringUtils.isBlank(userId)) {
return IMoocJSONResult.errorMsg("用户id不能为空...");
} //文件保存命名空间
String fileSpace = "F:/imooc-video-gary";
//保存到数据库中的相对路径
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 {
return IMoocJSONResult.errorMsg("上传出错...");
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
return 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);
} @ApiOperation(value="查询用户信息", notes="查询用户信息的接口")
@ApiImplicitParam(name="userId",value="用户id",required=true,
dataType="String" ,paramType="query")
@PostMapping("/query")
public IMoocJSONResult query(String userId) throws Exception { if(StringUtils.isBlank(userId)) {
return IMoocJSONResult.errorMsg("用户id不能为空...");
} Users userInfo = userService.queryUserInfo(userId);
UsersVO userVO = new UsersVO();
BeanUtils.copyProperties(userInfo, userVO); return IMoocJSONResult.ok(userVO);
} @PostMapping("/queryPublisher")
public IMoocJSONResult queryPublisher(String loginUserId,String videoId,
String publishUserId) throws Exception { if(StringUtils.isBlank(publishUserId)) {
return IMoocJSONResult.errorMsg("");
} //查询视频发布者的信息
Users userInfo = userService.queryUserInfo(publishUserId);
UsersVO publisher = new UsersVO();
BeanUtils.copyProperties(userInfo, publisher); //查询当前登陆者和视频的点赞关系
boolean userLikeVideo = userService.isUserLikeVideo(loginUserId, videoId); PublisherVideo bean = new PublisherVideo();
bean.setPublisher(publisher);
bean.setUserLikeVideo(userLikeVideo); return IMoocJSONResult.ok(bean);
} }
UserController.java
查看视频发布者信息
编写用户点击上传视频者头像后跳转到该用户首页信息方法showPublisher()
<!-- 头像 -->
<cover-image class="face" src='{{serverUrl}}{{publisher.faceImage}}' bindtap='showPublisher'></cover-image>
showPublisher:function(){
var me = this;
var user = app.getGlobalUserInfo();
var videoInfo = me.data.videoInfo;
var realUrl = '../mine/mine#publisherId@' + videoInfo.user;
if (user == null || user == undefined || user == '') {
wx.navigateTo({
url: '../userLogin/login?redirectUrl=' + realUrl,
})
} else {
wx.navigateTo({
url: '../mine/mine?publisherId='+videoInfo.user,
})
}
},
在mine.js中修改onLoad()函数并给一个参数值params作为获得缓存中用户信息
onLoad: function (params) {
var me = this;
// var user = app.userInfo;
//fixme 修改原有的全局对象为本地缓存
var user = app.getGlobalUserInfo();
var userId = user.id;
var publisherId = params.publisherId;
if (publisherId != null && publisherId != '' && publisherId!=undefined) {
userId = publisherId;
}
wx.showLoading({
title: '请等待...',
});
// 调用后端
var serverUrl = app.serverUrl;
wx.request({
url: serverUrl + '/user/query?userId=' + userId,
method: "POST",
header: {
'content-type': 'application/json', // 默认值
'userId':user.id,
'userToken':user.userToken
},
success: function (res) {
console.log(res.data);
wx.hideLoading();
if (res.data.status == 200) {
var userInfo= res.data.data;
var faceUrl = "../resource/images/noneface.png";
if (userInfo.faceImage != null && userInfo.faceImage != '' && userInfo.faceImage!=undefined){
faceUrl = serverUrl + userInfo.faceImage;
}
me.setData({
faceUrl: faceUrl,
fansCounts: userInfo.fansCounts,
followCounts: userInfo.followCounts,
receiveLikeCounts: userInfo.receiveLikeCounts,
nickname: userInfo.nickname
});
} else if (res.data.status == 502){
wx.showToast({
title: res.data.msg,
duration:3000,
icon:"none",
success:function(){
wx.redirectTo({
url: '../userLogin/login',
})
}
})
}
}
})
},
var videoUtil = require('../../utils/videoUtil.js')
const app = getApp()
Page({
data: {
cover: "cover",
videoId: "",
src: "",
videoInfo: {},
userLikeVideo: false
},
videoCtx: {
},
onLoad: function (params) {
var me = this;
me.videoCtx = wx.createVideoContext("myVideo", me);
//获取上一个页面传入的参数
var videoInfo = JSON.parse(params.videoInfo);
var height = videoInfo.videoHeight;
var width = videoInfo.videoWidth;
var cover = "cover";
if (width >= height) {
cover = "";
}
me.setData({
videoInfo: 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) {
var publisher = res.data.data.publisher;
var userLikeVideo = res.data.data.userLikeVideo;
me.setData({
serverUrl: serverUrl,
publisher: publisher,
userLikeVideo: userLikeVideo,
});
}
})
},
onShow: function () {
var me = this;
me.videoCtx.play();
},
onHide: function () {
var me = this;
me.videoCtx.pause();
},
showSearch: function () {
wx.navigateTo({
url: '../searchVideo/searchVideo',
})
},
showPublisher: function () {
var me = this;
var user = app.getGlobalUserInfo();
var videoInfo = me.data.videoInfo;
var realUrl = '..mine/mine#videoInfo@' + videoInfo.userId;
if (user == null || user == undefined || user == '') {
wx.navigateTo({
url: '../userLogin/login?redirectUrl=' + realUrl,
})
} else {
wx.navigateTo({
url: '../mine/mine?publisherId='+videoInfo.userId,
})
}
},
upload: function () {
var me = this;
var user = app.getGlobalUserInfo();
var videoInfo = JSON.stringify(me.data.videoInfo);
var realUrl = '../videoinfo/videoinfo#videoInfo@' + videoInfo;
if (user == null || user == undefined || user == '') {
wx.navigateTo({
url: '../userLogin/login?redirectUrl=' + realUrl,
})
} else {
videoUtil.uploadVideo();
}
},
showIndex: function () {
wx.redirectTo({
url: '../index/index',
})
},
showMine: function () {
var user = app.getGlobalUserInfo();
if (user == null || user == undefined || user == '') {
wx.navigateTo({
url: '../userLogin/login',
})
} else {
wx.navigateTo({
url: '../mine/mine',
})
}
},
likeVideoOrNot: function () {
var me = this;
var videoInfo = me.data.videoInfo;
var user = app.getGlobalUserInfo();
if (user == null || user == undefined || user == '') {
wx.navigateTo({
url: '../userLogin/login',
})
} else {
var userLikeVideo = me.data.userLikeVideo;
var url = '/video/userLike?userId=' + user.id + '&videoId=' + videoInfo.id + '&videoCreaterId=' + videoInfo.userId;
if (userLikeVideo) {
var url = '/video/userUnLike?userId=' + user.id + '&videoId=' + videoInfo.id + '&videoCreaterId=' + videoInfo.userId;
}
var serverUrl = app.serverUrl;
wx.showLoading({
title: '...',
})
wx.request({
url: serverUrl + url,
method: 'POST',
header: {
'content-type': 'application/json', // 默认值
'userId': user.id,
'userToken': user.userToken
},
success: function (res) {
wx.hideLoading();
me.setData({
userLikeVideo: !userLikeVideo
});
}
})
}
}
})
videoinfo.js
var videoUtil = require('../../utils/videoUtil.js')
const app = getApp()
Page({
data: {
faceUrl: "../resource/images/noneface.png",
},
onLoad: function (params) {
var me = this;
// var user = app.userInfo;
//fixme 修改原有的全局对象为本地缓存
var user = app.getGlobalUserInfo();
var userId = user.id;
var publisherId = params.publisherId;
if (publisherId != null && publisherId != '' && publisherId!=undefined) {
userId = publisherId;
}
wx.showLoading({
title: '请等待...',
});
// 调用后端
var serverUrl = app.serverUrl;
wx.request({
url: serverUrl + '/user/query?userId=' + userId,
method: "POST",
header: {
'content-type': 'application/json', // 默认值
'userId':user.id,
'userToken':user.userToken
},
success: function (res) {
console.log(res.data);
wx.hideLoading();
if (res.data.status == 200) {
var userInfo= res.data.data;
var faceUrl = "../resource/images/noneface.png";
if (userInfo.faceImage != null && userInfo.faceImage != '' && userInfo.faceImage!=undefined){
faceUrl = serverUrl + userInfo.faceImage;
}
me.setData({
faceUrl: faceUrl,
fansCounts: userInfo.fansCounts,
followCounts: userInfo.followCounts,
receiveLikeCounts: userInfo.receiveLikeCounts,
nickname: userInfo.nickname
});
} else if (res.data.status == 502){
wx.showToast({
title: res.data.msg,
duration:3000,
icon:"none",
success:function(){
wx.redirectTo({
url: '../userLogin/login',
})
}
})
}
}
})
},
logout:function(params){
//var user = app.userInfo;
//fixme 修改原有的全局对象为本地缓存
var user = app.getGlobalUserInfo();
var serverUrl = app.serverUrl;
wx.showLoading({
title: '请等待...',
});
// 调用后端
wx.request({
url: serverUrl + '/logout?userId='+user.id,
method: "POST",
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data);
wx.hideLoading();
if (res.data.status == 200) {
// 注销成功
wx.showToast({
title: '注销成功',
icon: 'success',
duration: 2000
});
//清除全局用户对象
//app.userInfo = null;
//注销以后，清空缓存
wx.removeStorageSync('userInfo')
//页面跳转
wx.navigateTo({
url: '../userLogin/login',
})
}
}
})
},
changeFace:function(){
var me = this;
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album'],
success:function(res) {
var tempFilePaths = res.tempFilePaths;
console.log(tempFilePaths);
wx.showLoading({
title: '上传中...',
})
var serverUrl = app.serverUrl;
//fixme 修改原有的全局对象为本地缓存
var userInfo = app.getGlobalUserInfo();
wx.uploadFile({
url: serverUrl+'/user/uploadFace?userId='+userInfo.id,
filePath: tempFilePaths[0],
name: 'file',
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
var data = JSON.parse(res.data);
console.log(data);
wx.hideLoading();
if(data.status == 200){
wx.showToast({
title: '上传成功',
icon: "success"
});
var imageUrl = data.data;
me.setData({
faceUrl: serverUrl+imageUrl
});
} else if (data.status == 500){
wx.showToast({
title: data.msg
});
}
}
})
}
})
},
uploadVideo:function(){
// videoUtil.uploadVideo();
var me =this;
wx.chooseVideo({
sourceType: ['album'],
success(res) {
console.log(res);
var duration = res.duration;
var tmpheight = res.height;
var tmpwidth = res.width;
var tmpVideoUrl = res.tempFilePath;
var tmpCoverUrl = res.thumbTempFilePath;
if(duration>300){
wx.showToast({
title: '视频长度不能超过5分钟...',
icon:"none",
duration:2500
})
} else if(duration<3){
wx.showToast({
title: '视频长度太短，请上传超过3秒的视频...',
icon: "none",
duration: 2500
})
}else{
//打开选择bgm页面
wx.navigateTo({
url: '../chooseBgm/chooseBgm?duration=' + duration
+ "&tmpheight=" + tmpheight
+ "&tmpwidth=" + tmpwidth
+ "&tmpVideoUrl=" + tmpVideoUrl
+ "&tmpCoverUrl=" + tmpCoverUrl
,
})
}
}
})
}
})
mine.js
关注于取消关注接口
查看数据库中user表
在UserMapper.java中编写增加粉丝数、增加关注数、减少粉丝数量、减少关注数量方法
//增加粉丝数
public void addFansCount(String userId); //增加关注数
public void addFollersCount(String userId); //减少粉丝数量
public void reduceFanCount(String userId); //减少关注数量
public void reduceFollersCount(String userId);
在UserMapper.xml中实现SQL语句的编写
<!-- 粉丝 -->
<update id="addFansCount" parameterType="String">
update users set fans_counts = fans_counts + 1 where id=#{userId}
</update> <update id="reduceFanCount" parameterType="String">
update users set fans_counts = fans_counts - 1 where id=#{userId}
</update> <!-- 关注度 -->
<update id="addFollersCount" parameterType="String">
update users set follow_counts = follow_counts + 1 where id=#{userId}
</update> <update id="reduceFollersCount" parameterType="String">
update users set follow_counts = follow_counts - 1 where id=#{userId}
</update>
Service层实现增加用户粉丝和减少用户粉丝方法
@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.reduceFollersCount(userId);
userMapper.reduceFollersCount(fanId);
}
Controller层去实现增加粉丝数beyourfans方法和减少粉丝数dontbeyourfans方法
@PostMapping("/beyourfans")
public IMoocJSONResult beyourfans(String userId,String fanId) throws Exception {
if(StringUtils.isBlank(userId)) {
return IMoocJSONResult.errorMsg("");
}
userService.saveUserFanRelation(userId, fanId);
return IMoocJSONResult.ok("关注成功");
}
@PostMapping("/dontbeyourfans")
public IMoocJSONResult dontbeyourfans(String userId,String fanId) throws Exception {
if(StringUtils.isBlank(userId)) {
return IMoocJSONResult.errorMsg("");
}
userService.deleteUserFanRelation(userId, fanId);
return IMoocJSONResult.ok("取消关注成功");
}
@PostMapping("/beyourfans")
public IMoocJSONResult beyourfans(String userId,String fanId) throws Exception {
if(StringUtils.isBlank(userId)) {
return IMoocJSONResult.errorMsg("");
}
userService.saveUserFanRelation(userId, fanId);
return IMoocJSONResult.ok("关注成功");
}
@PostMapping("/dontbeyourfans")
public IMoocJSONResult dontbeyourfans(String userId,String fanId) throws Exception {
if(StringUtils.isBlank(userId)) {
return IMoocJSONResult.errorMsg("");
}
userService.deleteUserFanRelation(userId, fanId);
return IMoocJSONResult.ok("取消关注成功");
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.imooc.mapper.UsersMapper" >
<resultMap id="BaseResultMap" type="com.imooc.pojo.Users" >
<!--
WARNING - @mbg.generated
-->
<id column="id" property="id" jdbcType="VARCHAR" />
<result column="username" property="username" jdbcType="VARCHAR" />
<result column="password" property="password" jdbcType="VARCHAR" />
<result column="face_image" property="faceImage" jdbcType="VARCHAR" />
<result column="nickname" property="nickname" jdbcType="VARCHAR" />
<result column="fans_counts" property="fansCounts" jdbcType="INTEGER" />
<result column="receive_like_counts" property="receiveLikeCounts" jdbcType="INTEGER" />
<result column="follow_counts" property="followCounts" jdbcType="INTEGER" />
</resultMap> <!-- 受喜欢程度 -->
<update id="addReceiveLikeCount" parameterType="String">
update users set receive_like_counts = receive_like_counts + 1 where id=#{userId}
</update> <update id="reduceReceiveLikeCount" parameterType="String">
update users set receive_like_counts = receive_like_counts - 1 where id=#{userId}
</update> <!-- 粉丝 -->
<update id="addFansCount" parameterType="String">
update users set fans_counts = fans_counts + 1 where id=#{userId}
</update> <update id="reduceFanCount" parameterType="String">
update users set fans_counts = fans_counts - 1 where id=#{userId}
</update> <!-- 关注度 -->
<update id="addFollersCount" parameterType="String">
update users set follow_counts = follow_counts + 1 where id=#{userId}
</update> <update id="reduceFollersCount" parameterType="String">
update users set follow_counts = follow_counts - 1 where id=#{userId}
</update> </mapper>
UsersMapper.xml
package com.imooc.server.impl; 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.imooc.mapper.UsersFansMapper;
import com.imooc.mapper.UsersLikeVideosMapper;
import com.imooc.mapper.UsersMapper;
import com.imooc.pojo.Users;
import com.imooc.pojo.UsersFans;
import com.imooc.pojo.UsersLikeVideos;
import com.imooc.service.UserService;
import com.imooc.utils.IMoocJSONResult; import tk.mybatis.mapper.entity.Example;
import tk.mybatis.mapper.entity.Example.Criteria; @Service
public class UserServiceImpl implements UserService { @Autowired
private UsersMapper userMapper; @Autowired
private UsersFansMapper usersFansMapper; @Autowired
private UsersLikeVideosMapper usersLikeVideosMapper; @Autowired
private Sid sid; @Transactional(propagation = Propagation.SUPPORTS)
@Override
public boolean queryUsernameIsExist(String username) { Users user = new Users();
user.setUsername(username); Users result = userMapper.selectOne(user); return result==null?false:true;
} @Transactional(propagation = Propagation.REQUIRED)
@Override
public void saveUser(Users user) { String userId = sid.nextShort();
user.setId(userId); userMapper.insert(user);
} @Transactional(propagation = Propagation.SUPPORTS)
@Override
public Users queryUserForLogin(String username, String password) {
Example userExample = new Example(Users.class);
Criteria criteria = userExample.createCriteria();
criteria.andEqualTo("username", username);
criteria.andEqualTo("password", password);
Users result = userMapper.selectOneByExample(userExample); return result;
} @Transactional(propagation = Propagation.REQUIRED)
@Override
public void updateUserInfo(Users user) {
Example userExample = new Example(Users.class);
Criteria criteria = userExample.createCriteria();
criteria.andEqualTo("id",user.getId());
userMapper.updateByExampleSelective(user, userExample);
} @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 null;
} @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.reduceFollersCount(userId);
userMapper.reduceFollersCount(fanId);
} }
UserServiceImpl.java
package com.imooc.controller; import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.util.UUID; import org.apache.commons.lang3.StringUtils;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
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.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile; import com.imooc.pojo.Users;
import com.imooc.pojo.vo.PublisherVideo;
import com.imooc.pojo.vo.UsersVO;
import com.imooc.service.UserService;
import com.imooc.utils.IMoocJSONResult;
import com.imooc.utils.MD5Utils; import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiOperation; @RestController
@Api(value="用户相关业务的接口",tags= {"用户相关业务的controller"})
@RequestMapping("/user")
public class UserController extends BasicController { @Autowired
private UserService userService; @ApiOperation(value="用户上传头像", notes="用户上传头像的接口")
@ApiImplicitParam(name="userId",value="用户id",required=true,
dataType="String" ,paramType="query")
@PostMapping("/uploadFace")
public IMoocJSONResult uploadFace(String userId,
@RequestParam("file") MultipartFile[] files) throws Exception { if(StringUtils.isBlank(userId)) {
return IMoocJSONResult.errorMsg("用户id不能为空...");
} //文件保存命名空间
String fileSpace = "F:/imooc-video-gary";
//保存到数据库中的相对路径
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 {
return IMoocJSONResult.errorMsg("上传出错...");
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
return 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);
} @ApiOperation(value="查询用户信息", notes="查询用户信息的接口")
@ApiImplicitParam(name="userId",value="用户id",required=true,
dataType="String" ,paramType="query")
@PostMapping("/query")
public IMoocJSONResult query(String userId) throws Exception { if(StringUtils.isBlank(userId)) {
return IMoocJSONResult.errorMsg("用户id不能为空...");
} Users userInfo = userService.queryUserInfo(userId);
UsersVO userVO = new UsersVO();
BeanUtils.copyProperties(userInfo, userVO); return IMoocJSONResult.ok(userVO);
} @PostMapping("/queryPublisher")
public IMoocJSONResult queryPublisher(String loginUserId,String videoId,
String publishUserId) throws Exception { if(StringUtils.isBlank(publishUserId)) {
return IMoocJSONResult.errorMsg("");
} //查询视频发布者的信息
Users userInfo = userService.queryUserInfo(publishUserId);
UsersVO publisher = new UsersVO();
BeanUtils.copyProperties(userInfo, publisher); //查询当前登陆者和视频的点赞关系
boolean userLikeVideo = userService.isUserLikeVideo(loginUserId, videoId); PublisherVideo bean = new PublisherVideo();
bean.setPublisher(publisher);
bean.setUserLikeVideo(userLikeVideo); return IMoocJSONResult.ok(bean);
} @PostMapping("/beyourfans")
public IMoocJSONResult beyourfans(String userId,String fanId) throws Exception { if(StringUtils.isBlank(userId)) {
return IMoocJSONResult.errorMsg("");
} userService.saveUserFanRelation(userId, fanId); return IMoocJSONResult.ok("关注成功");
} @PostMapping("/dontbeyourfans")
public IMoocJSONResult dontbeyourfans(String userId,String fanId) throws Exception { if(StringUtils.isBlank(userId)) {
return IMoocJSONResult.errorMsg("");
} userService.deleteUserFanRelation(userId, fanId); return IMoocJSONResult.ok("取消关注成功");
} }
UserController.java
微信小程序关注用户粉丝前后端联调
在mine.js中添加粉丝followMe()函数方法
followMe:function(e){
var me = this;
var user = app.getGlobalUserInfo();
var userId = user.id;
var publisherId = me.data.publisherId;
var followType = e.currentTarget.dataset.followtype;
//1:关注 0：取消关注
var url ='';
if (followType == '1') {
url = '/user/beyourfans?userId=' + publisherId + '&fanId=' + userId;
} else {
url = '/user/dontbeyourfans?userId=' + publisherId + '&fanId=' + userId;
}
wx.showLoading();
wx.request({
url: app.serverUrl+url,
method:'POST',
header: {
'content-type': 'application/json', // 默认值
'headerUserId': user.id,
'headerUserToken': user.userToken
},
success:function(){
wx.hideLoading();
if (followType == '1') {
me.setData({
isFollow: true
})
} else {
me.setData({
isFollow: false
})
}
}
})
},
var videoUtil = require('../../utils/videoUtil.js')
const app = getApp()
Page({
data: {
faceUrl: "../resource/images/noneface.png",
isMe:true,
isFollow:false
},
onLoad: function (params) {
var me = this;
// var user = app.userInfo;
//fixme 修改原有的全局对象为本地缓存
var user = app.getGlobalUserInfo();
var userId = user.id;
var publisherId = params.publisherId;
if (publisherId != null && publisherId != '' && publisherId!=undefined) {
userId = publisherId;
me.setData({
isMe:false,
publisherId: publisherId
})
}
wx.showLoading({
title: '请等待...',
});
var serverUrl = app.serverUrl;
wx.request({
url: serverUrl + '/user/query?userId=' + userId,
method: "POST",
header: {
'content-type': 'application/json', // 默认值
'userId':user.id,
'userToken':user.userToken
},
success: function (res) {
console.log(res.data);
wx.hideLoading();
if (res.data.status == 200) {
var userInfo= res.data.data;
var faceUrl = "../resource/images/noneface.png";
if (userInfo.faceImage != null && userInfo.faceImage != '' && userInfo.faceImage!=undefined){
faceUrl = serverUrl + userInfo.faceImage;
}
me.setData({
faceUrl: faceUrl,
fansCounts: userInfo.fansCounts,
followCounts: userInfo.followCounts,
receiveLikeCounts: userInfo.receiveLikeCounts,
nickname: userInfo.nickname
});
} else if (res.data.status == 502){
wx.showToast({
title: res.data.msg,
duration:3000,
icon:"none",
success:function(){
wx.redirectTo({
url: '../userLogin/login',
})
}
})
}
}
})
},
followMe:function(e){
var me = this;
var user = app.getGlobalUserInfo();
var userId = user.id;
var publisherId = me.data.publisherId;
var followType = e.currentTarget.dataset.followtype;
//1:关注 0：取消关注
var url ='';
if (followType == '1') {
url = '/user/beyourfans?userId=' + publisherId + '&fanId=' + userId;
} else {
url = '/user/dontbeyourfans?userId=' + publisherId + '&fanId=' + userId;
}
wx.showLoading();
wx.request({
url: app.serverUrl+url,
method:'POST',
header: {
'content-type': 'application/json', // 默认值
'headerUserId': user.id,
'headerUserToken': user.userToken
},
success:function(){
wx.hideLoading();
if (followType == '1') {
me.setData({
isFollow: true
})
} else {
me.setData({
isFollow: false
})
}
}
})
},
logout:function(params){
//var user = app.userInfo;
//fixme 修改原有的全局对象为本地缓存
var user = app.getGlobalUserInfo();
var serverUrl = app.serverUrl;
wx.showLoading({
title: '请等待...',
});
// 调用后端
wx.request({
url: serverUrl + '/logout?userId='+user.id,
method: "POST",
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data);
wx.hideLoading();
if (res.data.status == 200) {
// 注销成功
wx.showToast({
title: '注销成功',
icon: 'success',
duration: 2000
});
//清除全局用户对象
//app.userInfo = null;
//注销以后，清空缓存
wx.removeStorageSync('userInfo')
//页面跳转
wx.navigateTo({
url: '../userLogin/login',
})
}
}
})
},
changeFace:function(){
var me = this;
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album'],
success:function(res) {
var tempFilePaths = res.tempFilePaths;
console.log(tempFilePaths);
wx.showLoading({
title: '上传中...',
})
var serverUrl = app.serverUrl;
//fixme 修改原有的全局对象为本地缓存
var userInfo = app.getGlobalUserInfo();
wx.uploadFile({
url: serverUrl+'/user/uploadFace?userId='+userInfo.id,
filePath: tempFilePaths[0],
name: 'file',
header: {
'content-type': 'application/json', // 默认值
'headerUserId':userInfo.id,
'headerUserToken':userInfo.userToken
},
success: function (res) {
var data = JSON.parse(res.data);
console.log(data);
wx.hideLoading();
if(data.status == 200){
wx.showToast({
title: '上传成功',
icon: "success"
});
var imageUrl = data.data;
me.setData({
faceUrl: serverUrl+imageUrl
});
} else if (data.status == 500){
wx.showToast({
title: data.msg
});
}
}
})
}
})
},
uploadVideo:function(){
// videoUtil.uploadVideo();
var me =this;
wx.chooseVideo({
sourceType: ['album'],
success(res) {
console.log(res);
var duration = res.duration;
var tmpheight = res.height;
var tmpwidth = res.width;
var tmpVideoUrl = res.tempFilePath;
var tmpCoverUrl = res.thumbTempFilePath;
if(duration>300){
wx.showToast({
title: '视频长度不能超过5分钟...',
icon:"none",
duration:2500
})
} else if(duration<3){
wx.showToast({
title: '视频长度太短，请上传超过3秒的视频...',
icon: "none",
duration: 2500
})
}else{
//打开选择bgm页面
wx.navigateTo({
url: '../chooseBgm/chooseBgm?duration=' + duration
+ "&tmpheight=" + tmpheight
+ "&tmpwidth=" + tmpwidth
+ "&tmpVideoUrl=" + tmpVideoUrl
+ "&tmpCoverUrl=" + tmpCoverUrl
,
})
}
}
})
}
})
mine.js
是否关注动态展示
在微信小程序端动态获得添加关注信息，当关注某一用户后，下一次进该用户首页时，自动为关注该用户
@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;
}
var videoUtil = require('../../utils/videoUtil.js')
const app = getApp()
Page({
data: {
faceUrl: "../resource/images/noneface.png",
isMe:true,
isFollow:false
},
onLoad: function (params) {
var me = this;
// var user = app.userInfo;
//fixme 修改原有的全局对象为本地缓存
var user = app.getGlobalUserInfo();
var userId = user.id;
var publisherId = params.publisherId;
if (publisherId != null && publisherId != '' && publisherId!=undefined) {
userId = publisherId;
me.setData({
isMe:false,
publisherId: publisherId
})
}
wx.showLoading({
title: '请等待...',
});
var serverUrl = app.serverUrl;
wx.request({
url: serverUrl + '/user/query?userId=' + userId +"&fanId="+user.id,
method: "POST",
header: {
'content-type': 'application/json', // 默认值
'userId':user.id,
'userToken':user.userToken
},
success: function (res) {
console.log(res.data);
wx.hideLoading();
if (res.data.status == 200) {
var userInfo= res.data.data;
var faceUrl = "../resource/images/noneface.png";
if (userInfo.faceImage != null && userInfo.faceImage != '' && userInfo.faceImage!=undefined){
faceUrl = serverUrl + userInfo.faceImage;
}
me.setData({
faceUrl: faceUrl,
fansCounts: userInfo.fansCounts,
followCounts: userInfo.followCounts,
receiveLikeCounts: userInfo.receiveLikeCounts,
nickname: userInfo.nickname,
isFollow: userInfo.follow
});
} else if (res.data.status == 502){
wx.showToast({
title: res.data.msg,
duration:3000,
icon:"none",
success:function(){
wx.redirectTo({
url: '../userLogin/login',
})
}
})
}
}
})
},
followMe:function(e){
var me = this;
var user = app.getGlobalUserInfo();
var userId = user.id;
var publisherId = me.data.publisherId;
var followType = e.currentTarget.dataset.followtype;
//1:关注 0：取消关注
var url ='';
if (followType == '1') {
url = '/user/beyourfans?userId=' + publisherId + '&fanId=' + userId;
} else {
url = '/user/dontbeyourfans?userId=' + publisherId + '&fanId=' + userId;
}
wx.showLoading();
wx.request({
url: app.serverUrl+url,
method:'POST',
header: {
'content-type': 'application/json', // 默认值
'headerUserId': user.id,
'headerUserToken': user.userToken
},
success:function(){
wx.hideLoading();
if (followType == '1') {
me.setData({
isFollow: true
})
} else {
me.setData({
isFollow: false
})
}
}
})
},
logout:function(params){
//var user = app.userInfo;
//fixme 修改原有的全局对象为本地缓存
var user = app.getGlobalUserInfo();
var serverUrl = app.serverUrl;
wx.showLoading({
title: '请等待...',
});
// 调用后端
wx.request({
url: serverUrl + '/logout?userId='+user.id,
method: "POST",
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data);
wx.hideLoading();
if (res.data.status == 200) {
// 注销成功
wx.showToast({
title: '注销成功',
icon: 'success',
duration: 2000
});
//清除全局用户对象
//app.userInfo = null;
//注销以后，清空缓存
wx.removeStorageSync('userInfo')
//页面跳转
wx.navigateTo({
url: '../userLogin/login',
})
}
}
})
},
changeFace:function(){
var me = this;
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album'],
success:function(res) {
var tempFilePaths = res.tempFilePaths;
console.log(tempFilePaths);
wx.showLoading({
title: '上传中...',
})
var serverUrl = app.serverUrl;
//fixme 修改原有的全局对象为本地缓存
var userInfo = app.getGlobalUserInfo();
wx.uploadFile({
url: serverUrl+'/user/uploadFace?userId='+userInfo.id,
filePath: tempFilePaths[0],
name: 'file',
header: {
'content-type': 'application/json', // 默认值
'headerUserId':userInfo.id,
'headerUserToken':userInfo.userToken
},
success: function (res) {
var data = JSON.parse(res.data);
console.log(data);
wx.hideLoading();
if(data.status == 200){
wx.showToast({
title: '上传成功',
icon: "success"
});
var imageUrl = data.data;
me.setData({
faceUrl: serverUrl+imageUrl
});
} else if (data.status == 500){
wx.showToast({
title: data.msg
});
}
}
})
}
})
},
uploadVideo:function(){
// videoUtil.uploadVideo();
var me =this;
wx.chooseVideo({
sourceType: ['album'],
success(res) {
console.log(res);
var duration = res.duration;
var tmpheight = res.height;
var tmpwidth = res.width;
var tmpVideoUrl = res.tempFilePath;
var tmpCoverUrl = res.thumbTempFilePath;
if(duration>300){
wx.showToast({
title: '视频长度不能超过5分钟...',
icon:"none",
duration:2500
})
} else if(duration<3){
wx.showToast({
title: '视频长度太短，请上传超过3秒的视频...',
icon: "none",
duration: 2500
})
}else{
//打开选择bgm页面
wx.navigateTo({
url: '../chooseBgm/chooseBgm?duration=' + duration
+ "&tmpheight=" + tmpheight
+ "&tmpwidth=" + tmpwidth
+ "&tmpVideoUrl=" + tmpVideoUrl
+ "&tmpCoverUrl=" + tmpCoverUrl
,
})
}
}
})
}
})
mine.js
发现点击是否关注时粉丝数量没有进行同步，在mine.js中进行粉丝数量动态显示
success:function(){
wx.hideLoading();
if (followType == '1') {
me.setData({
isFollow: true,
fansCounts:++me.data.fansCounts
})
} else {
me.setData({
isFollow: false,
fansCounts: --me.data.fansCounts
})
}
var videoUtil = require('../../utils/videoUtil.js')
const app = getApp()
Page({
data: {
faceUrl: "../resource/images/noneface.png",
isMe:true,
isFollow:false
},
onLoad: function (params) {
var me = this;
// var user = app.userInfo;
//fixme 修改原有的全局对象为本地缓存
var user = app.getGlobalUserInfo();
var userId = user.id;
var publisherId = params.publisherId;
if (publisherId != null && publisherId != '' && publisherId!=undefined) {
userId = publisherId;
me.setData({
isMe:false,
publisherId: publisherId
})
}
wx.showLoading({
title: '请等待...',
});
var serverUrl = app.serverUrl;
wx.request({
url: serverUrl + '/user/query?userId=' + userId +"&fanId="+user.id,
method: "POST",
header: {
'content-type': 'application/json', // 默认值
'userId':user.id,
'userToken':user.userToken
},
success: function (res) {
console.log(res.data);
wx.hideLoading();
if (res.data.status == 200) {
var userInfo= res.data.data;
var faceUrl = "../resource/images/noneface.png";
if (userInfo.faceImage != null && userInfo.faceImage != '' && userInfo.faceImage!=undefined){
faceUrl = serverUrl + userInfo.faceImage;
}
me.setData({
faceUrl: faceUrl,
fansCounts: userInfo.fansCounts,
followCounts: userInfo.followCounts,
receiveLikeCounts: userInfo.receiveLikeCounts,
nickname: userInfo.nickname,
isFollow: userInfo.follow
});
} else if (res.data.status == 502){
wx.showToast({
title: res.data.msg,
duration:3000,
icon:"none",
success:function(){
wx.redirectTo({
url: '../userLogin/login',
})
}
})
}
}
})
},
followMe:function(e){
var me = this;
var user = app.getGlobalUserInfo();
var userId = user.id;
var publisherId = me.data.publisherId;
var followType = e.currentTarget.dataset.followtype;
//1:关注 0：取消关注
var url ='';
if (followType == '1') {
url = '/user/beyourfans?userId=' + publisherId + '&fanId=' + userId;
} else {
url = '/user/dontbeyourfans?userId=' + publisherId + '&fanId=' + userId;
}
wx.showLoading();
wx.request({
url: app.serverUrl+url,
method:'POST',
header: {
'content-type': 'application/json', // 默认值
'headerUserId': user.id,
'headerUserToken': user.userToken
},
success:function(){
wx.hideLoading();
if (followType == '1') {
me.setData({
isFollow: true,
fansCounts:++me.data.fansCounts
})
} else {
me.setData({
isFollow: false,
fansCounts: --me.data.fansCounts
})
}
}
})
},
logout:function(params){
//var user = app.userInfo;
//fixme 修改原有的全局对象为本地缓存
var user = app.getGlobalUserInfo();
var serverUrl = app.serverUrl;
wx.showLoading({
title: '请等待...',
});
// 调用后端
wx.request({
url: serverUrl + '/logout?userId='+user.id,
method: "POST",
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data);
wx.hideLoading();
if (res.data.status == 200) {
// 注销成功
wx.showToast({
title: '注销成功',
icon: 'success',
duration: 2000
});
//清除全局用户对象
//app.userInfo = null;
//注销以后，清空缓存
wx.removeStorageSync('userInfo')
//页面跳转
wx.navigateTo({
url: '../userLogin/login',
})
}
}
})
},
changeFace:function(){
var me = this;
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album'],
success:function(res) {
var tempFilePaths = res.tempFilePaths;
console.log(tempFilePaths);
wx.showLoading({
title: '上传中...',
})
var serverUrl = app.serverUrl;
//fixme 修改原有的全局对象为本地缓存
var userInfo = app.getGlobalUserInfo();
wx.uploadFile({
url: serverUrl+'/user/uploadFace?userId='+userInfo.id,
filePath: tempFilePaths[0],
name: 'file',
header: {
'content-type': 'application/json', // 默认值
'headerUserId':userInfo.id,
'headerUserToken':userInfo.userToken
},
success: function (res) {
var data = JSON.parse(res.data);
console.log(data);
wx.hideLoading();
if(data.status == 200){
wx.showToast({
title: '上传成功',
icon: "success"
});
var imageUrl = data.data;
me.setData({
faceUrl: serverUrl+imageUrl
});
} else if (data.status == 500){
wx.showToast({
title: data.msg
});
}
}
})
}
})
},
uploadVideo:function(){
// videoUtil.uploadVideo();
var me =this;
wx.chooseVideo({
sourceType: ['album'],
success(res) {
console.log(res);
var duration = res.duration;
var tmpheight = res.height;
var tmpwidth = res.width;
var tmpVideoUrl = res.tempFilePath;
var tmpCoverUrl = res.thumbTempFilePath;
if(duration>300){
wx.showToast({
title: '视频长度不能超过5分钟...',
icon:"none",
duration:2500
})
} else if(duration<3){
wx.showToast({
title: '视频长度太短，请上传超过3秒的视频...',
icon: "none",
duration: 2500
})
}else{
//打开选择bgm页面
wx.navigateTo({
url: '../chooseBgm/chooseBgm?duration=' + duration
+ "&tmpheight=" + tmpheight
+ "&tmpwidth=" + tmpwidth
+ "&tmpVideoUrl=" + tmpVideoUrl
+ "&tmpCoverUrl=" + tmpCoverUrl
,
})
}
}
})
}
})
mine.js
微信小程序_(校园视)开发视频的展示页_下的更多相关文章
- 微信小程序_(校园视)开发视频的展示页_上
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_(校园视)开发上传视频业务
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_(校园视)开发用户注册登陆
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 从微信小程序到鸿蒙js开发【13】——list加载更多&回到顶部
鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 目录: 1.list加载更多 2.list回到顶部 3.<从微信小程序到鸿蒙js开发>系列文章合集 1.list加 ...
- 微信小程序购物商城系统开发系列-目录结构
上一篇我们简单介绍了一下微信小程序的IDE(微信小程序购物商城系统开发系列-工具篇),相信大家都已经蠢蠢欲试建立一个自己的小程序,去完成一个独立的商城网站. 先别着急我们一步步来,先尝试下写一个自己的 ...
- 微信小程序购物商城系统开发系列-工具篇
微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统.新的生态,未来大部分应用场景都将 ...
- 微信小程序购物商城系统开发系列
微信小程序购物商城系统开发系列 微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统. ...
- 从微信小程序到鸿蒙js开发【11】——页面路由
目录: 1.router.push()&wx.navigateTo() 2.router.replace()&wx.redirectTo() 3.router.back()&w ...
- 从微信小程序到鸿蒙js开发【12】——storage缓存&自动登录
鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?[课程入口] 正文: 在应用开发时,我们常需要将一些数据缓存到本地,以提升用户体验.比如在一个电商的app中,如果希望用户登录成功后,下次打 ...
随机推荐
- ArrayList，LinkedList，Vector区别.TreeSet，TreeSet，LinkedHashSet区别
ArrayList: 基于数组的数据结构,地址连续,一旦数据保存好了,查询效率比较高,但是因为其地址连续,所以增删数据需要移动数据,影响速度 内部数组长度默认为10,当需要扩容时,数组长度按1.5倍增 ...
- id和class的区别
id和class是定义css样式用到的,不同的是定义样式时的写法不一样,使用id选择样式时,定义的格式为 #main{width:20px;} ,使用class时用到的是 .main{width:20 ...
- PS 中混合模式
1.正常模式 2. 溶解 3. 变暗 : 把两幅图中较暗的区域显示出来 4.正片叠底 总体变暗,把图层中较浅的颜色由下一图层较深的颜色显现(和滤色相反) 7. 深色 取较小的颜色 8. ...
- Oracle层次查询start with connect by
博客参考:https://www.cnblogs.com/jerryxing/articles/2339352.html start with connect by 层次查询(Hierarchical ...
- Invalid property value
又见这个错误!头几天同事遇到这个问题,我查到去年写的并按此解决了,原文在这里,查了半天,才查出是ftShortInt造成的这个错误. 当我们在设计期将ClientQuery.Active设置为True ...
- Phoenix设置联合主键
1例如 create table test12(email varchar not null,id integer not null,name varchar not null,age integer ...
- MySQL 数据类型简介 创建数据表及其字段约束
数据类型介绍 MySQL 数据类型分类 整型 浮点型 字符类型(char与varchar) 日期类型 枚举与集合 具体数据类型见这篇博客 MySQL表操作中的约束 primary key 主键约束 非 ...
- IntelliJ IDEA和Eclipse快捷键对比总结
- Django REST Framework(DRF)_第三篇
DRF版本控制 介绍 我们在看APIView源码时可以看到,版本和版本控制类是通过determine_version的返回值获取的 version, scheme = self.determine_v ...
- 数据库——Oracle(1)
1 Oracle数据库:ORACLE数据库系统是美国ORACLE(甲骨文)研发并提供的款关系型数据库管理系统,占据市场的主要的份额. 目前常用版本:Oracle9i,Oracle10g,Oracle1 ...