# 设计模式

思考:MVC 和 MVVM 的区别

  MVVM 相较于 MVC,它并没有 Controller,而是使用 ViewModel(Vue)进行数据和页面的相互绑定/交互

M(Model) 准备数据
V(View) 展示页面
VM(ViewModel) 视图和模型(视图和数据的转换)

  MVC 架构(Model-view-controller (opens new window))让复杂应用的开发过程变得更易于管理,它允许多个开发者协同开发,是一种有效的设计模式。

说明

  由于 MVC 和 MVVM 应用的场景不同,其 V 和 M 表示的 🤔 含义也各有不同。

M(Model) 模型(domain、service、mapper 等等) 封装和处理数据
V(View) 视图(html、ftl、jsp 等等) 展示数据
C(Controller) 控制器(Controller、Servlet 等等) 处理请求(如:接收参数、调用 service 层代码、控制页面跳转等等)

# java 与 MVC

  MVC 的核心 Controller 控制层类似于一个快递中转站的存在。

  在不同的应用场景中,View 是不同的:

  • JSP 时期:View 就是 User-Agent + 视图
  • 前后端分离时期:广义上来讲 View 就是前端

提示

  优质文章推荐:SSM 框架的整合 (opens new window) 🤔

# 1、Javaweb 中

其中:

什么是 Servlet? —— Controller

  项目中的 Servlet,作用是接受请求和响应浏览器的一个容器(接口)。

  Servlet 运行于支持 Java 的应用服务器中,如:Tomcat (opens new window)

  • 表现层:Controller(web 文件夹)、View(WEB-INF/jsp 文件夹
      —— Servlet
  • 业务逻辑层(业务层):Model(service 文件夹
      —— 调用一个或多个 dao 中的功能点来组合成为业务逻辑(配备 serviceImpl 文件)
  • 数据访问层(持久层):Model(dao 文件夹
      —— 只做 CRUD 及类似的简单操作,不包含业务逻辑
什么是 Javabean? —— Model

  JavaBean 可以看作是遵从特定命名约定的 POJO。

  项目中的 Javabean?的作用是处理 Model 数据,细分可分为两类:

  • 实体类 Bean:存储业务数据(entity)
  • 业务处理 Bean:处理业务逻辑和数据访问(dao、service)

# 2、SSM 中

SSM 即 Spring 、SpringMVC、Mybatis 框架

其中:

  • 表现层 ——> SpringMVC / Struts2
  • 业务逻辑层 ——> 手写需求
  • 数据访问层 ——> MyBatis / Hibernate

【 Spring 则控制整个项目中对象的创建与管理:IoC(控制反转)和 AOP(面向切面编程)】

# 3、项目结构 🎈

src/main
├─ java/com/lencamo
  • JavaBean
│   ├─ entity  # sql表实体类
│       ├─ book.java
|       └─ ……
│   ├─ dto  # 其他实体类
│       ├─ book.java
|       └─ ……
│   ├─ dao # 待调用的sql接口 1️⃣        =======》 MyBatis
│       ├─ bookDao.java #
|       └─ ……
│   ├─ service # 业务接口 2️⃣           =======》 手写需求
│       ├─ bookService.java #
│           ├─ bookServiceImpl.java
|           └─ ……
|       └─ ……
  • 核心
│   ├─ web # 🚩控制器 3️⃣               =======》 SpringMVC
│       ├─ bookController.java #
|       └─ ……
|   └─ ……
├─ resources
│   ├─ mapper # 待调用的sql语句
│       ├─ bookDao.xml #
|       └─ ……
│   ├─ spring # 🚩spring 配置文件
│       ├─ spring-dao.xml
│       ├─ spring-service.xml
│       ├─ spring-web.xml
|       └─ ……
│   ├─ config # 其他配置文件
│       ├─ jdbc.properties
│       ├─ mybatis-config.xml
│       ├─ logback.xml
|       └─ ……
|   └─ ……
  • 其他
├─ sql # 项目配套SQL文件
├─ webapp
│   ├─ resources
│       ├─ css
│       ├─ images
│       ├─ js
|       └─ ……
│   ├─ WEB-INF
│       ├─ jsp
│       ├─ web.xml
|       └─ ……
|   └─ ……
pom.xml # maven中的jar依赖
└─ ……

# node 与 MVC

以前笼统的写法
  • routes/users.js
// 增
router.post('/user', (req, res) => {
  const { username, password, age, phone } = req.body

  UserModel.create({
    username,
    password,
    age,
    phone
  }).then((data) => {
    console.log(data)

    res.send({
      ok: 1
    })
  })
})

// 改
router.put('/user/:id', (req, res) => {
  const { username, password, age, phone } = req.body
  const _id = req.params.id

  UserModel.updateOne(
    { _id },
    {
      username,
      password,
      age,
      phone
    }
  ).then((data) => {
    console.log(data)

    res.send({
      ok: 1
    })
  })
})

  如果我们,采用 MVC 的思想对其进行分层,结果如下:

提示

  阿里开源的企业级框架和应用而生的 Node.js 框架——Egg.js,就是以 MVC 为架构的 web 框架

  • routes/users.js
// 分层✨一
router.post('/user', UserController.addUser)

router.put('/user/:id', UserController.updateUser)
controller
  • controllers/UserController.js
const UserController = {
  // 异步💖处理(send的时机)
  addUser: async (req, res) => {
    const { username, password, age, phone } = req.body

    // 分层✨二
    await UserService.addUser

    res.send({
      ok: 1
    })
  }

  updateUser: async (req, res) => {
    const { username, password, age, phone } = req.body
    const _id = req.params.id

    await UserService.updateUser(_id,username, password, age, phone)

    res.send({
      ok: 1
    })
  }
}

module.exports = UserController
service
  • services/UserService.js
const UserModel = require('../model/UserModel')

const UserService = {
  addUser: () => {
    return UserModel.create({
      username,
      password,
      age,
      phone
    })
  }

  updaUser: (_id,username, password, age, phone)=> {
    return UserModel.updateOne(
    { _id },
    {
      username,
      password,
      age,
      phone
    }
  )
  }
}

module.exports = UserService
更新于 : 7/8/2024, 10:21:14 AM