设计模式

思考：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