理解MVC—从实例出发:基于MVC模式的简易算术计算器

简介:

MVC模式:MVC模式(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model)、视图(View)和控制器(Controller)。

  • (控制器Controller)- 负责转发请求,对请求进行处理。

  • (视图View) - 界面设计人员进行图形界面设计。

  • (模型Model) - 程序员编写程序应有的功能(实现算法等等)、数据库专家进行数据管理和数据   库设计(可以实现具体的功能)。

wKiom1LlxE6iegXEAAA_pDtkipg623.jpg

Java

Java 平台企业版 (J2EE)

和其他的各种框架不一样,J2EE为模型对象(Model Objects)定义了一个规范。

视图(View)在J2EE应用程序中,视图(View)可能由Java Server Page(JSP)承担。生成视图的代码则可能是一个servlet的一部分,特别是在客户端服务端交互的时候。

控制器(Controller)J2EE应用中,控制器可能是一个servlet,现在一般用Struts2/Spring Framework实现。

模型(Model)模型则是由一个实体Bean来实现。

           (以上内容摘录自维基百科对MVC模式概念的部分解析)


MVC框架模式在java开发过程中也比较常用,下面通过一个简易计算器的实例去理解一下MVC这个方便而强大的东东。每个人的思路步骤可能会略有不同,我这里只分享我自己的思路“殊途同归”吧,呵呵。

这个简易计算器进行对两个数字的运算,选择(+、-、*、/)结算符,最后计算出结果。大概的界面设计如下所示:

wKiom1Llyh_hRo5bAAIdz-a7fyA920.jpg


大概可分为下面几个步骤:

1.Model由实体Bean来实现:编写一个bean,用来封装计算器的数字,结果及操作运算符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
package  com.lixiyu.bean;
public  class  CalculatorBean
  {
     double  numberOne,numberTwo,result; //数字1、数字2、结果
                                                                                                                                                                                                                                         
     String operator= "+" ; //操作
  //setxxx和getxxx
     public  void  setNumberOne( double  n)
  {
       numberOne=n;
  }
                                                                                                                                                                                                                                        
     public  double  getNumberOne()
    {   return  numberOne;
    }
                                                                                                                                                                                                                                        
     public  void  setNumberTwo( double  n)
    {  numberTwo=n;
    }
                                                                                                                                                                                                                                        
     public  double  getNumberTwo()
    {   return  numberTwo;
    }
                                                                                                                                                                                                                                        
     public  void  setOperator(String s)
    {  operator=s.trim();;
    }
                                                                                                                                                                                                                                        
     public  String getOperator()
    {   return  operator;
    }
                                                                                                                                                                                                                                        
     public  void  setResult( double  r)
    {  result=r;
    }
                                                                                                                                                                                                                                        
     public  double  getResult()
    {   return  result;
    }
}


2.编写控制器CalculatorServlet,用于转发请求,对请求进行处理。下面给出Servlet中doPost()的关键代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
public  void  doPost(HttpServletRequest request, HttpServletResponse response)
             throws  ServletException, IOException {
         CalculatorBean dataBean =  null ;
         HttpSession session = request.getSession( true );
         try  {
             dataBean = (CalculatorBean) session.getAttribute( "ok" );
             if  (dataBean ==  null ) {
                 dataBean =  new  CalculatorBean();  // 创建Javabean对象
                 session.setAttribute( "ok" , dataBean); // 将dataBean存储到session对象中
             }
         catch  (Exception exp) {
             dataBean =  new  CalculatorBean();  // 创建Javabean对象
             session.setAttribute( "ok" , dataBean); // 将dataBean存储到session对象中
         }
         double  numberOne = Double
                 .parseDouble(request.getParameter( "numberOne" ));
         double  numberTwo = Double
                 .parseDouble(request.getParameter( "numberTwo" ));
         String operator = request.getParameter( "operator" );
         double  result =  0 ;
         if  (operator.equals( "+" )) {
             result = numberOne + numberTwo;
         else  if  (operator.equals( "-" )) {
             result = numberOne - numberTwo;
         else  if  (operator.equals( "*" )) {
             result = numberOne * numberTwo;
         else  if  (operator.equals( "/" )) {
             result = numberOne / numberTwo;
         }
         dataBean.setNumberOne(numberOne);  // 将数据存储在dataBean中
         dataBean.setNumberTwo(numberTwo);
         dataBean.setOperator(operator);
         dataBean.setResult(result);
         RequestDispatcher dispatcher = request
                 .getRequestDispatcher( "showResult.jsp" );
         dispatcher.forward(request, response); // 请求showResult.jsp显示dataBean中的数据
     }

在web.xml中注册servlet及实现映射:

1
2
3
4
5
6
7
8
< servlet >
     < servlet-name >CalculatorServlet</ servlet-name >
     < servlet-class >com.lixiyu.servlet</ servlet-class >
   </ servlet >
   < servlet-mapping >
     < servlet-name >CalculatorServlet</ servlet-name >
     < url-pattern >/calculator</ url-pattern >
   </ servlet-mapping >


3.编写视图(view),主要通过输入操作和显示结果的两个JSP来实现

 inputNumber.jsp(主要代码):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< form   id = "form1"  action = "calculator"  method = "post"  name = "form1" >
    < table >
                                                                                 
    < tr >< td > < b >输入任意两个数:</ b ></ td >
        < td > < Input  type = text  name = "numberOne"  value = 0  size = 6 ></ td >
      < td > < Input  type = text  name = "numberTwo"  value = 0  size = 6 ></ td >
    </ tr >
    < tr >< td >< b >选择算术运算符号:</ b ></ td >
        < td > < Select  name = "operator" >
               < Option  value = "+" >+(加)
               < Option  value = "-" >-(减)
               < Option  value = "*" >*(乘)
               < Option  value = "/" >/(除)
             </ Select >
        </ td >
        < td > < INPUT  TYPE = "submit"  value = "提交选择"  name = "submit" ></ td >
    </ tr >
                                                                                
    </ table >
       </ form >

wKiom1LlyziTdFtoAAIWHX1Vp18145.jpg

showResult.jsp的关键代码,用到<jsp:usebean>:

1
2
3
4
5
6
<jsp:useBean id= "ok"  type= "com.lixiyu.bean.CalculatorBean"  scope= "session" />
    运算结果:
   <jsp:getProperty name= "ok"  property= "numberOne" />
   <jsp:getProperty name= "ok"  property= "operator" />
   <jsp:getProperty name= "ok"  property= "numberTwo" /> =
   <jsp:getProperty name= "ok"  property= "result" />

运算结果:

wKioL1Llyz_SZVpFAAH9q_6zqxc164.jpg


本文转自lixiyu 51CTO博客,原文链接:http://blog.51cto.com/lixiyu/1355002,如需转载请自行联系原作者


相关文章
|
设计模式 存储 前端开发
MVVM、MVC、MVP三种常见软件架构设计模式的区别
MVC、MVP 和 MVVM 是三种常见的软件架构设计模式,主要通过分离关注点的方式来组织代码结构,优化开发效率。
1200 12
|
设计模式 前端开发 JavaScript
浅谈MVC、MVP、MVVM框架模式
浅谈MVC、MVP、MVVM框架模式
139 0
|
前端开发 数据安全/隐私保护
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
什么是mvvm,mvp、mvc和mvvm模式有什么区别?
420 0
|
设计模式 存储 前端开发
MVC(Model-View-Controller)是一种软件设计模式,用于将应用程序的输入逻辑、业务逻辑和用户界面逻辑分离
【6月更文挑战第17天】**MVC模式**是软件设计模式,用于分离输入逻辑、业务逻辑和用户界面。模型处理数据和业务,视图展示数据,控制器协调两者响应用户请求。优点包括:关注点分离、提高开发效率、简化测试、支持多视图及便于大型项目管理。
252 3
|
设计模式 存储 前端开发
MVC(模型-视图-控制器)是一种在Web应用程序开发中广泛使用的软件设计模式
【5月更文挑战第12天】MVC模式是Web应用开发中的常见设计模式,将逻辑、数据和界面分离,提升代码可维护性和重用性。模型处理数据逻辑,视图展示数据,控制器协调用户输入与模型视图交互。优点包括代码分离、易维护、可扩展和组件重用,促进高效灵活的开发。
255 2
|
存储 前端开发 测试技术
MVC、MVP、MVVM 模式
MVC、MVP 和 MVVM 是三种常见的软件架构模式,用于分离用户界面和业务逻辑。MVC(Model-View-Controller)通过模型、视图和控制器分离数据、界面和控制逻辑;MVP(Model-View-Presenter)将控制逻辑移到 Presenter 中,减少视图的负担;MVVM(Model-View-ViewModel)通过数据绑定机制进一步解耦视图和模型,提高代码的可维护性和测试性。
|
设计模式 开发框架 前端开发
MVC 模式在 C# 中的应用
MVC(Model-View-Controller)模式是广泛应用于Web应用程序开发的设计模式,将应用分为模型(存储数据及逻辑)、视图(展示数据给用户)和控制器(处理用户输入并控制模型与视图交互)三部分,有助于管理复杂应用并提高代码可读性和维护性。在C#中,ASP.NET MVC框架常用于构建基于MVC模式的Web应用,通过定义模型、控制器和视图,实现结构清晰且易维护的应用程序。
251 2
|
前端开发 测试技术 开发者
MVC模式在现代Web开发中有哪些优势和局限性?
MVC模式在现代Web开发中有哪些优势和局限性?
|
前端开发 Java
【案例+源码】详解MVC框架模式及其应用
【案例+源码】详解MVC框架模式及其应用
1117 0
|
设计模式 前端开发 PHP
PHP中实现简易的MVC模式
【8月更文挑战第31天】 本文将引导你了解如何在PHP中应用MVC(Model-View-Controller)架构模式,通过一个简单的例子展示其实现过程。我们将从基础的概念出发,逐步深入到代码实践,最终让你能够自己动手构建一个简易的MVC框架。文章不仅提供理论知识,还包含具体的代码示例,帮助你更好地理解并运用MVC模式。