如何搭建一个“不可告人的”私人专属网盘?教程拿去

虽然打造私人网盘的目的很不好意思说出来,但是一想到以后存一些东西再也不怕莫名其妙地蒸发掉了,就开心的睡不着啊。

好嘞,回到咱们今天的主题:如何打造一个私人专属网盘?本教程将使用React & SPA为技术基础,来完成这个应用的搭建。

整个过程将涉及以下3块知识点:

  • React 简介和环境搭建
  • node & npm 基本使用
  • React SPA 简单实践

React简介

React 是什么?对前端有所了解的同学,想必都或多或少听到过 React 这个名字。React 是由 Facebook 公司发起的一个开源前端框架。React 在诞生之初,就是对传统前端开发的一种颠覆。经过若干年的发展,React 已经成为了目前世界上最流行的前端框架,可能没有之一。

React,Vue.js 和 Angular.js 是目前主流的三大前端框架。很多互联网公司在招聘前端工程师时都会在招聘条件里写上要求掌握这三个框架当中的至少一种。

环境准备

在使用 React 之前,我们首先需要安装基于 node 的支撑环境。node 是一个基于 Chrome JS 引擎的 JS 运行环境,node 可以用来做很多事情,包括脚本开发,服务器端开发等等,由于和本教程主要内容无关,这里就不再赘述了。在本教程中,我们只需要 node 作为一个工具。React 的开发工具大部分是基于 node 的。在 node 的帮助下我们开发 React 应用会简单很多。

React 是一个纯前端框架,实际上我们也可以直接在网页端引入 React 的 JS,就像引用 jQuery 一样。不过现在并不推荐这种方式了。基于 node 的工具要好用很多。

打开终端,输入如下命令查看 node 的版本:

这样就说明 node 已经安装好了。

安装 create-react-app

在安装好 node 环境之后,我们就可以通过 npm 来安装各种工具和依赖了。npm 全称是 node package manager,即 node 的包管理工具,它的地位类似于 Ubuntu 中的 apt-get。后面很多地方我们都会使用 npm 来安装需要的包。

如果你使用的是实验楼的国内实验环境,或者是在自己的本地电脑上操作,推荐首先把 npm 的镜像地址设置成国内的淘宝镜像地址,这样安装 npm 包的速度会快很多:

在安装依赖之前,我们先把 npm 升级到最新版本,在终端中输入:

等待脚本执行完成之后,使用 npm --version 查看 npm 的版本,本教程书写时,最新的 npm 版本是:6.4.1

然后我们使用 npm 安装 create-react-app,它是 Facebook 官方的一个用来简化 React 开发的工具。在命令行中输入:

等待安装完成之后,在命令行中输入 create-react-app,将看到它的简要帮助文档,说明工具已经成功安装上了。

创建 React 工程

在工具准备完成之后,我们就可以使用它来创建我们的 React 工程了。在终端中输入 create-react-app cloud-disk-app。

由于 npm 的限制,名字不能使用大写,命名惯例是小写字母加分隔符。

然后会经过一个有点长的等待过程,在这个过程中工具会创建好工程目录,把所有需要的依赖都下载下来。等待操作完成之后,进入工程目录 cd cloud-disk-app,然后输入 npm start,等待一会儿,会看到 React Development Server 已经成功打开,并且自动打开了浏览器(这里需要使用火狐浏览器):

到这里我们已经完成了一个 React 工程的初始化工作。最终我们将可以创建出一个最简单的React页面,它大致长这样:

接下来就是node & npm 基本使用以及React & SPA的一些简单实践。因为篇幅有限,并且该教程由开源爱好者Skyline75489在实验楼发布了完整的版本,建议大家直接到电脑端学习:我是一道传送门

你也可以在实验楼公众号后台回复关键词“专属网盘”下载该项目完整代码。

今日推荐

8个爽滑的Windows小软件,不好用你拿王思葱砸死我

60人,42天,死磕机器学习,结果如下。

武侠版编程语言...Java像张无忌还是令狐冲?

大量机器学习&深度学习资料

技术变现,到底怎么变?

原文地址:https://www.cnblogs.com/shiyanlou/p/10329875.html

时间: 2024-10-07 20:38:20

如何搭建一个“不可告人的”私人专属网盘?教程拿去的相关文章

搭建 Seafile 专属网盘

准备域名 任务时间:15min ~ 20min 域名注册 如果您还没有域名,可以在腾讯云上选购,过程可以参考下面的视频. 视频 - 在腾讯云上购买域名 域名解析 域名购买完成后, 需要将域名解析到实验云主机上,实验云主机的 IP 为: <您的 CVM IP 地址> 在腾讯云购买的域名,可以到控制台添加解析记录,过程可参考下面的视频: 视频 - 如何在腾讯云上解析域名 域名设置解析后需要过一段时间才会生效,通过 ping 命令检查域名是否生效 [?],如: ping www.yourdomain

1 - 如何构建一个自己的网盘 -- 简介

这套教程将教您搭建出一个自己的网盘,我们将从技术选型开始,一直到部署,给大家讲一个小项目的开发过程,以及如何设计项目,使用CI,部署到服务器[自动化],和Github的使用 本套教程将教大家搭建一个可以docker部署的网盘服务. 原文地址:https://www.cnblogs.com/Net-Core-Way/p/10122585.html

科技来电:360网盘停服那些事全解析

科技来电:360网盘停服那些事全解析昨天来源:智电网 <373期>今年对于众多网盘品牌来说是一个灾难性的一年,在这一年华为D盘.新浪微盘.UC网盘等纷纷倒地不起,网盘洗牌加速,用户日趋聚集在360.百度这两大网盘巨头之中,本以为国内网盘格局已定,没想到最近身为网盘巨头之一的360在毫无征兆的情况下突然宣布自家网盘停服,引发了人们对360的声讨浪潮. 1.网盘停服,对360声讨浪潮有多大? 贴吧.微博.论坛.应用商店等网友聚集地,可以说只要是有网友.有人气的地方,几乎都是对360的声讨浪潮,有人

个人网盘和企业网盘的对比

现在我们每天使用的电脑.智能手机以及各种智能终端设备中都能感受到云存储的存在.云存储也成为互联网战争的下一个必争之地,这在网盘市场表现得最为明显.现在是各种网盘混战的年代.各互联网及科技公司介入这块领域也比较早,经过一段时间的发展,个人网盘产品功能已经比较完善,对个人来说使用起来比较得心应手,但是针对企业来说,选择个人网盘就会有很多不便之处,难以实现协同办公以及企业管理的目标. 首先,从目标人群看: 个人网盘针对个人用户,其核心需求是"存储+分享"辅以娱乐功能,而企业网盘功能的开发都是

提取百度云盘链接 百度网盘破解 解决百度网盘限速 mac版

刚刚找到一个获取百度网盘链接的方法,可以不用再受**网盘的限速,可以把要下载的文件链接提取出来到浏览器或者用迅雷下载. 这是mac版的方法,windows版有网盘破解版的客户端,直接下载一个破解版的百度网盘就行 要说的是一个谷歌浏览器的插件,你要做的事就是有一个谷歌浏览器然后装上这个插件就可以了. 插件地址:https://pan.baidu.com/s/1raoj9b2 下载解压后,打开谷歌浏览器,安装插件 插件安装方法: 1.右上三个点->更多工具->扩展程序 2.勾选开发者模式 3.点击

网盘和同步盘是什么样的?

在大都数人的潜意识里会认为网盘和同步盘这两者好像是差不多的,都是利用网络在云中心进行备份,前者(网盘)是手动上传和下载本地文件,后者(同步盘)是映象本地文件夹进行上传下载取得同步文件夹内容.这样看来貌似感觉这两者没什么区别. 而且我们也经常性的会听到,使用到网盘,网盘会被大家称呼为网络U盘或是网盘硬盘,简单的就是把资料备份储存到网上云空间.其实网盘是一个广泛的词,网盘还可以划分为:备份网盘.同步网盘.大部分人通常会将“备份网盘”与“同步网盘”混为一谈. 同步网盘不仅具备网盘功能,其最大的特点为“

用花生壳以Ubuntu为平台,搭建私人网盘

今天咱们说说,用花生壳在Ubuntu下,用XAMPP搭建OwnCloud私人网盘的事儿,这貌似算不了一篇技术文章,当初搞这个业余爱好,其目的是为身边的一些白领朋友装逼,提供另一种貌似“高大上”的玩法,案例搭配了花生壳,小玩一下,话说人生除了吃饭,不就在于玩儿吗,你玩的牛逼了,钱自然也就来了,呵呵,来~喝!,一起飞~~花生壳官网:www.oray.com 我这个人搞IT的,爱折腾,总想玩点儿啥,这不,花生壳来了,咱也玩玩.我做啥都爱记笔记,但都是markdown格式的,这个坛儿不支持md,有点落伍

怎么在自己电脑上搭建一个服务器,以便于外网访问呢?

前几天我要测试一个项目,这个是需要往服务器上放才可以测的,但后台太忙了,所以就说让我自己在自己电脑搭建个服务器,把项目代码放在里面测就可以,其实搭建服务器的方法有很多,之前我有用过一个XMAPP的软件它也是可以作为服务器承载代码,以供别人访问,不过我觉得比较流行的还是Tomcat服务器: 其实我们偶尔也会写一下网页,javaweb程序,为了逼近现实,我们的项目发布后,都希望我们的项目能让更多的人看到,难道我们要自己去买域名么,买空间么?其实我个人觉得如果不是需要很大的持续的访问量的话,完全没有必

为公司内网搭建一个无人执守安装服务器

为公司内网搭建一个无人执守安装服务器 方法 ftp + tftp + dhcp + kickstart + PXE 什么是 PXE ? PXE 并不是一种安装方式,而是一种引导的方式.进行 PXE 安装的必要条件是要安装的计算机中包含一个PXE支持的网卡(NIC),即网卡中必须要有PXE client.PXE(Pre-boot Execution Environment)协议使计算机可以通过网络启动.网卡中必须有PXE芯片. 协议分为 client 和 server 端,PXE client在网