《从零开始做一个MEAN全栈项目》(2)

欢迎关注本人的微信公众号“前端小填填”,专注前端技术的基础和项目开发的学习。

  上一节简单介绍了什么是MEAN全栈项目,这一节将简要介绍三个内容:(1)一个通用的MEAN项目的技术架构,(2)为什么我们要打造单页应用,(3)本系列项目的技术架构和开发计划。希望通过这三个问题,我们能够对本项目产生一个全局视角。

    实现一个常见的MEAN全栈项目的核心就是RESTful API。这个接口通常是用MongoDB, Express, Node.js实现的,而单页应用(SPA)由AngularJs打造。这种开发技术框架对于一个有着AngularJs背景的开发人员来说,非常适合用于构建具有快速的响应式的应用。

    对于初级开发者来说,他们通常会问该去哪个获取后台数据,RESTful API就是专门用于回答这个问题的。在后台程序中,存取数据和逻辑处理,并进行数据的暴露,但是并不关心前端代码将数据拿来做什么,前端只负责拿到活着提交数据,不理会后台逻辑,实现完全的前后端分离。这个数据交换的媒介就是RESTful API,最常见的表现形式就是URL。

    在介绍我们为什么要选择单页应用之前,我必须说几句单页应用的坏话。首先就是难以被搜索引擎抓取到。由于大多数的爬虫只是对HTML内容进行简要地分析,并不会主动去下载并且分析页面内容,由于JS应用的数据多半都是直接由后台数据批量填充的,因此难以被抓取到。当然我们也可以进行一个搜索引擎优化(SEO)或者使用PhantomJs来运行js代码产生容易被抓取的HTML。然后一个很大的问题就是浏览器历史。一个应用必然包含很多的分页面,单页应用并不会对不同的分页面作隔离,只是在不同的情况下更新不同的HTML片段而已。这个对于习惯使用浏览器回退前进按钮的用户来说简直就是灾难,因为你动不动就退出了整个应用。事实上解决这个问题也不难,我们可以根据不同的分页面,更新不同的HTML片段,同时人为地在URL后面加上该页面的锚。最后一个影响比较大的问题就是页面加载速度。由于单页应用的所有HTML代码属于同一个页面,因此初次加载时,需要下载大量代码,这也就导致首页加载过慢,但是在接下来的用户互动中,由于所有的HTML代码已经加载完毕,所以整个应用不同分页面之间的交互反而会畅快无比。因此如何优化页面加载速度,尤其是首页加载速度,也是我们需要考虑的问题。

    说了这么多不利的因素,那为什么我们还要使用单页应用呢?因为它流畅快速啊!

    下面就来讲一下本项目的开发流程吧。

(1)首先我们将打造一个静态网站,通过Express+Node.js框架模板直接创建。

(2)打造数据模型和数据库,用MongoDB来实现。其实这里数据模型的创建主要是依靠mongoose在Express框架下面来完成的。 (3)创建REST API数据接口。这一块我们是用后台node.js来处理数据逻辑并进行数据的暴露处理。

(4)彻底打通静态页面与后台数据库之间的联系。得到我们项目的第一个版本。 (5)加入AngularJs到我们的项目中 (6)    一直到这里,我们的项目从前端到后台都是在Express框架下的,但是我们的最终目的是前端模块不依赖于Express,所以从这里开始我们要打造独立的AngularJs单页应用,对前面的代码进行重写,但是前面的部分我们会保留。 (7)在上一步的基础上,完成了重写代码之后,我们就可以彻底移除前端代码的Express框架了。

好啦,到这里我们的任务就完成啦!

先放一张我们最终想要的效果图吧

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GopherCoder

Django:web框架的学习(3)

1553
来自专栏开源项目

Git 项目推荐 | 基于 C# 的极速 WEB + ORM 框架

NFine 是基于 C# 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展,让Web开发更迅速、简单...

5438
来自专栏MixLab科技+设计实验室

从react-sketch.app说起

airbnb又发布了款开源工具,这次是一个利用react来生成sketch设计稿的工具。 基本原理 是利用sketch开放的api接口,把react写的组件按照...

3695
来自专栏GA小站

你看到的跳出率可能是错的

跳出率通常作为衡量着陆页的一个重要指标之一,根据GA官方的定义是: “跳出”是指您网站上的单页会话。在 Google Analytics(分析)中,“跳出”特指...

1722
来自专栏架构师之路

微信钱包中58到家首页为什么这么快

原文标题《前后端分离和模块化-58到家微信首页重构之路》【深度前端干货】 微信钱包内的58到家全新首页已经上线,感兴趣的同学们可以在微信中打开“我的->钱包->...

3197
来自专栏DeveWork

Google Fonts导致WordPress 速度问题的三个解决方案

本来实在是不想写这个的,因为相关方法在圈子里面已经烂大街了。但无奈,一些客户将近期的Google Fonts导致 WordPress 打开速度慢的现象归咎于我的...

3099
来自专栏知晓程序

手把手教你用上微信小程序,看完必懂!

1372
来自专栏假装我会写代码

也来扯扯 Vue 单元测试

2783
来自专栏HTML5学堂

CSS检查工具-CKStyle

HTML5学堂:CSS代码存在压缩工具、检查工具以及重排属性的工具。今天推荐给大家CKStyle这个工具,顺便也来看看其他的一些工具。 各类CSS检查工具 首先...

3996
来自专栏Albert陈凯

2018-09-05 银行安全控件原理研究背景正文结语

https://blog.csdn.net/Bone_ACE/article/details/80765299

1821

扫码关注云+社区

领取腾讯云代金券