前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >手机查看电脑的视频,基于springboot制作的一个简易个人视频网站

手机查看电脑的视频,基于springboot制作的一个简易个人视频网站

作者头像
小王不头秃
发布2024-06-19 16:50:36
1520
发布2024-06-19 16:50:36
举报

简介

为什么突然想起来做这个呢,还是因为手机内存些许有些少,电脑上的学习资料直接用电脑看不是很方便,还是想直接用手机看,这就萌生了这个想法,毕竟作为新时代的新青年,俺还是很爱学习的

实现思路

这一次实现就比较简单了,不需要数据库等方面的使用,主要使用的就是基础的java文件操作

查看固定文件夹下所有的视频文件

这里可以直接使用java的文件操作就可以,直接根据文件夹的路径,扫描文件夹下的所有文件,把这些文件的名称返回,后期需要使用这些文件名称与访问文件的映射地址进行拼接,从而实现对文件的读取

访问文件

在我的印象里,这里直接通过本地路径访问视频文件是无法使用的,所以必须设置一个虚拟映射,例如我这里设置的就是将file/对应本地的E:/file/video/,然后与上面拿到的文件名称进行拼接,就可以实现对本地文件的访问。例如我要访问E:/file/video/我又毕业啦!!.mp4,就直接访问ip:端口号/file/我又毕业啦!!.mp4即可

重要代码

获取所有的视频文件名称

代码语言:javascript
复制
   /**
     * 这里的path是本地存放视频文件夹实际的路径
     * @param path
     * @return
     */
     public static List getAllFileName(String path) {
         ArrayList<String> fileNameList = new ArrayList<String>();
         boolean flag = false;
         File file = new File(path);
         //获取文件夹下所有的文件
         File[] tempList = file.listFiles();
         //把文件名称添加至列表之中
         for (int i = 0; i < tempList.length; i++) {
             if (tempList[i].isFile()) {
                 fileNameList.add(tempList[i].getName());
             }
         }
         return fileNameList;
     }

设置文件虚拟路径映射

这里设置的原因,就是利用springboot的虚拟路径映射来访问本地视频文件

这里先使用yml文件设置一下映射的路径

代码语言:javascript
复制
xiaow:
  video:
    upload: E:/file/video
    mapping: /file

然后需要配置一下config

代码语言:javascript
复制
@Configuration
public class AppConfig extends WebMvcConfigurerAdapter {
 
    @Value("${xiaow.video.upload}")
    private String uploadUrl;


    @Value("${xiaow.video.mapping}")
    private String mappingUrl;


    /**
     * 这里配置一下虚拟映射,即我们访问file/**,但实际访问的资源是E:/file/video/**,从而实现对本地文件的访问
     * @param registry
     */
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        registry.addResourceHandler(mappingUrl+"/**").addResourceLocations("file:"+ uploadUrl + File.separator);
        super.addResourceHandlers(registry);
    }
}

controller层传递文件数据

这里主要的作用就是返回存放视频的文件夹下的所有视频的名称,方便对这些视频进行访问

代码语言:javascript
复制
@RestController
@RequestMapping("/file")
public class FileController {
    /**
     * 获取所有的视频文件的名称,用于访问本地文件时使用
     * @param path
     * @return
     */
    @GetMapping("/getFiles")
    public List<String> getFiles(String path){
        return ReadFileUtils.getAllFileName(path);
    }
}

前端

前端主要的就是ajax来访问接口,从而实现文件的展示,博主前端比较拉,就不献丑了,大佬们可以自己写一个非常哇塞的前端

手机进行访问电脑资源

  • 这里关键的就是手机和电脑要在一个局域网下,那么只要两台设备在一个wifi下就可以,当然如果各位有服务器,部署到服务器就没有这个限制了
  • 访问资源的url是 内网ip:端口号/videolist.html这种方式,查看自己的电脑的内网ip,直接打开终端输入
代码语言:javascript
复制
ipconfig

即可查看,如下图

然后直接访问即可,例如博主的url是这样 http://192.168.0.105:8001/videolist.html

总结

最后用手机访问一下,是可以使用的 但前端有点拉,大家主动忽略一下

就到这了,兄弟们有兴趣的可以自己实现一下,需要源码的兄弟们可以关注一下下面的公众号来获取源码,回复小视频网站即可

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-06-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简介
  • 实现思路
    • 查看固定文件夹下所有的视频文件
      • 访问文件
      • 重要代码
        • 获取所有的视频文件名称
          • 设置文件虚拟路径映射
            • controller层传递文件数据
            • 前端
            • 手机进行访问电脑资源
            • 总结
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档