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

本文链接：https://blog.csdn.net/lyandgh/article/details/103613820

本文详细介绍了一个文件共享平台的搭建过程，包括前端Vue和后端Koa的环境配置，以及数据库MongoDB的安装与服务配置。文章还介绍了前端组件树的设计和后端RESTful API的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

本话概要

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

前端

前端整体需求

根据功能的不同，前端的架构会有所差异。文件共享平台的基本需求是：注册、登录、文件上传、下载、删除、预览（图片文件）、创建、删除文件夹、文件查看等。至于第一话中的书籍、成员是附加的，也就是学会了文件这一部分的内容，你想添加什么功能都可以，套路是通用的。
因此，总结下来，前端的基本页面组成应是，登录页+内容页。
熟悉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项目的文件夹。其目录结构如下：

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

npm install --save element-ui

另一个是axios

npm install --save axios

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

npm run serve

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

后端

后端整体需求

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

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

后端技术路线

根据需求，后端的技术路线设计如下：
在这里插入图片描述

后端环境搭建

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

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

mongodb配置过程如下：

下载windows版本的Mongodb安装包，下载链接
安装
创建一个db文件夹，例如d:\data\db
配置数据库的文件夹路径
```
 mongod.exe --dbpath d:\data\db
```

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

创建一个log文件夹，例如d:\data\log，并在该文件夹下创建一个空的文件mongod.log
创建一个配置文件，例如d:\data\mongod.cfg，该文件内容如下（yaml格式，缩进用空格而不是tab）：
```
 systemLog:
  destination: file
  path: d:\data\log\mongod.log
 storage:
  dbPath: d:\data\db
```
本质上就是将日志和数据库文件夹的路径用配置文件的形式记录。
创建服务，如下：
```
 mongod.exe --config d:\data\mongod.cfg --install --serviceName "MongoDBServer"
```
如果不报错，你就能在服务中找到名为MongoDBServer的服务了。
如果你想启动服务，你可以执行
```
 net start MongoDBServer
```
如果你想关闭服务，你可以执行
```
 net stop MongoDBServer
```
如果你想删除服务，你可以执行
```
 sc delete MongoDBServer
```
为了确认数据库服务已打开，你可以访问链接 http://localhost:27017/ ，如果你收到如下回复：
It looks like you are trying to access MongoDB over HTTP on the native driver port.
这意味着数据库服务已经启动！