一切福田,不離方寸,從心而覓,感無不通。

Vue3 — PDF展示、添加签名(带笔锋)、导出

文章目录
笔锋签名
方案一
实现要点
实现过程
组件引用
页面元素
添加引用
实现代码
效果展示
缺点
方案二
修改页面元素
替换引用
修改代码
效果展示
完整代码地址

实现功能的时候采用了两个方案,主要是第一个方案最后的实现效果并不太理想,但实现起来比较简单,要求不高时可以使用。


DEMO 会一次性加载并展示所有的
PDF 页面,目的是方便在手机上观看时上下滑动,如果要做成上一页下一页的效果,需要自行实现。

龙生   13 Jan 2024
View Details

smooth-signature​:H5前端canvas实现带笔锋手写签名,支持PC端和移动端使用,无框架限制,Vue、React等均可使用

我们平时纸上写字,细看会发现笔画的粗细是不均匀的,这是写字过程中,笔的按压力度和移动速度不同而形成的。而在电脑手机浏览器上,虽然我们无法获取到触摸的压力,但可以通过画笔移动的速度来实现不均匀的笔画效果,让字体看起来和纸上写字一样有“笔锋”。

龙生   13 Jan 2024
View Details

npm设置国内源(淘宝镜像源),解决npm包下载速度慢的问题

因为众所周知的原因,我们从拉取从官方源拉取npm 依赖,经常容易出现超时,拉取失败的情况。这个时候我们就非常有必要切换使用国内源了,如淘宝源等
npm config set registry https://registry.npm.taobao.org

龙生   13 Jan 2024
View Details

前端开发环境

Node.js 服务端的 JavaScript,所有的包依赖、开发脚手架都是基于node.js的。 下载地址:https://nodejs.org/en/   Python 有些依赖包是python写的。 下载地址:https://www.python.org/downloads/release/python-2717/   Vscode 微软开源轻量级IDE,插件多,受众广泛。 下载地址:https://visualstudio.microsoft.com/zh-hans/downloads/   安装过node.js之后,就可以cmd下查看npm的版本了,vue2要求npm的版本3.0以上。 用以下命令查看npm版本:npm -v 使用淘宝 NPM 镜像安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org   npm设置为淘宝镜像 npm config set registry https://registry.npm.taobao.org   #升级 npm cnpm install npm -g # 升级或安装 cnpm npm install cnpm -g   # 全局安装 vue-cli npm install --global vue-cli   创建Vue项目 vue init webpack {project name}

龙生   13 Jan 2024
View Details

node 版本与 node-sass node-loader 版本的对应关系

node 版本与 node-sass 版本的对应关系: 其一、查看文档的地址: https://www.npmjs.com/package/node-sass 其二、对应关系的表格: 对应版本 node16 “node-sass”: “6.0.1” “sass-loader”: “10.2.0” node: v14.19.0; node-sass: ^4.14.1; sass-loader: ^7.3.1; from:https://blog.csdn.net/weixin_38345306/article/details/132311818

龙生   12 Jan 2024
View Details

Spring Boot 3.0 (二十六):Docker Compose + Spring Boot + Nginx + Mysql 实践

我知道大家这段时间看了我写关于 docker 相关的几篇文章,不疼不痒的,仍然没有感受 docker 的便利,是的,我也是这样认为的,I know your feeling 。

前期了解概念什么的确实比较无聊,请不要着急精彩马上开始,当大家对 docker 相关概念有所了解之后,后面我会结合 Spring Boot 给大家来一系列的小例子,会让大家感受到使用 Docker 就是这么爽!

今天给大家演出的导演是 Docker 家族的 docker-compose ,主演是 Spring Boot、Nginx、Mysql 三位又红又紫的大碗,名导名演在一起的时候往往是准备搞事情,接下来又一场经典大片值得大家期待。

龙生   11 Jan 2024
View Details

Spring Boot 3.0 (二十五):使用 Docker 部署 Spring Boot

Docker 技术发展为微服务落地提供了更加便利的环境,使用 Docker 部署 Spring Boot 其实非常简单,这篇文章我们就来简单学习下。

首先构建一个简单的 Spring Boot 项目,然后给项目添加 Docker 支持,最后对项目进行部署。

龙生   11 Jan 2024
View Details

Spring Boot 3.0 (二十二):如何优雅的使用 MyBatis 之 MyBatis-Plus

Spring Boot3.0 官方暂时还不支持,等等再看吧。

MyBatis-Plus 是 MyBatis 的第三方使用插件。

前两天在公众号中发了《Spring Boot(六):如何优雅的使用 Mybatis》,有朋友留言说能不能写一下整合 MyBatis-Plus 的教程。

在这之前我对 MyBatis-Plus 其实了解不是很多,一般情况下也不太愿意使用第三方的组件。找时间了解了一下 MyBatis-Plus 发现还是国人出品的开源项目,并且在 Github 上有 5000 多个关注,说明在国内使用的用户已经不少。

这篇文章就给大家介绍一下,如何在 Spring Boot 中整合 MyBatis-Plus 使用 MyBatis。

MyBatis-Plus 介绍
MyBatis-Plus(简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发、提高效率而生。

龙生   11 Jan 2024
View Details

Spring Boot 3.0 (二十一):Spring Boot 中的响应式编程和 WebFlux 入门

Spring 5.0 中发布了重量级组件 Webflux,拉起了响应式编程的规模使用序幕。本篇给大家介绍如何在 Spring Boot 中使用 Webflux 。

为了方便大家理解,我们先来了解几个概念。

响应式编程
在计算机中,响应式编程或反应式编程(英语:Reactive programming)是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流,而相关的计算模型会自动将变化的值通过数据流进行传播。

例如,在命令式编程环境中,a=b+c 表示将表达式的结果赋给 a,而之后改变 b 或 c 的值不会影响 a 。但在响应式编程中,a 的值会随着 b 或 c 的更新而更新。

龙生   11 Jan 2024
View Details

Spring Boot 3.0 (二十):Spring Boot 集成 Memcached

Memcached 介绍
Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载。它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态、数据库驱动网站的速度。Memcached基于一个存储键/值对的hashmap。其守护进程(daemon )是用C写的,但是客户端可以用任何语言来编写,并通过memcached协议与守护进程通信。

因为 Spring Boot 没有针对 Memcached 提供对应的组建包,因此需要我们自己来集成。官方推出的 Java 客户端 Spymemcached 是一个比较好的选择之一。

Spymemcached 介绍

Spymemcached 最早由 Dustin Sallings 开发,Dustin 后来和别人一起创办了 Couchbase (原NorthScale),职位为首席架构师。2014 加入 Google。

Spymemcached 是一个采用 Java 开发的异步、单线程的 Memcached 客户端, 使用 NIO 实现。Spymemcached 是 Memcached 的一个流行的 Java client 库,性能表现出色,广泛应用于 Java + Memcached 项目中。

龙生   11 Jan 2024
View Details