- 博客(54)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Java实现微信模板消息推送
模板Id，添加之后就能看到，如果没有合适的模板可以自定义模板（需要审核7-15天）。1、准备：微信公众号 appId，app密钥（这俩没啥好说的，都知道在哪拿)。你的模板里面有几个内容，你就写几个keyword。用户openId，这个需要用户登录公众号之后才能获取到。2、添加IP白名单， 不然没法推送。模板消息推送功能仅限于微信服务号才行。
2023-05-11 18:20:34
2439
1
原创 使用mybatis-plus-generator配置一套适合你的CRUD
2、创建MybatisCrud工具类，这里可以做很多个性化配置，比如改名他默认的 IService之类的，指定表，忽略某些字段等。1、maven引入 mybatis-plus-generator 和模板引擎，你也可以使用freemarker之类的，看个人。3、copy模板，进行定制配置，找到jar包下的模板，复制。4、模板配置，这边使用 velocity 模板做演示。5、生成代码预览，毫无问题 controller。文件夹下，删除其他你不需要的模板。
2023-03-28 18:07:10
1415
2
原创 JWT生成tonken验证+AOP拦截验证
JSON Web Token（JWT）是目前都在用的前后分离跨域验证规则。5、前端调用查看效果，token生成返回成功，后端也能成功读取数据。3、自定义注解APO实现类AuthAspect.java。4、在需要token验证的地方加入注解@Auth。2、编写jwt工具类JwtUtil.java。2、自定义注解接口Auth.java。1、引入依赖pom.xml。
2022-12-01 23:31:30
1187
1
原创 Js数组常见函数，常见操作场景。
*此文章仅仅针对数组对象，纯数字数组太过简单，无需多说先声明3个数组，就以这3个数组为列，进行工作中常用的数组操作模拟1、多个数组合并concat结果： 2、数组去重filter+map结果： 3、数组排序，重写sort方法结果：4、两个数组取交集（两个数组都存在的部分）结果： 5、两个数组取差集 结果：
2022-11-23 10:55:07
224
原创 省市区3级联动公用组件，基于elCascader
这个没什么难点，就是找数据挺麻烦。我是直接拿的vant的数据。再通过一系列的js操作转换成了一个树结构的对象。，因为基于element的样式，所以这个对象里面基本都是他的原生属性。1、组件源码main.vue。此组件已上传至npm。
2022-11-14 22:27:13
571
原创 文件下载，公共组件基于XMLHttpRequest+blob
fileName（必传，看和后端约定，可以在response的header中返回文件名称）3、测试使用 testDonlad.vue，当挂载全局，或者打包上传npm之后，只需要。可以根据实际项目约定修改。requestType（请求类型非必传，默认get）封装成组件，多了一个element按钮的对象属性，这样一行几个字代码就能实现文件下载，岂不是美滋滋。集成element原生属性，参考自定义样式。params（请求参数非必传）1、组件源码 main.vue。采用获取配置文件的方式，
2022-11-10 23:32:19
810
原创 eltable封装，eltable二次封装进击篇
此版本集成了eltable自身所有属性，看起来更复杂，但是功能更全面。主要是一些eltable自带的功能。需传入4个属性tableData、tableObj、columnObj、pageObj将tableObj和columnObj分离出来，tableObj主要是一些eltable自带的功能非必传。其他三个为必传对象。
2022-11-10 22:28:43
257
原创 vue记录路由历史+el-scrollbar，实现路由历史标签化
tag点击事件，调用方法计算scrollbr宽度，计算tag宽度，计算tag距离left（左边）多少px。tag宽度+距离右边再加20px左右，如果大于scrollbr宽度，证明tag所在位置已经到了最右边，实现点击tag之后scrollbr跟随滚动。4、把scrollbar和tag封装成组件，通过点击tag，获取tag位置，并计算scrollbar和tag宽度，实现根据tag位置，scrollbar跟随滚动。初始化数据渲染完成之后，通过当前路由获取下标，实现初始化计算。拦截，每次路由记录到缓存。
2022-10-09 11:10:50
2551
1
原创 ssl证书申请，springboot部署https
1、宝塔申请ssl，选择当前项目解析的域名，填写详细信息后就可以生成 2、在宝塔ssl处点击部署，证书文件夹就能看到此证书 3、点击其他证书，就可以看到key和crt文件，注意此处crt文件中已经自动生成中间证书， 不需要二次添加 4、通过myssl生成jks文件 https://www.myssl.cn/tools/check-server-cert.html直接将key和pem框里面的内容复制就行了，下面是设置自己的密钥，到时候springboot中要使用 5、下载jks放入springboot项目，并
2022-06-15 23:27:36
1119
1
原创 微信小程序下拉穿透（禁用整体页面滑动)
场景：弹出框内部需要滑动。但是滑动会触发整体页面的滑动效果，导致弹出框内部滑动无效禁用外部整个页面滑动效果， 但是弹窗内依然可以滑动。enablePullDownRefresh级别高于disableScroll。要先关闭全局刷新，disableScroll才会生效。全局配置：app.json"enablePullDownRefresh": false当前页面json"disableScroll": true,...
2022-05-30 18:05:45
792
原创 Springboot集成七牛云，实现文件上传
七牛云创建空间，阿里云解析这些都没什么好说的了1、引入maven依赖，就一个七牛云的 <dependency> <groupId>com.qiniu</groupId> <artifactId>qiniu-java-sdk</artifactId> <version>[7.7.0, 7.7.99]</version>
2022-05-14 14:40:25
566
2
原创 微信小程tree组件，无限递归
原理：没什么原理就是无限递归，组件引用组件本身，如果在有子级的情况下才引用。* 此处对递归原理不是很熟悉的需要注意一个坑，就是在对组件展开和关闭时候。只需要拿到当前坐标对数组对象直接赋值，并不需要去获取所谓的多维坐标数组。不管你的对象在总数组的第几层，他永远在当前数组的第一层1.1、tree组件：wxml<view> <view wx:for="{{treeArr}}" wx:key="index"> <view class="view_ red" data
2022-05-11 18:29:33
2742
4
原创 深入浅出Vue插槽slot与slot-scope
slot：分为默认插槽（没名字），具名插槽（有名字的）slot-scope：作用域插槽？为什么要用插槽，这玩意儿有什么用，一段代码一目了然父组件：<template> <div> <div>父</div> <son> 这个就是插入的内容 </son> </div></template>子组件：<template> <div> <
2022-03-24 18:28:30
2763
原创 手写简易版贪吃蛇
逻辑梳理：1、画格子。固定xy（两个数组）长度，采用数组坐标[ [ { food:false,snake:false}, { }, { } ],[ ], ] 得到一个装有对象的二维数组。2、点击开始游戏，使用随机数生成食物与小蛇。随机数最大值为当前xy的值。生成小蛇与食物即将对应坐标对象的food和snake属性改为true，且将当前坐标对象{ x:" ", y:" "} 存入单独的小蛇数组。3、监听键盘按键。←↑→↓（键盘按钮code，左:37，上:38，右:39，下:40）。按下之后....
2022-03-21 11:10:58
156
1
原创 css3动画，实现正方体旋转
思路很简单，大div里面放6个小div，小div使用绝对定位脱离文档流，3D转换加transform-Origin更改元素位置拼成一个正方体。最后使大div转动起来。<template> <div class="flex jc_c ai_c" style="height: 800px;"> <div class="max_div"> <div class="box1">1</div> <div class="box2"
2022-03-11 11:34:47
1152
2
原创 Object.defineProperty实现vue双向绑定。小程序全局变量监听
1、众所周知，vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。这段话应该每个面试找工作的前端都背过。但是究竟是如何实现的，我个人按照个人理解，简单的梳理一下。input触发input事件 >Object.defineProperty set() 赋值>回调直接传入值 或者 调用更新视图方法，利Object.defineProperty get()方法取值我觉得还是直接看代码，...
2021-11-05 13:33:57
505
原创 微信小程序WebSocket 同时连接多个
1、正常连接1个情况写法应该是const matching = (obj => { //可以把这段代码直接放到page的onLoad中，或者自己定义一个事件 wx.connectSocket({ url: `wss://www.***.com` }) wx.onSocketOpen(function(res) { console.log('WebSocket连接已打开！') wx.sendSocketMessage({ data: JSON.stringify({
2021-11-02 14:30:36
3971
2
原创 vueX+sessionStorage实现数据储存
前言：vueX5个属性简述state：vuex的基本数据，用来存储变量geeter：从基本数据(state)派生的数据，相当于state的计算属性mutations：提交更新数据的方法，同步actions：提交的是mutations，而不是直接改变状态，异步modules：模块化vueX，里面每个对象都有完整的vueX1、新建sessionStorage.jsexport default { setValue(key, value) { if (typeof valu
2021-07-30 18:26:11
1126
原创 elementui form表单resetFields()不生效
1、问题出现原因，form表单复用。多次试验结果如下：1.1、先打开新增弹出框（没有值）再打开修改弹出框（赋值），resetFields()方法可以生效！1.2、先打开修改弹出框（赋值），再打开新增弹出框（没有值），此时resetFields()方法不再生效！不管新增还是修改，resetFields()方法都不再生效！哪怕你手动删除值，再次打开依然会存在数据！2、原因是这个初始值是在form mounted生命周期被赋值上去的，解决办法使用 $nextTick()方法。注意顺序，弹出框要..
2021-05-20 17:05:26
970
2
原创 css实现简单的电影院选座功能
实现原理：把每个座位看成一个对象，可以添加自己要的属性。每一行是一个数组，有多个座位对象。总数也是一个数组，包含多行。<template> <div> 请输入宽度： <el-input v-model="rows" placeholder="请输入每行个数" type="number" :max="15" style="width: 200px;"></el-input> 请输入高度： <el-input v-model="co
2021-05-19 15:06:37
3930
4
原创 深拷贝与浅拷贝
前言：在JS中，数据类型只有两种，基本数据类型、引用数据类型。对于基本数据类型来说，它的值直接存储在栈内存中。而引用类型，它在栈内存中只是存储了一个引用地址，而真正的数据存储在堆内存中。1、浅拷贝（及 = 赋值），= 赋值只是引用地址而已，顾名思义指向相同。所以任意一个引用对象改变，都会改变引用地址的值。 let objA = { num:1, } let objB = {}; objB = objA; objB.num = 2; ...
2021-05-10 14:43:23
85
原创 记录elementui自带bug
1、弹出框，遮罩层在上面在el-dialog里面加上属性：:modal-append-to-body="false"2、弹出框使用el-col乱样式直接全局改样式：<style lang="less" scoped> /deep/.el-dialog,/deep/.el-dialog__header,/deep/.el-dialog__body,/deep/.el-dialog__footer{ overflow: hidden }</style&.
2021-05-08 14:29:24
369
原创 elememt form表单二次封装，elform封装，很全很详细
详解：element的form表单二次封装也很简单，写一个form表单你会发现不一样的地方只是form-item里面的组件类型而已。所以把form-item里面的内容可变化就行了。父级也只需通过一个数组（form-item里面组件类型数组），一个对象（form表单数据对象）控制就行了！为什么要多一个对象，是为了方便数据提交，以及数据验证。这次封装多加了el-col，也没有直接放进弹出框，是为了更加灵活可变！1、form表单代码（子组件）<template> <el-form :
2021-05-06 11:42:23
9968
15
原创 el-table封装，elementtable封装，eltable封装详解(含分页）
前言：个人理解所谓封装，就是把经常都要公用的东西，拿出来，可以多次复用。公用方法，公用页面都可以封装。其实封装也并不是有多难，思路也很简单，就是用JS来控制页面。页面动态性越强，组件越灵活，适用范围越广。就vue+element的组件封装而言，先把所有功能在子页面实现。然后把js里面的动态值，拿到父组件里面去传过来，就完成了，其中技术也就掌握父子组件传值而已。1、下面就是el-table的一个简单封装：<!-- @author Zou Tiancong@version 创建时间：
2021-04-09 18:23:36
12812
19
原创 flex实现最简单的div水平垂直居中
父级flex，子级margin：auto.parent_div{ display:flex; width:100px; height:100px;}.children_div{ background-color: red width:20px; height:100px; margin:auto;}
2021-04-07 14:20:20
112
原创 Vue项目基本优化
1、路由懒加载，这个基本上每个项目必须。2、Ui框架按需引入，也就是要用哪些组件引入哪些组件3、关闭Map文件的生成，没关闭的vue项目打包后就会有很多的.map文件。这些文件主要是帮助我们线上调试代码，查看样式。脚手架2是在index.js。脚手架3就vue.config.js里面。将productionSourceMap 改为false。4、使用cdn...
2020-04-17 07:26:01
254
原创 vue高级篇——vue router之NavigationGuards（导航卫士）
最近无聊，就更新个路由的导航卫士吧vue-router官方文档：https://router.vuejs.org/1、全局前卫——router.beforeEach看名字就知道啦，beforeEach在路由跳转之前触发。router.beforeEach((to, from, next) => { })to：要导航到的目标Route对象，简单点说就是到哪里去。...
2019-10-23 15:11:21
2723
原创 笔记，js动态对象名赋值
对于一个玩前端的java弟弟来说，确实应该补基础。这个问题今天扣了我2小时。很简单，vue中this点对象，属性名动态。看图就知道我想干嘛了。但是很明显对象点属性，直接给我新建了一个属性。翻了翻w3c才知道，这里应该用中括号。object[name] = value;...
2019-09-18 16:56:48
764
原创 elementUi可编辑table
因为项目需要，很多时候，其实都需要用到table在线编辑。另外本人比较喜欢写注释，所以就不做过多的解释了，下面就直接看代码（复制可用的）element-ui官网：https://element.eleme.io/#/zh-CN/component/table1、html代码<el-table :data="tableData" border style="width: 100%...
2019-09-16 16:18:37
711
原创 vue-baidu-map常用控件，功能
看了几天百度地图，才发现这玩意儿虽然不是很难，但是东西真的是太多了，根本学不完，所以就先把目前能用上的先看了一下。很多值也是动态可变的，大家也要多参考一下官方文档。vue-baidu-map官方文档：https://dafrok.github.io/vue-baidu-map/#/zh/index1、先来个最基本的搜索功能大家先看html，看不懂没关系，我在js里面写了注释，写的很清楚...
2019-09-11 10:56:58
3843
2
原创 vue封装axios
记得看总结，划重点，考试要考1、先封装axios，新建一个request.js。因为个人编码习惯，注释已经写得很清楚了，这个就不做过多解释了，直接看代码，import axios from 'axios' //引入axiosimport router from '@/router/router'//引入路由import VueCookies from 'vue-cookies' //...
2019-09-11 10:04:27
1659
原创 vue-baidu-map，vue百度地图
1、首先你得有百度开发者账号，然后再使用账号创建你要的应用列表，会生成一个sk码百度地图首页地址（注册开发者账号，有的可以忽略）：http://lbsyun.baidu.com/Vue百度地图API文档地址（百度地图控件、覆盖物）：https://dafrok.github.io/vue-baidu-map/#/zh/index如果不添加控件，覆盖物，等等。地图就只有地图，没有任何操作...
2019-08-27 14:56:15
646
原创 vue项目代理访问时Invalid Host header
vue项目使用ngrok代理时，访问网站出现Invalid Host header主机头无效？因为webpack出于安全考虑，默认检查hostName，如果hostName不是配置内的就不能访问。如果想访问，直接跳过检查就行了。直接在vue.config.js中的devServer中加入。（本人是vue3+，如果是vue2的朋友应该是在config文件夹下的index.js中的dev中加入...
2019-08-23 15:53:21
1045
原创 vue-quill-editor富文本编辑器详解
1、通过npm安装vue-quill-editor在cmd输入命令：npm install vue-quill-editor --save2、在main.js中引入vue-quill-editorimport VueQuillEditor from 'vue-quill-editor'//引入vue-quill-editor富文本编辑器Vue.use(VueQuillEdito...
2019-08-22 18:12:51
931
原创 浅谈WebSocket和Ajax轮询
1、什么是WebSocket？WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务...
2019-08-21 15:56:15
189
原创 微信自定义分享内容
微信分享新的方法虽然已经出来了，但是貌似并没有生效，所以还是用的原来的老方法。微信分享官方API地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp14211411151、配置微信签名（签名一定要正确，否则自定义分享将不会生效）wx.config({ //debug:true, //开启调试模式 ...
2019-07-21 18:38:53
180
原创 element-ui的el-menu路由模式下选中无颜色
1，el-menu跳转时如果按照以下写法无疑看起来感觉很鸡肋，而且index这个属性感觉并没有任何作用<el-menu-item class="menutitle" index="/webB/index" route="/webB/index" v-show="menu.index">2，在el-menu标签中直接开启router模式( :router="true" )，就会...
2019-06-17 15:13:34
3962
3
原创 vue-cookies，在vue中安装及使用cookie
npm官方示列：https://www.npmjs.com/package/vue-cookies1、使用命令安装：npm install vue-cookies --save2、main.js里面引用import VueCookies from 'vue-cookies'Vue.use(VueCookies)3、页面js使用this.$cookies.set('ke...
2019-06-10 17:28:00
4960
原创 js将html页面转图片
可以使用html2canvas，实现在用户浏览器端直接对整个或者指定模块进行截屏。html2canvas其渲染成一个Canvas图片，能让用户保存为图片。html2canvas官网地址：http://html2canvas.hertzen.com/1、可以使用npm和yarn进行安装，也可以直接下载原生js导入。命令：npm install --save html2canvas ...
2019-05-24 18:05:32
2921
原创 前端js常用符号的区别
今天就帮大家理一理前端常用符号的区别。1、 ，和 ；逗号和分号。在js里面逗号“ ， ”是用来分隔参数什么的。而分号“ ； ”是用来分隔语句的。2、=，== 和 ===等于，双等于，全等于。等于“ = ”表示赋值。双等于“ ==”判断值是否相等。而全等于“ ===”既判断值是否相等，也判断类型是否相等。3、" "和 ' '单引号和双引号 。双引号" "会去检索内容里...
2019-05-08 11:08:44
1158
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人