资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/SpringBoot 仿抖音短视频小程序开发（三）

SpringBoot 仿抖音短视频小程序开发（三）

songze / 1729人阅读

摘要：仿抖音短视频小程序开发一项目的简介仿抖音短视频小程序开发二项目功能分析与具体实现源代码仿抖音短视频小程序开发全栈式实战项目短视频后台管理系统小程序的后台管理系统涉及的技术栈框架一用户列表的获取与分页前端代码用户列表展示的表格底部

</>复制代码 
  1. SpringBoot 仿抖音短视频小程序开发（一）：项目的简介(https://segmentfault.com/a/11...
    SpringBoot 仿抖音短视频小程序开发（二）：项目功能分析与具体实现(https://segmentfault.com/a/11...
    源代码： SpringBoot 仿抖音短视频小程序开发 全栈式实战项目（https://gitee.com/scau_zns/sh...）
    短视频后台管理系统：(https://gitee.com/scau_zns/sh...
小程序的后台管理系统

涉及的技术栈：Bootstrap + jQuery + jGrid + SSM框架 + zookeeper

一、用户列表的获取与分页

前端代码：

</>复制代码 
  1.             
  2.                   
  3.                 
  4.                   
  5.                 
      
  6.

jGrid发送请求获取数据封装好展示到页面

</>复制代码 
  1. // 用户列表
  2.         var handleList = function() {
  3.             
  4.             // 上下文对象路径
  5.             var hdnContextPath = $("#hdnContextPath").val();
  6.             var apiServer = $("#apiServer").val();
  7.             
  8.             var jqGrid = $("#usersList");  
  9.             jqGrid.jqGrid({  
  10.                 caption: "短视频用户列表",  
  11.                 url: hdnContextPath + "/users/list.action",  
  12.                 mtype: "post",  
  13.                 styleUI: "Bootstrap",//设置jqgrid的全局样式为bootstrap样式  
  14.                 datatype: "json",  
  15.                 colNames: ["ID", "头像", "用户名", "昵称", "粉丝数", "关注数", "获赞数"],  
  16.                 colModel: [  
  17.                     { name: "id", index: "id", width: 30, sortable: false, hidden: false },  
  18.                     { name: "faceImage", index: "username", width: 50, sortable: false,
  19.                         formatter:function(cellvalue, options, rowObject) {
  20.                             
  21.                             var src = apiServer + cellvalue;
  22.                             var img = "
  23.                 
  24.                     
  25.                         
  26.                         
  27.                     
  28.                     
  29.                         
  30.                         
  31.                     
  32.                     
  33.                 
  34.

使用jGrid发送请求给后台

</>复制代码 
  1.         // 条件查询所有用户列表
  2.         $("#searchUserListButton").click(function(){
  3.             var searchUsersListForm = $("#searchUserListForm");
  4.             jqGrid.jqGrid().setGridParam({ 
  5.                 page: 1,
  6.                 url: hdnContextPath + "/users/list.action?" + searchUsersListForm.serialize(),
  7.             }).trigger("reloadGrid");
  8.         });
二、背景音乐BGM的上传、查询和删除

上传 
</>复制代码 
  1.     $("#file").fileupload({
  2.         pasteZone: "#bgmContent",
  3.         dataType: "json",
  4.         done: function(e, data) {
  5.             console.log(data);
  6.             
  7.             if (data.result.status != "200") {
  8.                 alert("长传失败...");
  9.             } else {
  10.                 var bgmServer = $("#bgmServer").val();
  11.                 var url = bgmServer + data.result.data;
  12.                 $("#bgmContent").html("点我播放");
  13.                 $("#path").attr("value", data.result.data);
  14.             }
  15.             
  16.         }
  17.     });

后台接口保存BGM的方法参考上传头像的方法

分页查询

参考用户列表信息的分页查询多少

删除BGM 
</>复制代码 
  1.     var deleteBgm = function(bgmId) {
  2.     var flag = window.confirm("是否确认删除？？？");
  3.     if (!flag) {
  4.         return;
  5.     }
  6.     $.ajax({
  7.         url: $("#hdnContextPath").val() + "/video/delBgm.action?bgmId=" + bgmId,
  8.         type: "POST",
  9.         success: function(data) {
  10.             if (data.status == 200 && data.msg == "OK") {
  11.                 alert("删除成功~~");
  12.                 var jqGrid = $("#bgmList");  
  13.                 jqGrid.jqGrid().trigger("reloadGrid");
  14.             }
  15.         }
  16.     })
  17. }
三、举报管理 禁止播放 

</>复制代码 
  1. var forbidVideo = function(videoId) {
  2.     var flag = window.confirm("是否禁播");
  3.     if (!flag) {
  4.         return;
  5.     }
  6.     $.ajax({
  7.         url: $("#hdnContextPath").val() + "/video/forbidVideo.action?videoId=" + videoId,
  8.         type: "POST",
  9.         async: false,
  10.         success: function(data) {
  11.             if(data.status == 200 && data.msg == "OK") {
  12.                 alert("操作成功");
  13.                 var jqGrid = $("#usersReportsList");  
  14.                 //reloadGrid是重新加载表格
  15.                 jqGrid.jqGrid().trigger("reloadGrid");
  16.             } else {
  17.                 console.log(JSON.stringify(data));
  18.             }
  19.         }
  20.     })
  21. }
四、后台管理系统增加或删除BGM，向zookeeper-server创建子节点，让小程序后端监听【重点】 1、首先安装Zookeeper到Linux上，启动服务器

2、编写zk客户端代码： 
</>复制代码 
  1. import org.apache.curator.framework.CuratorFramework;
  2. import org.apache.zookeeper.CreateMode;
  3. import org.apache.zookeeper.ZooDefs.Ids;
  4. import org.slf4j.Logger;
  5. import org.slf4j.LoggerFactory;
  6. public class ZKCurator {
  7.     //zk客户端
  8.     private CuratorFramework client = null;
  9.     
  10.     final static Logger log = LoggerFactory.getLogger(ZKCurator.class);
  11.  
  12.     public ZKCurator(CuratorFramework client) {
  13.         this.client = client;
  14.     }
  15.     
  16.     public void init() {
  17.         client = client.usingNamespace("admin");
  18.         try {
  19.             //判断在admin命名空间下是否有bgm节点 /admin/bgm
  20.             if( client.checkExists().forPath("/bgm") == null ) {
  21.                 //对于zk来讲，有两种类型的节点，一种是持久节点（永久存在，除非手动删除），另一种是临时节点（会话断开，自动删除）
  22.                 client.create().creatingParentContainersIfNeeded()
  23.                 .withMode(CreateMode.PERSISTENT) //持久节点
  24.                 .withACL(Ids.OPEN_ACL_UNSAFE)  //匿名权限
  25.                 .forPath("/bgm"); 
  26.                 log.info("zookeeper客户端连接初始化成功");
  27.                 log.info("zookeeper服务端状态：{}",client.isStarted());
  28.             }
  29.         } catch (Exception e) {
  30.             log.error("zookeeper客户端连接初始化失败");
  31.             e.printStackTrace();
  32.         }
  33.     }
  34.     
  35.     /**
  36.      * 增加或者删除Bgm，向zk-server创建子节点，供小程序后端监听
  37.      * @param bgmId
  38.      * @param operType
  39.      */
  40.     public void sendBgmOperator(String bgmId, String operObject) {
  41.         try {
  42.             client.create().creatingParentContainersIfNeeded()
  43.             .withMode(CreateMode.PERSISTENT) //持久节点
  44.             .withACL(Ids.OPEN_ACL_UNSAFE)  //匿名权限
  45.             .forPath("/bgm/" + bgmId, operObject.getBytes());
  46.         } catch (Exception e) {
  47.             e.printStackTrace();
  48.         } 
  49.     }
  50. }
3、在applicationContext-zookeeper.xml配置zookeeper： 
</>复制代码 
  1.     
  2.     
  3.         
  4.         
  5.         
  6.         
  7.     
  8.     
  9.     
  10.     
  11.         
  12.         
  13.         
  14.         
  15.     
  16.      
  17.      
  18.     
  19.         
  20.
4、上传或者删除BGM时调用VideoServiceImpl.java的方法 
</>复制代码 
  1.     @Autowired
  2.     private ZKCurator zKCurator;
  3.     @Override
  4.     public void addBgm(Bgm bgm) {
  5.         String id = sid.nextShort();
  6.         bgm.setId(id);
  7.         bgmMapper.insert(bgm);
  8.         Map map = new HashMap<>();
  9.         map.put("operType", BGMOperatorTypeEnum.ADD.type);
  10.         map.put("path", bgm.getPath());
  11.         zKCurator.sendBgmOperator(id, JSONUtils.toJSONString(map));
  12.     }
  13.     @Override
  14.     public void deleteBgm(String id) {
  15.         Bgm bgm = bgmMapper.selectByPrimaryKey(id);
  16.         
  17.         bgmMapper.deleteByPrimaryKey(id);
  18.         Map map = new HashMap<>();
  19.         map.put("operType", BGMOperatorTypeEnum.DELETE.type);
  20.         map.put("path", bgm.getPath());
  21.         zKCurator.sendBgmOperator(id, JSONUtils.toJSONString(map));
  22.     }
5、小程序编写代码监听zookeeper的节点，并对其做出相应的删除和上传操作【重点】

初始化zookeeper客户端

</>复制代码 
  1.    private CuratorFramework client = null;
  2.     final static Logger log = LoggerFactory.getLogger(ZKCuratorClient.class);
  3. //    public static final String ZOOKEEPER_SERVER = "120.79.18.36:2181";
  4.     public void init() {
  5.         if(client != null) {
  6.             return;
  7.         }
  8.         //重试策略
  9.         RetryPolicy retryPolicy = new ExponentialBackoffRetry(1000, 5);
  10.         //创建zk客户端  120.79.18.36:2181
  11.         client = CuratorFrameworkFactory.builder().connectString(resourceConfig.getZookeeperServer()).sessionTimeoutMs(10000)
  12.                 .retryPolicy(retryPolicy).namespace("admin").build();
  13.         //启动客户端
  14.         client.start();
  15.         try {
  16.             addChildWatch("/bgm");
  17.         } catch (Exception e) {
  18.             e.printStackTrace();
  19.         }
  20.     }

监听zk-server的节点，当短视频后台管理系统上传或者删除某个BGM的时候，小程序后台服务器通过Zookeeper监听自动下载背景音乐

</>复制代码 
  1. public void addChildWatch(String nodePath) throws Exception {
  2.         final PathChildrenCache cache = new PathChildrenCache(client, nodePath, true);
  3.         cache.start();
  4.         cache.getListenable().addListener(new PathChildrenCacheListener() {
  5.             @Override
  6.             public void childEvent(CuratorFramework client, PathChildrenCacheEvent event) throws Exception {
  7.                 if(event.getType().equals(PathChildrenCacheEvent.Type.CHILD_ADDED)){
  8.                     log.info("监听到事件CHILD_ADDED");
  9.                     //1. 从数据库查询bgm对象，获取路径Path
  10.                     String path = event.getData().getPath();
  11.                     String operatorObjStr = new String(event.getData().getData());
  12.                     Map map = JsonUtils.jsonToPojo(operatorObjStr, Map.class);
  13.                     String operatorType = map.get("operType");
  14.                     String songPath = map.get("path");
  15. //                    String[] arr = path.split("/");
  16. //                    String bgmId = arr[arr.length-1];
  17. //                    Bgm bgm =  bgmService.queryBgmById(bgmId);
  18. //                    if(bgm == null){
  19. //                        return;
  20. //                    }
  21.                     //1.1 bgm所在的相对路径
  22. //                String songPath = bgm.getPath();
  23.                     //2. 定义保存到本地的bgm路径
  24. //                String filePath = "E:imooc_videos_dev" + songPath;
  25.                     String filePath = resourceConfig.getFileSpace() + songPath;
  26.                     //3. 定义下载的路径（播放url）
  27.                     String[] arrPath = songPath.split(""); //windows
  28. //                    String[] arrPath = songPath.split("/"); //linux
  29.                     String finalPath = "";
  30.                     //3.1 处理url的斜杠以及编码
  31.                     for(int i=0; i           
  32.                
  33.                                            
  34.                        
  35.
抖音短视频教学视频 抖音短视频玩法技巧 抖音短视频特效玩法 抖音短视频怎么玩

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/77553.html

相关文章

  • SpringBoot 仿抖音短视频小程序开发（一）

    摘要：一项目简介模仿抖音做的一个短视频微信小程序，用搭建小程序后台，用框架搭建短视频后台管理系统，小程序后台通过分布式监听节点自动下载或删除短视频后台管理系统上传的视频。 一、项目简介 模仿抖音做的一个短视频微信小程序，用SpringBoot搭建小程序后台，用SSM框架搭建短视频后台管理系统，小程序后台通过分布式zookeeper监听节点自动下载或删除短视频后台管理系统上传的视频。 二、环境...

    CoffeX 评论0 收藏0

发表评论

登陆后可评论

0条评论

songze

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<