手把手教你搭建一个【文件共享平台】系列教程第二话——环境搭建

本话概要

这一篇博文主要从整体的角度，概述整个文件共享平台前、后端的需求、技术路线和环境搭建。从本篇开始正式入门，你准备好了吗？👊

前端

前端整体需求

根据功能的不同，前端的架构会有所差异。文件共享平台的基本需求是：注册、登录、文件上传、下载、删除、预览（图片文件）、创建、删除文件夹、文件查看等。至于第一话中的书籍、成员是附加的，也就是学会了文件这一部分的内容，你想添加什么功能都可以，套路是通用的。
因此，总结下来，前端的基本页面组成应是，登录页+内容页。
熟悉Vue的朋友们一定了解组件分割、复用的过程。简单来说，组件就是网页中的功能模块，你可以往这个模块输入不同的参数，就会呈现不同的渲染效果。如果有多个页面需要用同样功能的模块，那么就可以把该模块提取出来，进行复用，这样就减少了重复代码，且便于管理。每一个网页都由一个根组件（app.vue）和多个子组件构成，通过路由，可以导航到不同的组件分支，进行渲染，这样就使得单应用页面（SAP）也可以实现以往多页面的页面切换功能。
那么就该平台而言，如何构建组件树？

前端组件树

从最简单和常用的角度出发，网页一般都有一个头部（header），内容（container）和底部（footer）。
头部主要是放logo，网站名，以及用户基本信息，和退出按钮。
而内容部就是网页的主要展示区，这部分一般通过路由渲染不同的组件。
尾部一般就放©xxxx这些网站归属标识。
以下就是整体的组件树构成。

App.vue是整个网页的根组件，所有子组件都依附在根组件内部。
在根组件中，有头部、内容和尾部三部分，内容部分设置路由，根据路径不同跳转到不同的子组件，如图。
内容部分由四个子组件构成：登录（Login）、文件（Project）、书籍（Book）、成员（People）。
而组件下还可以设置子组件。这个在后续再说。

前端环境搭建

说了这么多，该教大家如何搭建前端环境了。
首先，vue cli基于node.js。因此你的电脑上必须安装了node.js。
确保有node了之后，我们先安装vue cli。安装的教程见官网。这里简单讲一讲：

安装vuecli

npm install -g @vue/cli

安装全局扩展（build,serve）

npm install -g @vue/cli-service-global

然后我们创建一个项目：

vue create shareFile

这样，文件夹下会出现shareFile项目的文件夹。其目录结构如下：

|-public
|-node_modules
|-src
|-package.json
|-package-lock.json

安装好vue后，我们还需要安装两个包，
一个是elementui

npm install --save element-ui 

另一个是axios

npm install --save axios

这样前端的环境就基本搭建完成了。
如何测试环境搭建成功？

npm run serve

如果打开了一个网页，那就证明搭建成功。

后端

后端整体需求

后端总体就是为前端提供Restful API的，当然现在GraphQL很火，貌似使用GraphQL是一种趋势。遗憾的是，本次并没有用这个新技术。还是利用koa搭建最基本的restful api服务。
根据前端的展示需求，后端需要实现以下功能：

1. 用户登录、注册、管理
2. 文件上传、下载、查询
3. 与数据库的CURD
4. 文件系统读写删功能

后端技术路线

根据需求，后端的技术路线设计如下：

后端环境搭建

后端环境同样基于node.js。需要安装如下的node包：

npm install koa koa-body koa-router koa-session koa-static koa2-cors mongodb --save-dev

mongodb配置过程如下：

1. 下载windows版本的Mongodb安装包，下载链接

2. 安装

3. 创建一个db文件夹，例如d:\data\db

4. 配置数据库的文件夹路径

    mongod.exe --dbpath d:\data\db
   

如果想将数据库发布成服务，需要进一步配置，如下：

1. 创建一个log文件夹，例如d:\data\log，并在该文件夹下创建一个空的文件mongod.log

2. 创建一个配置文件，例如d:\data\mongod.cfg，该文件内容如下（yaml格式，缩进用空格而不是tab）：

    systemLog:
     destination: file
     path: d:\data\log\mongod.log
    storage:
     dbPath: d:\data\db
   

   本质上就是将日志和数据库文件夹的路径用配置文件的形式记录。

3. 创建服务，如下：

    mongod.exe --config d:\data\mongod.cfg --install --serviceName "MongoDBServer"
   

   如果不报错，你就能在服务中找到名为MongoDBServer的服务了。
   如果你想启动服务，你可以执行

    net start MongoDBServer
   

   如果你想关闭服务，你可以执行

    net stop MongoDBServer
   

   如果你想删除服务，你可以执行

    sc delete MongoDBServer
   

4. 为了确认数据库服务已打开，你可以访问链接 http://localhost:27017/ ，如果你收到如下回复：
   It looks like you are trying to access MongoDB over HTTP on the native driver port.
   这意味着数据库服务已经启动！

至此，服务器的环境就全部搭建完毕。

下期预告

考虑到前端没有restful api的支撑，很难进一步推进，因此下一期将会先介绍koa的基本用法，后端项目的结构等。敬请期待👏
如需使用本博文内容，请注明转载链接，谢谢。