- 博客(204)
- 资源 (15)
- 问答 (1)
- 收藏
- 关注
原创 【前后端分离】Springboot实现Kaptcha生成验证码、Graphics 2D随机验证码(两种样式) | 通过Vue显示到前端页面
目录一、kaptcha实现代码1. 引入坐标依赖2. CaptchaConfig3. CaptchaController4. 配置端口5. 应用程序启动入口二、Graphics 2D实现CaptchaConfig2Captcha2Controller三、前端 Vue项目Login.vuevue.config.js四、源码下载效果图:通过Graphics 2D实现:通过kaptcha实现:一、kaptcha实现代码1. 引入坐标依赖首先在Springboot项目下的pom下加入依赖坐标:
2021-06-09 08:43:22 3108 18
原创 Liunx配置DNS服务器
配置DNS服务器DNS服务器简介DNS服务器安装BIND配置文件详解DNS服务器操作options全局配置段DNS服务器简介主机名、域名及域名系统TCP/IP应用在网络层都是基于IP协议的,但不论是32位二进制,还是4组十进制,IP地址都难以记忆,所以用户很少使用IP地址来访问主机,一般采用更容易记忆的字符串来指代IP地址,这种特殊用途的字符串被称为域名,域名属于互联网上的基础服务,基于域名可以提供WWW、EMAIL、FTP等应用服务.域名系统层次结构子域名是个相对的概念,是相对父域名来说的,父域
2020-07-04 00:42:34 526
原创 解决react + ant-design中Select下拉框分离随页面滚动问题
这个归根结底大概是ant-design中Select组件没有找到正确的父节点。很多方法试了并没有成功,最后用下面的方法解决了这个bug。1、在Select组件标签内添加getPopupContainer属性:2、在的上一层用包裹
2022-07-12 16:45:09 1185 1
原创 react-router-dom中的BrowserRouter和HashRouter
如果前端使用了,每次改变路由时,会向服务器发送请求,因为服务器未配置对应的路径指向对应的文件,自然导致出现的情况.(对于初始化页面,即路由为/时,不会发送请求)因此在使用需要再加一层服务器配置(node/Nginx),让前端发送的请求映射到对应的文件上.由于hashRouter会在路径上添加,而后面的所有都不会发送到服务器端,即对于服务器而言,路径依旧是,路由切换在前端完成。但是官方会更推荐使用browserRouter,貌似是因为其构建于H5的History API,比起hashRouter,它多出了更多
2022-06-20 15:42:09 1332
原创 【数据格式转换】js如何将对象嵌套的数组数据取出来加到对象里,数据格式转换[{[],[]},{[],[]}] 转[{},{}]
在前后分离的大背景下,前端数据渲染过程中,有时候后端返回的数据结构并不是前端需要的格式,如果后端不处理,这个时候就需要前端自己处理。假如拿到的数据是这样的:list:[ { id: '01', name: 'saly', role: [{role_id: 1, name: "管理员", status: 1}], org: [{org_id: 1, name: "xx公司", parent_id:
2022-03-16 15:24:54 3153
原创 初识Reflect
ReflectReflect 是一个内置的对象,它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers 的方法相同。Reflect不是一个函数对象,因此它是不可构造的。与大多数全局对象不同Reflect并非一个构造函数,所以不能通过new运算符对其进行调用,或者将Reflect对象作为一个函数来调用。Reflect的所有属性和方法都是静态的(就像Math对象)。Reflect 对象提供了以下静态方法,这些方法与proxy handler methods (en-US)
2022-01-23 23:50:52 200
原创 JavaScript 防抖和节流的实现
一、防抖1. 认识防抖防抖:在第一次触发事件时,不立即执行函数,而是给出一个限定值,比如200ms,然后:如果在200ms内没有再次触发事件,那么执行函数如果在200ms内再次触发函数,那么当前的计时取消,重新开始计时应用场景:输入框中频繁的输入内容,搜索或者提交信息频繁的点击按钮,触发某个事件监听浏览器滚定事件,完成某些特定操作用户缩放浏览器的resize 事件效果:如果短时间内大量触发同一件事,只会执行一次函数。2.防抖函数的实现防抖函数的核心思路如下:当触发一个函数
2022-01-23 17:42:43 3821
原创 数组、对象、与Set和Map 数据结构的一些常见转换
Set1. Set 转为数组Array.from 可以将Set 结构转为数组: const items = new Set([1,2,3,4,5]); const array = Array.from(items);2. Set 实现数组去重const array = [1,20,20,3,4];const removeDuplicate = [...new Set(array)];3. 去除字符串里面的重复字符串[...new Set('abdjfjdd')].join('')
2022-01-18 16:20:11 430
原创 【antd-design】实例详解a-table 中column中slot-scope=“{text, record, index}
三者表示的值如下:text表示本项内容对应的字段值value,record的值是object,表示的是这一行数据的全部内容,index表示当行索引在column 中如何一个单元格显示多个变量,前面介绍了,这里就可以很清晰的知道用record可以是实现:例如我们后台返回的区域名和建筑名用> 串接起来显示在一个单元格内:a-table中:<div slot="estate" slot-scope="{text, record, index}"> <span>{
2022-01-12 11:38:15 7868 4
原创 error: src refspec master does not match any error: failed to push some refs to ‘github.com:Lydever/
本地关联github远程仓库,本地在 pull or push的时候报错:error: src refspec master does not match any error: failed to push some refs to 'github.com:Lydever/typescript-projects.git'原因本地分支与远程分支不一致导致,2020年起,github上创建的仓库默认分支为main 而不再是master,而本地git 初始化后默认分支为master解决重命名分支,使
2022-01-08 21:51:28 1127
原创 【git 提交回滚】代码强制覆盖后如何恢复github上的提交记录
情景:某天,你写好代码后,不小心手贱git push origin -f 将本地的代码强制覆盖了,所有的提交记录都没了。恢复:使用下面命令查看提交记录:git reflog使用下面命令恢复: git reset --hard 想要回退的版本号 git push origin -f这时候就恢复到你想要的版本了...
2022-01-04 14:06:39 2650
原创 【JavaScript权威指南(第七版)】之阅读学习总结
写在前面最近借着空闲时间断断续续两个月看完了《JavaScript权威指南(第七版)》,《JavaScript权威指南》一直以来被称为“犀牛书”,前面的第六版我大概略过一遍,由于书的厚度实在有点“厚重”,将近1000多页左右,有一些知识已经过时了,看了一下就没有细啃,随后转向新出版的第七版,第七版是是在2020年5月出版上市的,据了解,而第6版是2011年出版的,距今已经10年了,前端的技术更迭换代非常“迅速”,至少对于像我这种之前是学习后端知识的人来说,前端的技术更迭比后端的技术更新快的多,而且要求也
2021-12-30 15:51:43 2956 1
原创 yarn 创建项目16/16文件名、目录名或卷标语法不正确。
问题问题根本原因:yarn安装及缓存目录不一致导致查看 yarn 命令的目录:yarn global binyarn global dir如何解决修改 yarn的全局安装位置和缓存位置:yarn config set global-folder "D:\nodejs\node_global"yarn config set cache-folder "D:\nodejs\node_cache"...
2021-12-14 23:54:52 666 1
原创 【TypeScript】TypeScript高级类型之Partial
PartialPartial 可以快速把某个接口类型中定义的所有属性变成可选的。举个栗子:interface ApiKey { id: number; name: string;}const dataType1: ApiKey = { id: 1, name: 'static'}const dataType2: ApiKey = { name: 'json'}这段代码会在编译报错:error TS2741: Property 'id' is missing
2021-12-14 11:46:31 1713
原创 【TypeScript】TypeScript高级类型之Record
Record<Keys,Type>构造一个对象类型,其属性key是Keys,属性value是Type。被用于映射一个类型的属性到另一个类型。简单来说,TypeScript中的Record可以实现定义一个对象的 key 和 value 类型,Record 后面的泛型就是对象键和值的类型。实例比如我需要一个cats对象,这个对象里有三个不同的属性,且属性的值必须是数字和字符串那么可以这样写:interface CatInfo { age: number; breed: strin
2021-12-13 11:12:10 2559
原创 【JavaScript原生】Object.prototype.hasOwnProperty()
Object.prototype.hasOwnProperty()hasOwnProperty() 方法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)。用通俗的话来说就是:用来判断一个属性是定义在对象本身而不是继承自原型链的。语法obj.hasOwnProperty(prop)prop要检测的属性的 String 字符串形式表示的名称,或者 Symbol。返回值用来判断某个对象是否含有指定的属性的布尔值 Boolean。实例const obj = {
2021-12-12 15:34:18 712
原创 【TypeScript】TypeScript 特性总结
看到一篇很不错的TypeScript 总结,入门typescript看这篇,还不错:2021 typescript史上最强学习入门文章(2w字)
2021-12-09 16:12:09 409
原创 【Git 提交】将本地项目推送到github上
将本地项目推送到github上1、在github上新建一个repository // 创建一个新仓库2、右键要推送的本地项目,git bash here ,输入git init初始化;3、git remote add origin github仓库路径4、git pull origin master // 将码云上的仓库pull到本地文件夹5、git add . // 将文件推送到暂存区6、git commit -m “init” // 输入提交信息7、git push o
2021-12-05 14:32:54 331
原创 【Vue粒子动效插件】Vue3之vue-particles实现一个科技粒子动画登录页面,Picker It~
【Vue粒子动效插件】Vue3之vue-particles实现一个科技粒子动画登录页面,Picker It~
2021-12-05 11:50:31 4502 4
原创 【Nginx】windows下安装Nginx
1、安装 Nginx1.1 解压并启动 Nginx解压下载好的nginx-1.16.1,打开cmd窗口cd到根目录下,并通过启动命令start Nginx 启动Nginx:敲回车的时候,窗口会闪一下,这时候服务1已经启动成功,我们可以使用 console 的命令netstat -ano | findstr :80 | findstr LISTENING查看80端口是否已经被监听。可以看到,80端口已经被监听。打开浏览器输:http://localhost:80可以访问到Nignx的欢迎页面。
2021-12-04 10:02:03 2451
原创 【Vue EventBus】 | 实现组件间的通信&改变大屏背景颜色实践
效果:![动画.gif](https://img-blog.csdnimg.cn/img_convert/ed011cc17377ced7008436c06c9d71e8.gif#clientId=u5e5ca2d0-2607-4&crop=0&crop=0&crop=1&crop=1&from=drop&id=u4b3724fa&margin=[object Object]&name=动画.gif&originHeight=720.
2021-12-03 16:25:25 690 1
原创 【提交规范】了解一下git commit 提交规范
git commit 提交规范commit message格式:<type>(<scope>): <subject>type(必须):用于说明git commit的类别,只允许使用下面的标识。feat:新功能(feature)。fix/to:修复bug,可以是QA发现的BUG,也可以是研发自己发现的BUG。fix:产生diff并自动修复此问题。适合于一次提交直接修复问题to:只产生diff不自动修复此问题。适合于多次提交。最终修复问题提交时使用fix
2021-11-20 09:29:28 397
原创 【Spring Boot】使用Spring Boot实现简单的后端接口--发布模块(一)
目录pom.xml应用启动入口配置类controllerdaoentityservicehandlerMapperpostman测试心血来潮,没事的时候想写一个自己的日记小程序(也叫帖子小程序)把,主要会实现前端页面和简单的后端接口:大概页面如下:页面不全,等我写完在不全吧,大概就这个调了,哈哈~这篇先实现后端接口:新建一个项目,选择Spring Initializr,项目名自定义。实现的目录结构:pom.xml项目需要的坐标依赖:<?xml version="1.0" enc
2021-11-15 11:24:12 1499
原创 SpringBoot 自动注入/扫描不到类问题解决
Field postService in com.demo.web.PostController required a bean of type‘comdemo.service.PostService’; that could not be foundAction:Consider defining a bean of type‘com.demo.service.PostService’in your configuration.这玩意 ,一开始也是让人想不通,明明service和各类bean都写.
2021-11-11 15:51:52 2061
原创 JS相等判断中的运算符
js中的JS相等判断中的运算符,知识点太繁多了,如果不经常用,还真有点模糊,这是某博主总结的,直接拿来,再次学习复盘一下吧~等值检测运算符等值检测运算符说明==(相等)比较两个操作数的值是否相等!=(不想等)比较两个操作数的值是否不相等===(全等)比较两个操作数的值是否相等,同时检测它们的类型是否相同!==(不全等)比较两个操作数的值是否不相等,同时检测它们的类型是否不相同在相等运算中,应注意以下几个问题:如果操作数是布尔值,则先转换为数值,其中
2021-11-11 10:41:45 152
原创 【前端开发】Vue + Fabric.js + Element-plus 实现简易的H5可视化图片编辑器
目录前言一 、实战效果技术选型核心功能代码实现二、Fabric.js 简介安装创建画布监听画布事件鼠标事件监听设置画布背景设置背景颜色向画布添加图层对象获取当前选中的对象控制图层层级将画布导出成图片下载为图片画布状态记录清除对象/图层清除画布前言canves 绘图的运用是前端必知必会的基础,但是canves 本身并不好用,而fabric.js是基于canves的一个绘图框架库,用起来可比canves友好多了!接下来带你看看案例和初识fabric.js~一 、实战效果编辑前:编辑中:技术选型
2021-11-11 10:39:55 10044 20
原创 【微信小程序】使用Promise 实现对wx.request()请求封装
写在前面我们在使用wx.request()请求网络操作的时候,里面的参数参数说多也不多,说少也不少,一旦请求多了,这写起来就很繁琐,而且一旦某些参数有变动,这修改起来太费事了。wx.request()是一个异步 API它的结果返回的是Promise,微信小程序基础库 2.10.2 版本起,异步 API 支持 callback &promise 两种调用方式。现在使用使用Promise 实现对wx.request()请求封装,可以帮助我们减少一些不必要的重复无用功。具体实现在小程序项目的u
2021-11-08 17:31:16 3276 3
原创 【前端开发】Array.prototype.reduce()的详细解析&使用
reduce() 的高级用法Array.prototype.reduce()reduce() 方法为数组中的每一个元素执行回调函数,并将其回调的的结果值作为返回值。语法:arr.reduce(callback(priviousValue,currentValue,currentIndex,sourceArray),[initValue])reduce 函数接收四个参数:callback:reduce得回调函数,接收四个参数:priviousValue:累加器,即上一次回调返回的值,或者
2021-11-07 14:57:24 710
原创 【微信小程序】页面传参实现列表中item点击跳转并传参到编辑页面
写在前面常见的需求操作:在一些页面中,我们一般会对后台请求的数据列表中的每项item进行CRUD 操作,点击对应的itme,跳转到编辑页面,并显示相应的数据,这涉及到一个很常见的操作:页面传参。下面演练实现一下上面的场景需求:发送数据端==> 列表页面:list.wxml:list.js接收数据端==> 编辑页面:edit.wxml在edit.js中onLoad中加载获取传过来的值:edit.js核心代码list.wxml: <view class="meeting
2021-11-06 17:40:20 3186 2
原创 Windows将VS Code注册添加到右键菜单面板中
写在前面之前安装vs code的时候,忘记了勾选添加到菜单面板中,导致我想要右键项目选择用vs code打开时,没有这个选项,很不方便,其中之一的方法就是卸载重装,但是我已经安装配置好了很多插件和主题,一卸载就全部没有了,太麻烦,拒绝,我不想;还有一个方法就是用.reg文件运行脚本命令将它添加到注册表里:具体操作新建文件,文件名随便,加入下面代码,并保存为以.reg为后缀名的xxx.reg文件文件代码:Windows Registry Editor Version 5.00 [HKEY_CLA
2021-11-05 22:25:36 599
原创 【GO】GO之初体验(Windows版)
开发环境下载地址: https://golang.google.cn/dl/到官网下载开发包,这里选择go1.17.2.windows-amd64.msi,选择.msi 是因直接双击它会自动安装并把bin目录加到系统环境变量的path下。打开dos命令行窗口用go -version测试一下,环境是否安装成功,返回相关版本信息则环境已经搭建完成。接着,用vscode 新建一个app.go 文件,写入测试代码:package mainimport "fmt"func main() { f
2021-11-02 15:05:04 107
原创 【前端开发】React+TypeScript 项目初体验
创建React + TypeScript 应用项目使用下面命令创建:比如我要创建一个叫react-typescript-demo的项目,npx react-create-app react-typescript-demo --template typescript创建成功后的目录结构如下:运行模板项目cd 进入目录,并yarn start跑起来:...
2021-11-01 10:22:12 170
原创 原型和原型链的理解
谈谈你对 JS 原型和原型链的理解?候选人:JS 原型是指为其它对象提供共享属性访问的对象。在创建对象时,每个对象都包含一个隐式引用指向它的原型对象或者 null。原型也是对象,因此它也有自己的原型。这样构成一个原型链。原型链有什么作用?候选人:在访问一个对象的属性时,实际上是在查询原型链。这个对象是原型链的第一个元素,先检查它是否包含属性名,如果包含则返回属性值,否则检查原型链上的第二个元素,以此类推。那如何实现原型继承呢?候选人:有两种方式。一种是通过 Object.create 或者 Ob
2021-10-18 17:12:53 146
原创 【JavaScript中高级进阶】推荐一个JavaScript进阶深入系列、专题系列(涉及原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等
推荐一个JavaScript进阶深入系列、专题系列,其中涉及原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等 JS 语言中的比较难懂的概念。作者写的很深如,详细,想要深入搞懂js基础原理得可以看这个,还不错~原文学习地址:JavaScript深入系列、JavaScript专题系列、ES6 系列...
2021-10-14 09:56:37 128
原创 【前端开发】谈谈H5的原生元素拖拽(drap& drop)事件
在原生h5 中,拖放(drag 和 drop)是 HTML5 标准的组成部分。它常用于:抓取对象以后拖放到另一个位置。一个元素的拖放的过程:选中–>拖动–>释放选中在HTML5标准中, draggable是一个全局的枚举属性,它决定了一个元素是否可以被拖动。draggable 的语法:<element draggable="true | false | auto" >true: 可以拖动;false:禁止拖动auto:跟随浏览器定义元素是否可以
2021-10-11 18:09:39 2194
转载 e.preventDefault()和e.stopPropagation()以及return false的作用和区别
https://www.cnblogs.com/sqh17/p/8427283.html
2021-10-11 10:08:09 452
原创 CSS中背景background值为data:image/png;base64的用法详解
在接手的一个项目中看到了background的url 的后面引用的是data:xxxxxxxxxbackground-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOAQMAAAAlhr+SAAAABlBMVEUqLjNSXWS1zSUzAAAAD0lEQVQI12NgwADMYIQBAACrAAd4ROv5AAAAAElFTkSuQmCC)这是什么呢?查阅资料大概了解:这是Data URI scheme。那么什么是Da
2021-09-28 10:06:40 13002
vue-fabric-h5-editor.rar
2021-08-10
wx-business-card-main.rar
2021-08-10
MyCinemaSystem.rar
2021-06-01
人事管理系统开发报告.docx
2021-06-01
1+X Web前端开发中级模拟题(2020 12月最新模拟题).rar
2020-11-14
网上购物商城数据库设计报告.zip
2020-07-30
php7.3.8手册(官网).zip
2020-06-22
ThinkPHP5.1完全开发手册.zip
2020-06-22
JS+CSS+Bootstrap+PHP学习帮助文档chm.zip
2020-06-18
我啥时候才能换电脑[face]emoji:029.png[/face],它不行了
2021-05-22
TA创建的收藏夹 TA关注的收藏夹
TA关注的人