本话概要
这一篇博文主要从整体的角度,概述整个文件共享平台前、后端的需求、技术路线和环境搭建。从本篇开始正式入门,你准备好了吗?👊
前端
前端整体需求
根据功能的不同,前端的架构会有所差异。文件共享平台的基本需求是:注册、登录、文件上传、下载、删除、预览(图片文件)、创建、删除文件夹、文件查看等。至于第一话中的书籍、成员是附加的,也就是学会了文件这一部分的内容,你想添加什么功能都可以,套路是通用的。
因此,总结下来,前端的基本页面组成应是,登录页
+内容页
。
熟悉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服务。
根据前端的展示需求,后端需要实现以下功能:
- 用户登录、注册、管理
- 文件上传、下载、查询
- 与数据库的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.
这意味着数据库服务已经启动!
至此,服务器的环境就全部搭建完毕。
下期预告
考虑到前端没有restful api的支撑,很难进一步推进,因此下一期将会先介绍koa的基本用法,后端项目的结构等。敬请期待👏
如需使用本博文内容,请注明转载链接,谢谢。