实现网站自动监听更新
实现网站自动监听更新新建 auto-update.js
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657let lastSrcs; // 上一次获取到的script地址const scriptReg = /\<script.*src=["'](?<src>[^"']+)/gm;/** * 获取最新页面中的script链接 */async function extractNewScripts() { const html = await fetch('/?_timestamp=' + Date.now()).then((resp) => resp.text() ); scriptReg.lastIndex = 0; let result = []; let match; while (( ...
Java进行公众号开发的常见使用场景及解决方案
文章简介本文总结了本人在开发过程中遇到的有关于微信开发的诸多常见功能,这些问题在网上找都是零散的回答,所以再此总结一下,方便后续开发。如果有错误之处,还望批评指出,下面我们开始吧。
主要包括以下教程:
创建代码生成器并集成 Swagger
微信接口配置,响应微信发送的Token验证
获取Token时自动更新过期时间并更新Token
Java处理微信普通消息和事件消息并相应
Java发送模板消息
点击模板消息携带参数跳转详情
也可以查看项目源码地址:微信模板消息的发送和跳转: 使用Java发送微信模板消息,并点击模板消息跳转到详情 (gitee.com)
前期准备准备数据库新建token表
字段
类型
注释
id
int
主键
token
varchar
tokne
expires
varchar
过期时间
建表语句
1234567891011121314151617181920212223242526272829303132333435363738/* Navicat Premium Data Transfer Source Server : ...
vue3项目快速开发模板
简介本项目采用 vue3 + webpack 的方式来开发,已经引入了常用功能,不需要再去配置路由、请求、pinia 等,上手直接开发页面即可,真正做到开箱即用
你可以直接拉取我的仓库来直接使用,也可以按照本文教程自己操作
仓库地址:https://gitee.com/szxio/vue3-template。
如果对你有用的话,点赞、收藏、关注。❥(^_-)
技术栈
vue3
webpack
pinia
vue-router4
element-plus
axios
i18n
sass
启动项目安装1npm install
运行1npm run serve
打包1npm run build
Pinia使用安装首先安装依赖,本项目已经安装好,下面只是教程
1npm install pinia
配置新建 src/store/index.js,内容如下
123import {createPinia} from 'pinia'export default createPinia()
在 main.js 中引入
12345678import ...
空值合并运算符(??) 和逻辑或运算符(||) 对比
空值合并运算符(??)是一个逻辑运算符,当左侧的操作数据为 null 或 undefined 时,返回其右侧数据,否则返回左侧操作数
与逻辑或运算符(||)不同,逻辑或运算符会在左侧数据为假值时返回右侧数据,也就是说,如果使用逻辑或运算符 ||,来为某些变量赋默认值时,会先将左侧的数据进行布尔运算,如果运算结果为 false则会返回右侧数据,这时如果左侧数据是 0 或者 '' 时,也会返回右侧数据
尝试一下12345let a = 0 ?? 2console.log(a) //=> 0let b = 0 || 2console.log(b) //=> 2
谷粒学院项目笔记
项目介绍《谷粒学院》是一个在线教育的网站
技术栈后端
1SpringBoot2
数据库
1MySQL8+
前端
1Vue2 + ElementUi
搭建项目结构创建父工程新建一个父工程 guli_parent
修改在 guli_parent 结构下额 pom.xml 文件
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551 ...
pnpm - 速度快、节省磁盘空间的软件包管理器
官网地址https://www.pnpm.cn/
功能介绍当使用 npm 时,如果你有 100 个项目,并且所有项目都有一个相同的依赖包,那么, 你在硬盘上就需要保存 100 份该相同依赖包的副本。然而,如果是使用pnpm,依赖包将被 存放在一个统一的位置,因此:
如果你对同一依赖包需要使用不同的版本,则仅有 版本之间不同的文件会被存储起来。例如,如果某个依赖包包含 100 个文件,其发布了一个新版本,并且新版本中只有一个文件有修改,则 pnpm update 只需要添加一个 新文件到存储中,而不会因为一个文件的修改而保存依赖包的所有文件。
所有文件都保存在硬盘上的统一的位置。当安装软件包时, 其包含的所有文件都会硬链接自此位置,而不会占用额外的硬盘空间。这让你可以在项目之间方便地共享相同版本的 依赖包。
最终结果就是以项目和依赖包的比例来看,你节省了大量的硬盘空间, 并且安装速度也大大提高了!
npm安装pnpm1npm install -g pnpm
使用pnpm安装依赖1pnpm install
安装过程中的截图,安装速度非常快
目录结构如下
然后删掉 node_mo ...
nvm管理node.js版本
简介nvm可以管理本地的各个node版本,用来解决因node版本过低或者过高而导致的各种问题
下载和安装各个版本下载地址,推荐下载 1.1.9 及以上版本。
https://github.com/coreybutler/nvm-windows/tags
点开页面后选择 download
点击后在页面底部选择 nvm-setup.zip
解压后双击 nvm-setup.exe 文件开始安装
这里选择 nvm 要安装的目录
这里选择 node 安装的目录
点击 install 开始安装,安装完成后打开 cmd 验证是否安装成功
出现版本号表示安装成功
常用命令
nvm arch:显示 node 是运行在32位还是64位
nvm install <version> [arch] :安装 node, version 是特定版本也可以是最新稳定版本 latest。可选参数 arch指定安装32位还是64位版本,默认是系统位数。可以添加 –insecure 绕过远程服务器的 SSL
nvm list [available] :显示已安装的列表。可选参数 available, ...
使用Java将Word文档转PDF
使用Java将Word文档转PDF首先新建 Maven 工程,然后再 src 同级下新建 lib 文件夹
下载 aspose-words-15.8.0-jdk16.jar 包,下载地址如下
链接:https://pan.baidu.com/s/1tguBmQK3XIypH5KAjQyG-A?pwd=5ar5 提取码:5ar5
下载完成后,将这个包放在 lib 文件夹中,然后右键选择 Add as Library
接着在 resources 文件夹中 新建 license.xml 文件,内容如下
12345678910111213141516<License> <Data> <Products> <Product>Aspose.Total for Java</Product> <Product>Aspose.Words for Java</Product> </Products> <Editi ...
ElementUI实现跨页多选表格
使用 ElementUI 实现一个可以多选的表格,并且分页时不会丢失已选中的数据。并且支持根据保存的数据自动勾选。
主要用到 table 组件中的 reserve-selection 属性
具体代码如下
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106<template> <div> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" ...
IntersectionObserver 对象观察元素是否可见
123456789101112131415let that = this// 设置要监听的元素let dom = document.querySelector(".load-text")// 创建监听实例let observe = new IntersectionObserver(function (muattion) {// 判断元素是否可见 let status = muattion[0].isIntersecting if (status && that.count < 50) { setTimeout(() => { that.count += 10 }, 500) }})// 开始观察observe.observe(dom)
上面的代码首先观察类名是 load-text 的元素,如果该元素可以被看到,则 status 就是true,我们可以利用此特性来做数据懒加载或者触底函数。效果和监听scroll ...