前端入门(二)Vue2基本语法、样式渲染、数据代理与监测

文章目录

  • Vue简介
    • Vue的特点
    • Hello, Vue
  • Vue基本语法
    • 模板语法
    • 数据绑定(v-bind、v-model)
      • el与data的两种写法
    • 事件处理(v-on:click / @click)
      • 事件修饰符
      • 键盘事件(缺)
    • 计算属性与监视(computed、watch)
      • 计算属性-computed
      • 监视属性-watch
      • 深度监视-deep
      • computed和watch的区别
    • 过滤器 - filters
      • 局部过滤器
      • 全局过滤器
  • 样式渲染
    • 绑定class样式,:class
    • 绑定style样式,:style
    • 条件渲染,v-if 与 v-show
    • 列表渲染,v-for
      • v-for中的key的作用与原理(缺)
    • 列表过滤与排序(案例)
      • watch监测实现过滤
      • computed实现过滤
      • 添加排序功能
    • 其他v-?内置指令
      • v-text
      • v-html
        • xss cookie攻击案例
      • v-cloak
      • v-once
      • v-pre
    • Vue自定义指令(缺)
      • 函数式
      • 对象式
  • Vue数据代理与数据监测
    • 数据代理实现原理
      • Object.defineProperty()
      • 数据代理
    • 数据监测
      • 监测对象 - Vue.set() / vm.$set()
      • 监测数组 - 包裹

Vue简介

在这里插入图片描述

Vue的特点

在这里插入图片描述

在这里插入图片描述

3、使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。

在这里插入图片描述

Hello, Vue

1、Vue实例与HTML容器是一一对应的,使用el属性让容器与Vue实例关联起来。
2、Vue可以使用插值语法(双层花括号)解析Vue的data属性,插值语法还可以解析其他的js表达式(所谓js表达式,就是可以产生一个值的js语句,一般为元素赋值语句的等号右边部分或者函数的返回值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="../js/vue.js"></script><title>初始Vue</title>
</head>
<body><script type="text/javascript">Vue.config.productionTip = false;  // 开发环境, 关闭vue对于生产环境的提示信息</script><div id = "r1"><h1>{{msg}}  // vue的插值语法</h1></div><script type="text/javascript">const x = new Vue({el: "#r1",  // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器data: {msg: "hello vue"}});</script>
</body></html>

Vue基本语法

模板语法

Vue模板语法有2大类:
1、插值语法:

  • 功能:用于解析标签体(开闭标签之间部分)内容。
  • 写法:{{****}} ****是js表达式,且可以读取vue实例中data的所有属性。

2、指令语法:

  • 功能:用于解析标签(包括标签属性,标签体内容,绑定事件……)
  • 举例:v-bind:href = "***" 或简写为 ::href="***",***同样要写js表达式,且可以直接读取到data中的属性。
  • 注:vue中除了v-bind还有很多v-???的属性。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="../js/vue.js"></script><title>初始Vue</title>
</head>
<body><script type="text/javascript">Vue.config.productionTip = false;  // 开发环境, 关闭vue对于生产环境的提示信息</script><div id = "root"><h1>差值语法<h3>{{name}}</h3>  // vue的插值语法</h1><h1>指令语法<a v-bind:href="school.url.toUpperCase()">点我去{{school.url}}学习</a></h1></div><script type="text/javascript">const x = new Vue({el: "#root",  // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器data: {name: 'jack'school:{name:'ULCA',url:'https://www.ulca.com'}}});</script>
</body>
</html>

数据绑定(v-bind、v-model)

Vue中有2中数据绑定方式:

  • 1、单向绑定(v-bind):数据只能从data流向页面
  • 2、双向绑定(v-model):数据不仅能从data流向页面,也可以从页面流向data。
    • 双向绑定一般应用在表单元素上(如:input、select等,这些元素都有value属性,v-model绑定的正是这个value属性)
    • v-model:value 可以简写为v-model,因为v-model默认收集的就是value值。

el与data的两种写法

el:

  • 使用el属性绑定容器
  • 使用代码.$mount('#root')绑定

下边演示了一个案例,使用一个定时器,在1秒后再建立vue实例与html容器之间的关联。
在这里插入图片描述
data:

  • 使用data属性,对象式
  • 使用函数返回值,函数式。当学习组件时,data必须使用函数式,否则会报错。
  • 一个重要的原则,由Vue管理的函数,不可以写箭头式,一旦写了箭头式,this就不再是Vue实例了。

在这里插入图片描述

事件处理(v-on:click / @click)

  1. 使用v-on:×××@×××绑定事件,其中××× 是事件名。
  2. 事件的回调需要配置在method对象中,最终会在vm上。
  3. method中配置的函数都是被Vue管理的函数,this指向的就是组件实例对象,最好不要用箭头函数(lambda)表示。
  4. @click="demo" 和 @click="deme($event)"效果是一致的,但是后者可以给函数传参数。

事件修饰符

Vue中的事件修饰符:

  1. prevent:阻止默认事件(常用)
  2. stop:阻止事件冒泡(即事件不会向外层传播,常用)
  3. once:事件只触发一次(常用)
  4. capture:使用事件的捕获模式(即外层容器的事件也会被捕获)
  5. self:只有event.target是当前操作的元素才触发事件
  6. passive:事件的默认行为立即执行,无需等待事件回调执行完毕。

键盘事件(缺)

计算属性与监视(computed、watch)

计算属性-computed

计算属性的重点突出在属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),仅此而已;可以想象为缓存!

计算在虚拟dom中进行,计算结果在缓存中,不会随时间变化,当计算属性中的参数有更新时,虚拟dom清空,重新计算,这时计算属性才会发生变化。
注意计算属性是vue component的属性,可以用方法定义,但不可用作方法调用。

计算属性的优势:有缓存,多次调用,只计算一次。仅当计算所依赖的数据变化后才会重新修改。

computed: {fullname:{get(){return this.firstName + '-' + this.lastName;}}}

计算属性:也可以使用函数返回值设置,但是methods,computed 方法名不能重名,重名字后,只会调用methods的方法。

computed: {//计算属性:methods,computed 方法名不能重名,重名字后,只会调用methods的方法fullname: function () {return this.firstName + '-' + this.lastName;}// 或者函数也可直接这样写:fullname() {return this.firstName + '-' + this.lastName;}}

监视属性-watch

监视属性有两种配置方式:

  • Vue实例中使用watch
  • 调用Vue实例的.$watch方法

主要是可以设置handler(new, old)方法,每次监测的值变化时,都会调用该方法。
在这里插入图片描述

和计算属性一样,监测属性也可以进行简写:
在这里插入图片描述

深度监视-deep

监视多级结构中的某个属性时,使用’number.a’指定对象的key。
在这里插入图片描述
深度监视:

  • Vue中的watch默认不监测对象内部值的改变
  • 配置deep:true,则可以监测对象内部值的改变(多层)

在下边的例子中number对象开启了深度监测,无论属性a还是b变化,都会触发handler()。
在这里插入图片描述

computed和watch的区别

  1. computed能完成的功能,watch都可以完成。
  2. watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。

两个重要的小原则:

  • 被Vue管理的函数,最好不要写为箭头函数,即写成普通函数,这样this的指向才是Vue实例对象。
  • 所有不被Vue管理的函数(定时器回调函数,Ajax的回调函数等),最好写成箭头函数,这样this的指向才是Vue实例对象。

过滤器 - filters

过滤器可以对要显式进行特定格式化后再显示(适用于一些简单的处理逻辑),它使用管道处理的语法。

使用过滤器的语法:

{{xxx | 过滤器名}}

或者

v-bind:属性 = "xxx : 过滤器名"

过滤器filters实际上也可以使用计算属性computed或者方法methods来实现,但过滤器filters更加强调一种简单的函数处理逻辑,有点类似于C++中的inline函数

局部过滤器

局部过滤器针对某个特定的Vue实例有效。

过滤器也可以接受额外的参数,但是默认第一个参数是管道传来的前一项数据结果。
在这里插入图片描述

全局过滤器

全局过滤器针对所有的Vue实例都有效。
在这里插入图片描述

样式渲染

绑定class样式,:class

可以使用v-bind或者简写为:绑定class样式。
下面列举三种Vue绑定class样式的案例:

  • 字符串写法,适用于样式类名不确定,需要动态绑定
  • 数组写法,适用于要绑定的样式个数不确定,名字也不确定
  • 对象写法,适用于要绑定的样式个数确定、名字也确定,但是需要动态决定是否使用。

字符串写法:
basic、normal、happy都是css类样式
在这里插入图片描述

数组写法:
样式数组classArr可以动态添加新的样式类型。
在这里插入图片描述
对象写法:
对象key就是样式类名,value决定是否使用该样式。
在这里插入图片描述

绑定style样式,:style

  • :style = “{fontSize: +++}”,其中+++是动态值
  • :style = “[a,b]”,其中a、b是样式对象

在这里插入图片描述

条件渲染,v-if 与 v-show

  1. v-if:适用于切换频率较低的场景,不满足if条件的DOM元素直接被移除。
    • v-if = “表达式”
    • v-else-if = “表达式”
    • v-else = “表达式”
  2. v-show:适用于切换频率较高的场景,不满足show条件的元素只是样式被隐藏。使用v-if时,元素可能无法获取到,而使用v-show一定可以获取到。

列表渲染,v-for

v-for指令用于展示列表数据。

  • 语法是v-for = "(item, index) in xxx" : key = "yyy"
  • 可以遍历数组、对象、字符串、指定次数

在这里插入图片描述

v-for中的key的作用与原理(缺)

列表过滤与排序(案例)

过滤功能实现效果案例:
输入人员名字,过滤出相关信息:
在这里插入图片描述
在这里插入图片描述

watch监测实现过滤

  • 输入框使用v-model双向绑定输入的keyword
  • 使用persons数组代表原数据,filterPersons表示过滤后的数据,使用条件渲染v-for,渲染过滤后的数据。
  • 使用watch监测keyword,当值变化时,根据新值,过滤出新的数组。
  • 注意indexof()函数,当不匹配时,返回-1,当匹配空字符串时,返回0,其余的返回关键字第一次出现的数组下标
  • 由于filterPersons初始为空数组,为了显示原有的数据,应该使用watchimmediate属性,让watch立即执行一次,那么此时关键字为空字符串,filterPersons过滤结果就是原始persons
<div id = "r1"><h2> 人员列表<input type="text" v-model="keyword" placeholder="请输入名字"><ul><li v-for = "(p, index) of filterPersons" :key = "index">{{p.name}} -- {{p.age}} -- {{p.sex}} -- {{p.id}}</li></ul></h2>
</div><script type="text/javascript">const x = new Vue({el: "#r1",  // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器data: {keyword: "",persons: [{id : '001', name: '马冬梅', age : '19', sex : '女'},{id : '002', name: '周冬雨', age : '20', sex : '女'},{id : '003', name: '周杰伦', age : '21', sex : '男'},{id : '004', name: '扁嘴伦', age : '22', sex : '男'},],filterPersons: []},methods:{},watch: {keyword: {// 初始化时,立即执行一次,这样keyword的值就为空了,所以不会执行过滤,显示原始的persons内容immediate: true,handler(val) {this.filterPersons = this.persons.filter(p => p.name.indexOf(val) != -1);}}},

computed实现过滤

使用computed实现则更为简洁,只需要计算filterPersons数组,而filterPersons的计算依赖于keyword,因此每当keyword变化,自动重新计算filterPersons并渲染。

    <div id = "r1"><h2> 人员列表<input type="text" v-model="keyword" placeholder="请输入名字"><ul><li v-for = "(p, index) of filterPersons" :key = "index">{{p.name}} -- {{p.age}} -- {{p.sex}} -- {{p.id}}</li></ul></h2></div><script type="text/javascript">const x = new Vue({el: "#r1",  // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器data: {keyword: "",persons: [{id : '001', name: '马冬梅', age : '19', sex : '女'},{id : '002', name: '周冬雨', age : '20', sex : '女'},{id : '003', name: '周杰伦', age : '21', sex : '男'},{id : '004', name: '扁嘴伦', age : '22', sex : '男'},],// filterPersons: []},methods:{},// watch: {//     keyword: {//         // 初始化时,立即执行一次,这样keyword的值就为空了,所以不会执行过滤,显示原始的persons内容//         immediate: true,//         handler(val) {//             this.filterPersons = this.persons.filter(p => p.name.indexOf(val) != -1);//         }//     }// },computed:{filterPersons(){return this.persons.filter(p => p.name.indexOf(this.keyword) != -1);}}});</script>

添加排序功能

对过滤结果再添加排序功能:
在这里插入图片描述

  • 添加一个字段sortType,用于记录当前排序的类型

在这里插入图片描述
在计算filterPersons数组中,根据sortType,排序:

            computed:{filterPersons(){const arr = this.persons.filter(p => p.name.indexOf(this.keyword) != -1)if (this.sortType) {arr.sort((p1, p2) => this.sortType === 1 ? p1.age - p2.age : p2.age - p1.age)}return arr}}

其他v-?内置指令

v-text

作用是向所在的标签节点中渲染文本内容,它有两个特点:

  • v-text:会替换掉标签节点中的所有内容,尽管标签中可能写有其他内容,它不会向插值语法{{}}那样自然拼接,而是完全替换。
  • v-text:绑定的字符串数据内容,会被完完全全当做普通字符串处理,尽管绑定的字符串中有类似标签的字符。例如<h>

v-html

v-htmlv-text的唯一区别就在于,v-html会将绑定内容中的标签结构解析出来,而v-text则会完全当做普通字符处理。

v-html有安全性问题!!!!
(1)在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
(2)一定要在可信的内容上使用v-HTML,永远不要在用户提交的内容尚!!!

xss cookie攻击案例

有时候,我们登录了一个网站,浏览器会将服务器信息,存入cookie,cookie存在硬盘中,当关闭浏览器再次打开,由于cookie的存在,无需再次登录,就可进入个人账户。
在这里插入图片描述

由于cookie可以免登录,为了安全起见,cookie是不可跨浏览器使用的,即各个浏览器存入的cookie不可共享。
在这里插入图片描述
那么假如,我们把一个浏览器存入某个网站的cookie全部记录下来,在另一个浏览器打开相同的网站,存入cookie,就有可能通过盗取cookie在另一台电脑上实现cookie免登录!!!

在chrome浏览器,使用 cookie editor导出GitHub网站的所有cookie。
在这里插入图片描述

在火狐浏览器中,使用 cookie editor,将刚刚导出的cookie,导入。
在这里插入图片描述
刷新浏览器,实现了登录。
在这里插入图片描述
携带cookie跳转网站,可能泄露个人信息。
在这里插入图片描述

v-cloak

cloak:斗篷,这个属性字段不需要绑定值,在HTML加载时有这个cloak属性,当渲染完毕时,这个属性就消失了,就像给标签加了一个斗篷,渲染完毕后,将斗篷扯开。

使用css配合 v-cloak可以解决网速慢时,页面出现{{xxx}}的问题

下边代码中,

script 的src导入需要5s,html显示很快,但是渲染需要等待script 的src导入。

加入cloak,再使用css在style中,匹配有v-cloak属性的标签,不展示。则等待时就不会出现{{xxx}}。

在这里插入图片描述

v-once

v-once所在标签节点在初次动态渲染后,就会被视为静态内容,以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。
在这里插入图片描述

v-pre

v-pre指令跳过所在节点的编译过程,可以利用它跳过,没有使用指令语法,没有使用差值语法的节点,起到加快编译的作用。

实际上就是对静态内容进行表示,提前预编译

Vue自定义指令(缺)

函数式

对象式

Vue数据代理与数据监测

数据代理实现原理

Object.defineProperty()

Object.defineProperty()字面意思就是可以为对象设置属性,且在设置属性时,可以控制属性的一些高级选项:

  • enumerable:是否可以枚举
  • writable:是否可修改
  • configurable:是否可删除
    在这里插入图片描述
    此外可以设置属性的get()和set()方法。

数据代理

  1. Vue中通过VM实例对象来代理data对象属性中的操作(读/写)
  2. 数据代理可以更加方便的操作data中的数据
  3. 实现原理:通过Object.defineProperty()把data对象中所有属性添加到vm上,为每一个属性指定getter和setter方法,在这些方法中去读/写data中对于的属性。
    在这里插入图片描述

数据监测

由数据代理可知,vue实例中data的属性字段,其实都是来自于_data,_data中的数据,才是我们在创建vue实例时,在data:中写入的内容,即 对于一个vue实例vm,vm._data === data

vue框架使用数据代理主要做了两件事:

  • 1、将我们的data中的每一组 k-v,添加响应式的getter()和setter()方法。
  • 2、使用vm_data = data,完成赋值。

在这里插入图片描述
响应式的getter()和setter()方法,完成了对vue实例对象每一个数据属性的监测,当需要读数据时,自动调用getter()方法,读取_data中对应的数据,当需要写数据时,自动调用setter()方法,将修改写回_data。

监测对象 - Vue.set() / vm.$set()

倘若在创建vue实例时,对于data的某个对象属性不确定,要在后边动态的给data中某个对象动态添加一个属性。
一般有两种方式:
1、使用Vue.set(src, k, v)方法
其中src是data中的某个数据对象,k是对象键,v是值。

2、使用vm.$set(vm.ele, k, v)方法
其中vm.ele是vue实例data中某个数据对象,k是对象键,v是值。

注意
1、只有通过上述两种方法添加的属性,Vue框架才会给属性添加setter()和getter()方法,该属性的读写才可以被Vue框架所监测到
2、上述第一种方法,src不可以直接填vm实例本身,不可以直接给data新增一个属性,只能是对已有的data的某个属性,添加新的属性k-v

举例:
假如原来data中有student这个对象属性,它有name和age两个属性字段,后续想通过按钮给他添加一个属性性别。

在这里插入图片描述

    <div id = "r1"><h2> 人员属性 </h2><button @click = "addSex1">添加性别男</button><button @click = "addSex2">添加性别女</button><h3>姓名:{{student.name}}</h3><h3>年龄:{{student.age}}</h3><h3 v-if = "student.sex">性别:{{student.sex}}</h3>                        </div><script type="text/javascript">const x = new Vue({el: "#r1",  // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器data: {student:{name: 'lzy',age: 24}},methods: {addSex1() {// 1. Vue.set()Vue.set(this.student, 'sex', '男')},addSex2() {// 2. .$set()this.$set(this.student, 'sex', '女')},}});</script>

在这里插入图片描述

监测数组 - 包裹

Vue 将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

所谓包裹就是说,Vue对数组的上述方法进行进一步封装,使其在实现上述数组功能的同时,能被监测触发更新。

注:上述方法的特征是调用后会改变原始数组。相比之下,也有非变更方法,例如 filter()、concat() 和 slice()。它们不会变更原始数组,而总是返回一个新数组。当使用非变更方法时,可以用新数组替换旧数组:

example1.items = example1.items.filter(function (item) {return item.message.match(/Foo/)
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/206971.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python生成exe文件

Python如何生成exe文件 在终端执行 pip install pyinstaller 在终端执行pyinstaller E:\fund_data\GetFund.py&#xff0c;运行结束后会在D:\Python\Python311\Scripts\dist\目录下生成GetFund.exe文件 3.双击exe文件运行&#xff0c;如果未出现预期结果&#xff0c;可以把e…

邦永PM2项目管理系统 SQL注入漏洞复现

0x01 产品简介 邦永PM2项目管理系统科学地将项目管理思想和方法和谐、统一&#xff0c;使得长期以来困扰项目管理工作者的工期、进度、投资和成本情况无法整体动态管理的问题得到了全面而彻底的解决。 0x02 漏洞概述 邦永科技PM2项目管理平台Global_UserLogin.aspx接口处未对用…

QT搭建的Ros/librviz的GUI软件

1.前言 开发初期学习了下面博主的文章&#xff0c;也报了他在古月局的课&#xff0c;相当于感谢吧。 ROS Qt5 librviz人机交互界面开发一&#xff08;配置QT环境&#xff09;-CSDN博客​​​​​​​r 软件前期也是参考他的开源项目 GitHub - chengyangkj/Ros_Qt5_Gui_App …

拆解现货黄金隔夜利息计算公式

在讨论现货黄金投资手续费的时候&#xff0c;隔夜利息是经常被忽略的一个方面&#xff0c;但它是投资者不得不考虑的成本因素&#xff0c;特别是在中长线交易的情况下。隔夜利息是根据投资者的持仓数量和交易方向所计算出的利息&#xff0c;如果投资者需要持仓过夜&#xff0c;…

APP自动化之Poco框架

今天给大家介绍一款自动化测试框架Poco&#xff0c;其脚本写法非常简洁、高效&#xff0c;其元素定位器效率更快&#xff0c;其本质基于python的第三方库&#xff0c;调试起来也会非常方便&#xff0c;能够很好的提升自动化测试效率&#xff0c;节省时间。 (一&#xff09;背景…

【亚太杯思路助攻】2023年第十三届APMCM亚太地区大学生数学建模竞赛——(文末领取方式)

2023年第十三届APMCM亚太地区大学生数学建模竞赛——来啦&#xff01;&#xff01;&#xff01; 大家准备好了吗&#xff1f;别担心&#xff0c;【数模加油站】会像数模国赛、研赛一样&#xff0c;第一时间提供无偿解题思路、代码、参考文献等资料帮助大家。 祝各位小伙伴都能…

性能测试:系统架构性能优化思路

今天谈下业务系统性能问题分析诊断和性能优化方面的内容。这篇文章重点还是谈已经上线的业务系统后续出现性能问题后的问题诊断和优化重点。 系统性能问题分析流程 我们首先来分析下如果一个业务系统上线前没有性能问题&#xff0c;而在上线后出现了比较严重的性能问题&#x…

什么是索引下推

索引下推介绍 索引下推&#xff08;INDEX CONDITION PUSHDOWN&#xff0c;简称 ICP&#xff09;是在 MySQL 5.6 针对扫描二级索引的一项优化改进。总的来说是通过把索引过滤条件下推到存储引擎&#xff0c;来减少 MySQL 存储引擎访问基表的次数以及 MySQL 服务层访问存储引擎的…

sso 四种授权模式

单点登录 单点登录&#xff0c;英文是 Single Sign On&#xff08;缩写为 SSO&#xff09;。即多个站点共用一台认证授权服务器&#xff0c;用户在站点登录后&#xff0c;可以免登录访问其他所有站点。而且&#xff0c;各站点间可以通过该登录状态直接交互。例如&#xff1a; …

Instant Web API .Net Core Crack

Instant Web API .Net Core 是立即构建即时数据库 Web API&#xff0c;无需编码。在几分钟内生成您的 Web API&#xff0c;以更快地构建应用程序。使用 VS 2022 和 Entity Framework Core 为任何 MS SQL 数据库生成 Web API。 新功能 - 使用 Visual Studio 2022 为 PostgreSQL …

大家为什么开始配置长效IP代理?长效IP代理有什么优势?

随着网络技术的发展&#xff0c;越来越多的人开始关注网络安全和隐私保护。其中&#xff0c;长效IP代理作为一种安全、高效的解决方案&#xff0c;受到了越来越多人的关注。本文将探讨大家为什么开始配置长效IP代理&#xff0c;以及长效IP代理的优势。 一、长效IP代理的优势1.保…

SpringBoot : ch06 整合 web (一)

前言 SpringBoot作为一款优秀的框架&#xff0c;不仅提供了快速开发的能力&#xff0c;同时也提供了丰富的文档和示例&#xff0c;让开发者更加容易上手。在本博客中&#xff0c;我们将介绍如何使用SpringBoot来整合Web应用程序的相关技术&#xff0c;并通过实例代码来演示如何…