阐述 MVC 模式

1, MVC与MVVM

MVC 他是后端的一个开发思想

MVVM是基于MVC中的view这层所分离出来的一种设计模式。

MVC架构详解

MVC（Model-View-Controller）是一种广泛使用的软件设计模式，主要用于分离应用程序的业务逻辑、用户界面和输入控制。这种架构通过将应用划分为三个主要部分——模型（Model）、视图（View）和控制器（Controller），从而实现了清晰的功能划分2。

模型（Model）

模型负责管理数据以及与数据库或其他持久化存储交互的逻辑。它是应用程序的核心，包含了所有的业务逻辑和数据操作方法。无论是在桌面应用还是Web应用中，模型都充当着数据提供者的角色。例如，在J2EE环境中，模型可能涉及DAO（Data Access Object）层的设计，用于执行CRUD（Create, Read, Update, Delete）操作1。

视图（View）

视图是用户看到并与之交互的部分。它的职责仅限于展示来自模型的数据给用户，并允许用户触发事件以便更新这些数据。在现代Web开发中，HTML页面通常作为视图的一部分存在，而JavaScript框架则进一步增强了动态效果和支持异步通信的能力4。

控制器（Controller）

控制器充当中介的角色，接收用户的输入并调用相应的模型组件去处理该请求，然后再决定显示哪个视图来响应客户端。具体来说，当用户提交表单或者点击链接时，HTTP请求会被发送到服务器端的一个特定控制器实例上；此实例会解析这个请求并将必要的信息传递给模型进行加工后再返回结果给前端渲染成最终呈现出来的网页内容

MVC与MVVM思想
项目结构与文件类型
全局标题与页面标题
全局样式与页面样式
App 的生命周期
页面的声明周期
数据绑定与事件
组件中的动态与静态变量
条件判断与for循环
多端兼容条件编译

MVC模式

1，M: model-模型层，数据的增删改查

2, V: view-视图层，前端页面(html/javascript/css)

3, C: controller-控制层，处理业务

比如说现在有一个订单，用户要去下订单，要去支付的话，肯定要去创建一个订单，那么在页面上用户会触发一个点击事件下单，随后页面就会触发一个事件，在页面里面他就是一个view,通过事件触发以后，事件会达到我们后端，后端再我们路由配置里会接收到用户的请求，用户的请求，请求到我们的后端，要去执行哪一个方法，哪一个controller,或者说是Ajax，是由路由所去控制的，路由拿到请求去分析之后，他是一个request请求映射，映射到我们某一个控制器，就会直接把用户的请求丢到控制器，让我们的控制器去针对我们用户请求去做相应的处理。

路由：只处理用户的请求，拿到请求然后直接丢给我们的控制器，他不做额外的处理，仅仅负责页面导向作用。我们业务处理完毕了，要针对订单去做保存。

记录数据，通过model层，去做一个相应的增加操作，可以去增加一条日志，可以去增加一条订单，数据都会保存在我们数据库里面，随后，我们要去做一个查询操作，也就是说，我们虽然把数据插入到数据库，我们还会去查询一下最新增加的数据，这个查询操作也是在model层去做的，其实 model 层就是我们的数据库，那么最后处理完毕之后，拿到了相应的用户所需要的一些信息之后，他会在返回到我们的控制器，返回给controller,随后再去进行相应的业务处理，最后包装完毕数据之后，然后再抛给我们的view,跑到页面上去做一个渲染，以上整个过程就是MVC的处理过程。

这是我们后端开发要使用的一种开发思想，设计模式。

什么是MVVM？

MVVM 是一种软件架构模式，用于将应用程序的用户界面（View）与数据和业务逻辑（Model）进行分离。MVVM 的核心思想是通过一个称为 ViewModel 的中间层来连接 View 和 Model。

M：Model（模型）代表应用程序的数据和业务逻辑。它负责数据的获取、处理和存储，以及定义应用程序的行为。
V：View（视图）代表应用程序的用户界面。它负责展示数据和与用户进行交互，通常由 HTML、XML 或其他类似的标记语言编写。
VM：ViewModel（视图模型）它是 View 和 Model 之间的连接层。ViewModel 处理用户界面上的事件和输入，并将它们转化为对 Model 的操作。它还负责从 Model 中获取数据，并将数据绑定到 View 中，使得数据的变化能够自动更新到用户界面上。

记录数据通过model层去做一个相应的增加操作，可以去增加一条日志，可以去增加一条订单，数据都会保存在我们数据库里面，随后，我们要去做一个查询操作，也就是说，我们虽然把数据插入到数据库，我们还会去查询一下最新增加的数据，这个查询操作也是在model层去做的，其实model层，就是我们的数据层，那么最后处理完毕之后，拿到了相应的用户所需要的一些信息之后，它会再返回到我们的控制器，返回给controller,随后再去进行相应的业务处理，最后，包装完毕数据之后，然后再抛给我们的view,跑到页面上去做一个渲染，以上整个过程就是MVC的处理过程。

这里的view是指的是我们视图层里面的一个页面

model 每一个页面里面存在的数据

查询用户订单，订单的数据就是我们的model,用户要去注册或者修改个人信息，那么我们的model，他就是一个JSON对象，也就是说，我们所有的需要再页面里面去展示，去渲染的那些数据都是我们的model,假设我们现在还是使用的时 js/jquery的操作方式。

使用原生的js/jquery去操作我们的DOM,这时比如说用户是在做修改个人信息，那么此时修改之后我们首先

第一步，我们要去获取用户现有的个人信息，获得了个人信息以后，我们发送给Ajax到后端，获得相应的 JSON对象，JSON对象此时就在我们的Model里面，在Model里面以后，我们是需要把里面的数据渲染到页面里面去，而且我们会写一个相反的方法。

比如说从model获取到相应的字段，有用户的昵称，用户的性别，用户的喜好等等我们都可以获得，一个个都把他渲染到页面的，每一个相应的组件里面去，这个过程其实就是我们使用js/jquery的一种方式

另外，当我们把数据渲染到页面里面去之后，用户去做修改，然后提交，那么用户修改的时候，监听用户的一个动作，用户修改了文本框view,我们都会去写相应的方法，把这些数据重新拿到手或者说把相应的内容封装到我们的model里面去，这个过程，我们需要额外去写一个方法的，当然我们也可以去使用form表单，把form里面的数据序列化成一个对象，随后我们再提交到去做一个修改的操作，这是我们已经操作过的方式。我们要使用MVVM这样一个模式的时候，我们就不再使用js/jquery以前的这种方式，不去操作DOM,此时我们引入一个新的概念，则是view/model他是一个核心调度者协调器，他是专门在中间做数据的传递工作的，比如我们现在拿到用户的数据以后不是直接交给view去渲染，我们自会把相应的数据丢给 View Model(VM)让VM去做渲染的动作，随后我们的数据就会去HTML页面做相应渲染，随后用户去到我们页面里面操作了，其他的DOM的一些元素修改了一些数据，此时，我们开发者不需要额外的去写相应的方法，只要用户修改了数据，相应的数据就会通过View Model再去传递到我们的Model,这整个两个方向的动作，其实都是由我们的VM调度器去做相应的处理，对于这样的操作，我们称之为数据双向绑定，这整个过程就是我们MVVM的设计思想，是一种开发模式。

template 里面使用的视图组件view,相当于我们使用的dir.

通过代码阐述MVVM与双向绑定

注意：一个页面只能有一对template,script,style标签

template 代表的就是一个页面 view

script标签里面的export default {} 固定的默认写法，他是一个实例，他也是一个对象，他就是我们的协调者，调度器，就是VM

MVVM （Model-View-ViewModel）是一种用于构建用户界面应用程序的设计模式，现常用于在桌面、移动和Web应用程序开发中。通俗地讲，它可以理解为MVC的改进版，把MVC中的V（View）的状态和行为抽象化，把视图UI与业务逻辑分开。

一，MVVM 核心三组件

1. M：模型(Model) ：对应 data 中的数据2. V：视图(View) ：模板3. VM：视图模型(ViewModel) ： Vue 实例对象如下图所示结构：

模型（Model）：代表应用程序的数据和业务逻辑。Model负责数据的存储、检索和操作，但不直接与用户界面交互。可以理解为厨房。厨房负责准备食物。厨师们（数据）知道如何制作各种菜肴（业务逻辑）。他们不直接和顾客交流，而是通过服务员来传递食物。
视图模型（ViewModel）：作为Model和View之间的桥梁，ViewModel负责转换Model中的数据，使其更适合在View中显示。ViewModel还处理用户的输入，并将这些输入转换为对Model的操作。ViewModel监听Model中数据的变化，并将这些变化通过数据绑定传递给View。可以理解为服务员。服务员是连接厨房和餐厅的桥梁。他们从厨房（Model）获取食物，然后端给顾客（View）。同时，他们也会把顾客的需求（比如加辣、少盐）传达给厨房。服务员确保顾客的需求被正确理解和满足。
视图（View）：代表用户界面，负责向用户展示数据和接收用户的输入。View通过数据绑定与ViewModel交互，当ViewModel中的数据发生变化时，View会自动更新以反映这些变化。同时，View也可以监听用户的交互（如点击按钮），并将这些事件传递给ViewModel处理。 可以理解为餐厅。餐厅是顾客用餐的地方，相当于用户界面。顾客在这里点菜（用户输入），并享用食物（查看数据）。餐厅的服务员（View的代码）会将顾客的订单（用户操作）传递给厨房，并将做好的菜肴（数据显示）端给顾客。二，数据绑定与事件绑定图中箭头表示数据和事件的流向：数据绑定：ViewModel和View之间的数据是双向绑定的，即ViewModel中的数据变化会自动更新到View，View中的用户输入也会自动更新到ViewModel。事件绑定：View中的用户交互（如按钮点击）会触发ViewModel中的命令或方法，从而更新Model中的数据。

代码解释：

<!-- <template><script><style> 这三个标签在每个页面都只能存在一个 -->
<!-- template: View这层 代表的只是一个页面 -->
<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text><input type="text" :value="title" @input="change" /></view></view>
</template><script>// VM 协调者，调度者export default {// Model 所有的数据data() {return {title: 'Hello NEXT 学院'}},onLoad() {},methods: {change(e) {var txtTitle = e.detail.value;this.title = txtTitle;}}}
</script>代码解释：
template: 代表一个页面  View
script: 代表协调者调度器  VM(View Model)
export default{} 
固定的默认写法，他是一个实例，他也是一个对象，他就是我们的一个协调者调度器
只要是在我们的data(){}里面写了相应的数据，数据就可以通过我们的View进行数据渲染，渲染到我们的页面里面去
然后再我们data(){}里面需要注意的，每一个data他都会return{}一个对象，return对象里面就是我们开发者所需要去写的所有数据，在return{}对象里面，不管你去写一个字符串，还是一个int型的，还是整型，数组，对象，都是没有问题，
我们这里<script>中的View Model(VM),和我们<template>中的View进行了相应的陈述，并且我们相应的数据只要去data(){}里面去写上，某一个对应的属性，就可以做到相应的渲染，如果我们按照以往的开发模式，要去手动的去操作DOM的话，我们首先需要去获取text这个标签，获取后通过 innerHTML相应的DOM的值赋上去，这样一次操作，我们现在是不需要的，因为我们的VM是不需要手动去操作DOM,下面我们来写一个小例子。<input type="text" :value="title" />:value="title" 是vue.js中的一个写法，表示只要在 value 前面加上 : 我们当前value的值就会和data(){}里面的属性，比如 "title" 进行关联，这是需要做一个理解的。@ 	// 所有的事件都以@开头methods: {} // 用户所有的自定义方法都写到这里

MVVM与双向绑定实现代码

pages/index/index.vue

<!-- <template><script><style> 这三个标签在每个页面都只能存在一个 -->
<!-- template: View这层 代表的只是一个页面 -->
<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text><input type="text" :value="title" @input="change" /></view></view>
</template><script>// VM 协调者，调度者export default {// Model 所有的数据data() {return {title: 'Hello NEXT 学院'}},onLoad() {},methods: {change(e) { // e是触发事件var txtTitle = e.detail.value; // value是detail里面的一个属性this.title = txtTitle; // 覆盖data(){}里面现有的数据}}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>