《从零开始做一个MEAN全栈项目》（4）

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

 在上一篇中，我们讲了如何去构建第一个Express项目，总结起来就是使用两个核心工具，express和npm。npm作为Node的包管理器，在接下来的项目开发中，我们会经常用到。在上一篇的最后，我们已经得到了一个可以运行起来的最简单的项目，loc8r目录下也已经有了很多文件。这一节我们的目标就是对这些文件进行重组和改写，使其符合MVC开发架构。

    首先，我们需要了解一下MVC开发架构。MVC代表着模型-视图-控制器，它的目标是将数据、页面、应用逻辑相分离。我们本节通过对项目组件进行重新调整可以使得项目更加强大和可再利用。同时进行MVC模式的划分能够帮助我们更加专注于项目的某一个具体模块，正如我们在第二节中规划的开发计划那样。

MVC框架概览

    大多数的网站或者应用都是用来处理用户请求的，然后进行一系列的活动，并且给出响应。在一个典型的MVC架构中，这个流程可以这样概括：

    （1）用户发出一个请求

    （2）请求被导向到控制器

    （3）控制器向模型发起请求

    （4）模型对控制器做出响应

    （5）控制器将响应回馈给视图

    （6）视图向请求发起者进行响应

 更改文件夹结构

在上一篇的最末，你已经得到了一个包含很多文件的文件夹loc8r，打开这个文件夹，你会发现里面有一个views文件夹，甚至还有一个routes文件夹，但是并没有models和controllers文件夹。我们将对这些文件夹以及里面的内容进行简单得组装，得到我们想要的MVC架构。我们先完成以下几步

    （1）在项目文件夹下新建一个文件夹app_server，代表这是位于服务端的代码

    （2）在app_server文件夹里面新建两个文件夹controllers和models，分别放置本项目的服务器端的控制器和数据模型

    （3）将原有的views文件夹和routes文件夹直接移往app_server文件夹下面

    这样我们就得到了一个非常明显的MVC架构的应用，并且我们很清楚每一个文件夹是负责哪方面的内容，在实际开发过程中，我们也可以很轻易地知道我们该专注于哪一块的内容。整个移动的过程大致如下

    左边是Express自动生成的文件目录，右边是我们更改过后的MVC框架目录。

    由于我们已经更改了一些文件的位置，Express在自动生成项目的时候，引用的原来的默认目录，因此此时我们会发现新的响应运行不了了，这时候我们就需要对一些默认路径配置项进行修改，使我们整个项目重新活过来。

修改默认路径

    我们已经移动了views和routes这两个文件夹，现在我们需要在引用这两个文件夹的地方修改路径。我们需要告诉Express在运行项目的时候，去哪里找到这些对应的文件。app.js文件是整个应用的入口文件，Express启动的时候就是通过这个入口一步步寻找到后面的文件，我们现在打开这个文件。

    首先，Express在寻找视图进行渲染的时候，会去根目录下面寻找views文件夹。这里我们需要对路径进行修改。

    到了这里，Express终于可以正确找到views文件夹的位置，下面我们需要修改routes文件夹的位置，现在app.js中找到下面这几行：

    对路径进行修改：

这样Express就可以正确找到routes的位置啦。到了这个地方，重新npm start一下我们的项目，你会发现应用又活过来。这就说明Express能够正确找到对应文件的位置。

    下一节我们将讲述如何将控制器的内容从routes里面分离出来发哦controllers文件夹里面，并且我们将开始着手使用boostrap框架来增强页面展示效果~