- 博客(30)
- 收藏
- 关注
原创 在Vue3项目中实现文字点选验证的人机校验
在现代Web应用中,人机校验(CAPTCHA)是防止恶意机器人自动访问的重要措施之一。除了常见的图片验证码、滑动验证外,文字点选验证也是一种有效且用户友好的方式。本文将介绍如何在Vue项目中实现登录时的文字点选验证功能。这里没用进行样式优化,不是很好看,就是为了实现功能。相关样式可自行修改,下面是样式图这里是选中正确的样式,可以自行更改,在代码中会进行标识当然为了复用性和方便就把验证做成了组件,在组建中新建文件Perustarkistus.vue根据图效果分析也就两块区域,1.显示文字顺序。
2024-06-14 14:04:08 1116
原创 React中实现拖拽布局 react-grid-layout
在现代的Web应用中,灵活的布局和用户交互是非常重要的。拖拽布局允许用户通过拖动和调整大小来动态地改变页面布局,从而提供更好的用户体验。是一个强大的React库,它使得实现这种拖拽布局变得非常简单。本文将介绍如何在React项目中使用库来实现可定制的拖拽布局。通过本文的讲解,我们了解了如何在React项目中使用库来创建灵活的拖拽布局。这个库不仅易于使用,而且功能强大,可以满足各种复杂布局的需求。
2024-06-14 10:46:49 936
原创 vue3 人机验证 图片角度矫正 语法糖格式传参
创建组件 CorrectImage.vue 防止页面出现多处使用,使用的是语法糖格式写的。效果视屏 中间有alter提示没有录进去 会显着有点呆。使用技术 Vue3 TS。
2023-12-23 10:10:35 540 1
原创 关于“Java 已死、前端已凉”
总的来说,技术领域是非常庞大和多样化的,不同的技术在不同的场景和需求下都有其合理的应用。新兴技术的涌现:随着人工智能、大数据、区块链等新兴技术的崛起,一些人可能将注意力从前端转移到了这些领域,认为前端的重要性相对减少。完成个人项目和开源贡献:完成个人项目和参与开源项目可以展示自己的技术能力和实际经验,有助于提高自己的竞争力,并且可以结交更多的同行和技术人脉。随着技术的发展,新的编程语言和框架不断涌现,一些人可能过于强调新技术的优势,从而传达出"老旧技术已死"的印象。
2023-12-22 14:31:34 557 1
原创 React导入xlsx、xls文件 读取内容 渲染表格(可编辑)
2、更改表格数据,重新设置表格数据的方法(changeTableData)。3、工作区改变、Select改变的方法(handleChange)。1、文件改变、工作区改变调用的方法(handleUpload)。表格数据如下:Sheet1数据9条 Sheet2数据100条 Sheet3没数据。项目需求:将Excel表格文件中的数据取出之后进行保存到数据库(前端实现)5、文件内工作区列表(Select选择框的options)4、上传文件(改变工作区的时候会用到)7、默认工作区(文件工作区的第一个)
2023-12-20 10:04:58 1945 4
原创 浅谈vuex 五大属性 传值 获取值的方法
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 下载安装 新建文件夹store 与main.js同级 文件夹下新建index.js index.js写入以下代码State 单一状态树(用一个对象就包含了全部的应用层级状态) 单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状
2022-06-24 16:29:35 2633 5
原创 微信小程序 点击获取验证码(节流)讲解在代码中
多次点击一段时间内 只执行一次---------节流一段时间点击多次 只执行最后一次--------防抖 页面.wxml样式,wxss逻辑.js
2022-06-20 16:09:50 791
原创 微信小程序 一键已读功能实现
微信小程序 一键已读功能 页面展示效果如图 需求:点击全部标记已读 样式改变 按钮‘全部标记已读’以及右上角条数消失 右上角条数显示实际未读条数 当未读大于99条时 显示··· ...
2022-06-13 17:11:58 2452
原创 微信小程序 原生时间选择器 月份范围 几月至几月 封装组件 父子组件
效果如图所示 需求分析:默认显示当前年份1月到1月 选择月份上面的文字随之变化 年份-获取1900年到现在 月份-第一列月份12个月所以选择 第二个月份随着第一个选择而变化 大于第一个选择的月份 ...
2022-06-13 17:03:27 1551 1
原创 React中 数据赋值 改变复用方法
<script type="text/babel"> // 创建组件 class Login extends React.Component { // 初始化状态 state = { username: "", password: "", }; // 复用 saveInfo = (e) => { this.setS...
2022-05-30 11:06:54 310
原创 vue3 图片路径转base64 base64转file(二进制一般后台需要格式) file转base64
vue3 图片路径转base64 base64转file(二进制一般后台需要格式) file转base64 图片转二进制
2022-05-26 09:44:19 4041 2
原创 vue3+若依 wangEditor 实现富文本添加
1. 安装 这里是官网提供的安装方法 参考地址wangEditoryarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --save// vue3yarn add @wangeditor/editor-for-vue@next# 或者 npm install @wangeditor/editor-for-vue@next --save2. 在src下面的components 创建WangEditor 文件 创..
2022-05-25 17:09:12 2050
原创 Vue前端生成图片验证码 区分大小写
创建一个组件 命名为sidentify.vue全局引入 挂载 main.js在需要验证码页面使用(以下都是)data数据相关方法 生成验证码 如图所示
2022-04-28 16:52:57 471
原创 Vue 鼠标移入移出 样式改变
<div v-for="(item, index) in 3" :key="index"> <a @click="goList(index)" @mouseover="getCur(index, item)" :class="curIndex == index ? 'current' : ''"> <span>{{ item}}</span> </a></div>// tab滑动getCur(a, b) {.
2022-04-28 16:31:26 2678
原创 Vue 二维码
安装插件cnpm i vue-qr --save在入口文件 main.js 引入 注册 挂载import vueQr from "vue-qr"; // 引入Vue.component('vueQr', vueQr) // 挂载Vue.use(vueQr) // 使用在页面中使用<vue-qr :text="downloadData.url" :margin="0" colorDark="#000000" colorLight="#fff" :c
2022-04-28 16:01:10 351
原创 vue打印 vue-print-nb
安装相关插件cnpm i vue-print-nb --save在main.js里面全局引用import Print from 'vue-print-nb' // 引入Vue.prototype.$print = Print; // 挂载Vue.use(Print); // 使用页面代码<button v-print="print" type="primary"> <span>打印</span></button>
2022-04-28 10:37:34 2027 3
原创 vue签字板
安装相关插件cnpm i vue-esign --save全局引入import vueEsign from 'vue-esign'Vue.use(vueEsign)在弹窗里面添加<el-dialog width="60%" title="签字" :visible.sync="innerVisible" append-to-body :before-close="handleClose1" :close-on-click-modal="false"&
2022-04-27 14:06:41 659 2
原创 vue 金额大写小转换 数字转换 小写转大写 保留两位小数
// 大写转换 两位小数的digitUppercase(n) { var fraction = ["角", "分"]; // 后面还可以自己继续写 几位小数自己定义 var digit = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"]; // 大写 对应下标 var unit = [ ["元", "万", "亿"], ["", "拾", "佰", "仟"], ]; var head = n < 0 .
2022-04-27 10:41:21 814
原创 vue upload上传文件 elementui el-upload vue3 elementuiPlus
vue upload上传文件 elementui el-upload vue3 elementuiPlus
2022-04-26 16:57:40 214
原创 Dreamweaver 热点区域选择 area
双击打开Dreamweaver,新建HTML文件点击插入,选择图像然后选择所需图片如果出现如图,点击是即可然后点击保存即可左上角 选择拆分 设置所需图片大小 !!! 然后再开始使用工具选择区域然后点击右边图片,点击一次即可,选择左下角多边形热点工具然后在图片需要热点区域的边缘点击一下,会有如图所示的提示,点击确定即可然后沿着边缘线点击即可,完成区域选择后 点击一下左边代码区域即可...
2022-04-22 16:38:13 2068
原创 Vue热点区域 area imagemapster
首先要安装两个插件 一个是 jQuery 和 imagemapstercnpm i imagemapster --savecnpm i jquery --save在用到的热点地图模块引入:import $ from "jquery";import "imagemapster";定义热点区域,如果是不规则的区域,推荐使用 Dreamweaver 进行区域选择(可以去主页看Dreamweaver 热点区域选择方法)<div id="mapHover"> <
2022-04-22 16:16:43 3293
原创 接口只返回一张图片 Preview里面显示一张图片 Response为空 在Vue中该如何显示到页面当中
当请求的接口只有在Preview里面显示一张图片时,想要去将图片显示在页面当中,就可以直接把接口放在img属性的src中,直接调用即可这里图片的src属性绑定一个变量,这里绑定是为了点击实现切换验证图片<div class="imgCode" @click="refreshCode"> <img :src="imgCode" alt="" /></div>变量的初始值赋值为接口imgCode: "http://****?",.
2022-04-21 10:54:09 2725
原创 vue输入框 限制字数 回显剩余字数
问题描述:如图,输入框限制字数,而且输入时实时回显剩余字数在elementUI里面提供了方法定义一个变量初始值为最大限制字数,在需要的地方绑定 residueNum: 1000, // 最大限制出入长度<p> 主要问题<label style="color: #dc0101">*</label> <br /> (剩余{{ residueNum }}字)</p>绑定输入框里面的内容<...
2022-04-20 11:35:29 2151
原创 vue中动态绑定css 原生写法
第一种写死的:<span @click="changeNum(0)" :class="this.xsNum == 0 ? 'active' : ''"> 相关法律法规</span><span @click="changeNum(1)":class="this.xsNum == 1 ? 'active' : ''"> 网上举报须知</span><span @click="changeNum(2)" :class="this.x
2022-04-18 18:49:50 895
python时钟python时钟python时钟python时钟python时钟python时钟python时钟python时钟
2023-06-25
python轰炸 调用鼠标 自动输入python轰炸 调用鼠标 自动输入python轰炸 调用鼠标 自动输入python轰
2023-06-25
css 圆柱css 圆柱css 圆柱css 圆柱css 圆柱css 圆柱css 圆柱css 圆柱css 圆柱css 圆柱css
2023-06-25
css伪元素 长方体 css伪元素 长方体
2023-06-25
天气预报毕业设计,天气预报毕业设计
2023-06-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人