码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-11-28 00:20:05      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:填充   退出   模板   习惯   任务   解决   2.4   接下来   bsp   

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

技术分享   

  上一节简单介绍了什么是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框架了。

技术分享
好啦,到这里我们的任务就完成啦!

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

技术分享

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

标签:填充   退出   模板   习惯   任务   解决   2.4   接下来   bsp   

原文地址:http://www.cnblogs.com/mukekeheart/p/6107500.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!