当前位置: 首页 > news >正文

1.Vue—简介、实例与容器、MVVM模型

文章目录

  • 一、Vue简介
    • 1.1 特点
    • 1.2 搭建Vue开发环境
      • 1.2.1 开发版
      • 1.2.2 生产版
    • 1.3 下载Vue开发工具
      • 1.3.1 GitHub方式
      • 1.3.2 国内方式
    • 1.4 消除环境提示
  • 二、 入门程序
    • 2.1 HelloWord
    • 2.2 分析Hello案例
      • 2.3.1 多容器对一实例
      • 2.3.2 多实例对应一容器
      • 2.3.3 总结
  • 三、MVVM模型

一、Vue简介

官方网站:Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

Vue是一套用户构建用户界面的渐进式JavaScript框架

简单的说就是怎么把数据变成界面

渐进式:Vue可以自底向上逐层的应用。

简单应用:我们只需要引入一个轻量小巧的核心库即可

复杂应用:引入Vue插件

1.1 特点

  1. 组件化模式,提高代码复用率,且让代码更好维护

    加入我们想修改下图页面中"推荐活动"的内容,我们只修改Activity.vue文件即可,其他地方不用动

image-20231027111253472

  1. 声明式编码,让编码人员无需直接操作DOM,提高开发效率

下面是之前操作DOM的形式:命令式编码

image-20231027111526234image-20231027111555425

下面是如今形式:

image-20231027111741925

  1. 使用虚拟DOM + 优秀的Diff 算法,尽量复用DOM节点

原生JavaScript如下所示。

有“张三”、“李四”、“王五”这三个人,使用list.innerHTML写到页面

后面数据发生了变化,新加了一个“赵六”,其他人的信息不变,如果我们还用list.innerHTML写到页面,那“张三”、“李四”、“王五”三个人又写了一次,也就是说我们本来在页面上的“张三”、“李四”、“王五”三个人的数据并没有复用

image-20231027112301346

Vue实现

Vue先把“张三”、“李四”、“王五”三个人变成虚拟DOM,最后把虚拟DOM变成页面的真实DOM

把虚拟DOM理解成内存中的数据

原生JavaScript直接把数据写到页面上,而Vue是先写到内存中,再写到页面,中间多了一个写入内存后必定会浪费时间

假如在“张三”、“李四”、“王五”数据不变的前提下,我们新增一个“赵六”的用户,这时候虚拟DOM的优势就体现出来了。

如果有个新的虚拟DOM和旧的虚拟DOM,他会把两个DOM进行Diff比较,对比会发现“张三”、“李四”、“王五”都是一样的,所以进行复用了,只会生成一个“赵六”的虚拟DOM

image-20231027112752645

1.2 搭建Vue开发环境

介绍 — Vue.js (vuejs.org)

写script标签的时候有一个属性src可以指定资源的位置,为了更好的访问src指定的资源的位置,我们就可以加一个CDN的加速

Vue提供了两个版本,一个是开发版本,一个是生产版本

开发的时候使用开发版,如果有错误的话会有提示

生产版本是开发完了要进行上线,让文件的体积更小,我们会选择生产版本

image-20231027142311407

将文件下载下来 :开发版 vue.js 生产版本 vue.min.js(生产版本会经过压缩)

image-20231027143225702

1.2.1 开发版

引入vue.js开发文件

<!DOCTYPE html>
<html>
<head><meta charset="UTF8" /><title>初始vue</title><!--引入开发版vue.js--><!--引入后多了一个全局Vue对象/函数  (这个Vue可以被当做对象,也可以被当做函数)--><script type="text/javascript" src="../js/vue.js"></script></head><body></body></html>

打开页面观察控制台,有一个提示:

提示1:请您下载Vue的开发工具达到一个更好的体验 (参考1.3下载即可)

提示2:您正在运行一个开发版本的Vue,请您确信在生产环境中不要这么做(参考1.4解决)

image-20231027144556163

然后我们在控制台输入“Vue”,确实会出来一个Vue的构造函数。假如说我们不引入vue.js或vue.main.js时是不会有下面这个构造函数的

image-20231027144825258

我们故意让程序报错,那控制台就会有提示

image-20231027210817961

1.2.2 生产版

<script type="text/javascript" src="../js/vue.main.js">

我们故意让程序报错,那控制台少了一个友好的提示,直接提示Vue底层的提示

image-20231027210910477

1.3 下载Vue开发工具

1.3.1 GitHub方式

进入下面这个网址https://v2.cn.vuejs.org/v2/guide/installation.html,点击“Vue Devtools”

image-20231027145120712

就会进入GitHub主页,下面会有一个“Installation”,如果是谷歌就下载谷歌对应的,如果是火狐就下载火狐对应的

但是不要点括号中的内容,它是开发工具的测试版,是在Vue3.0的时候使用的

image-20231027145313192

假如现在是谷歌,如下图所示,点击“添加”即可

image-20231027145557863

1.3.2 国内方式

但是国内许多人无法登录到GitHub,那就采用下面的方式

比如谷歌浏览器(其他浏览器也同理,只要找到“管理扩展程序模块”搜vue即可)

  1. 点击管理扩展程序

image-20231027145847029

  1. 打开“开发者模式”

image-20231027145916882

  1. 搜索下面这个插件即可

image-20231027150533479

如下所示

image-20231027150559135

  1. 最后页面右上角会多一个“三角形”

image-20231027150720757

1.4 消除环境提示

消除下面这个提示信息

image-20231027152117939

方法1: 切换成生产环境就会消除提示


方法2:不让他提示

怎么不让他提示呢?查看文档

  1. 查看API文档

    API — Vue.js (vuejs.org)

image-20231027152325082

  1. 找到全局配置

image-20231027152429593

Vue.config都是vue对全局的配置,一次修改,在哪都能用

下面有一个“productionTip”默认是“true”开启状态

image-20231027152457297

  1. 设置productionTip为false,此时就关闭了
<body><script type="text/javascript">Vue.config.productionTip = false</script></body>

image-20231027152717853

  1. 保存并启动页面,控制台那是相当的干净

image-20231027153150896

二、 入门程序

2.1 HelloWord

  1. 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象

  2. root容器里面的代码依然符合html规范,只不过混入了一些特殊的Vue语法

  3. root容器里面的代码被称为Vue模板

    这个模板是很重要的概念

    模板的解析流程: 先有的id=root的div容器,后有的new Vue实例,当Vue实例开始工作后发现el指定了id=root的容器,然后Vue实例就把对应的容器拿过来进行解析,去找找有没有一些特殊语法,比如说插值语法,如果有的话就进行替换,最后就会生成一个全新的id为root的div容器

    image-20231027171707401

    模板经过解析就变成了正常的HTML片段

<!DOCTYPE html><html><head><meta charset="UTF8" /><title>初始vue</title><!--引入开发版vue.js--><!--引入后多了一个全局Vue对象/函数  (这个Vue可以被当做对象,也可以被当做函数)--><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备一个容器,在这个容器中呈现我们的页面--><div id="root"><!--{{name}}是插值语法--><h1>Hello,{{name}} 你很棒!!</h1></div><script type="text/javascript">//关闭开发环境时的生产提示Vue.config.productionTip = false//在整体调整productionTip后再写代码//当我们引入vue.js文件后,我们全局就多了一个Vue函数//创建Vue实例,并且参数只传一个配置对象。配置对象的value值、数据类型是不能随便更改的//   比如axios中 axios({ url: "xxxx"})  这个“url”是不能随便更改的,如果改成“ura”就不会实现对应的功能const x = new Vue({el: '#root', //用于指定当前Vue实例为哪个容器服务,值通常为CSS选择器字符串,比如这个地方是div标签的选择器// el: document.getElementById('root'),我们之前是这么获取的// data用于存储数据,数据供el所指定的容器去使用,此data先暂时写成一个对象data: {name: "张靖奇"}})//el是element元素的简称,el: '#root'是一个id选择器,找到了id为root的标签//假如说没有el: '#root'配置,容器和vue实例是关联不到一起的,互相不知道对方的存在。//当写上el: '#root'配置后,容器和vue实例关联到了一起。vue实例就知道了要把页面成果展示到root所对应的标签中</script></body></html>

2.2 分析Hello案例

2.3.1 多容器对一实例

假如我们页面上有俩容器,其class都是“root”,然后我们的Vue实例el='.root‘,那Vue实例会根据我们所写的选择器找容器root,会发现有两个。

那两个class=root的容器都被Vue实例给接管了,而且两个容器中都使用了插值语法{{name}}

<!DOCTYPE html><html><head><meta charset="UTF8" /><title>初始vue</title><!--引入开发版vue.js--><!--引入后多了一个全局Vue对象/函数  (这个Vue可以被当做对象,也可以被当做函数)--><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><div class="root"><!--{{name}}是插值语法--><h1>Hello,{{name}} 你很棒!!</h1></div><div class="root"><!--{{name}}是插值语法--><h1>Hello,{{name}} 你很棒!!</h1></div><script type="text/javascript">//关闭开发环境时的生产提示Vue.config.productionTip = falseconst x = new Vue({el: '.root',//class选择器data: {name: "张靖奇"}})</script></body></html>

那按照我们的理解页面是不是会出现两个“张靖奇”?

其实不是,如下图所示:第一个是正常的,但是第二个没有人解析(不会报错)

image-20231027202011959

原因

根据我们写的el:'.root’它会找到两个容器,但是只会用第一个,不会用第二个

一个Vue实例不能去接管两个容器

2.3.2 多实例对应一容器

<!-- 准备一个容器,在这个容器中呈现我们的页面--><div id="root"><h1>Hello,{{name}} 你很棒!!</h1></div><script type="text/javascript">//关闭开发环境时的生产提示Vue.config.productionTip = falsenew Vue({el: '#root',data: {name: "张靖奇"}})new Vue({el: '#root',data:{name:"大帅哥"}})</script>

效果如下图所示:控制台不会报错,说明是第一个Vue接管的容器

image-20231027202906133

再将代码改成下面这个样子

<!-- 准备一个容器,在这个容器中呈现我们的页面--><div id="root"><h1>Hello,{{name}} 你很棒!!{{address}}</h1></div><script type="text/javascript">//关闭开发环境时的生产提示Vue.config.productionTip = falsenew Vue({el: '#root',data: {name: "张靖奇"}})new Vue({el: '#root',data:{address:"大帅哥"}})</script>

效果图,说明是第一个Vue接管的容器

image-20231027203135106

控制台报错

image-20231027203153639

原因:当一个Vue实例出现后,它就和id为root的容器绑定在一块,那当我们第二个Vue实例出现也要与id为root的容器绑定,显然是无法绑定的

一个容器只能被一个Vue实例接管

2.3.3 总结

容器与Vue实例之间的关系是一对一

1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象

2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法

3.root容器里面的代码被称为【vue模板】

4.Vue实例和容器是一一对应的

5.真实开发中只有一个Vue实例,并且会配合组件一起使用

6.{{xxx}}中xxx要写js表达式,name模板中用到该数据的地方也会自动更新

image-20231027204525824

7.一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新

在页面上使用Vue插件的时候有一个<Root>标签,这个标签和代码中的id=“root”、el:"#root"没有任何关系

<Root>标签标签表示根,也就是Vue实例

image-20231027205534378

三、MVVM模型

Vue虽然没有完全遵循MVVM模型,但是Vue的设计收到了MVVM的启发

MVVM是Vue实现数据驱动视图和双向数据绑定的核心原理,把每个HTML页面都拆分成了如下三个部分

  1. M: 模型(Model),对应data中的数据,表示当前页面渲染时所依赖的数据源,并且data中的所有属性最终都会出现在VM身上(数据代理)。

  2. V:视图(View),模板,表示当前页面所渲染的DOM结构

  3. VM:视图模型ViewModel,Vue实例对象,是MVVM的核心。

    vm身上所有属性及Vue原型上所有数据,在Vue模板中都可以直接使用

    ViewModel里面有两条线:DOM Listeners所在线 和 Data Bindings所在线

    DOM Listeners :DOM监听器,在前面的双向数据绑定案例中,我们在输入框中输入了一个数据,然后Vue实例中对应的value也会改变,也就是页面中的改变会映射回数据中的改变。

    这个监听器得时时刻刻的监听这个输入框 ,还得知道监听的是什么,并且将改变后的值同步到Vue实例对象中对应的值内

    DataBindings: 数据绑定,简单的来说就是我们写data的时候,不论是写对象还是写函数,里面都是一组一组的key :value,这一组组的key value经过Vue数据绑定就把数据展示在了页面的对应位置

    image-20231028153423443

image-20231028160114749

相关文章:

1.Vue—简介、实例与容器、MVVM模型

文章目录 一、Vue简介1.1 特点1.2 搭建Vue开发环境1.2.1 开发版1.2.2 生产版 1.3 下载Vue开发工具1.3.1 GitHub方式1.3.2 国内方式 1.4 消除环境提示 二、 入门程序2.1 HelloWord2.2 分析Hello案例2.3.1 多容器对一实例2.3.2 多实例对应一容器2.3.3 总结 三、MVVM模型 一、Vue简…...

【Java笔试强训】Day7(WY22 Fibonacci数列、CM46 合法括号序列判断)

Fibonacci数列 链接&#xff1a;Fibonacci数列 题目&#xff1a; Fibonacci数列是这样定义的&#xff1a; F[0] 0 F[1] 1 for each i ≥ 2: F[i] F[i-1] F[i-2] 因此&#xff0c;Fibonacci数列就形如&#xff1a;0, 1, 1, 2, 3, 5, 8, 13, …&#xff0c;在Fibonacci数列…...

Linux进程的概念

一&#xff1a;冯诺依曼体系结构 什么叫做体系结构&#xff1f;&#xff1f;&#xff1f; 计算机组成 / 芯片架构 输入单元&#xff1a;键盘、话筒、摄像头、usb、鼠标、磁盘&#xff08;ROM&#xff09;/ssd、网卡、显卡 存储器&#xff1a;内存&#xff08;RAM&#xff09…...

XML教学视频(黑马程序员精讲 XML 知识!)笔记

第一章XML概述 1.1认识XML XML数据格式&#xff1a; 不是html但又和html有点相似 XML数据格式最主要的功能就是数据传输&#xff08;一个服务器到另一个服务器&#xff0c;一个网站到另一个网站&#xff09;配置文件、储存数据当做小型数据可使用、规范数据格式让数据具有结…...

自定义组件实现v-model

要使自定义的Vue组件支持v-model&#xff0c;需要实现一个名为value的prop和一个名为input的事件。在组件内部&#xff0c;将value prop 绑定到组件的内部状态&#xff0c;然后在对内部状态进行修改时触发input事件。 自定义UI组件 <template><input :value"va…...

【自动驾驶】Free space与Ray casting

文章目录 1 Free space是什么2 Ray casting是什么3 它俩啥关系4 TODO 1 Free space是什么 在自动驾驶领域&#xff0c;free space即可行驶区域&#xff0c;在结构化道路的十字路口/非结构化道路都有很大作用。 2 Ray casting是什么 ray casting是计算机视觉领域&#xff0c;…...

RHCE---正则表达式

文章目录 目录 文章目录 前言 一. 文本搜索工具 二.正则表达式 元字符 ^行首与$行尾 点(.) 与星号(*) 扩展正则 总结 前言 正则表达式是文本三剑客中及其重要的一环&#xff0c;称之为灵魂也不为过&#xff0c;到底什么是正则表达式呢&#xff0c;让我们一起来了解以下…...

3D RPG Course | Core 学习日记一:初识URP

前言 最近开始学习Unity中文课堂M_Studio&#xff08;麦大&#xff09;的3D RPG Course&#xff0c;学习一下3D RPG游戏核心功能的实现&#xff0c;第一课我们学习到的是地图场景的编辑&#xff0c;其中涉及到了URP渲染。 我们首先进入Unity资源商店把地图素材和人物素材导入好…...

Spring Cloud 之RabbitMQ的学习【详细】

服务通信 分布式系统通信两种方式&#xff1a; 直接远程调用&#xff08;同步&#xff09;借助第三方间接通信&#xff08;异步&#xff09; 同步通讯的问题 Feign就属于同步通讯。存在的如下问题 耦合度高&#xff0c;每次添加新的模块就要修改原有模块的代码性能下降&am…...

第五章 I/O管理 六、I/O核心子系统

目录 一、核心子系统 1、I/O调度 2、设备保护 二、假脱机技术 1、脱机&#xff1a; 2、假脱机&#xff08;SPOOLing技术&#xff09;&#xff1a; 3、应用&#xff1a; 1.独占式设备&#xff1a; 2.共享设备&#xff1a; 4、共享打印机原理分析 三、总结 一、核心子系…...

winfrom窗体比例缩放

用于控件大小随窗体大小等比例缩放的C#代码。该代码可以在窗体重载中使用&#xff0c;以确保窗体中的控件在窗体大小改变时能够按比例缩放。 SetTag方法&#xff1a;该方法用于设置控件的Tag属性&#xff0c;以存储控件的宽度、高度、左边距、顶边距和字体大小等信息。SetCont…...

宇信科技:强势行业加速融入AIGC,同时做深做细

【科技明说 &#xff5c; 重磅专题】 大家可能没有想到&#xff0c;一向对外低调行事的宇信科技&#xff0c;在AIGC方面2023年就已经训练出了适配金融场景的垂直模型&#xff0c;并应用到了各产品线上&#xff0c;同时结合通用大模型预研了宇信金融系统编程大模型。宇信金融系…...

Google Play上的Android广告软件应用程序积累了200万次安装

大家好&#xff0c;今天我们要聊一聊Google Play上的一个热门话题——Android广告软件应用程序。最近&#xff0c;一些恶意应用程序在Google Play上累积了200万次的安装量&#xff0c;给用户推送了讨厌的广告&#xff0c;同时又隐藏了它们在受感染设备上的存在。 根据Doctor W…...

算法通关村第四关-黄金挑战栈的经典问题

括号匹配问题 描述 : 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有…...

前端开发必备技能!用简单CSS代码绘制三角形,提升用户体验

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 ⭐ 专栏简介 &#x1f4d8; 文章引言 一、前…...

想翻译pdf文档,试了几个工具对比:有阿里(完全免费,快,好用,质量高,不用注册登录)道最好(有限免费) 百度(有限免费)和谷歌完全免费(网不好)

文档翻释作为基础设施&#xff0c;工作必备。 阿里 &#xff08;完全免费&#xff0c;快&#xff0c;好用&#xff0c;质量高&#xff0c;不用注册登录&#xff0c;无广告&#xff09;我给满分 https://translate.alibaba.com/#core-translation 先选好语言。 Google(完全免…...

c# .net linux ImageSharp+FastDFS+Base64上传图片,压缩图片大小,图像处理dcoker中使用也可以

.net 以前是用System.Drawing来处理图片&#xff0c;但是在dcoker 、linux上用不了 微软官方推荐用 1、SkiaSharp 如果项目运行到docker里&#xff0c;需要NUGET安装SkiaSharp.NativeAssets.Linux.NoDependencies 注意&#xff1a;如果你同时引用SkiaSharp.NativeAssets.Li…...

Flutter FittedBox

&#x1f525; 英文单词FittedBox &#x1f525; Fitted 通过有道翻译如下 &#xff1a; Box 通过有道翻译如下 &#xff1a; 对 FittedBox 的理解 我们可以将 FittedBox 理解为合适的盒子&#xff0c;将其它布局放到FittedBox这样一个盒子中&#xff0c;从而实现 盒子里面的…...

亚信科技:发挥自我优势深入AIGC,并购整合高瞻远瞩致力未来路

【科技明说 &#xff5c; 重磅专题】 亚信科技在IT提供商领域中是一个低调的前行者&#xff0c;在全球通信及大型企业市场中扮演着重要的角色。对于近年来如火如荼AI方面的投入与研究&#xff0c;亚信科技是否也很重视呢&#xff1f; 事实上&#xff0c;是肯定的回答。 在我看…...

【设计模式】第17节:行为型模式之“解释器模式”

一、简介 解释器模式为某个语言定义它的语法&#xff08;或者叫文法&#xff09;表示&#xff0c;并定义一个解释器用来处理这个语法。 二、适用场景 领域特定语言复杂输入解释可扩展的语言结构 三、UML类图 四、案例 对输入的特定格式的打印语句进行解析并执行。 packag…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...