DengXJ
/
hexo-blog-dist
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Packaged project.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 Commits
1 Branch
0 Tags
12 MiB
Branch: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
hexo-blog-dist/2020/06/03/pocketyun/index.html

514 lines
28 KiB
Raw Permalink Normal View History Unescape

[build]2023-06-04 14:18:14
2 years ago
<!DOCTYPE html>
<html lang="zh">
<head>
<!-- 元数据 -->
<meta charset="utf-8">
<link rel="icon" href="/images/favicon.ico">
<title>袖珍网盘吧 | YongKJ</title>
<meta name="author" content="yongkj" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="format-detection" content="telphone=no, email=no" />
<meta name="description" itemprop="description" content="A pure heart and few desires." />
<meta name="description" content="《袖珍网盘吧》是我们小组耗费大量的时间和精力完成的又一个课程设计项目。这个项目主要实现的功能是轻松管理上传到服务器上的文件，可在线预览一些常见的媒体文件，例如图片文件、音频文件、视频文件和文本文件等等，方便在不同的设备上访问服务器上的文件，做到手机和电脑之间快速访问服务器上的文件，实现文件的快速共享功能。 在项目开发过程中，我们遇到了不少难以解决的困难，因为我们是采用前后端分离的开发方式，也是">
<meta property="og:type" content="article">
<meta property="og:title" content="袖珍网盘吧">
<meta property="og:url" content="https://blog.yongkj.cn/2020/06/03/pocketyun/index.html">
<meta property="og:site_name" content="YongKJ">
<meta property="og:description" content="《袖珍网盘吧》是我们小组耗费大量的时间和精力完成的又一个课程设计项目。这个项目主要实现的功能是轻松管理上传到服务器上的文件，可在线预览一些常见的媒体文件，例如图片文件、音频文件、视频文件和文本文件等等，方便在不同的设备上访问服务器上的文件，做到手机和电脑之间快速访问服务器上的文件，实现文件的快速共享功能。 在项目开发过程中，我们遇到了不少难以解决的困难，因为我们是采用前后端分离的开发方式，也是">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://blog.yongkj.cn/2020/06/03/pocketyun/20200603100332-768x432.png">
<meta property="article:published_time" content="2020-06-03T09:33:52.000Z">
<meta property="article:modified_time" content="2023-05-30T04:26:16.724Z">
<meta property="article:author" content="yongkj">
<meta property="article:tag" content="共享">
<meta property="article:tag" content="网盘">
<meta property="article:tag" content="文件">
<meta property="article:tag" content="预览">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://blog.yongkj.cn/2020/06/03/pocketyun/20200603100332-768x432.png">
<meta name="twitter:site" content="@Candiinya">
<link rel="alternate" href="atom.xml" type="application/atom+xml">
<!-- 站点验证相关 -->
<!-- 样式表文件 -->
<link rel="stylesheet" id="kratos-css" href="/css/kratosr.min.css" type="text/css" media="all">
<link rel="stylesheet" id="highlight-css" href="/css/highlight.min.css" type="text/css" media="all">
<link rel="stylesheet" id="fontawe-css" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" type="text/css" media="all">
<link rel="stylesheet" id="nprogress-css" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" type="text/css" media="all">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
<link rel="stylesheet" id="darkmode-css" href="/css/kr-dark.min.css" type="text/css" media="all">
<!-- 不得不预先加载的一些JS文件 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/qrcode_js@1.0.0/qrcode.min.js"></script>
<meta name="generator" content="Hexo 5.2.0"></head>
<body class="custom-background">
<div id="kratos-wrapper">
<div id="kratos-page">
<div id="kratos-header">
<div class="nav-toggle"><a class="kratos-nav-toggle js-kratos-nav-toggle"><i></i></a></div>
<header id="kratos-header-section">
<div class="container">
<div class="nav-header">
<div class="color-logo"><a href="/">YongKJ</a></div>
<nav id="kratos-menu-wrap">
<ul id="kratos-primary-menu" class="sf-menu">
<li><a href="/"><i class="fa fa-home"></i>首页</a></li>
<li><a href="/archives/"><i class="fa fa-file"></i>档案馆</a></li>
<li>
<a><i class="fa fa-link"></i>链接</a>
<ul class="sub-menu">
<li><a target="_blank" rel="noopener" href="http://software.yongkj.cn/software/">软件俱乐部</a></li>
<li><a target="_blank" rel="noopener" href="http://pocketyun.yongkj.cn/pocketyun/">袖珍网盘吧</a></li>
<li><a target="_blank" rel="noopener" href="http://study.yongkj.cn/">英语随身学</a></li>
</ul>
</li>
<li><a href="/atom.xml"><i class="fa fa-rss"></i>RSS 订阅</a></li>
<li><a href="/about/"><i class="fa fa-paper-plane"></i>关于我</a></li>
</ul>
</nav>
</div>
</div>
</header>
</div>
<div class="kratos-start kratos-hero-2">
<!-- <div class="kratos-overlay"></div> -->
<div class="kratos-cover kratos-cover-2 text-center">
<div class="desc desc2 animate-box">
<a href="/"><h2>YongKJ</h2><br><span>勇往直前，永不言弃</span></a>
</div>
</div>
</div>
<div id="kratos-blog-post">
<div class="container">
<div class="row">
<div id="main">
<section class="col-md-8">
<article>
<div class="kratos-hentry kratos-post-inner clearfix">
<header class="kratos-entry-header">
<h1 class="kratos-entry-title text-center">袖珍网盘吧</h1>
<div class="kratos-post-meta text-center">
<span>
<i class="fa fa-calendar"></i> 2020-06-03
<i class="fa fa-folder"></i> 分类于 <a class="label-link" href="/categories/%E9%A1%B9%E7%9B%AE%E7%BB%8F%E5%8E%86/">项目经历</a>
<i class="fa fa-user"></i> 作者 yongkj
<i class="fa fa-edit"></i>
~1.54K
字
</span>
</div>
</header>
<div class="kratos-post-content">
<hr />
<img src="/2020/06/03/pocketyun/20200603100404-1024x576.png" class="" title="20200603100404-1024x576.png">
<p>《袖珍网盘吧》是我们小组耗费大量的时间和精力完成的又一个课程设计项目。这个项目主要实现的功能是轻松管理上传到服务器上的文件，可在线预览一些常见的媒体文件，例如图片文件、音频文件、视频文件和文本文件等等，方便在不同的设备上访问服务器上的文件，做到手机和电脑之间快速访问服务器上的文件，实现文件的快速共享功能。</p>
<p>在项目开发过程中，我们遇到了不少难以解决的困难，因为我们是采用前后端分离的开发方式，也是第一次采用这样的开发方式，自然困难重重。但是有付出就会有一定的收获，当我们在埋头在网上查阅相关问题的资料时，不知不觉中我们也了解到了很多解决问题的思路和方法，提高了自身解决问题的能力，甚至会达到触类旁通的效果。总之这次的课程设计让我们获益良多，我们小组所追求的目标是为大家带来便捷和乐趣，也希望大家喜欢这个作品。</p>
<p>袖珍网盘吧，可以轻松实现手机和电脑之间的文件共享，除此之外，还可以听音乐、看视频等等。这是一个小巧的个人网盘，一个功能强大的随身听，一个无需带在身上的移动U盘。快来使用吧，为学习和生活带来方便和欢乐！</p>
<h2 id="功能特性："><a href="#功能特性：" class="headerlink" title="功能特性："></a><strong>功能特性：</strong></h2><p>1.用户可以注册新的账号，登录账号，登录之后也可以退出账号，修改账号信息，甚至修改账号，其中最高权限的账号可以删除其他账号</p>
<p>2.每个用户的初始空间大小为1GB，当执行上传文件、删除文件或编辑文本文件的操作后，用户当前可使用的空间大小就会得到更新</p>
<p>3.可对文件和文件夹进行基本的一些操作，可以新建文件夹，文件夹重命名，删除文件夹，也可以上传文件，下载文件（点击文件名即可下载文件），文件重命名，删除文件</p>
<p>4.上传链接功能，可以上传文件下载链接（http或者https链接）到服务器上，实现文件的离线下载功能</p>
<p>5.文件批量管理功能，批量移动文件或文件夹，批量删除文件或文件夹，批量上传文件</p>
<p>6.文件排序功能，可对当前目录下的文件或文件夹进行排序操作，可以按照文件名、创建日期和文件大小升序或者降序排列</p>
<p>7.文件搜索功能，可对当前目录下的文件或文件夹进行搜索操作，方便对文件或文件夹执行其他操作</p>
<p>8.文件夹刷新功能，可以刷新当前目录，更新当前目录下的文件和文件夹，方便手机和电脑之间共享文件，当手机上传文件后，电脑即可刷新当前目录，查看上传的新文件</p>
<p>9.文件预览功能，可以在线预览常见的媒体文件，例如浏览图片文件，播放音频文件，观看视频文件，查看文本文件等等</p>
<p>10.除了可以查看文本文件以外，还可以编辑文本文件，常见的代码文件，例如可以高亮显示和编辑java文件、html文件、python文件、c文件等等</p>
<h2 id="用到的知识："><a href="#用到的知识：" class="headerlink" title="用到的知识："></a><strong>用到的知识：</strong></h2><p>1.本项目采用前后端分离的开发方式，前端和后端分别新建一个项目，各自独立开发，互不干扰，彼此之间通过json数据进行交互</p>
<p>2.前端采用Vue全家桶开发（vue-cli + vue2.6 + vuex + vue-router + axios），响应式框架采用<a target="_blank" rel="noopener" href="https://element.eleme.cn/">element-ui</a>桌面端组件库</p>
<p>3.本项目的网页UI具有简洁、大方和易于使用的特点，主要参考自<a target="_blank" rel="noopener" href="http://software.yongkj.cn/software/content?softwareId=179">Kiftd</a>（青阳网络文件传输系统）</p>
<p>4.后端采用SSM框架（Spring+SpringMVC+MyBatis）完成，另外，数据的跨域传输主要是通过配置Spring 拦截器来实现</p>
<p>5.本项目导入了多个开源项目，主要有<a target="_blank" rel="noopener" href="http://software.yongkj.cn/software/content?softwareId=305">particles.js</a>（轻量级粒子背景库）、<a target="_blank" rel="noopener" href="http://software.yongkj.cn/software/content?softwareId=302">Viewer.js</a>（强大的图片查看器）、<a target="_blank" rel="noopener" href="http://software.yongkj.cn/software/content?softwareId=303">APlayer</a>（超级好看的 HTML5 音乐播放器）、<a target="_blank" rel="noopener" href="http://software.yongkj.cn/software/content?softwareId=304">DPlayer</a>（支持弹幕的 HTML5 视频播放器）、<a target="_blank" rel="noopener" href="http://software.yongkj.cn/software/content?softwareId=307">Ace</a>（基于浏览器的代码编辑器）</p>
<p>6.后台的数据存储主要采用开源的Mariadb数据库来完成</p>
<p>官方网站：<a target="_blank" rel="noopener" href="http://pocketyun.yongkj.cn/pocketyun/">http://pocketyun.yongkj.cn/pocketyun/</a></p>
</div>
<div class="kratos-copyright text-center clearfix">
<h5>本作品采用 <a rel="license nofollow" target="_blank" href="http://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
</div>
<footer class="kratos-entry-footer clearfix">
<div class="post-like-donate text-center clearfix" id="post-like-donate">
<a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
<div class="share-wrap" style="display: none;">
<div class="share-group">
<a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
<div class="icon-wrap">
<i class="fa fa-qq"></i>
</div>
</a>
<a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
<div class="icon-wrap">
<i class="fa fa-star"></i>
</div>
</a>
<a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
<div class="icon-wrap">
<i class="fa fa-weixin"></i>
</div>
<div class="share-int">
<div class="qrcode" id="wechat-qr"></div>
<p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
</div>
</a>
<a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
<div class="icon-wrap">
<i class="fa fa-weibo"></i>
</div>
</a>
<a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
<div class="icon-wrap">
<i class="fa fa-facebook"></i>
</div>
</a>
<a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
<div class="icon-wrap">
<i class="fa fa-twitter"></i>
</div>
</a>
</div>
<script type="text/javascript">
$(()=>{
new QRCode("wechat-qr", {
text: "https://blog.yongkj.cn/2020/06/03/pocketyun/",
width: 150,
height: 150,
correctLevel : QRCode.CorrectLevel.H
});
});
function share(dest) {
const qqBase = "https://connect.qq.com/widget/shareqq/index.html?";
const weiboBase = "https://service.weibo.com/share/share.php?";
const qzoneBase = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
const facebookBase = "https://www.facebook.com/sharer/sharer.php?";
const twitterBase = "https://twitter.com/intent/tweet?";
const hostUrl = "https://blog.yongkj.cn/2020/06/03/pocketyun/";
const title = "「袖珍网盘吧」";
const excerpt = `
《袖珍网盘吧》是我们小组耗费大量的时间和精力完成的又一个课程设计项目。这个项目主要实现的功能是轻松管理上传到服务器上的文件，可在线预览一些常见的媒体文件，例如图片文件、音频文件、视频文件和文本文件等等，方便在不同的设备上访问服务器...`;
let _URL;
switch (dest) {
case "qq" : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy"; break;
case "weibo" : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt; break;
case "qzone" : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy"; break;
case "facebook" : _URL = facebookBase+"u="+hostUrl; break;
case "twitter" : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl; break;
}
window.open(_URL);
};
</script>
</div>
</div>
<div class="footer-tag clearfix">
<div class="pull-left">
<i class="fa fa-tags"></i>
<a class="tag-none-link" href="/tags/%E5%85%B1%E4%BA%AB/" rel="tag">共享</a>, <a class="tag-none-link" href="/tags/%E6%96%87%E4%BB%B6/" rel="tag">文件</a>, <a class="tag-none-link" href="/tags/%E7%BD%91%E7%9B%98/" rel="tag">网盘</a>, <a class="tag-none-link" href="/tags/%E9%A2%84%E8%A7%88/" rel="tag">预览</a>
</div>
<div class="pull-date">
<span>最后编辑：2023-05-30</span>
</div>
</div>
</footer>
</div>
<nav class="navigation post-navigation clearfix" role="navigation">
<div class="nav-previous clearfix">
<a title=" 感谢母亲恩" href="/2020/05/11/mother-s-day/">&lt; 上一篇</a>
</div>
<div class="nav-next clearfix">
<a title=" 世界真细小" href="/2020/09/03/mini-word/">下一篇 &gt;</a>
</div>
</nav>
</article>
</section>
</div>
<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
<aside id="krw-about" class="widget widget-kratos-about clearfix">
<div class="photo-background"></div>
<div class="photo-wrapper clearfix">
<div class="photo-wrapper-tip text-center">
<img class="about-photo" src="/images/avatar.webp" />
</div>
</div>
<div class="textwidget">
<p class="text-center">A pure heart and few desires.</p>
</div>
</aside>
<!-- Moved to about.ejs -->
<aside id="krw-categories" class="widget widget-categories clearfix">
<h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
<ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Java%E5%AD%A6%E4%B9%A0/">Java学习</a><span class="category-list-count">12</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AC%AC%E4%B8%80%E6%AC%A1/">第一次</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%8B%B1%E8%AF%AD%E5%AD%A6%E4%B9%A0/">英语学习</a><span class="category-list-count">8</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E9%9D%A2%E8%AF%95%E7%A7%AF%E7%B4%AF/">面试积累</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E9%9F%B3%E4%B9%90%E7%A9%BA%E9%97%B4/">音乐空间</a><span class="category-list-count">3</span></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E9%A1%B9%E7%9B%AE%E7%BB%8F%E5%8E%86/">项目经历</a><span class="category-list-count">3</span></li></ul>
</aside>
<aside id="krw-tags" class="widget widget-kratos-tags clearfix">
<h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
<div class="tag-clouds">
<a href="/tags/MySQL/" style="font-size: 0.6em;">MySQL</a> <a href="/tags/apility/" style="font-size: 0.6em;">apility</a> <a href="/tags/bus/" style="font-size: 0.6em;">bus</a> <a href="/tags/city/" style="font-size: 0.6em;">city</a> <a href="/tags/comfort/" style="font-size: 0.6em;">comfort</a> <a href="/tags/communication/" style="font-size: 0.6em;">communication</a> <a href="/tags/contribute/" style="font-size: 0.6em;">contribute</a> <a href="/tags/convenient/" style="font-size: 0.6em;">convenient</a> <a href="/tags/develop/" style="font-size: 0.6em;">develop</a> <a href="/tags/education/" style="font-size: 0.6em;">education</a> <a href="/tags/enhance/" style="font-size: 0.6em;">enhance</a> <a href="/tags/facility/" style="font-size: 0.6em;">facility</a> <a href="/tags/flight/" style="font-size: 0.6em;">flight</a> <a href="/tags/foreign/" style="font-size: 0.6em;">foreign</a> <a href="/tags/free/" style="font-size: 0.6em;">free</a> <a href="/tags/hello/" style="font-size: 0.6em;">hello</a> <a href="/tags/improve/" style="font-size: 0.8em;">improve</a> <a href="/tags/information/" style="font-size: 0.6em;">information</a>
</div>
</aside>
<aside id="krw-posts" class="widget widget-kratos-poststab">
<h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
<div class="tab-content">
<ul class="list-group">
<a class="list-group-item" href="/2023/06/04/mysql-interview-questions/"><i class="fa fa-book"></i> MySQL 面试题</a>
<a class="list-group-item" href="/2021/02/09/java-io-stream/"><i class="fa fa-book"></i> 输入输出流</a>
<a class="list-group-item" href="/2021/02/08/java-class-loading/"><i class="fa fa-book"></i> 类加载</a>
<a class="list-group-item" href="/2021/02/07/java-annotation/"><i class="fa fa-book"></i> 注解</a>
<a class="list-group-item" href="/2021/02/06/java-reflect/"><i class="fa fa-book"></i> 反射</a>
</ul>
</div>
</aside>
</section>
</div>
</div>
</div>
<footer>
<div id="footer">
<div class="kr-tool text-center">
<div class="tool">
<div class="box search-box">
<a href="/search/">
<span class="fa fa-search"></span>
</a>
</div>
<div class="box theme-box" id="darkmode-switch">
<span class="fa fa-adjust"></span>
</div>
</div>
<div class="box gotop-box">
<span class="fa fa-chevron-up"></span>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 footer-list text-center">
<ul class="kratos-social-icons">
<li><a target="_blank" rel="nofollow" href="https://t.me/CandyUnion"><i class="fa fa-telegram"></i></a></li>
<li><a target="_blank" rel="nofollow" href="https://twitter.com/Candiinya"><i class="fa fa-twitter"></i></a></li>
<li><a target="_blank" rel="nofollow" href="https://github.com/yongkj"><i class="fa fa-github"></i></a></li>
<li><a target="_blank" rel="nofollow" href="/atom.xml"><i class="fa fa-rss"></i></a></li>
</ul>
<ul class="kratos-copyright">
<div>
<li>&copy; 2023 yongkj 版权所有.</li>
<li>本站已运行<span id="span_dt">Loading...</span></li>
</div>
<div>
<li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
<li>Made with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by <a href="https://candinya.com" target="_blank" rel="nofollow">Candinya</a>.</li>
</div>
<div>
<li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
<li>Hosted on <a href="https://www.yongkj.cn" target="_blank">勇往直前</a></li>
</div>
<div>
</div>
</ul>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.js"></script>
<script>const notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));</script>
<div>
<canvas id="snow"></canvas>
<script async type="text/javascript" src="/js/snow.min.js"></script>
</div>
<script async src="/js/candy.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script defer src="/js/kratosr.min.js"></script>
<script defer src="/js/pjax.min.js"></script>
<script defer src="/js/kr-dark.min.js"></script>
</body>
</html>