我の原创
文章平均质量分 78
pan_junbiao
这个作者很懒,什么都没留下…
展开
-
SpringBoot解决跨域问题
在 Spring Boot 项目中解决跨域问题,主要可以通过以下几种方式来实现。使用 @CrossOrigin 注解,是 Spring 4.2 后引入的。这是解决跨域问题最直接和简单的方法,@CrossOrigin 注解可以添加到类或者方法上,以允许跨域请求。通过实现 WebMvcConfigurer 接口,并重写 addCorsMappings 方法来实现解决跨域问题,这种方式提供了更灵活的配置选项,实现全局的跨域配置。原创 2024-09-29 14:58:09 · 997 阅读 · 0 评论 -
Java使用BeanUtils.copyProperties实现对象的拷贝
BeanUtils.copyProperties 方法是 Java 中 Spring 框架提供的一个非常实用的工具方法,它用于将一个 JavaBean 对象的属性值拷贝到另一个 JavaBean 对象中。这个方法主要用于简化对象之间的数据转换过程,尤其是在处理具有大量相同属性的对象时,可以大大减少代码量,提高开发效率。原创 2024-09-30 17:27:48 · 933 阅读 · 0 评论 -
SpringBoot使用@Slf4j注解实现日志输出
@Slf4j 是 Lombok 库中的一个注解,它极大地简化了日志记录的代码。通过使用这个注解,Lombok 会自动在你的类中注入一个静态的日志对象。通过在类上添加 @Slf4j 注解后,可以直接在方法中使用 log.info() 等方法进行日志打印。原创 2024-09-29 16:50:55 · 476 阅读 · 0 评论 -
MyBatis-Plus自动填充字段
MyBatis-Plus 提供了一个便捷的自动填充功能,用于在插入或更新数据时自动填充某些字段,如创建时间、更新时间等。以下是如何使用这一功能的详细说明。自动填充功能通过实现 MetaObjectHandler 接口来实现。你需要创建一个类来实现这个接口,并在其中定义插入和更新时的填充逻辑。原创 2024-09-28 17:20:07 · 820 阅读 · 0 评论 -
MyBatis-Plus分页查询
在实际开发中,对于大量数据的查询,可以通过分页查询的方式来减少查询量和提高查询效率。在 MyBatis-Plus 中,分页查询可以通过使用 Page 对象和 IService 接口提供的分页方法来实现。MyBatis-Plus 的分页插件 PaginationInnerInterceptor 提供了强大的分页功能,支持多种数据库,使得分页查询变得简单高效。原创 2024-09-28 16:08:32 · 1162 阅读 · 0 评论 -
SpringBoot与MyBatis-Plus的整合与综合实例
MyBatis 是一款优秀的持久层框架,它支持定制化SQL、存储过程、以及高级映射。MyBatis3 提供的注解可以取代 XML。例如,使用注解 @Select 直接编写 SQL 完成数据查询。MyBatis-Plus 是一个对 MyBatis 进行增强的工具,在 MyBatis 的基础上只做增强不做改变,为简化开发、提高效率而生。原创 2024-09-27 17:48:16 · 1194 阅读 · 0 评论 -
SpringBoot整合Lombok插件与使用说明
Lombok 是一款 Java 开发插件,旨在通过定义的一些注解来消除业务工程中冗长和繁琐的代码,尤其是对于简单的 Java 模型对象(POJO)。使用 Lombok 插件后,Java 开发人员可以节省出重复构建诸如 hashCode 和 equals 这样的方法以及各种业务对象模型的 accessor 和 ToString 等方法的大量时间。这些方法在编译源代码期间自动生成,并没有如反射那样降低程序的性能。原创 2024-09-26 18:54:31 · 979 阅读 · 0 评论 -
JavaScript异步编程:async、await的使用
async 和 await 是在 ECMAScript 2017 (ES7) 中引入的特性,用于处理异步操作。它们允许你以一种更加简洁和同步的方式来编写异步代码。async 函数表示它会返回一个 Promise,而 await 关键字用于等待一个 Promise 解决。async 是一个函数修饰符,用于声明一个函数是异步的。调用 async 函数时,该函数会立即返回一个 Promise 对象,即使函数体内部没有显式返回 Promise,JavaScript 也会自动将函数的结果封装成 Promise 对象。原创 2024-09-26 17:00:53 · 790 阅读 · 0 评论 -
DOM获取元素并修改内容:getElementById()方法、value属性、innerHTML属性、innerText属性
Document 对象,当 HTML 文档加载到 Web 浏览器中时,它就变成了一个文档对象。文档对象是 HTML 文档的根节点。文档对象是窗口对象的属性。innerHTML 属性声明了元素含有的 HTML 文本,不包括元素本身的开始标记和结束标记。通过该属性可以为指定的 HTML 文本替换元素内容。innerText 属性与innerHTML 属性的功能类似,只是该属性只能声明元素包含的文本内容,即使指定的是 HTML 文本,它也会认为是普通文本而原样输出。原创 2024-09-25 15:23:45 · 475 阅读 · 0 评论 -
Vue使用Vue Router路由:通过URL传递与获取参数
Vue Router 路由实际上就是一种映射关系。例如,多个选项卡之间的切换就可以使用路由功能来实现。在切换时,根据鼠标的点击事件显示不同的页面内容,这相当于事件和事件处理程序之间的映射关系。在实际的开发中,经常需要通过URL来传递参数,同时在 JavaScript 脚本中需要获取URL中的参数。原创 2024-09-23 19:38:33 · 925 阅读 · 0 评论 -
Vue使用Vue Router路由:开发单页应用
在单页 Web 应用中,整个项目只有一个 HTML 文件,不同视图(组件的模块)的内容都是在同一个页面中渲染的。当用户切换页面时,页面之前的跳转都是在浏览器端完成的,这时就需要使用前端路由。路由实际上就是一种映射关系。例如,多个选项卡之间的切换就可以使用路由功能来实现。在切换时,根据鼠标的点击事件显示不同的页面内容,这相当于事件和事件处理程序之间的映射关系。原创 2024-09-23 18:07:56 · 1435 阅读 · 0 评论 -
Vue使用axios二次封装、解决跨域问题
在项目中,axios 进行二次封装可以更加方便的使用 Ajax 请求,提高代码复用性和维护性。同时可以封装统一的请求与响应拦截处理。在实际开发过程中,浏览器通常需要和服务器端进行数据交互。而 Vue.js 并未提供与服务器端通信的接口。从 Vue.js 2.0 版本之后,官方推荐使用axios 来实现 Ajax 请求。axios 是一个基于 promise 的 HTTP 客户端。原创 2024-09-21 16:53:24 · 1593 阅读 · 0 评论 -
Vue使用axios实现Ajax请求
在实际开发过程中,浏览器通常需要和服务器端进行数据交互。而 Vue.js 并未提供与服务器端通信的接口。从 Vue.js 2.0 版本之后,官方推荐使用axios 来实现 Ajax 请求。axios 是一个基于 promise 的 HTTP 客户端。原创 2024-09-20 16:29:25 · 902 阅读 · 0 评论 -
Vue使用代理方式解决跨域问题
如果 Vue 前端应用请求后端 API 服务器,出现跨域问题(CORS),这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。通过使用代理方式解决跨域问题。vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。原创 2024-09-20 15:08:18 · 656 阅读 · 0 评论 -
Vue3.0组合式API:使用ref获取DOM元素
在 Vue3.0 中,使用 ref() 函数除了可以对某个原始值创建响应式代理对象,还可以获取模板中的指定 DOM 元素。要获取指定 DOM 元素,首先需要为该元素添加一个 ref 属性,然后在 setup() 函数中声明一个名称与 ref 属性值相同的变量,并传入一个空值 null,再通过“变量名.value”的形式就可以获取到该元素。原创 2024-09-19 16:57:25 · 499 阅读 · 0 评论 -
Vue3.0组合式API:依赖注入provide和inject实现跨层组件的通信
通常情况下,当我们需要从父组件向子组件传递数据时,会使用 props。想象一下这样的结构:有一些多层级嵌套的组件,形成了一棵巨大的组件树,而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下,如果仅使用 props 则必须将其沿着组件链逐级传递下去,这会非常麻烦。provide 和 inject 可以帮助我们解决这一问题。一个父组件相对于其所有的后代组件,会作为依赖提供者。任何后代的组件树,无论层级有多深,都可以注入由父组件提供给整条链路的依赖。原创 2024-09-19 16:04:26 · 581 阅读 · 0 评论 -
Vue3.0组合式API:使用defineEmits()实现子组件向父组件传递数据
父组件通过使用 Prop 为子组件传递数据,但如果子组件要把数据传递回去,就需要使用自定义事件来实现。父组件可以通过 v-on 指令(简写形式“@”)监听子组件实例的自定义事件,而子组件可以通过调用内建的 defineEmits()函数并传入事件名称来触发自定义事件。原创 2024-09-18 18:18:52 · 1043 阅读 · 0 评论 -
Vue3.0组合式API:使用defineProps()实现父组件向子组件传递数据
由于组件实例的作用域是孤立的,因此子组件的模板无法直接应用父组件的数据。如果想要通过父组件向子组件传递数据,就需要定义 Prop。Prop 是父组件用来传递数据的一个自定义属性,这样的属性需要定义在组件选项对象的 props 选项中。通过 props 选项中定义的属性可以将父组件的数据传递给子组件,而子组件需要显示地用 props 选项来声明 Prop。原创 2024-09-18 16:24:49 · 1407 阅读 · 0 评论 -
Vue3.0组合式API:computed计算属性、watch监听器、watchEffect高级监听器
在模板中绑定表达式只能用于简单的运算。如果运算比较复杂,可以使用 Vue.js 提供的计算属性,通过计算属性可以处理比较复杂的逻辑。通过计算属性可以实现各种复杂的逻辑,包括运算、函数调用等,只要最后返回一个计算结果就可以。当计算属性依赖的数据发生变化时,计算属性的值会自动更新,所有依赖该计算属性的数据绑定也会同步进行更新。原创 2024-09-15 16:33:50 · 1044 阅读 · 0 评论 -
Vue3.0组合式API:使用reactive()、ref()创建响应式代理对象
reactive() 方法用于将定义的 JavaScript 对象转换为响应式对象。reactive() 方法可以为一个 JavaScript 对象创建响应式代理,如果需要对象某个基本数据类型(如:数字、字符串)的数据创建响应式代理对象,可以通过ref() 方法实现。该方法接收一个原始值作为参数,返回一个响应式的对象,该对象只有一个 value 属性值指向内部值。原创 2024-09-14 15:49:30 · 1021 阅读 · 0 评论 -
Vue3.0组合式API:setup()函数
setup() 函数是一个新的组件选项,它是组件内部使用组合式 API 的入口。setup() 函数在组件实例创建之前,初始化 Prop 之后调用,而且setup() 函数是在 beforeCreate 钩子函数之前调用。setup() 函数可以返回一个对象或函数,对象的属性会合并到组件模板渲染的上下文中。setup() 函数可以接收两个可选的参数。第一个参数是响应式的 props 对象,第二个参数是一个上下文(context)对象。原创 2024-09-14 12:05:47 · 1299 阅读 · 0 评论 -
Vue组件:模板引用ref属性的使用
虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作,但在某些情况下,我们仍然需要直接访问底层 DOM 元素。要实现这一点,我们可以使用特殊的 ref 属性。挂载结束后引用都会被加载在 this.$refs 之上。原创 2024-09-13 17:01:38 · 509 阅读 · 0 评论 -
Vue组件:依赖注入provide和inject的使用
通常情况下,当我们需要从父组件向子组件传递数据时,会使用 props。想象一下这样的结构:有一些多层级嵌套的组件,形成了一棵巨大的组件树,而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下,如果仅使用 props 则必须将其沿着组件链逐级传递下去,这会非常麻烦。provide 和 inject 可以帮助我们解决这一问题。一个父组件相对于其所有的后代组件,会作为依赖提供者。任何后代的组件树,无论层级有多深,都可以注入由父组件提供给整条链路的依赖。原创 2024-09-11 16:01:16 · 492 阅读 · 0 评论 -
Vue组件:混入
混入是一种为组件提供可复用功能的非常灵活的方式。混入对象可以包含任意的组件选项。当组件使用混入对象时,混入对象中的所有选项将被混入该组件本身的选项中。当组件和混入对象包含同名选项时,这些选项将以适当的方式合并。例如,数据对象在内部会进行递归合并,在和组件的数据发生冲突时组件数据优先。原创 2024-09-10 17:59:21 · 644 阅读 · 0 评论 -
Vue组件:动态组件、缓存组件、异步组件
Vue.js 提供了对动态组件的支持。在使用动态组件时,多个组件使用同一挂载点,根据条件在不同组件之间进行动态切换。动态组件通过使用 Vue.js 中的元素,动态绑定到该元素的 is 属性,根据 is 属性的值来判断使用哪个组件。在多个组件之间进行切换的时候,有时需要保持这些组件的状态,将切换后的状态保留在内存中,以避免重复渲染。为了解决这个问题,可以用一个 元素将动态组件包含起来。原创 2024-09-10 16:28:36 · 675 阅读 · 0 评论 -
Vue组件:插槽
在实际开发中,子组件往往只提供基本的交互功能,而内容是有父组件来提供的。为此,Vue.js 提供了一种混合父组件内容和子组件模板的方式,这种方式称为内容分发。Vue.js 参照当前 Web Components 规范草案实现了一套内容分发的 API,使用 元素作为原始内容的插槽。原创 2024-09-09 17:27:34 · 1319 阅读 · 0 评论 -
Vue组件:使用$emit()方法监听子组件事件
父组件通过使用 Prop 为子组件传递数据,但如果子组件要把数据传递回去,就需要使用自定义事件来实现。父组件可以通过 v-on 指令(简写形式“@”)监听子组件实例的自定义事件,而子组件可以通过调用内建的$emit() 方法并传入事件名称来触发自定义事件。原创 2024-09-06 17:27:20 · 687 阅读 · 0 评论 -
Vue组件:使用Prop实现父组件向子组件传递数据
由于组件实例的作用域是孤立的,因此子组件的模板无法直接应用父组件的数据。如果想要通过父组件向子组件传递数据,就需要定义 Prop。Prop 是父组件用来传递数据的一个自定义属性,这样的属性需要定义在组件选项对象的 props 选项中。通过props 选项中定义的属性可以将父组件的数据传递给子组件,而子组件需要显示地用props 选项来声明 Prop。原创 2024-09-03 16:41:56 · 958 阅读 · 0 评论 -
Vue组件:创建组件、注册组件、使用组件
组件(component)是 Vue.js 最强大的功能之一。通过开发组件可以封装可服用的代码,将封装好的代码注册成标签,扩展 HTML 元素的功能。几乎任意类型应用的界面都可以抽象为一个组件树,而组件树可以用独立可复用的组件来构建。原创 2024-09-02 15:51:54 · 859 阅读 · 0 评论 -
Vue的计算属性:methods方法、computed计算属性、watch监听属性
在创建的 Vue 应用程序实例中,可以通过methods 选项定义方法。应用程序实例本身会代理methods 选项中的所有方法,因此可以像访问 data 数据那样来调用方法。通过计算属性可以实现各种复杂的逻辑,包括运算、函数调用等,只要最后返回一个计算结果就可以。当计算属性依赖的数据发生变化时,计算属性的值会自动更新,所有依赖该计算属性的数据绑定也会同步进行更新。原创 2024-08-24 19:20:15 · 1589 阅读 · 1 评论 -
Vue中的methods方法与computed计算属性的区别
将相同的操作定义为一个方法,或者定义为一个计算属性,两种方式的结果完全相同。那么为什么还需要计算属性呢?因为计算属性是基于它们的依赖进行缓存的。当页面重新渲染时,如果依赖的数据未发生改变,使用计算属性获取的值就是一直是缓存值。只有依赖的数据发生改变时才会重新获取值。如果使用的是方法,在页面重新渲染时,方法中的函数总会被重新调用。原创 2024-08-24 18:00:22 · 466 阅读 · 0 评论 -
Vue表单元素绑定:v-model 指令
在 Web 应用中,通过表单可以实现输入文本、选择选项和提交数据等功能。在 Vue.js 中,通过v-model 指令可以对象表单元素进行双向数据绑定,在修改表单值的同时,Vue 实例中对应的属性值也会随之更新,反之亦然。使用v-model 指令,绑定表单元素:文本框、单选按钮、下拉框、复选框。原创 2024-08-23 14:24:38 · 716 阅读 · 0 评论 -
Vue事件处理:v-on 指令
在 Vue.js 中,事件处理是一个很重要的环节,可以使用v-on 指令对 DOM 事件进行监听。该指令通常在模板中直接使用,在触发事件时执行相应的 JavaScript 代码。在 HTML 元素中使用v-on 指令时,v-on 后面可以是所有的原生事件名称。与事件绑定的方法可以传入原生 DOM 事件对象,将 event 作为参数进行传递。原创 2024-08-21 18:34:09 · 631 阅读 · 0 评论 -
Vue循环遍历:v-for 指令
在程序设计中,循环控制是变化最丰富的技术。Vue.js 提供了列表渲染的功能,可将数组或对象中的数据循环渲染到 DOM 中。在 Vue.js 中,列表渲染使用的是v-for 指令,其效果类似于 JavaScript 中的遍历。使用 v-for 指令渲染的元素列表在更新时,如果数据项的顺序被改变,Vue 不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素。为了是 Vue 能够跟踪每个 DOM 元素,需要为每一个数据项提供一个唯一的 key 属性。原创 2024-08-21 15:38:24 · 504 阅读 · 0 评论 -
Vue条件判断:v-if、v-else、v-else-if、v-show 指令
在程序设计中,条件判断是必不可少的技术。在视图中,经常需要通过条件判断来控制 DOM 的显示状态。Vue.js 提供了相应的指令用于实现条件判断,包括:v-if、v-else、v-else-if、v-show 指令。v-if指令可以根据表达式的值来判断是否输出 DOM 元素及其包含的子元素。如果表达式的值为 true,就输出 DOM 元素及其包含的子元素;否则,就将 DOM 元素及其包含的子元素移除。原创 2024-08-21 11:45:01 · 605 阅读 · 0 评论 -
Vue指令:v-cloak、v-once、v-pre 指令
v-cloak 指令可以隐藏未编译的 Mustache 标签直到实例准备完毕,否则在渲染页面时,有可能用户会先看到 Mustache 标签,然后看到编译后的数据。使用Vue 指令绑定数据时,如果只需要渲染一次数据,则可以使用v-once 指令单次插值。单次插值即只执行一次插值,在第一次插入文本后,当数据对象中的属性值发生改变时,插入的文本将不会更新。原创 2024-08-20 18:05:43 · 288 阅读 · 0 评论 -
Vue插值:双大括号标签、v-text、v-html、v-bind 指令
创建应用程序实例后,需要通过插值进行数据绑定。数据绑定是 Vue.js 最核心的一个特性。建立数据绑定后,数据和视图会相互关联,当数据发生变化时,视图会自动进行更新。这样就无须手动获取 DOM 的值,使代码更加简洁,提高了开发效率。文本插值是数据绑定最基本的形式,使用的是双大括号标签。它会自动将绑定的事件实时显示出来。原创 2024-08-20 15:58:34 · 627 阅读 · 0 评论 -
Vue3.0生命周期钩子(包含:Vue 2.0 和 Vue 3.0)
每个应用程序实例在创建时都有一系列的初始化步骤。例如,创建数据绑定、编译模板、将实例挂载到 DOM 并在数据变化时触发 DOM 更新、销毁实例等。在这个过程中会运行一些叫做生命周期钩子的函数,通过这些钩子函数可以定义业务逻辑。Vue3.0 是兼容 Vue2.x 版本的也就是说我们再日常工作中可以在 Vue3 中使用 Vue2.x 的相关语法。Vue 3.0 带来了许多新特性和改进,其中包括更强大的组合API。与基于选项的 API 相比,组合 API 中的生命周期钩子函数也发生了变化。原创 2024-08-18 17:53:49 · 1113 阅读 · 0 评论 -
创建一个简单的Vue3.0应用程序
每一个 Vue.js 的应用都需要创建一个应用程序的实例对象并挂载到指定 DOM 上。createApp() 是一个全局 API,它接收一个根组件选项对象作为参数。选项对象中包括数据、方法、生命周期钩子函数等选项。创建应用程序实例后,可以调用实例的 mount() 方法,将应用程序实例的根组件挂载到指定的 DOM 元素上。这样,该 DOM 元素中的所有数据变化都会被 Vue 监控,从而实现数据的双向绑定。原创 2024-08-18 11:52:46 · 367 阅读 · 0 评论 -
JavaScript调试:console 命令的使用
console 对象用于 JavaScript 调试。JavaScript 原生中默认是没有 console 对象,这是宿主对象(也就是浏览器)提供的内置对象。 用于访问调试控制台,在不同的浏览器里效果可能不同。console 对象常见的两个用途:显示网页代码运行时的错误信息。提供了一个命令行接口,用来与网页代码互动。原创 2024-08-15 17:56:52 · 668 阅读 · 0 评论