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

Posted 2021-02-06 实验楼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何搭建一个“不可告人的”私人专属网盘？教程拿去相关的知识，希望对你有一定的参考价值。

技术分享图片

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

好嘞，回到咱们今天的主题：如何打造一个私人专属网盘？本教程将使用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 已经成功打开，并且自动打开了浏览器(这里需要使用火狐浏览器)：

技术分享图片