- 博客(500)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 使用Flink命令行和Java API远程提交Flink任务到Yarn
然后下载flink-runtime-web-1.15.0.jar、flink-connector-jdbc-1.15.0.jar、mysql-connector-java-8.0.29.jar，上传到HDFS的/flink/remote-submit-lib下。下载flink-clients-1.15.0.jar、log4j-1.2-api-2.17.2.jar，到/opt/flink-remote-submit/java-lib目录下。然后上传datasync-test的jar包到创建的目录下。
2024-09-23 09:29:44
998
原创 Flink SQL的JDBC Connector实现SupportsFilterPushDown谓词下推、SupportsAggregatePushDown聚合下推
主要逻辑是对filters进行遍历，一个ResolvedExpression就是一个where条件，根据不同的条件表达式，比如equals，进行不同的处理，生成where条件SQL语句，拼接到query中形成新的query并返回。Flink会自动传递3个参数值给applyAggregates方法进行调用，我们只需对获取的3个参数值进行解析，拼接成聚合SQL语句，然后再从原query中获取表名，就可以生成新的query语句了。的3个参数，groupingSets包含字段在GROUP BY中的index；
2024-09-20 09:19:47
681
原创 SpringCloud 2023 Gateway的Predicate配置详解、自定义Route Predicate Factory
Spring Cloud Gateway将路由匹配作为Spring WebFlux HandlerMapping基础架构的一部分。包含共12种内置的Route Predicate Factory，可以配置多个Route Predicate Factory，用逻辑and进行组合，如果HTTP请求的不同属性都满足条件，则跳转到指定的route路由启动Spring Cloud Gateway服务时，日志会打印加载的Route Predicate Factory，如下所示。
2024-09-27 09:15:52
926
原创 SpringCloud 2023 Gateway介绍、三大核心、基本使用
介绍：Gateway是在Spring生态系统之上构建的API网关服务，基于Spring6，Spring Boot 3和Project Reactor等技术。该组件是整个微服务最前沿的防火墙和代理器，核心是一系列的过滤器，通过这些过滤器可以将客户端发送的请求转发(路由)到对应的微服务，隐藏微服务节点IP端口信息，从而加强安全保护，并为它们提供跨领域的关注点，例如：安全性、监控、度量和恢复能力。Spring Cloud Gateway本身也是一个微服务，需要注册进服务注册中心定位。
2024-09-26 09:36:30
1019
原创 SpringCloud 2023 LoadBalancer介绍、使用、获取服务列表原理、负载均衡算法
提供客户端的负载均衡算法，将请求均摊到多个服务器上。属于客户端负载均衡(Nginx属于服务端负载均衡)，会将服务列表缓存到JVM本地，然后客户端自己选择请求服务器支持Spring Web Flux的WebClient。
2024-09-25 09:29:43
563
原创 SpringCloud 2023各依赖版本选择、核心功能与组件、创建项目(注意事项、依赖)
Java、Spring和Maven的版本选择参考。父工程添加dependencyManagement依赖。Mysql: 8.0+(建议)
2024-09-24 09:26:13
1077
原创 Vue常用PC端和移动端组件库、Element UI的基本使用(完整引入和按需引入)
提供常用的布局、按钮、输入框、下拉框等UI布局，以组件的形式提供。使用这些组件，结构、样式、交互就都有了。是UI组件库专门进行按需引入的一个库。可以借助它来实现按需引入。移动端常用UI组件库。PC端常用UI组件库。
2024-09-19 09:31:00
566
原创 Vue路由三(编程式路由导航、缓存路由组件、路由生命周期钩子、路由守卫、两种工作模式(含history模式刷新404问题解决)、使用node的express部署服务)
作用：不借助实现路由跳转，让路由跳转更加灵活。如让button进行路由跳转、延迟就行路由跳转。使用方法和router.beforeEach差不多，只不过。路由组件所独有的两个钩子，用于捕获路由组件的激活状态。再点击Music，再点击Car。作用：让不展示的路由组件不被销毁，保持挂载。保护路由的安全，对路由进行权限管理。是作用于当前路由映射规则的。
2024-09-18 09:35:57
710
原创 Vue路由二(嵌套多级路由、路由query传参、路由命名、路由params传参、props配置、＜router-link＞的replace属性)
点击music2，页面的url变成了http://localhost:8080/#/news/music/detail?内容区显示Detail组件接收到id=2的相关内容。点击music3，页面的url变成了http://localhost:8080/#/news/music/detail?点击Music，页面的url变成了http://localhost:8080/music1#/news/music，但是并没有重新加载一次页面。导航栏的Music激活css样式，而且内容区显示Music组件的内容。
2024-09-13 09:01:01
1113
原创 Vue路由一(简介、分类、基本使用、注意事项)
路由就是一组key:value的对应关系。vue可能是function或component多个路由，需要经过路由器管理是为了实现SPA(single page web application)单页面应用。以前需要实现多个html，现在只需实现一个html就能达到多个html的功能。如点击导航区的班级管理，只有url地址发生变化，而页面不会刷新，也不会打开新的标签页SPA的原理：当我们点击班级管理，router发现url路径变成了/class，就会去加载班级组件；
2024-09-12 09:08:57
915
原创 Vue之数据共享vuex高级部分(getters计算属性、mapState和mapGetters计算属性、mapMutations和mapActions生成函数、模块化命名空间)
mapGetters方法：用于映射getters中的数据为computed的计算属性。mapState方法：用于映射state中的数据为computed的计算属性。当state中的数据需要经过加工后再使用时，可以使用getters加工。src/store/index.js如下所示。将多种不同类的数据进行分类，让代码更好维护。
2024-09-11 08:48:55
495
原创 Vue数据共享vuex基础部分(原理、环境搭建、求和案例)
在Vue中实现集中式共享数据管理的一个Vue插件，共享数据能让多个vue组件进行读写，从而实现任意组件间通信的功能。点我访问官网如下是使用全局事件总线，让B、C、D读写A中x的实现如下是使用vuex，让A、B、C、D读写vuex中x的实现。
2024-09-10 09:18:04
763
原创 Vue的slot插槽(默认插槽、具名插槽、作用域插槽)
App.vue：直接在使用子组件的标签中，插入html结构，同时可以传递数据到html。如果子组件不定义slot插槽，则插入的html结构保存在子组件的$slots上。理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件向子组件传递数据。App.vue：slot的使用者接收数据，然后将数据以不同的html结构插入到slot插槽。Category.vue：给slot定义name属性，区分不同的插槽。
2024-09-09 09:21:31
785
原创 Vue跨域问题、Vue配置开发环境代理服务、集成Axios发送Ajax请求、集成vue-resource发送Ajax请求
偏向底层JQuery: 对xhr进行了封装。提供$get、$post等API。封装了太多DOM操作，不适合Vueaxios: 基于promise的网络请求库，支持请求拦截器和响应拦截器，体积小，只有JQuery的1/4fetch:上直接有这个方法，也是基于promise的。但是会将返回的请求包两层promise，需要两次.then才能拿到请求，IE浏览器兼容性差Vue使用Axios请求不同端口的服务，会出现类似下面的错误。即CORS跨域问题。
2024-09-06 09:19:12
848
原创 Vue封装的过度与动画(transition-group、animate.css)
Test3.vue：直接在transition-group指定属性就可以了。指定的属性可以去https://animate.style/官网去查看。想要更多可以去https://www.npmjs.com/进行搜索。还要另外两种方式引入animate.css文件。作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。
2024-09-05 08:51:26
423
原创 Vue组件自定义事件、全局事件总线、消息订阅与发布(pubsub)、$nextTick
一种组件间通信的方式，适用于子组件给父组件传递数据。在父组件中给子组件绑定自定义事件，事件的触发在子组件，事件的回调函数在父组件中绑定自定义事件：(只能被触发一次)或第二种方式，在父组件中：先用给子组件注册引用信息，这样就能获取到Student的组件实例对象vc。然后再在父组件中通过生命周期函数mounted进行绑定自定义事件// this.$refs.student.$once(......) // 只能被触发一次。
2024-09-04 08:49:07
759
原创 Vue相关的scoped样式、less-loader安装、使用nanoid生成UUID、浏览器localStorage和sessionStorage
School.vue组件：style demo能生效，且style demo只在School.vue有效。style title不生效。基本原理就是给每个HTML标签随机生成一个属性，然后通过属性进行样式的绑定。如果在.vue文件的style中使用less语法。需要安装less-loader。App.vue组件：style title能生效。点击按钮，弹窗显示UUID。
2024-09-03 08:38:01
727
原创 vue的HelloWorld项目结构分析、实现自己的一个简单Vue应用、render函数的理解、修改main.js名称为app.js
导入的这个是vue的runtime build，由vue/package.json的module属性值dist/vue.runtime.esm.js决定，不包含template解析器。Vue的项目底层还是用webpack进行打包的，webpack的配置文件是webpack.config.js，这个配置文件我们访问不到。在Vue中我们可以通过vue.config.js对webpack的一些配置进行配置。public/index.html和src/main.js我们使用前面创建的项目的。
2024-08-30 09:07:58
906
原创 Vue组件的好处和理解、基本使用、注意事项、组件嵌套、VueComponent理解和原型链
在Vue中，Vue和VueComponent的原型链关系，如下图所示。组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。这样可以让组件实例对象(vc)可以访问到Vue原型上的属性、方法。可以使用name配置项指定组件在开发者工具中呈现的名字。我们先通过一个简单的js示例，来理解js的原型链。VueComponent的原型链使用示例如下。关于school组件。
2024-08-29 09:28:03
848
原创 Vue的生命周期流程、生命周期回调函数及其应用
点我n+1后，此时n的值是: 2，控制台全部输出如下。会先监视到n的变化，再进入到update流程。点我销毁vm，控制台全部输出如下。此时再点我n+1没有反应了。下面我们通过一个示例，来对生命周期回调函数进行应用。我们可以通过如下的程序，来看下具体的执行过程。
2024-08-28 09:20:04
382
原创 cookie-editor插件、Vue的内置指令(v-text、v-html、v-cloak、v-once、v-pre)、自定义指令
我们通过一个需求，来实现一个简单的自定义指令需求：定义一个v-big-number指令，和v-text功能类似，但会把绑定的数值放大10倍big-number函数何时会被调用？指令与元素成功绑定时指令所在的模板被重新解析时放大10倍后的n值是： // 定义全局指令// })new Vue({data:{n:1},// 局部指令。
2024-08-27 10:11:50
787
原创 Vue自己实现监视数据、Vue.set创建属性、Vue监视数据的原理
可以看到observer对象，就是实现了getter和setter方法，实现了对data属性的数据代理。注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性，即不能。当对vm._data的数据进行访问和修改，实际是对data的数据进行访问和修改。点击按钮，添加性别属性并显示到页面。
2024-08-22 09:34:51
417
原创 Vue的遍历(列表、对象、字符串、数字)、key的原理
key可以使用数据的唯一字段(最好)，也可以使用index(默认)旧虚拟DOM中未找到与新虚拟DOM相同的key。这里代码还是和上面的一样，只是修改为。再点击添加一个老刘。再点击添加一个老刘。开发中如何选择key?
2024-08-21 08:58:39
1033
原创 Vue使用函数实现计算属性、计算属性的实现和简写
当修改姓或名，vue会去重新加载模板，然后函数也会被调用。但如果模板中存在多个fullName()，则会被调用多次而不是一次。可以设置setter方法。当fullName被修改时setter被调用。当计算属性只要getter，没有setter，可以进行简写。通过computed来定义计算属性。可以设置getter方法。
2024-08-12 09:18:12
312
原创 Vue的事件处理、事件修饰符、键盘事件
但不推荐使用keyCode，因为不同浏览器的一个按键keyCode不一样，以后keyCode这种方式会被废弃。Vue未提供别名的按键，可以使用按键原始的key值去绑定，但多个单词的注意要转为短横线命名。如Enter，caps-lock。@keydown当键盘按下触发函数，@keyup当键盘按下再抬起触发函数。并不是所有的按钮都能捕获到。系统修饰键（用法特殊）：ctrl、alt、shift、meta(windows图标)注意: 多个事件修饰符可以连写，如。
2024-08-07 09:03:59
1053
原创 Vue的Object.defineProperty、数据代理、vue中的数据代理
基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在vm实例中，访问vm.name和vm._data.name是一样的。可以通过这两对data中的name属性进行读写。可以通过Object.defineProperty动态定义属性和设置属性的值。通过一个对象代理对另一个对象中属性的读写操作。如下通过obj2代理obj1的x属性。通过vm对象来代理data对象中属性的读写操作。
2024-08-05 09:07:37
332
原创 Vue的指令语法、双向绑定、el和data的另一种写法、MVVM模型
用于解析标签（包括：标签属性、标签体内容、绑定事件…Vue中有很多的指令，且形式都是：v-xxxx，此处我们只是拿v-bind举个例子。运行，输入框都显示hello，在下面的输入框输入12345，上面的输入框也同步显示12345。vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。Vue的设计参考了MVVM模型。Vue的MVVM模型如下。点击就可以跳转到baidu。
2024-07-29 09:05:38
297
原创 IDEA搭建Vue开发环境(安装Node.js、安装vue-cli、创建项目、编译项目、启动项目、yarn启动项目、npm和yarn命令行命令简单使用)
因为这个yarn和Hadoop的yarn命令会冲突，所以修改E:\install_software\Node.js\node-v20.4.0-win-x64路径下的yarn.cmd名称为yarnJs.cmd。使用IDEA打开项目, 然后在File–Settings–Plugins–Makerplace搜索vue.js, 安装并重启IDEA。再将E:\install_software\Node.js\node-v20.4.0-win-x64目录配置到环境变量。进入项目目录，安装项目所需依赖。
2024-07-22 09:01:12
1939
原创 Vue的介绍和简单使用
一套用于构建用户界面的渐进式JavaScript框架。渐进式就是可以自底向上逐层的应用，简单应用只需一个轻量小巧的核心库，复杂应用可以引入各式各样的vue插件采用组件化模式，提高代码复用率，且让代码更好维护------一个页面模块就是一个vue文件，里面集成了html、css、js声明式编码，让编码人员无需直接操作DOM，提高开发效率。
2024-07-15 08:30:28
424
原创 JavaScript原型对象和对象原型、原型继承、原型链
可以声明原型对象prototype为一个对象，同时声明多个共享的属性和方法。但需要通过constructor重新指向构造函数Star，否则指向Object就找不到构造函数Star了。原型链的查找规则如下。可以使用instanceof运算符，检测构造函数或实例化对象是否出现在某个实例化对象的原型链上。可以定义一个父类，然后通过原型继承来继承父类，最后实现子类自有的属性和方法。
2024-07-01 09:06:31
607
原创 JavaScript作用域、垃圾回收机制、闭包、变量提升
应用：使用闭包函数，创建隔离作用域，避免全局变量污染。如下所示，使用num来对函数的调用次数进行计数(全局作用域能够访问，所以可能会引起内存泄漏)，但不能在全局作用域对num进行修改。作用域链的变量查找机制: 优先在当前作用域查找变量，如果查不到，则。查找父级作用域直到全局作用域。
2024-06-28 13:54:40
399
原创 JavaScript Window对象之(BOM、JS 执行机制、location对象、navigator对象、histroy对象、本地存储)
JavaScript是单线程的，就会出现如果某个JS任务执行的时间过长，这样就会造成页面的渲染不连贯。数据存储在用户浏览器中，页面刷新但数据不丢失。主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退等。如果是android或iphone移动端请求页面，直接跳转到指定的页面(移动端页面)先访问百度，再访问当前页面，然后点击后退按钮，就能退回到百度的页面。navigator是一个对象，记录了浏览器自身的相关信息。同localStorage，就是浏览器一关闭，数据就会丢失。
2024-06-18 10:39:18
954
原创 JavaScript日期对象、DOM节点操作(查找、增加、克隆、删除)
指1970年01月01日00时00分00秒起至指定时间的毫秒数。cloneNode会克隆出一个跟原标签一样的元素。，布尔值默认为false。
2024-06-18 10:37:10
829
原创 JavaScript事件监听之其它事件(页面加载事件、元素滚动事件、页面尺寸事件、M端事件)
javascript在head中，直接获取btn，添加监听事件是无效的，因为btn为null。所以给window添加load事件，等window的资源加载完毕，再去执行回调函数就可以点击按钮了。改变div的内容长度或改变padding值，clientWidth都会变化，但改变border值，clientWidth不会变化。移动端有自己独特事件，比如最常见的touch(触屏事件/触摸事件)，Android和IOS都有，touch对象代表一个触摸点。当页面的宽度不断变化，控制台不停的打印页面的宽度数值。
2024-06-03 08:50:12
1863
2
原创 JavaScript事件监听之事件流(捕获阶段实现 + 阻止事件流传播 + 阻止元素默认行为、mouse鼠标事件、事件委托)
如果addEventListener的第三个参数都是false(默认)，则点击紫色的小盒子，先弹出我是儿子，再弹出我是爸爸，最后弹出我是爷爷。可以选择不在冒泡阶段触发事件，而在捕获阶段触发事件。，是否在捕获阶段触发事件默认为false。点击紫色的小盒子，先弹出我是爷爷，再弹出我是爸爸，最后弹出我是儿子。所以将所有的事件监听，都委托给元素的父亲进行监听，就是事件委托。ul绑定点击事件，当点击其中一个li的时候，默认会。获取到点击的这个li，对这个li的样式进行改变。触发ul的点击事件。来阻止元素的默认行为。
2024-05-27 08:28:52
1054
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人