详述MVC设计模式在Node工程中使用

最新推荐文章于 2024-03-20 18:37:36 发布

程可爱

最新推荐文章于 2024-03-20 18:37:36 发布

阅读量329

点赞数

分类专栏：前端文章标签： MVC模式 Node

本文链接：https://blog.csdn.net/qq_33479841/article/details/91407752

版权

前端同时被 2 个专栏收录

15 篇文章 1 订阅

订阅专栏

Node服务端

4 篇文章 1 订阅

订阅专栏

MVC设计模式简介
MVC设计模式（注意：这里强调的设计模式），它只是一种设计思想，帮助我们更好地规范代码和高效地开发。MVC的全名是Model、View、Controller，是模型(model)－视图(view)－控制器(controller)的缩写。MVC框架指的是那些利用MVC设计思想，进行严格分层设计的框架，让代码按照指定的形式来进行编写。
MVC是一种使用MVC（Model View Controller 模型-视图-控制器）涉及创建Web应用程序的模式：
Model（模型）表示应用程序核心（类似于数据库中的记录列表）；
View（视图）显示数据（呈现数据库列表）；
Controller（处理器）用于处理数据（写入数据库或读出数据列表）。

Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。
通常模型对象负责在数据库中存取数据。涉及底层的活儿交由Model层来处理完成。
View（视图）是应用程序中处理数据显示的部分。
视图主要是依据控制器处理后的模型数据创建的。
Controller（控制器）是应用程序中处理用户交互的部分。
控制器主要负责从视图读取数据，处理用户输入，向模型发送指定数据。接收模型返回的数据，分析处理、汇总数据交给视图呈现。
MVC的主要思想如下图所示：在这里插入图片描述
用户可以查看view，同时用户向controller发送请求，根据请求controller会请求model并完成数据封装，最后再将结果返回给view。
Node工程中结构如下图所示：

这是一个简单的小demo，controller文件夹主要放置的是控制器部分代码，model放置的是处理数据逻辑部分的代码，data文件夹放置的是一些数据，views文件夹主要放置的是视图文件。public主要放置一些公共资源文件，类似一些js和图片文件等。下面以一个简单订餐小demo来解析。
app.js

    var express = require("express");
    var app = express();
    var mainController = require("./controller/mainController");
    
    //定义模板引擎
    app.set("view engine","ejs");
    //定义首页路由
    app.get("/",mainController.showIndex)
    //定义保存跳转路由
    app.post("/baocun",mainController.baocun);
    //定义静态资源文件
    app.use(express.static("public"));
    //监听端口
    app.listen(3000);

视图文件统一放置在views文件夹下，这里定义一个index.ejs视图文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            width:800px;
            height:400px;
            border: 1px solid #ffffff;
            margin: 0 auto;
            background: -webkit-linear-gradient(top,skyblue,white);
            padding: 20px;
            box-sizing: border-box;
        }
        h1{
            text-align: center;
        }
        input{
            font-size: 20px;
        }
    </style>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="box">
    <h1>专业订餐系统</h1>
    <p>请输入手机号：</p>
    <input type="text" name="mobile">
    <p>请输入订餐内容：</p>
    <input type="text" name="foods">
    <p>
        <input type="button" value="确认" id="btn">
    </p>
</div>
</body>
<script type="text/javascript">
    $("#btn").click(function () {
        var mobile = $("input[name=mobile]").val();
        console.log("mobile:"+mobile);
        var foods = $("input[name=foods]").val();
        console.log("mobile:"+mobile);
        $.post("/baocun",{
            mobile:mobile,
            foods:foods
        },function (data) {
            if(data = "1"){
                alert("成功")
            }else{
                alert("失败");
            }
        })
        console.log("hello");
    })

</script>
</html>

mainController.js是定义在controller文件之下，主要放置控制层代码。在controller层引入model层文件，model层主要来进行数据库读写操作或文件处理操作。具体mainController.js代码如下：

var formidable = require("formidable");
var saveText = require("../model/saveText");

exports.baocun = function (req,res) {
    var form = new formidable.IncomingForm();
    form.parse(req,function (err,fields) {
        var mobile = fields.mobile;
        console.log("mobile:"+req.body);
        saveText.saveText(mobile,JSON.stringify(fields),function (err) {
            if(err){
                res.send("-1");
            }else{
                res.send("1");
            }
        })
    })
}

model层文件夹主要放置数据处理层代码，这里定义saveText.js文件，主要用于将数据保存为一个.txt文件。

var fs = require("fs")
var baseurl = "./data/";
exports.saveText = function(mobile,data,callback){
    fs.writeFile(baseurl+mobile+".txt",data,callback);
}

至此，主要代码以MVC模式完成。可以运行代码，得出以下运行结果。
在这里插入图片描述
按照mvc设计模式能够使代码逻辑更加清晰，且让代码能够各司其能，修改起来也更加方便。新手上路，若有理解不足，恳请批评指正。

程可爱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
详述MVC设计模式在Node工程中使用

1.MVC设计模式简介MVC设计模式（注意：这里强调的设计模式），它只是一种设计思想，帮助我们更好地规范代码和高效地开发。MVC的全名是Model、View、Controller，是模型(model)－视图(view)－控制器(controller)的缩写。MVC框架指的是那些利用MVC设计思想，进行严格分层设计的框架，让代码按照指定的形式来进行编写。MVC是一种使用MVC（Model Vie...
复制链接

扫一扫