简介

Mean是JavaScript的全栈开发框架。

用Express实现MVC模式开发是Mean Web全栈开发中的一部分。

Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。Express官网。

 

两种文件夹结构

水平文件夹结构：

按照文件的功能来分类。整个应用的分类都放在一个按照MVC文件夹结构组合的目录之中。例如：

app文件夹用于保存Express应用的逻辑部分相关代码，包含：

controllers文件夹：存放Express应用的控制器文件

  • models文件夹：存放应用模型
  • routes文件夹：存放路由中间件文件
  • views文件夹：存放应用视图文件

config文件夹用于存放Express配置文件。例如：

env文件夹：存放Express应用环境配置文件（测试、开发环境的切换等等）

config.js文件：用于Express应用配置

express.js文件：用于Express应用初始化

public文件夹用户保存浏览器端的静态文件，再次按照MVC模式分为：

  • config文件夹：用于存储AngularJS应用的配置文件
  • controllers文件夹，用户存储AngularJS应用的控制文件
  • css文件夹：存放CSS样式
  • directives文件夹：存放AngularJS应用的指令文件
  • filters文件夹：存放AngularJS应用的过滤器文件
  • img文件夹：存放图片
  • views文件夹：存放AngularJS应用的视图文件
  • application.js文件：用于AngularJS的初始化

package.json文件：存有用于管理应用依赖的元数据

server.js文件：是Node程序的主文件，以模块的方式加载express.js引导Express应用的启动

垂直文件夹结构：

按照文件所实现的功能进行文件和文件夹管理，每个功能都有各自的MVC模式组织目录结构，比较适合大型项目。比如：

server文件夹用于存放服务器逻辑，其内部按照MVC可分为：

controllers、models、routes、views、config（evn、feature.server.config.js）文件夹

client文件夹用于存放客户端文件，按照MVC模式可分为：

config、controllers、css、directives、filters、img、views、feature.client.module.js文件和文件夹等

 

以水平文件夹结构为例

1.首先创建如下目录：

express 使用html为模版_MVC

 

2.package.json代码内容如下，暂时不用的dependencies可以不用写上去。

{
  "name": "websiteframe03",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "body-parser": "~1.16.0",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.0",
    "ejs": "~2.5.5",
    "express": "~4.14.1",
　　 "serve-favicon": "~2.3.2"
  }
}

 

3.在app/controllers文件夹里面创建一个名为index_server_control.js的文件，注意命名方式，因为项目中前端AngularJS也会涉及到MVC模式，所以尽量将前端和后端的MVC文件命名方式区分开来。

控制器：index_server_control.js文件里面代码如下：

/**
 * Created by Goss on 2017/6/6.
 * 控制器：拼数据给视图,渲染应用视图
 */
exports.render=function(req,res){
    console.log('start index_server_control_render');

    //res.send('Hello world');
    res.render('index',{title:'Hello world title'});
}

 

4.两种路由方式：

1.app.route(path).VERB(callback)

2.app.VERB(path,callback)

(VERB要替换成小写的http方法名，比如get、post)

创建路由文件index_server_routes.js，然后加入如下代码：

/**
 * Created by Goss on 2017/6/6.
 * 中间件：业务逻辑
 */
var index=require('../controllers/index_server_control.js');

function index_server_routes(app){
    console.log('start index_server_routes');
    app.get('/',index.render);
    return app;
}

module.exports=index_server_routes;

 

5.接下来创建express_config.js文件来创建Express应用对象，分成两步：

  • a.创建Express应用实例
  • b.调用前面创建的路由文件，以函数调用的方式传入应用实例

路由文件中的函数会为应用实例调用控制器的render()方法来创建新的路由配置，最后返回处理好的应用实例，代码如下：

/**
 * Created by Goss on 2017/6/6.
 * 配置Express应用，所有与Express应用相关的配置也需要添加到这个文件中
 */
var express=require('express');
var index_server_routes=require('../app/routes/index_server_routes.js');

function express_config(){
    console.log('start express_config');
    var app=express();
  
    app.set('views','./app/views');  //设置视图文件存储目录
    app.set('view engine','ejs');   //设置EJS作为Express应用的模板引擎

    new index_server_routes(app);

    app.use(express.static('./public'));    //指定静态文件所在路径，要放在路由中间件之下，即先执行路由逻辑
    return app;
}

module.exports=express_config;

 

6.最后在根目录的server.js文件中写入主程序代码，通过包含Express配置模块，获取Express应用对象实例，并监听8080端口，代码如下：

var express_config=require('./config/express_config.js');
var app=new express_config();

app.listen(8080);

console.log('server running at http://localhost:8080');

module.exports = app;

 

7.在views文件夹中加入EJS视图渲染文件，并在express_config.js文件中加入app.set对引擎进行设置，index.ejs代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  <img src="/images/timg.jpg" alt="img">
  </body>
</html>

 

8.静态文件路径的配置，即在express_config.js里面加入静态文件路径：

app.use(express.static('./public'));    //指定静态文件所在路径，要放在路由中间件之下，即先执行路由逻辑

 

最后运行：node server运行服务端，浏览器中打开：http://localhost:8080