tips

Alon2021-07-102026-02-10

前端

vue

vue3+ts实现后端返回文件流,前端下载

// product.ts文件定义接口
export function batchImportTemplate() {
    return axios.get('/product_import_batches/template', {
        responseType: 'blob',
    })
}

//vue文件中实现下载
const downloadTemplate = async () => {
    downloadLoading.value = true
    await batchImportTemplate()
        .then((response) => {
            // 获取文件名（从响应头中获取，或者自己指定）
            const filename = '批量上传模板.xlsx'
            // 创建下载链接
            const blobUrl = window.URL.createObjectURL(response.data)
            const downloadLink = document.createElement('a')
            downloadLink.href = blobUrl
            downloadLink.download = filename
            document.body.appendChild(downloadLink)
            downloadLink.click()
            // 清理
            window.URL.revokeObjectURL(blobUrl)
            document.body.removeChild(downloadLink)
        })
        .catch((error) => {
            console.log(error)
            Message.error('下载Excel失败，请重试')
        })
        .finally(() => {
            downloadLoading.value = false
        })
}

CSS

display

定义元素的显示方式

属性	显示方式
inline	元素被显示为内联元素，与相邻元素在同一行内显示。宽度和高度属性不起作用，margin和padding属性只能设置左右方向的值。常见的内联元素有span、a、img等
block	元素被显示为块级元素，独占一行。宽度和高度属性可以设置，margin和padding属性可以设置四个方向的值。常见的块级元素有div、p、h1等
inline-block	元素被显示为内联块级元素，与相邻元素在同一行内显示。宽度和高度属性可以设置，margin和padding属性可以设置四个方向的值。常见的内联块级元素有button、input等。
none	元素不显示，即隐藏元素。元素在页面上不占据任何空间，也不响应交互事件。
flex	使用弹性布局方式显示元素，可以进行灵活的布局。它使得元素能够根据可用空间自动调整大小和位置。通常与flex-direction、flex-wrap等属性一起使用。
grid	使用网格布局方式显示元素，将元素放置在一个二维的网格中。网格布局提供了更精确的布局控制，可以定义行和列的大小、间距等。通常与grid-template-columns、grid-template-rows等属性一起使用。
table	元素被显示为表格，类似于HTML中的table元素。元素会被解析为一个表格对象，内部可以包含表头（thead）、表体（tbody）和表尾（tfoot）等子元素。
inline-table	元素被显示为内联表格，与相邻元素在同一行内显示。类似于table属性，但是以内联元素的方式显示。
list-item	元素被显示为列表项，类似于HTML中的li元素。适用于无序列表（ul）和有序列表（ol）中的子项。
inherit	继承父元素的display属性值。如果没有父元素，则被视为block。

transform

元素的移动，放大。可以搭配transform-origin属性修改原点

属性	显示方式
translate(x,y)	水平移动 + 垂直移动，x(y)正数表示向右(下)移动，x(y)负数表示像左(上)移动 ,单位可以是px，或者百分比等
translate(x,y,z)	水平移动 + 垂直移动 + 放大
translateX(x)	水平移动
translateY(y)	垂直移动
translateZ(z)	放大
rotate(angle)	2d旋转,单位deg(度数)，turn(圈数，1圈=360度)，rad（弧度）
rotateX(angle)	以X轴为中心旋转
rotateY(angle)	以Y轴为中心旋转
rotateZ(angle)	以Z轴为中心旋转
rotate3d(x,y,z,angle)	以Z轴为中心旋转
scale(s)	整体缩放倍数
scale(sx,sy)	水平缩放 + 垂直缩放
scaleX(sx)	水平缩放
scaleY(sy)	垂直缩放

transform-origin

修改transform的移动原点，单位px或者百分比等

Deprecation 弃用警告修复

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0

升级到vite6会默认使用modern api。就不会有这个报警了。不升级的话修改vite.config.ts配置也可以

vite版本小于5的情况,屏蔽该警告。该版本还不支持modern api

## vite.config.ts
import { defineConfig } from "vite";
 
export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      scss: {
        silenceDeprecations: ["legacy-js-api"]
      }
    }
  },
  // ...
});

vite版本5的情况,切换到modern api

## vite.config.ts
import { defineConfig } from "vite";
 
export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      scss: {
        api: "modern-compiler"
      }
    }
  },
  // ...
});

The CJS build of Vite’s Node API is deprecated.

在package.json中添加配置 "type": "module"

nginx

nginx请求域名转发

server {
    listen 80;
    ## 请求的域名
    server_name aa.com;
    proxy_buffer_size 1024k;
    proxy_buffers 16 1024k;
    proxy_busy_buffers_size 2048k;
    proxy_temp_file_write_size 2048k;
    location / {
      ## 实际请求的域名
      proxy_pass bb.com;
    }
}

ssl证书更换

进腾讯云ssl证书控制台下载nginx证书
进入ssl目录替换证书文件(具体ssl目录看nginx配置的ssl路径)
nginx -s reload

linux

杀掉端口占用进程

netstat -tunlp | grep 端口号 # 查询占用的端口的进程id
kill -9 进程id

服务器时间校准

# 安装ntp
yum install ntp
# 校准时间
ntpdate cn.pool.ntp.org

根据文件大小筛选目录下的文件

# 查看当前文件夹下大于5G的文件夹及文件,5G可以换成5M，5K
du -h --max-depth=1 --threshold=5G

# 查看当前文件夹的空间分布
du -sh *

zip压缩（解压）

操作	动作
压缩目录成zip	`zip -r [压缩文件结果名] [要压缩的目录]`
压缩文件成zip	`zip [压缩文件结果名] [要压缩的文件1] [要压缩的文件2] ...`
解压zip文件到指定目录	`unzip -d [要解压到的目录] [被解压的zip文件]`
解压zip文件到当前目录	`unzip [被解压的zip文件]`

markdown

顺序图
使用 emoji里的Unicode编码,将U+换成&#x并在尾部追加;即可

vim

操作	动作
复制行	yy
当前位置粘贴	p
撤销	u
显示行号	set nu
隐藏行号	set nonu
替换	%s/旧文本/新文本/g

mac

防止brew install 时自动更新其他

在 ~/.zprofile 中添加下面配置

export HOMEBREW_NO_AUTO_UPDATE=1
export HOMEBREW_NO_INSTALL_CLEANUP=1

然后执行 source ~/.zprofile

杀掉端口占用进程

lsof -i :端口 # 查询占用的端口的进程id

kill -9 进程id # 杀死进程

ps -p 进程id -o comm= # 查看进程的程序位置

ps -ef | grep 服务名 # 查看某个服务的端口信息

禁（启）用系统自带的apache启动

## 禁用
sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist
## 启用
sudo launchctl load -w /System/Library/LaunchDaemons/org.apache.httpd.plist

开启允许从任何来源安装程序

sudo spctl --master-disable

安装软件提示”软件后出现 “已损坏，无法打开。您应该将它移到废纸娄””

xattr -cr 软件路径

查找某个文件是否在运行及进程

ps aux | grep 文件名

使用brew安装低版本php

brew tap shivammathur/php
brew install shivammathur/php/php@版本号

JetBrains破解

下面两种方式任选其一即可

破解器破解

mac版下载：点我下载
win版下载：点我下载
linux版下载：点我下载

命令行破解

mac版

# 破解
curl -L -o ckey.run ckey.run && bash ckey.run
# 取消破解
curl -L ckey.run/uninstall -o ckey.run && bash ckey.run

windows版本

# 破解
irm ckey.run|iex
# 取消破解
irm ckey.run/uninstall|iex

linux版

# 破解
wget --no-check-certificate ckey.run -O ckey.run && bash ckey.run
# 取消破解 
wget --no-check-certificate ckey.run/uninstall -O ckey.run && bash ckey.run

homebrew

安装

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

git

git淘宝下载镜像

windows安装git时，国内下载过慢。可以使用下面的淘宝镜像下载。

https://registry.npmmirror.com/binary.html?path=git-for-windows/

已有项目推送到空仓库

cd 项目
//新版git init默认初始化为main，可以使用-b 指定分支
git init [-b 分支名]
git add .
git commit -m "first commit"
git remote add origin 仓库地址
git push -u origin "master"

清除git缓存

gitignore新增然后不生效时，需清除git缓存

git rm -r --cached .

git报错对应处理方法

fatal: could not read Username for xxx: Device not configured

在对应仓库下执行

git config --global credential.helper store

git全局记住和忘记用户名密码

## 记住用户名密码
git config --global credential.helper store
## 忘记用户名密码
git config --system --unset credential.helper

git设置本地忽略某文件的更改

比如env里设置了host是127.0.0.1:8000，而你本地不是这个host，你需要改但是又不能提交上去影响其他开发人员

## 忽略
git update-index --skip-worktree 文件名

## 取消忽略
git update-index --no-skip-worktree 文件名

Mysql

查看锁表语句及杀死语句

-- 查看所有进程
SHOW FULL PROCESSLIST;
-- 找到锁表的进程id 
kill {进程id}

Nano

保存退出

control + x (会提示：Save modified buffer (ANSWERING “No” WILL DESTROY CHANGES) ?)
键入Y然后回车(会提示：File Name to write：xxxx)
文件名不修改的话直接回车就可以保存并退出了