versionli的博客

原创 用java配合redis 在springboot上实现令牌桶算法

一.、引入依赖首先，需要在pom.xml文件中引入spring-boot-starter-data-redis依赖，这个依赖提供了与Redis交互的客户端和工具类。使用Lua脚本和Redis操作来实现令牌桶算法。在resources创建一个Lua脚本文件request_rate_limiter.lua。二.、配置Redis连接（我随便用了application.properties，也可以用application.yml）三.、实现令牌桶算法。

原创 idea( 2022.3.2)打包报错总结

这个是原因是由于 lombok 版本太低，切换一下版本就可以了二。

原创 idea 的 springboot项目spring-boot-devtools 自动编译 配置热部署

Ctrl+Shift+Alt+/ 点击弹出框中Registry...引入（如果报错，换不同的版本）

原创 IDE控制控打印信息换行

原创 vue里搜索框实现防抖功能

意思是我每输入一次，就清理上一次700毫秒之内还未setTimeout的句柄，所以如果是连续输入，就不会执行callback()函数，只能超出700毫秒才执行一次。进来调用一个闭包函数debounce()，赋值给一个变量debounceFunc，（包闭的功能就是说里面的变量timer和参数一直驻留在函数里面）input事件调用一个函数debounceFunc（），并且传一个回调searchs函数，内容就是在这个searchs函数里处理。

原创 vue3+elementUI封装一个下拉多选并可以全选的功能

要完成的功能如图：htmljscss使用付费解决前端问题：

原创 vue3.0组件监听异步数据，watch与reactive 的应用, watch与computed, 还有ref的使用

vue3.0子组件监听父组件传过来的异步数据，watch与reactive 的应用, watch与computed, 还有ref与wactch的使用

原创 解决nodejs koa框架cookies不能存中文的问题

cookies保存中文会报错：可以通过new Buffer 来把字符串转成base64，之后取出来,再转成字符串var Koa = require('koa')var Router =require('koa-router')var app = new Koa()var router = Router()router.get('/',(ctx,body)=>{ let name = new Buffer('张三').toString('base64')...

原创 vue 动态修改h5页面title标签

安装vue-wechat-titlenpm i vue-wechat-title --save引入：Vue.use(require('vue-wechat-title')) //标题切换使用路由里加入：

原创 vue实现页面前进刷新后退不刷新或者前进后退都刷新而某一个页面后退不刷新

有时候我们在开发的时候会遇到一个需求： 我在home页面选择了一个分类跳到about页面的时候根据home页面转过来的分类数据加载一些商品数据，之后选择了一个商品又跳到detail详情页面，这时客户是选错了想返回上一个页面的重新选择，但是about页面重新加载了数据和页面，客户不知道刚才滑动到哪里了，也忘记了选择哪一个商品，得要重新滑到下面，如果这时候我们做一个缓存体验就比较好。如果页面全部用keep-alive那肯定不行，因为客户返回上一个页面选择一个商品的时候再跳到详情页，keep-...

原创 vue，vue3仿app输入手机验证码功能

vue3 仿app验证码输入功能：1，每一个输入框只能输入一个数字，也只能输入数字。2，输入了一个数字之后，自动跳到下一个输入框，当最后那个输入框输入时开始调用接口（或调用某一函数）3，光标在的当前输入框可以输入外，其它的输入框都是不能输入的。4，当按删除键时，光标会自动退回前一个输入框，并把数字删掉（看动态gif图）5，当用户复制验证码在第一个输入框的时候，会自动分配到六个输入框，并开始调用接口（或调用某一函数）6，当用户刚进入这个页面时，第一个输入框自动获取光标焦点看gif图.

原创 node.js 的WebSocket 在express的用法 socket.io插件

node.js 的WebSocket 在express的用法 socket.io插件

原创 vue+elementUi结合vue-cropper插件，开发一个能裁剪图片功能组件

vue与vue-cropper 封装的一个裁剪插件

原创 vue3+typescript+vantUi 实现一个带有搜索功能的 picker选择器

先看一下效果图：html代码 ：js代码一js代码二传过来的数据结构大概就是这样vue封装带picker的搜索功能比起react简单得多，比小程序也简单=====================================================如果你是新手想学前端可以加我;如果你是一个有基础，但学习前端没有明确的方向，可以加我;如果你刚毕业找到前端的工作，但工作上遇到问题或怕遇到问题解决不了的可以加我;...

原创 vue 二级导航重定向，二级导航默认选中某一项的问题

很多初学者，往往让二级导航重定向的问题烦着，特别是想用router-link-active来处理，其实用路由提供的router-link-active是做不到多级路由默认样式的，所以我用的是动跳转this.$router.push方法，当然如果您有更好的方法，可以在评论区里留言一下。这个是仿酷我音乐pc官网一级路由：图一图二：图三：二级路由：图四：图五：下面就是重点了图六：当我点击“排行榜”，之后复制url再在另一个...

原创 React+hooks+antui封装一个带搜索功能的picker

先看一个效果图：功能主要有：1，点击tab，强出picker组件出来2，搜索功能3，点击某一项，把数据塞回tab4,点击遮罩关闭，5，打开已选择项，定位回到被选中的item看代码注释不用法如果你是新手想学前端可以加我（标明是前端），如果你是一个有基础，但学习前端没有明确的方向，可以加我如果你刚毕业找到前端的工作，但工作上遇到问题或怕遇到问题解决不了的可以加我一对一私人指导/教学（费用很便且）：微信：...

原创 vue-cli3+webpack 运行报错 core-js/modules/es.array.concat.js in ./node_modules/cache-loader/dist/cjs.js?

报报名在打包的时候没问题，但是在运行的时候，报了一堆这样的错误东西，一开始以为是会js-core版本过期什么的（因为很两个月没运行了），之后又单独安装了js-core 版本2和版本3，一鬼样没效果，后来是发现package.json这里多一个空格...

原创 mongodb设置权限管理后重启数据服务报错，错误：1053：服务没有及时响应启动或控制请求

因为平时我们去到某一间公司做开发的时候一般都不是从零开始的，所以很少为公司做这些操作，太多数都是前辈已经搭建好的了。今天为一个mongodb设置一个用户管理，复制以下代码到mongod.cfg文件，就重启mongo服务，一直报这个错网上也找了很多资料，很多说什么要处理data，db这些文件夹。后来才发现原来那一行代码少了一个空格，应该是这样的恶心死了，又浪费了一个多小时...

原创 使电脑变得更加快、更加流畅

一，如果是固态硬盘1，win+r 调出运行框,输入msconfig2，引导-高级选项3，把处理器个数调到最大，之后重启计算机二，1，按住Esc+shift+Ctrl，打开任务管理器2，点击文件->运行新任务3，输入cmd,并且以管理员身份运行4，输入chkdsk5，检测磁盘系统完之后，再输入sfc/scannow如果大家想实践学习php，thinkphp，Redis，vue，uni-app，React等技术，推荐开...

原创 如何在React 写样式，如何处理React的css冲突的问题

在用React框架开发会遇到这样的问题，当项目很大的时候会有很多独立的组件，即使每个组件都导入一个单独的css文件，也会发生样式冲突、重置等等问题，因为不像vue那样可以在style里面写scoped。那如何避免css冲突呢？我的解决方法有以下两种:一，用module 1， 把css文件加上module ，如 style.module.css 2，在用的时候 二，使用styled-components （本人推荐）1，安装npm istyled-compone...

原创 前端开发工具vscode如何快速生成代码片段

下面以设置React代码片段为例：1， 打开vscode工具 ： 文件->首选项->用户片段2，搜索 javascript.jon3，点击打开，如图：4，复制一段react的代码（你喜欢的模板） 我以下面这模板为例子import React, { Component } from 'react';import ReactDOM from 'react-dom';class App extends React.Component { .

原创 node.js做一个简单的爬虫，专爬网站接口

因为很多vue的初学者，自己想练习项目，但苦于不会后端，所以要把一些数据放在自定义的数组里面来模拟接口返回，这个当然可以，不过对于一个前端工发人员，必须要懂得调用接口和处理异步的问题，所以我...

原创 vue.js 中的mixins 的用法

不用mixins的代码父组件home.vue 代码如下组件componentA.vue 代码如下：组件componentB.vue 代码如下：页面展示使用mixins，把两上子组件的公用部份抽出来建一个counter.js，把公共部份的代码抽出来，代码如下：之后把组件A和组件B的公用代码删掉，引入mixins，如下：这样就可以在mixins里counter.js 维护两个组件的公共函数mixins 里的counter.js还可以建cre..

原创 vsCode 快速生成vue 模板

1.使用快捷Ctrl + Shift + P唤出控制台2，然后输入“snippets”并选择2.接着输入vue，vs code自动生成vue.json文件。3. 将vue.json文件改为下面得模板（可以根据个人需求修改当中的模板内容） { "Print to console": { "prefix": "vue", "body": [ ...

原创 隐藏微信小程序左上角的返回或home按钮 wx.hideHomeButton

隐藏微信小程序左上角的返回或home按钮 用的是 wx.hideHomeButton方法，但是这个方法是有限制的，管网说得又不清不楚，在百度也找不到相关的问题在用这个方法的时候遇到过很多问题和官方不一至“当用户打开的小程序最底层页面是非首页时” 并不是这样，也不一定在onshow调用，首先，如果想要隐藏图标，在上一个页面跳到要隐藏图标的页面时，在跳转要用到wx.reLaunch，其它跳转方法都没效果，其次，wx.hideHomeButton不一定要在onS...

原创 Vue3 如何挂载全局方法 和用getCurrentInstance代替this

平时我们在开发vue项目的时候，要把一些函数、方法、组件或插件挂在全局上方便项目上每一个页面或模块调用，在vue2.x的时候，在main.js只要用Vue.prototype就能完成，之后在页面上用this来调用，如：main.js:调用在vue3.0的时候挂在全局方法就不一样，通过 app.config.globalProperties来挂载，如挂载axios：方法一：但是切记挂载任何东西之前不能createApp(App)后面不能连缀us...

原创 vue3.0 setup 模块化 使用例子

一、模块化开发因为vue3.0 添加了一个组合api setup,这个方法对我来说最大的用处就是一个vue的页面可以通过import导入的方式来模块化开发，在vue2.0的时候一个vue页面有几个tab页，每个页面下面又有子tab页，如：这样下来就把所有的代都往一个页面来塞，开发下来几千行甚至一万多行代码，维护起来不但不方便，和同事合作开发更加麻烦，每次提交代码的时候都要用compare来合并。但是现在可以用，组合api setup来处理这个问题：把每一个tab页的代码分开放在对应的js文件

原创 ajax与axios请求头Content-Type的问题

我在开发中遇到一个问题，我用vue+wepack+axios来开发一个项目，但是后端用的是很久很旧的技术，在调试接口的时候后台要求我传的请求头是Content-Type="application/x-www-form-urlencoded;charset=UTF-8"的格式，但是参数是对象格式传过去，如果用ajax设置这个头部是没问题的，但是用axios请求头是Content-Type="application/x-www-form-urlencoded;charset=UTF-8"的时候请求的参数变成了字

原创 eslint配置规则

"off"或者0 //关闭规则关闭"warn"或者1 //在打开的规则作为警告（不影响退出代码）"error"或者2 //把规则作为一个错误（退出代码触发时为1）以下是配置格式：module.exports = { root: true, env: { node: true }, extends: ["plugin:vue/essential"...

原创 uni-app如何设置华为荣耀手机真机调试

手机和手机连接之后，还是不能真机调试，如下图第一步：电脑与手机用数据线连接起来，会弹出如下图，点击“传输文件”第二步：去手机设置->"系统"->"关于手机"点击版本号7次，之后返回“系统”，就会出现“开发人员选项”如下图第三步：进入“开发人员选项”之后再去uin-app开发软件查看，就可以真机调试了点击之后，首次会安装，...

原创 前端开发-微信小程序开发遇到的一些问题

1，如何改变微信小程序的button禁用时的样式？ 在样式后面加 !import 如图：html:css:2,如何改变 多选框checkbox的大小 ？html:css:3,有时候我们用webview 标签跳到h5页面的时候，即使url什么都对了，但是还是跳不过去. 原因1：url没有在微信后台配白名单 原因2：...

原创 window.history.back() IOS返回不刷新的问题

有时候我们有这样的需求，在A页面跳到B页面之后更改一些数据之后返回到A页面,A页面的某个状态要改变，得重新调用接口更改状态，这样就要刷新。但是如果从A页面跳到B页面，之后在B页面通过window.history.back()返回A页面，在安卓机是可以刷新的，但在IOS机是不行的，所以解决的办法只能用 window.location.href="./A.html", 这样就可以了...

原创 微信小程序前端开发实现双向数据绑定

现在公司有一个要求要实现这样的一个功能：先来看html代码：js代码：html代码:<view class="weui-form-preview"wx:for="{{customerData}}" wx:key="idx" wx:for-index="idx" wx:for-item="item"><view class="weui-form...

原创 微信小程序和vue向数组添加数据差异

vue向数组里添加数据直接用this.dataType.push()进去：微信小程序添加数据要用concat()拼接数据：

原创 前端开发通过图片编码实现拍照身份证正反面上传功能

框架：angularjs，AUI框架这个是angularjs1.x.x开发的，我对angularjs也不是很熟悉，都是一边开发，一边看api。效果图：html代码：css代码：js代码：图片上传之后编码在后台打印出来...

原创 ajax请求报错：We‘re sorry but mff doesn‘t work properly without JavaScript enabled....

今天我开发的时候遇到一个很抗人的问题 ajax请求报错：We're sorry but mff doesn't work properly without JavaScript enabled. Please enable it to continue. this.queryData(url, create)是一个请求接口的函数，url的create=2明明已...

原创 用iviewui开发项目，表单form动态添加验证，动态去掉验证，提示信息和“必填星号”没有去掉的问题

我开发项目的时候，遇到一个很坑的问题，就是在用一个输入框动态添加验证和动态去掉验证，提示信息和星号没有去掉。需求是这样的：图片1先择“质量警告第一次”，下面“大中小类”显示，并且，“大中类”必填。先择“黄牌”的时候，下面“大中小类”显示，但是不是必填，我选了之后，“星号”和“验证信息没有去掉”，大类，中类的字段分别是： categoryName1 categ...

原创 在用vuex的时候报一个很‘坑嗲’的错误：Cannot read property ‘dispatch‘ of undefined

在用vuex的时候报一个很‘坑爹’的错误，如下图：我找了很久才找到原因，其他代码都没问题，就是报了上面那个错误，原来是我在main.jsimport store from './store.js'的问题如图： 这样就会报错，后来我改成小写之后：错误就消失了，原因很简单：如果是大小Store，根据es6法则，它会解析成：Store:Store.通常我引入一个组件，...

原创 vue.js 运用$emit 与 $on 在组件中传递数据

目的：把A组件的数据传到B组件里首先两个组件都要引入一个common.js,内容如下图在A组件和B组件A组件里触发一个函数B组件这样就可以在A组件的操件，影响B组件的隐藏和显示，等等如：点”确定“或”取消“，把事件传给父组件，让父组件来关闭这个子组件。引入...

原创 Vue.js devtools chrome 的安装详细步骤

一，在github上下载压缩包，github下载地址：https://github.com/vuejs/vue-devtools 找到下载文件的目录解压出来二，1，cmd定位到目录这里2，npm install （也可以 cnpm install 前提是你要装了这个淘宝镜像） 3，之后再npm run build （等待完成）三 ， 修改...