JZTXT

1.2 Model1时代

发布时间 2023-03-31 14:11:43作者: 青q鸟

最典型的MVC就是JSP + servlet + javabean的模式。

0

1.2 Model1时代

  • 在web早期的开发中，通常采用的都是Model1。
  • Model1中，主要分为两层，视图层和模型层。

1612963948906

  • Model1优点：架构简单，比较适合小型项目开发；

  • Model1缺点：JSP职责不单一，职责过重，不便于维护；

1.3 Model2时代

  • Model2把一个项目分成三部分，包括视图、控制、模型。

1612964915030

职责分析：

Controller：控制器

  • 取得表单数据
  • 调用业务逻辑
  • 转向指定的页面

Model：模型

  • 业务逻辑
  • 保存数据的状态

View：视图

  • 显示页面

Model2这样不仅提高的代码的复用率与项目的扩展性，且大大降低了项目的维护成本。Model 1模式的实现比较简单，适用于快速开发小规模项目，Model1中JSP页面身兼View和Controller两种角色，将控制逻辑和表现逻辑混杂在一起，从而导致代码的重用性非常低，增加了应用的扩展性和维护的难度。Model2消除了Model1的缺点。

1.4 回顾Servlet

  1. 新建一个Maven工程当做父工程！pom依赖！

1612965025502

    <!-- 导入依赖 -->
    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
    </dependencies>
  1. 建立一个Moudle：springmvc-01-servlet ， 添加Web app的支持！

1612965350197

1612965381251

1612965437332

1612965518176

  1. 导入servlet 和 jsp 的 jar 依赖
    <!-- 导入servlet和jsp的依赖 -->
    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
        </dependency>
    </dependencies>
  1. 编写一个Servlet类，用来处理用户的请求

1612966626684

package com.github.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

// 实现Servlet接口
public class HelloServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1.获取前端参数
        String method = req.getParameter("method");
        if (method.equals("add")){
            req.getSession().setAttribute("msg","执行add方法");
        }
        if (method.equals("delete")){
            req.getSession().setAttribute("msg","执行delete方法");
        }
        // 2.调用业务逻辑层

        // 3.视图转发或重定向
        req.getRequestDispatcher("/WEB-INF/jsp/Hello.jsp").forward(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}
  1. 编写Hello.jsp，在WEB-INF目录下新建一个jsp的文件夹，新建Hello.jsp、Form.jsp

1612966592906

  • Hello.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>subeiLY</title>
</head>
<body>
${msg}
</body>
</html>
  • Form.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>

<form action="/hello" method="post">
    <input type="text" name="method">
    <input type="submit">
</form>

</body>
</html>
  1. 在web.xml中注册Servlet
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <servlet>
        <servlet-name>HelloServlet</servlet-name>
        <servlet-class>com.github.servlet.HelloServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>HelloServlet</servlet-name>
        <url-pattern>/hello</url-pattern>
    </servlet-mapping>

</web-app>
  1. 配置Tomcat，并启动测试

1612966738568

1612966847947

1612967155056

1612967196952

MVC框架要做哪些事情

  1. 将url映射到java类或java类的方法。
  2. 封装用户提交的数据。
  3. 处理请求--调用相关的业务处理--封装响应数据。
  4. 将响应的数据进行渲染 . jsp / html 等表示层数据。

常见的服务器端MVC框架有：Struts、Spring MVC、ASP.NET MVC、Zend Framework、JSF；常见前端MVC框架：vue、angularjs、react、backbone；由MVC演化出了另外一些模式如：MVP、MVVM 等等....

MVVM扫盲

参考于：https://www.jianshu.com/p/0ae3c0d830e5

  • MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。
  • MVVM（Model–View–Viewmodel）是一种软件架构模式。

MVC中的M就是单纯的从网络获取回来的数据模型，V指的我们的视图界面，而C就是我们的ViewController。

在其中，ViewController负责View和Model之间调度，View发生交互事件会通过target-action或者delegate方式回调给ViewController，与此同时ViewController还要承担把Model通过KVO、Notification方式传来的数据传输给View用于展示的责任。

随着业务越来越复杂，视图交互越复杂，导致Controller越来越臃肿，负重前行。脏活累活都它干了，到头来还一点不讨好。福报修多了的结果就是，不行了就重构你，重构不了就换掉你。

  • MVC架构图

MVC架构图

所以，为了解决这个问题，MVVM就闪亮登场了。他把View和Contrller都放在了View层（相当于把Controller一部分逻辑抽离了出来），Model层依然是服务端返回的数据模型。

而ViewModel充当了一个UI适配器的角色，也就是说View中每个UI元素都应该在ViewModel找到与之对应的属性。除此之外，从Controller抽离出来的与UI有关的逻辑都放在了ViewModel中，这样就减轻了Controller的负担。