动力节点旗下在线教育品牌  |  咨询热线:400-8080-105 学Java全栈,上蛙课网
首页 > 文章

深入理解Spring MVC中MVC模式

08-28 17:41 77浏览
举报 T字号
  • 大字
  • 中字
  • 小字

首先我们来了解一下什么是MVC,MVC (Model-View-Controller) 是一种特殊的软件设计模式MVC模式强调分离软件的业务逻辑和显示模块, 这种“分离”为系统提供了更好的分工和维护方案。MVC的成功为其他模式带来了可借鉴的模式,于是它们基于MVC模式进行设计开发, 像 MVVM(Model-View-Viewmodel),MTP(Model-View-Presenter)和MVW (Model-View-Whatever)。就MVC模式为话题,本文我们来深入理解Spring MVC中MVC模式

1.我们先来看看MVC软件设计模式的三个部分:

Model: 模型,承载数据,并对用户提交请求进行计算的模块。

View: 视图,负责界面的布局和显示,与用户直接进行交互。

Controller: 控制器,用于将用户请求转发给相应的Model进行处理,并处理Model的计算结果向用户提供相应响应。

2.MVC模式的工作流程是这样的:

(1)用户通过View页面向服务端提出请求,可以是表单请求、超链接请求、AJAX请求等。

(2)服务端Controller控制器接收到请求进行解析,找到相应的Model对用户请求进行处理。

(3)Model处理后,将处理结果在交给Controller

(4)Controller在接到处理结果后,根据处理结果找到作为向客户端发回的响应View页面。页面经渲染(数据填充)后,再发送给客户端。

3.MVC模式的数据流动

1.传统MVC模式:

Model层定义 数据

View层定义 基本视图

Control层定义 Model层数据的操作方法和View层的监听事件

用户操作View层,触发View层的监听Action

View层触发Control层的方法,Control层调方法去修改数据,然后重新渲染到View层。

进阶MVC模式:

Model层定义 数据和修改数据的方法

View层定义 基本视图和更新函数

Control层定义 View层的监听事件

用户操作View层,触发View层的监听Action

View层触发Control层的方法,Control层调用Model层方法,然后重新渲染到View层。

//通信对象

const eventBus = $(window);

 

//model 数据

const model = new Model({

  data: {

    result: parseInt(localStorage.getItem('result'))

  },

  update: function(number) {

    Object.assign(model.data, number);

    eventBus.trigger('m:updated');

    localStorage.setItem('result', model.data.result);

  }

});

//view 视图

const view = {

  el: null,

  html: `

<div>

    <div id="outputAreas">

      <span id="result">{{result}}</span>

    </div>

    <div id="operateArea">

      <button id="add">+1</button>

      <button id="sub">-1</button>

      <button id="mul">×2</button>

      <button id="divide">÷2</button>

    </div>

  </div>

  init(container) {

    view.el = $(container);

  },

 

  render(number) {

    if (view.el.children.length !== 0) {

      view.el.empty();

    }

    $(view.html.replace('{{result}}', number)).appendTo($(view.el));

  }

};

//control 控制

const control = {

  init(container) {

    view.init(container);

    view.render(model.data.result);

    control.autoBindEvents();

    eventBus.on('m:updated', () => {

      view.render(model.data.result);

    });

  },

  events: {

    'click.#add': 'add',

    'click.#sub': 'sub',

    'click.#mul': 'mul',

    'click.#divide': 'divide'

  },

  add() {

    model.update({ result: model.data.result + 1 });

  },

  sub() {

    model.update({ result: model.data.result - 1 });

  },

  mul() {

    model.update({ result: model.data.result * 2 });

  },

  divide() {

    model.update({ result: model.data.result / 2 });

  },

  autoBindEvents() {

    let key, list;

    for (key in control.events) {

      list = key.split('.');

      view.el.on(list[0], list[1], control[control.events[key]]);

    }

  }

};

4.各个部分的伪代码实现

Model

Model={

    data:{程序需要操作的数据或信息},

    create:{增数据},

    delete:{删数据},

    undate(data){

        Object.assign(m.data,data) //使用新数据替换旧数据

        eventsBus.trigger('m:upate') //eventBus触发'm:update'信息, 通知View刷新

    },

    get:{获取数据}

}

View

View={

    el:需要刷新的元素,

    init(){

        v.el: 需要刷新的元素

    },

    template:'

 

' //html的内容

 

    render(){ 刷新页面 }

}

Controller

 

Controller = {

   init(){

      v.init() // View初始化

      v.render() // 第一次渲染

      c.autoBindEvents() // 自动的事件绑定

      eventBus.on('m:update', () => { v.render() }) // 当eventBus触发'm:update'时View刷新

   },

   events:{ 事件以哈希表方式记录 },

   method() {

      data = 改变后的新数据

      m.update(data)

   },

   autoBindEvents() { 自动绑定事件 }

}EventBus

5.EventBus

在上面的代码中出现的EventBus是一种设计模式或框架,主要用于组件/对象间通信的优化简化。

EventBus中涉及到了三个常用API,分别是:on、trigger、off。

on:监听事件的变化 监听数据的变化,如果数据有变化,直接render(再次将变化后的数据渲染到页面)

tirgger:自动触发事件

off:关闭的意思

6.模块化

软件产品可以被看作是由一系列的特定功能的组件组成,一个完整的系统也可以被分解成一系列的功能模块,这些模块之间的相互作用就形成了系统的所有功能。

-职责分清

-各个部分互相独立不受干扰

-修改维护起来也很方便

通过上面的详细的讲解,详细大家或多或少对Spring MVC中MVC模式有了不同程度的理解。理解程度取决于你的个人理解能力和知识水平,个人理解能力不太好短期提升,但知识水平可以通过观看本站的Spring MVC视频教程来提高。

0人推荐
共同学习,写下你的评论
0条评论
jessy
程序员jessy

13篇文章贡献65011字

作者相关文章更多>

推荐相关文章更多>

DOM渲染的详细过程

QCode09-04 14:38

CSS水平和垂直居中技巧大梳理

Code大师09-04 14:50

mui的input框在IOS系统下无法聚焦或点击多次才能聚焦

不写代码你养我啊08-23 11:14

推荐的-视.频播放器以及在线客服

不写代码你养我啊09-17 18:02

谈谈java多线程的三大特性

要学习了06-18 18:13

发评论

举报

0/150

取消