- 博客(47)
- 收藏
- 关注
RSS订阅原创 Vue2和H5 Canvas实现一个电子签名功能
Canvas 元素：我们在模板中定义了一个元素，用来捕获用户的签名。width和height定义了画布的大小，@mousedown、@mousemove、@mouseup、@mouseout事件用来监听用户的签名操作。保存签名：saveSignature方法将Canvas中的内容转为Base64编码的图像字符串，保存在signatureImage中，用于预览。样式：signature-canvas类为Canvas元素提供边框和光标样式，controls类是控制按钮的样式。
2024-12-31 13:39:03
522
原创 vue项目实现微信公众号授权登录完整流程
服务器地址和Token相关配置一般是后端配置再后端项目中。（项目中前后端appId一定要保持一致）Token无效或者不是最新的。2、【公众号开发域名】配置的域名不一致导致的。3、appid和redirect_uri。大概可以分为四个步骤；设置回调域名（重点）
2024-12-19 14:36:33
796
原创 前端开发项目中实现极佳的过渡&动画效果
animate.css 是一个有趣，酷炫的，跨浏览器的动画库，你可以将它用于你的项目中。不管是主页，滑动切换，又或者是其它方面，你都可以通过它来制作出惊人的效果。Animista与其说是一个库，不如说是一个CSS动画平台，因为它按需提供动画，即你在平台可以选择想要的动画类型，然后为你生成动画CSS关键帧代码。GSAP👍🏼是前端业内非常有名的一个动效库，有大量的优秀的网站都在使用它。它不仅能在原生JS的环境下使用，也能配合各种当前流行的框架进行使用。
2024-11-28 15:23:10
1563
原创 前端高级开发需要知道的 25 个 JavaScript 单行代码
在上面的例子中，如果把?通过扩展运算符将NodeList( document.querySelectorAll函数的返回值) 转换为 JavaScript 数组，从而能够使用数组的map方法filter去操作查找到的元素。其中Object.values(obj)将对象所有的属性值提取为数组，然后使用展开运算符将数组的所有元素作为Math.max函数的参数进行最大值查找。其中Object.values(obj)用于获取对象中所有的值的数组，然后通过includes(value)检查指定值是否在该数组中。
2024-11-04 16:40:53
579
2
原创 vue2实现将el-table表格数据导出为长图片
使用canvas的toDataURL方法将画布导出为图片格式（例如PNG）。使用html2canvas库将表格区域转换为画布(canvas)。创建一个图片元素并将其源设置为导出的图片数据。
2024-06-04 17:36:59
592
1
原创 vue项目中使用websocke即时通讯实现系统公告实时获取并提醒
发布者设置需要发布的公告内容、公告接收用户和发布时间，到达发布时间时及时通知提醒已登录系统用户，使用websocke来实现前端与服务器保持长连接，以便实时过去公告信息。在用户登录成功后建立连接，App.vue中也要建立连接（用户刷新后要重新连接）对应通知页面获取数据并以弹框的形式渲染。
2024-05-10 11:21:04
1904
原创 微信H5下载文件处理：让微信自动弹起跳转外部浏览器窗口
再也不用管微信如何的更新，直接判断如果是在微信中打开，然后弹出一个遮罩提示用户在浏览器中打开下载。并且不加关闭的按钮。效果如下面这样子，这样子用户微信中打开链接，就提示在浏览器中打开，并且可以直接下载应用了。此方法在实际项目中实操过，比较友好。微信上进行的网页宣传、游戏传播、文件下载各类活动很多，因微信内置浏览器限制等因素无法完成下载，这时需要跳转至第三方浏览器完成后续操作。、（个人感觉第一中方法对用户不太友好，操作过于繁琐）、弹出一个遮罩提示用户在新的浏览器窗口打开。
2024-04-19 11:16:41
5607
13
原创 vue项目登录模块滑块拼图验证功能实现（纯前端）
在当今互联网时代，随着技术的不断进步，传统的验证码验证方式已经无法满足对安全性和用户体验的需求。为了应对日益狡猾的机器人和恶意攻击，许多网站和应用程序开始引入图形验证码，其中一种备受欢迎的形式就是图片旋转验证功能。这项技术通过利用用户交互、视觉识别和动态效果，为用户提供了一种全新、有趣且高效的验证方式。本文将深入探讨如何实现这一引人注目的图片旋转验证功能，让您轻松保护网站安全，同时提升用户体验效果展示功能介绍:在vue项目中将此验证弹框封装成一个单独的组件，完整代码如下；此功能中的图是利用ca
2024-03-14 10:59:30
2607
原创 vue项目登录模块图片旋转验证功能实现（纯前端）
在vue项目中将此验证弹框封装成一个单独的组件，完整代码如下；登录之前点击“安全验证”进入验证模块，拖动滑轨调整图片旋转位置，完成验证功能，验证失败会自动刷新再次验证，点击“刷新”也可以收到刷新图案，这是一个由纯前端实现的验证功能；
2024-03-14 09:58:26
1058
1
原创 最全前端程序猿面试题汇总
https://blog.poetries.top/browser-working-principle/guide/part5/lesson22.html#javascript-是如何影响-dom-生成的。https://alienzhou.com/projects/fe-performance-journey/#旅途的行程路线。http://www.ayqy.net/blog/nodejs进程间通信/
2023-08-18 17:15:33
131
原创 前端日常问题总结(字符串）
序列化：就是将对象转化成字节序列的过程。反序列化：就是讲字节序列转化成对象的过程。对象序列化成的字节序列会包含对象的类型信息、对象的数据等，说白了就是包含了描述这个对象的所有信息，能根据这些信息“复刻”出一个和原来一模一样的对象。
2023-01-06 13:48:15
534
原创 前端日常问题总结
问题：使用Elementui中Cascader 级联选择器时，后端返回的数组里面最后一级会显示一个空数组，显示不友好，如图所示// 获取地区列表 getAreaList() {//后端返回的地区数据 _this . recursion(_this . areaList);//调用递归方法并传参 } }) . catch((err) => {});} , //利用递归方法删除最后一个空数组 recursion(areaList) {} else {//删除数组 } });
2022-11-18 16:52:26
205
原创 为什么有公司规定所有接口都用Post？
看到这个标题，你肯定觉得离谱。怎么会有公司规定所有接口都用Post，是架构菜还是开发菜。这可不是夸大其词，这样的公司不少。在特定的情况下，规定使用Post可以减少不少的麻烦，一起看看。
2022-10-09 10:03:26
392
转载 Vue问题集合
Vue常见面试题1、Vue优点？（1）轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；（2）简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；（3）双向数据绑定：保留了angular的特点，在数据操作方面更为简单；（4）视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；（5）虚拟DOM：dom操作是非常耗费性能的， 不再使用原生的dom操作节点，极大解放dom操作，但具体操作的还是dom不过是换了另一种方式；
2021-06-24 18:32:39
148
原创 Node.js学习教程01
Node.js简介Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器
2020-11-09 18:13:42
168
原创 Vue.js学习总结04-------Vue+ElementUI
Vue+ElementUI实战操作！上代码1. 创建一个名为 hello-vue 的工程vue init webpack hello-vue2… 安装依赖，我们需要安装 vue-router、element-ui、sass-loader 和node-sass 四个插件# 进入工程目录cd hello-vue# 安装 vue-routernpm install vue-router --save-dev# 安装 element-uinpm i element-ui -S# 安装依赖
2020-10-29 16:18:53
281
原创 Vue.js学习总结03----第一个Vue-cli项目
什么是Vue-clivue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板； 预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速；项目的功能统一的目录结构本地调试热部署单元测试集成打包上线1、需要的坏境1、安装node.jsNode.js：http://nodejs.cn/download/ 安装就是无脑的下一步就好，安装在自己的环境目录下2、确认nodejs安装成功
2020-10-27 19:42:46
209
原创 Vue.js学习总结02
Vue双向绑定 v-mdel1. 什么是双向绑定 Vue.js是一个MVVM框架，即数据双向绑定,即当数据发生变化的时候,视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。 值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。2. 为什么要实现数据的双向绑定在Vue.js 中，如果使用vuex
2020-10-26 17:19:46
209
原创 Web前端之HTML+CSS的知识总结
HTML篇认识htmlhtml不是一种编程语言，是一种标记语言。标记语言是由一套标识标签组成的html使用标签来描述网页html结构<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body></html>不成对出现的标签<
2020-10-23 17:26:38
772
原创 Web前端之JavaScript框架学习总结
前端知识体系想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。前端三要素HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式（是一门标记语言，并不是编程语言）。JavaS
2020-10-16 20:34:07
1598
原创 Vue.js学习笔记01
VueVue的核心库只关注视图层，方便与第三方库或已有项目整合。视图：HTML+CSS+JS ------>刷新后台的数据给用户看一、前端核心分析1.Vue概述Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，由开发商由雨溪发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项
2020-10-13 16:43:38
489
2
原创 IDEA常用快捷键与设置
IDEA常用快捷键Alt+Enter 导入包,自动修正Ctrl+N 查找类Ctrl+Shift+N 查找文件Ctrl+Alt+L 格式化代码Ctrl+Alt+O 优化导入的类和包Alt+Insert 生成代码(如get,set方法,构造函数等)Ctrl+E或者Alt+Shift+C 最近更改的代码Ctrl+R 替换文本Ctrl+F 查找文本Ctrl+Shift+Space 自动补全代码Ctrl+空格 代码提示Ctrl+Alt+Space 类名或接口名提示Ctrl+P 方法参数
2020-10-07 14:58:35
356
原创 IDEA新建Maven Java Web项目-详细教程
1、file–>new–>project–>maven2、填写GroupId、ArtifactId，Next，然后Finish。3、新建完成后，点击Enable Auto-Import自动导入包观察新建项目的目录结构没有web目录配置项目编译路径 File -> Project Structure… ->Modules -> + -> web配置web.xml文件目录和web目录位置(默认即可)配置Artifacts点击OK完成配置we
2020-10-05 16:17:53
298
1
原创 MySQL5.7版本64位下载及安装详细教程
MySQL教程简介MySQL 是最流行的关系型数据库管理系统，在 WEB 应用方面 MySQL 是最好的 RDBMS(Relational Database Management System：关系数据库管理系统)应用软件之一。MySQL 是一个关系型数据库管理系统，由瑞典 MySQL AB 公司开发，目前属于 Oracle 公司。MySQL 是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性数据库 ( DataBas
2020-10-04 16:49:28
5157
2
原创 P3:Java多线程全面详解
多线程三大不安全案例案例一:package com.TestThread;/** 不安全的买票* 线程不安全,有负数* 因为每个线程在自己的工作内存交互,内存控制不当会造成数据不一致.假如有三个人同时抢最后一张票* 三个人买的时候看到的都是1,都将1拷贝到自己的内存了,第一个人买了,就变成0了,第二个人再买就变成-1了* 模拟延时是为了放大问题的发生性!* */public class UnsafeBuyticket { public static void main(Strin
2020-07-13 10:26:05
268
1
原创 P2: Java多线程全面详解
静态代理模式代理模式是面向对象编程比较常见的设计模式需要注意的有下面几点：用户只关心接口功能，而不在乎谁提供了功能。上图中接口是 Subject。接口真正实现者是上图的 RealSubject，但是它不与用户直接接触，而是通过代理。代理就是上图中的 Proxy，由于它实现了 Subject 接口，所以它能够直接与用户接触。用户调用 Proxy 的时候，Proxy 内部调用了 RealSubject。所以，Proxy 是中介者，它可以增强 RealSubject 操作。[静态代理实例]p
2020-07-07 16:22:07
160
原创 P1: Java多线程全面详解
概述进程,线程和多线程进程: 是一个正在执行中的程序，每一个进程执行都有一个执行顺序，该顺序是一个执行路径，或者叫一个控制单元；线程: 就是进程中的一个独立控制单元，线程在控制着进程的执行。一个进程中至少有一个线程。多线程: 一个进程中不只有一个线程。多线程优势①、为了更好的利用cpu的资源，如果只有一个线程，则第二个任务必须等到第一个任务结束后才能进行，如果使用多线程则在主线程执行任务的同时 可以执行其他任务，而不需要等待；②、进程之间不能共享数据，线程可以；③、系统创
2020-07-04 16:54:49
186
原创 计算机网络编程详解
计算机网络定义（连接分散的计算机设备以实现信息传递的系统）计算机网络是指将地理位置不同的具有独立功能的多台计算机加粗样式及其外部设备，通过通信线路连接起来，在网络操作系统、网络管理软件及网络通信协议的管理和协调下，实现资源共享和信息传递的计算机系统组成计算机网络通俗地讲就是由多台计算机（或其它计算机网络设备）通过传输介质和软件物理（或逻辑）连接在一起组成的。总的来说计算机网络的组成基本上包括：计算机、网络操作系统、传输介质（可以是有形的，也可以是无形的，如无线网络的传输介质就是空间）以及相应
2020-07-02 17:19:24
1059
原创 P5：Java之GUI编程
下拉列表框组件下拉框组件（JComboBox）：点击箭头可以显示其他信息列表框组件（JList）：可以跟列表一样显示信息滚动窗格组件（JScrollPane）：与列表框结合使用，可以滚动显示应用场景下拉框 选择地区 或者一些单个选项列表框 展示信息 一般是动态扩容注意事项列表框可以设置显示信息的个数，并与滚动窗格连用。【代码实例】package com.gui;import javax.swing.*;import java.awt.*;/** *
2020-06-23 13:47:13
275
原创 P4:java之GUI编程
SwingSwing 是一个为Java设计的GUI工具包。Swing是JAVA基础类的一部分。Swing包括了图形用户界面（GUI）器件如：文本框，按钮，分隔窗格和表。Swing提供许多比AWT更好的屏幕显示元素。它们用纯Java写成，所以同Java本身一样可以跨平台运行，这一点不像AWT。它们是JFC的一部分。它们支持可更换的面板和主题（各种操作系统默认的特有主题），然而不是真的使用原生平台提供的设备，而是仅仅在表面上模仿它们。这意味着你可以在任意平台上使用JAVA支持的任意面板。轻量级组件的缺
2020-06-14 17:12:36
220
原创 P3：Java之GUI编程
GUIJava 为 GUI 提供的 对象 都存在 java.awt 和 javax.swing 两个包中.Java 图形化界面的 产品: eclipse 这个产品使用 纯Java 语言 编写的. 所以 这个 软件不用安装, 但是至少得有jre(Java 语言程序的 运行环境).1. AWT 和 Swingjava.awt: Abstarct Window ToolKit(抽象窗口工具包), 需要调用本地系统方法 实现功能. 属于 重量级(和系统耦合(嵌入) 紧密) 控件.java
2020-06-09 14:30:35
260
1
原创 Java之GUI编程（事件监听）
监听事件事件监听机制的特点：1.事件源2.事件3.监听器4.事件处理事件源：就是awt包或者swing包中的那些图形用户界面组件。(如：按钮)事件：每一个事件源都有自己特点有的对应事件和共性事件。（如：鼠标单击事件）监听器：将可以触发某一事件的动作（不止一个动作）都已经封装到了监听器中。以上三者，在java中都已经定义好了， 直接获取其对象来用就可以了。我们要做的事情是，就是对产生的动作进行处理。【案例】事件监听package gui.study;import java.aw
2020-06-07 16:20:45
627
原创 学习Java的第N天：Java之GUI（图形界面编程）
GUI概述早期，电脑向用户提供的是单调、枯燥、纯字符状态的“命令行界面（CLI）”。就是到现在，我们还可以依稀看到它们的身影：在Windows中开个DOS窗口，就可看到历史的足迹。后来，Apple公司率先在电脑的操作系统中实现了图形化的用户界面（Graphical User Interface，简称GUI），但由于Apple公司封闭的市场策略，自己完成电脑硬件、操作系统、应用软件一条龙的产品，与其它PC不兼容。这使得Apple公司错过了一次一统全球PC的好机会。 后来，Microsoft公司推出了风
2020-06-04 15:48:45
1590
原创 学习Java的第N天：Java之面向对象编程
面向对象编程（Object-Oriented Programming. OPP）面向对象编程的本质就是：以类的方式组织代码，以对象的组织（封装）数据。类的概念类是一组具有相同特征和行为对象的抽象描述。类描述的是抽象概念，用于描述一个群体。类就是现实生活中所说的“类型”对象的概念对象是类的一个具体实现，是客观存在的一个具体事物/实体，具有唯一性和独立性。对象用于描述客观事物的一个实体，由一组特性和行为构成。类是抽象的，表示群体概念。对象是具体的，表示个体概念。先具有的对象，然后抽
2020-05-26 16:25:19
345
1
原创 学习Java的第N天：Java数组
定义数组指的就是一组相关类型的变量集合，并且这些变量可以按照统一的方式进行操作。数组本身属于引用数据类型。其中每一个数据称作为一个数组元素，每个数组元素可以通过一个下标（索引）来访问它们。数组的声明和创建数组声明两种形式（方括号位置前后放变量都可以）int arr[];int[] arr; //常用数组初始化数组初始化也有两种形式（使用new和不使用new）int arr[] = new int[]{1,3,5,7,9}int[] arr = {2,4,6,8,10}【实
2020-05-26 11:11:41
395
原创 学习Java的第N天：Java方法详解
方法的定义在Java的语言中，方法相当于C语言中的函数，但是它与传统的函数也有着明确的不同：在结构化的语言中，函数是一等公民，整个程序是由一个个函数组成的；但是在面向对象的语言里，类是一等公民，整个程序是由一个个类组成的。因此在Java中，方法不能独立存在，它只能属于类或者对象。因此，如果我们要定义一个方法，就必须在类中定义。值得注意的是，如果这个方法添加了修饰符static(这个修饰符后面会详细说明)，这个方法就属于这个类，否则的话，这个方法属于这个类的实例。我们调用方法的方式为：类.方法 |
2020-05-19 16:39:23
144
原创 学习Java的第N天：Java基本结构
顺序结构JAVA的基本结构就是顺序结构，除非特别指明，否则就按照顺序一句一句执行。顺序结构是最简单的算法结构。语句与语句之间，框与框之间是按从上到下的顺序进行的，它是由若干个依次执行的处理步骤组成的，它是任何一个算法都离不开的一种基本算法结构。顺序结构在程序流程图中的体现就是用流程线将程序框自上而地连接起来，按顺序执行算法步骤。选择结构if单选择结构if语句对条件表达式进行一次测试，若测试为真，则执行下面的语句，否则跳过该语句。【演示】比如我们来接收一个用户输入，判断输入的是否为H
2020-05-17 16:48:32
236
原创 Java流程控制：用户交互Scanner
用户交互ScannerScanner对象之前我们学的基本语法中我们并没有实现程序和人的交互，但是Java给我们提供了这样一个工具类，我们可以获取用户的输入。java.util.Scanner是 Java5 的新特征，我们可以通过 Scanner 类来获取用户的输入。创建Scanner对象的基本语法：Scanner s = new Scanner(System.in);最简单的数据输入有两种，通过Scanner类的next（）和nextLine（）方法获取输入的字符串，在读取数据之前一
2020-05-16 10:58:34
148
原创 Java数据类型详解
Java基本数据类型Java语言是静态类型的（statical typed)，也就是说所有变量和表达式的类型再编译时就已经完全确定。由于是statical typed，导致Java语言也是强类型（Strong typed）的。强类型意味着每个变量都具有一种类型，每个表达式具有一种类型，并且每种类型都是严格定义的，类型限制了变量可以hold哪些值，表达式最终产生什么值。同时限制了这些值可以进行的操作类型以及操作的具体方式。所有的赋值操作，无论是显式的还是在方法调用中通过参数传递，都要进行类型兼容性检查。
2020-05-13 16:22:24
271
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人