自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(34)
  • 收藏
  • 关注

原创 nginx 二级目录部署vue项目

getEnvConfig 方法是封装的获取环境变量的方法,因为这个时候还无法通过。通过.env环境变量来设置。

2024-01-09 20:40:03 531

原创 vue多tab页面全部关闭后自动退出登录

业务场景:主项目是用vue写的单页面应用,但是有多开页面的需求,现在需要在用户关闭了所有的浏览器标签页面后,自动退出登录。思路:因为是不同的tab页面,我只能用localStorage来通信,新打开一个标签页(页面初次装载时),我就往数组中加一个页面,在(页面关闭或刷新等)页面卸载时移除它。这样就只需要在页面装载时(load事件)判断当前是不是刷新页面就可以了,只要是其他来源就直接登出。

2024-01-06 14:42:14 783

原创 vuepress2 打包后刷新页面侧边栏丢失问题

我看了控制台,侧边栏不出现的原因,应该是样式那块处理坏掉了,因为我设置了首页,首页的的class是home,普通页面的的class是page。刷新后普通页面的class还是home,这应该就是侧边栏不显示的原因。同时这个home页面的部分内容还会被留下来,然后新页面的内容也开始加载了一部分。然后控制台就报错了。控制台报错图放最下面了。我把vuepress2这个文档都克隆到本地看过了,看着配置都差不多,就是不行。折腾我大半天,最后是nodejs版本的问题,我都要放弃了,还好我又去瞅了眼文档。

2024-01-03 15:20:37 677

原创 vue打包后vue-router无内容

在使用了createWebHistory创建路由时,发现打包后页面空白,也无报错信息。

2023-11-17 09:32:53 301

原创 nestjs swagger 上传文件,中文名称会乱码的问题

乱码的原因:当前字符集为ISO-8859-1,无法识别中文,所以解决办法就是把他转回来。

2023-01-03 16:45:31 849 2

原创 docx 导出word,表格列数不同的效果

docxjs 导出

2022-12-16 12:27:03 219

原创 linux 离线安装软件

看到一个linux比较简单的离线安装软件的方法

2022-08-26 16:50:48 1230

原创 element plus table 滚动监听 触底

参考了网上的其他的element ui 的滚动触底的方法,但是无法获取bodyWrapper的scrollTop,这里我就直接去找了那个提供实际滚动的容器.el-scrollbar__wrap了。

2022-06-21 11:55:06 3176 3

原创 xlsx-style坑记录

xlsx-style 在工作中遇到的问题

2022-05-19 17:47:40 4950 11

原创 tailwindcss + element plus 自动引入时,el-button样式被覆盖的问题

问题描述在安装了tailwindcss + element plus 时,会发现el-button的样式被tailwindcss的样式给覆盖了,(目前也只遇到button被覆盖的情况)。问题分析是样式加载顺序的问题解决办法https://github.com/element-plus/element-plus/issues/5693全部引入时可以通过调整引入element plus的样式和tailwindcss的样式的顺序先引入tailwindcss的样式,然后在引入element plus

2022-04-01 22:36:31 6091 2

原创 vue tsx 动态渲染无限级菜单

当前环境和插件vue3 + ts + element plus想法根据是否存在children(下级菜单)来决定是创建el-ment-item(单条) 还是 el-sub-item(目录)如果存在children(下级菜单),即渲染的是el-sub-item(目录),则需要再其内部递归创建,继续重复1和2步骤有疑问的地方icon的动态渲染标签: 关于icon的引入,我还不清楚怎么动态渲染标签并创建相应的节点内容,如果在用vue中导出的 h 来创建的话,只有一个标签名,并不实际渲染内容。

2022-03-27 22:18:52 1901

原创 js 递归树结构,根据子节点获取父节点

遍历数组,根据子节点查询父节点中的各个层需求目前只知道【节点6】,想要知道【节点6】在哪棵树上预期结果:返回一个层级数组[2, 6]实际情况:找到结果,并正确打断跳出源码// 数据源const dataSource = [ { id: 1, label: 'Level one 1', children: [ { id: 4, label: 'Level

2022-03-25 22:41:41 7821 3

原创 学习搭建后台管理系统模板之layout布局

本项目学习对象是优秀的后台系统模板vben-admin,期待通过学习解读该项目,熟悉前端项目工程化。看了vben-admin的layout布局,感觉好麻烦,我尝试往简单了做,我觉得已经涵盖常见布局类型了。做法是:控制顶栏和侧边栏的【是否显示】【是否固定】,除此之外还需记录【侧边栏宽度】【顶栏高度】,因为布局主要通过position来控制位置。ps:一开始确实不知道怎么下手,总想着从更广的角度去考虑,浪费了不少时间,还折腾不出啥,唉!人就是想太多,没必要,干就完了,只要把它拆开,其实也没啥东西,先从实.

2022-03-22 21:48:26 1188

原创 学习搭建后台管理系统模板之vuex和vuerouter

本项目学习对象是优秀的后台系统模板vben-admin,期待通过学习解读该项目,熟悉前端项目工程化。内容VUEX 状态管理工具Vue Router 路由管理1. VUEX 状态管理工具1.1 安装npm install vuex@next --save1.2 自动导入modules文件夹中写的modulesrc/store/index.tsimport type { App } from 'vue'import { createStore } from 'vuex'//.

2022-03-20 17:14:55 1332

原创 学习搭建后台管理系统模板之创建项目

本项目学习对象是优秀的后台系统模板vben-admin,期待通过学习解读该项目,熟悉前端项目工程化。内容创建项目探索vite配置eslint+preitter自动代码风格化1.创建项目该项目由vite搭建,根据vite官网-开始-搭建第一个 Vite 项目栏目的说明创建一个基础的vue3+ts的初始项目。2. 探索vite配置项浏览vite的配置项,初始设置需要配置的内容将某些配置内容多的单独提出来,目前只提出了plugin插件部分安装了dayjs插件,目的获取时间格式化,这个.

2022-03-19 23:24:09 1166

原创 tp6 think-swoole4.0 websocket 使用的坑

我使用时的环境Centos 7.9PHP 7.4Swoole 4.8.5thinkPHP6 6.0.8think-swoole 4.0问题描述:socket.io与服务器连接成功,但是服务器没有根据客户端发的请求去执行,没有任何的返回,根本就没执行到listen中写的行为网上的例子找了不少,其实网上也没几个,都试了一下,代码基本都是大同小异,但是我试的时候就是跑不起来,只要在config/swoole.php配置文件中开启了websocket,连接是成功的,但是就是没有返回,直到看到了这篇文

2021-12-29 14:29:20 3920

原创 linux gitee 代码自动部署-没有步骤

自动部署代码的原理:利用gitee的webhooks钩子方法,在push代码的时候,通知服务器去拉取代码我的环境是LAMPwww用户去管理网站目录,根据www用户创建的ssh公钥,代码拉取的方式也是以ssh的方式获取的,不用输密码。后端项目部署:我的后端是php项目,因为php代码可以直接运行,所以直接使用webhooks去访问服务器的php文件,让php执行shell脚本去拉取代码就可以了ps: 别人写的文章挺多的,也没啥东西,操作也比较简单。前端项目部署:因为前端项目是vue或react这

2021-12-22 23:37:52 660

原创 el-table删除row时,只能删除最后一个时,通过添加key属性解决

在使用element ui 时,使用el-table时,在template中添加了自定义组件后,发现删除时,只能删除只能删除最后一条记录了,去掉就正常。。。什么强制更新 forceUpdate,重新赋值都不好使,最后是通过增加一个key属性解决的,这个key不能使用scope.$index,得使用其它的唯一值。<el-table-column prop="transNum" label="数量" min-width="30%" align="center"> <template s

2021-11-24 11:28:28 1089 1

原创 artqrcodejs的学习记录,尝试简单实现了gif二维码、图片作为前景色或背景色、渐变色、中心logo的功能

代码的原型是这位老哥的,他的github地址-ArtQRCode配合另一位老哥对二维码的讲解–深度探索二维码及其应用,让我对二维码的理解更深了,我大部分代码都加了注释,不过关于纠错算法的地方,我肝不动了,看不下去了。初衷是想用在vue项目中,github地址效果普通模式原本有的艺术二维码(以图片作为填充元素)附加的内容:我主要是做了些canvas的操作图片作为前景色填充图片作为背景色填充多彩模式-线性渐变多彩模式-径向渐变多彩模式-随机块gif–(用到了libgif.

2021-11-14 23:50:43 904 1

原创 ts class 拖拽实现,支持pc和mobile

看了网上的不少关于拖拽的文章,自己尝试着用es6 的class写了一个拖拽方法,记录一下配置项配置项描述默认值autoAdsord是否开启自动吸边trueadsordConfig吸边的相关配置,接收一个对象, 可以配置等待时间和持续时间{waitTime: 2,durationTime: 1.3}dragShadow是否开启拖影truetriggerTime启动拖拽的触发时间,接收一个number类型,单位是秒2responseTime拖拽

2021-09-29 15:16:51 428

原创 mousedown mousemove mouseup 与 click事件冲突的解决办法

使用css样式pointer-events解决需要用到mousedown mousemove mouseup的时候一般都是在拖拽事件中,但是click的触发条件就是mousedown+mouseup,而且它们的执行顺序也是mousedown > mousemove > mouseup > click先说一下我的场景:我在做一个拖拽方法,但是我不希望在拖拽的时候触发容器内部的click事件。理一下思路要实现拖拽方法需要 mousedown + mousemove + mouseu

2021-09-27 16:40:55 7040 1

原创 flex布局实现 内容区域高度自适应

用flex搭建一个如下页面布局(1)在主容器container中创建header、main、footer等容器(div),display:flex开启flex布局,设置主容器的大小是很有必要的,flex布局将根据容器的大小来分配内部子元素的大小,所以配置了height: 100vh;width: 100%;(2)通过flex-direction: column改变容器的排列方向为竖向(3)主要通过flex:1来让flex布局元素自适应,当flex布局范围内的其他容器已经分配了大小时,则设置了此属性的

2021-08-27 15:38:21 19336 1

原创 获取某月的总天数

// Date(year, month, day, h, m, s)// 当day为0时,则返回month的总天数console.log(new Date(2020, 2, 0).getDate()) // 29

2021-08-19 09:37:26 1123

原创 js 正则 数值格式化 小数、符号

格式化数字// 格式化数字// @params value 要格式化的数字// number 小数点后几位// return stringexport function number(value, number) { let reg1 = /[^\-?\d.]/g // 限制数字 let reg2 = '' eval('reg2 = /\\D*(\\d*)(\\.?)(\\d{0,' + number + '})\\d*/') let result = value.

2021-08-11 09:50:13 357

原创 thinkphp6搭建后端api接口

1、下载tp6我使用的是集成环境phpstuday,安装了composer,通过composer安装tp6,thinkphp官网已经不再支持直接下载。composer create-project topthink/think tp6你也可以直接按照tp6看云文档的步骤来安装tp6在下载好的tp6目录通过cmd命令窗口输入php think run在浏览器中输入127.0.0.1:8000,访问到如下页面就安装成功了2、打开错误调试在开始之间,我们先打开tp6的错误调试1.找到con

2021-06-11 01:08:30 7697 5

原创 解决flex布局最后一行元素对齐问题

在使用flex布局时,为了让元素自动铺满宽度,我们会用justify-content: space-between;,但是当最后一行元素个数不足时,会出现下面的情况。看了网上的方法都是在后面补上差的个数,所以我这里的解决方法也是补齐个数。考虑到有一种情况,元素个数可能不是固定的,我们就无法知道具体相差的个数来填充,比如列表是后端返回的数据,所以这里通过循环动态添加相差的个数。我这里就简单来了,我想要呈现的是1行4列,总个数是9个,所以我就加上以下内容,list.length 是页面要显示的总记录数

2021-06-02 10:10:46 3405 4

原创 thinkphp6 路由学习

记录一下thinkphp6的路由学习更多细节方法请看thinkphp6看云文档-路由注册路由的方式在项目目录下的route目录下的app.php页面中定义单路由Route::rule(‘路由表达式’, ‘路由地址’, ‘请求类型’)Route::快捷方法名(‘路由表达式’, ‘路由地址’);Route::rule('blog/:id','blog/read', 'GET');orRoute::get('blog/:id','blog/read');在浏览器中访问(隐藏入口文件’

2021-05-12 14:04:41 810

原创 vue3.0中使用three.js OrbitControls

环境"vite": "^2.1.5","vue": "^3.0.5","three": "^0.128.0",安装threenpm i three -S在需要的页面中引入用的例子是three中文官网的例子,目前我还只看到1.3节在setup中使用<template> <div> <div ref="container2" id="container2"></div> </div></template&g

2021-05-07 15:29:44 3216 3

原创 vite创建vue3+ts+ant design vue项目

1.通过vite命令构建vue3+ts项目npm init @vitejs/apporyarn create @vitejs/app根据步骤选择项目名称框架(vue,react…)js或tsvite官网2.安装ant design vue安装2.x版本 npm i --save ant-design-vue@next ant design vue 官网按需加载vite按需加载需要引入插件npm i vite-plugin-style-import -S 在vi

2021-04-27 16:34:37 3274 1

原创 PHPstudy 开启redis在tp5中应用

1. 安装redis2. 配置redis3. 给php版本redis拓展4. 修改tp5的application/config.php文件,将cache的内容设置成如下'cache' => [ // 选择模式 'type' => 'complex', // 默认(文件缓存) 'default'=>[ // 文件缓存 'ty

2020-08-24 23:03:59 405

原创 前端利用 node.js + mock 简单模拟数据接口服务器

前端简单构建一个模拟数据服务器,一个json文件对应一个数据请求,需要增加接口就只需要增加新的json文件,在json文件中可以按照mock的语法写(注:json文件不允许单引号)。目录结构1. 新建MockServer文件夹2. 在文件夹下 npm init一路回车就是了3. 安装依赖 // express web框架 npm i express // mock模拟数据 npm i mockjs // 全局安装自动重启工具,监听文件变化 cnpm i nodemon -g .

2020-07-19 12:30:26 1932 3

原创 TP5隐藏入口文件(public/index.php),phpstudy环境中apache服务器下

参考文章.htaccess技巧: URL重写(Rewrite)与重定向(Redirect)TP5.1隐藏public/index.php第二种方式RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L] 是什么意思?效果图未隐藏入库文件时:隐藏入口文件后:具体步骤在TP5根目录中添加.htaccess文件就可以了,文件内容如下<IfModul...

2019-12-18 18:30:25 1436

原创 JAVA简单实现坦克对战(只有坦克和子弹)

超级简单JAVA实现坦克大战游戏游戏主体package game;import java.awt.BorderLayout;import java.awt.Color;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.awt.event.KeyEvent;impor...

2019-12-11 17:57:00 757

原创 JAVA简单实现扫雷小游戏

在这里插入代码片@TOCJAVA简单实现扫雷小游戏这两天学校外面来人教java基础,学习一下,自己试着做了一个扫雷小游戏,记录一下子学习过程。(我觉得自己不是很懂类和对象),敲出来的代码结构混乱,希望路过的大虾不吝啬的留下些代码改进的意见或是编写代码要注意的地方,感谢U•ェ•*U效果图贴代码package demo;import javax.swing.JFrame;impor...

2019-12-05 16:03:21 3553 1

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除