《从零开始做一个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框架来增强页面展示效果~

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的知识天地

Vue开发环境搭建全过程,一步一个坑

Vue这里就不多作介绍了,首先我们要安装好整个开发环境,其实Windows和Mac的整个过程基本一样

2761
来自专栏主机笔记

使用xshell连接linux服务器

许多新手第一次买了服务器都不知道该怎样使用,尤其是没有接触过linux的朋友对命令行界面几乎不了解,主机笔记今天就记录下使用国外软件xshell连接linux服...

9628
来自专栏小古哥的博客园

WebStorm设置手机测试服务器-局域网内其他设备访问

前端开发中,经常需要将做好的页面给其他同事预览或手机测试,之前一直用的第三方本地服务器usbwebserver,偶然了解到WebStorm内置服务器也可以满足此...

4116
来自专栏SpringBoot 核心技术

第二十二章:SpringBoot项目多模块运用与设计

4134
来自专栏美奔科技

web站点应用之路_wdcp面板设置篇(二)

安装配置好wdcp之后,我们就进入wdcp面板的设置界面了,首先刚进来的时候,会提示你更换登录密码和数据库密码。根据版本的不同,显示的内容也会有一定的区别...

2474
来自专栏WindCoder

ubuntu13.10下安装Eclipse兼tar.gz提取时提示失败的解决办法

前段时间一直想编程时在linux下常驻,于是在ubuntu里面配置java环境,按Eclipse遇到了点问题,就一直没能继续进行下去,今天刚刚找到解决办法,终于...

751
来自专栏小白鼠

Ionic3 Android调试

本文主要介绍将Ionic项目打包成安卓应用之后的调试过程,调试方式分两种:模拟器调试、真机调试。不过在此之前,必须要将ionic项目成功打包成Android应用...

2134
来自专栏Jerry的SAP技术分享

Webpack 10分钟入门

可以说现在但凡开发Single page application,webpack是一个不可或缺的工具。

1015
来自专栏JavaEdge

Maven环境隔离解决的问题配置及原理目录初始化编译打包命令验证

解决的问题 避免人工修改的弊端,即容易犯错 轻松分环境编译,打包,部署 配置及原理 在pom.xml中增加build节点 ? 在pom.xml中增加pro...

4216
来自专栏贾老师の博客

跨平台命令行抓包工具 gaze 介绍

1522

扫码关注云+社区

领取腾讯云代金券