node.js+express框架+jade实现简易MVC结构

IDE:WebStorm

模板引擎：jade

1.WebStorm创建node.js Express项目

选择Node.js Express App

2.建好的目录

图上所有文件目录都是建立项目时，自动创建好的。app.js也是自带的，app.js里面有一些导入包的配置。package.json也是自带的，里面写着该项目的依赖，我们其实可以不用管。在views目录下，error.jade和layout.jade和index.jade都是自带的。jade是模板引擎，下面会说是什么。

扫描二维码关注公众号，回复： 1670701 查看本文章

我自己写的有 input_table.jade 和 process_data.jade ，controller.js

3.实现MVC的控制器C

要实现MVC，首先从控制器C上入手。

controller.js：

var express = require('express');   //导入express模块
var path = require('path');         //导入path模块，用于操作路径合并或拆分
var app = express();                //生存express()对象

app.set('views', path.join(__dirname, 'views'));    //res的render()函数是从views目录下
                                                    //找文件的，所以要定义views目录在哪里
app.set('view engine', 'jade');                     //设置view的引擎为jade

app.get('/input_data',function(req,res){           //路由：用于控制哪个函数对应哪个浏览器请求
    res.render('input_table');                      //向客户端返回input_table.jade
})

app.get('/process_data',function (req,res) {        //映射process_data请求
    //JSON
    var respone = {
        "username":req.query.username,          //获取请求网页的username变量
        "age":req.query.age,
        "sex":req.query.sex
    };
    res.render('process_data',respone);         //向客户端返回process_data.jade(作为View) 和 respone(作为M)
})

var server = app.listen(8081,function () {  //服务端的建立，监听端口8081
    
})

由于使用 res.render()来返回页面(view)加数据(Model)，是需要使用模块引擎。所以我们就使用了 Jade模板引擎

4.Jade模板引擎。

是一种类html的格式：

HTML:

<html>
   <head></head>
   <body>
         <h1>Hello World
   </body>
</html>

Jade:

html
   head
   body
      h1 Hello World

具体Jade模板引擎的介绍：

Jade模板引擎介绍

5.View的编写：（都是用jade编写）

input_table.jade：

html
  body
    form(action="process_data")
      table
        tr
          td 姓名
          td
            input(type="text" name="username")
        tr
          td 年龄
          td
            input(type="text" name="age")
        tr
          td 性别
          td
            input(type="text" name="sex")
        tr
          td
          td
            input(type="submit" value="提交")

效果：

信息输入完成后，点击提交，跳转到下面一个页面

process_data.jade：

html
    body
        h3 姓名:
        username!=username
        h3 年龄:
        age!=age
        h3 性别:
        sex!=sex
        div
            button(type="button")
                a(href="input_data") 返回

效果：

点解返回，就会返回到 input_table.jade的页面

node.js+express框架+jade实现简易MVC结构

猜你喜欢