《从零开始做一个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框架了。

好啦，到这里我们的任务就完成啦！

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