前端 on 特严赤傲

博客终于成形了

Fri, 23 Oct 2026 22:32:18 +0800

这个博客很早之前就建好了，最开始使用的是vuepress，后来改成了vitepress，选这两个程序是因为对vue比较熟，但是界面的样式真的一言难尽，难看到没眼看，但也无暇顾及太多，由于在其他博客平台开了账号，也就把它当作记录写代码中遇到的问题的平台。

app端渐变背景

Thu, 03 Sep 2026 21:48:35 +0800

uniappx 开发app端页面背景渐变颜色

1
2


 /* 对应从左到右的水平渐变 (90deg) */
 background-image: linear-gradient(to right, #E6F9E6, #E0F0FF);

Web 上用于获取用户设备当前位置的核心方法

1
2
3
4
5
6


// 获取用户设备当前位置
 navigator.geolocation.getCurrentPosition((position) => {
 const latitude = position.coords.latitude;
 const longitude = position.coords.longitude;
 console.log(`纬度: ${latitude}, 经度: ${longitude}`);
 });

vben admin pro 框架的 ApiComponent Api组件包装器select使用示例

Mon, 02 Feb 2026 22:27:31 +0800

最近开发的项目中，有一个功能是 form 表单里 select 组件下拉选项是通过接口返回的数据，我使用了ApiComponent 组件，实现这个功能有两种方法，第一种是通过 slots 插入组件的方式实现（参考：vben admin pro 框架的BasicTable之使用slots 插入组件），第二种就是下面这个。废话不说，直接上代码。

vben admin pro 框架的BasicTable之使用slots 插入组件

Mon, 02 Feb 2026 22:27:31 +0800

需求：在BasicTable 列表中，插入一行Switch组件改变状态的列 1，首先在主组件的 script 标签中引入 switch 组件

GitHub 操作命令完整指南

Sun, 17 Aug 2025 09:08:29 +0800

基础配置

用户配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# 设置全局用户名
git config --global user.name "Your Name"

# 设置全局邮箱
git config --global user.email "your.email@example.com"

# 查看当前配置
git config --list

# 设置默认编辑器（如VSCode）
git config --global core.editor "code --wait"

仓库操作

初始化与克隆

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# 初始化本地仓库
git init

# 克隆远程仓库
git clone https://github.com/username/repository.git

# 克隆指定分支
git clone -b branch-name https://github.com/username/repository.git

# 添加远程仓库
git remote add origin https://github.com/username/repository.git

# 查看远程仓库信息
git remote -v

提交更改

基础操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


# 查看当前状态
git status

# 添加文件到暂存区
git add filename.txt
git add . # 添加所有更改
git add *.js # 添加所有js文件

# 提交更改
git commit -m "描述信息"

# 修改上次提交
git commit --amend -m "新的提交信息"

查看提交历史

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


# 简洁查看提交历史
git log --oneline

# 图形化查看分支历史
git log --graph --oneline --all

# 查看指定文件的修改历史
git log -p filename

# 查看包含统计信息的提交历史
git log --stat

# 按作者查看提交
git log --author="username"

# 按时间范围查看
git log --since="2023-01-01" --until="2023-12-31"

# 查看某次提交的详情
git show commit-hash

分支管理

基础分支操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


# 查看分支
git branch # 本地分支
git branch -a # 所有分支(包括远程)
git branch -v # 查看分支最后提交

# 创建分支
git branch new-feature

# 切换分支
git checkout main
git checkout -b hotfix # 创建并切换分支

# 合并分支
git merge feature-branch

# 删除分支
git branch -d old-branch # 安全删除(已合并)
git branch -D old-branch # 强制删除(未合并)

远程分支操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# 推送本地分支到远程
git push origin branch-name

# 跟踪远程分支
git checkout --track origin/branch-name

# 删除远程分支
git push origin --delete branch-name

# 获取远程分支列表
git ls-remote --heads origin

版本回滚与撤销

撤销工作区更改

1
2
3
4
5
6
7
8


# 撤销单个文件的修改
git checkout -- filename

# 撤销所有未暂存的修改
git checkout -- .

# 撤销所有修改(包括暂存的)
git reset --hard

回滚到特定版本

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


# 查看可回滚的提交历史(获取commit hash)
git log --oneline

# 软回滚(保留更改在工作区)
git reset --soft commit-hash

# 混合回滚(默认，保留更改在暂存区)
git reset commit-hash

# 硬回滚(彻底删除更改)
git reset --hard commit-hash

# 回滚到远程仓库状态
git reset --hard origin/main

# 回滚特定文件到某版本
git checkout commit-hash -- filename

# 创建回滚提交(适用于已推送的提交)
git revert commit-hash

恢复删除的分支

1
2
3
4
5


# 查找被删除分支的最后提交
git reflog

# 从reflog中恢复分支
git checkout -b recovered-branch commit-hash

远程同步

推送与拉取

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# 推送本地分支到远程
git push origin branch-name

# 强制推送(谨慎使用)
git push -f origin branch-name

# 拉取远程更新
git pull origin branch-name

# 获取远程更新但不合并
git fetch origin

# 获取所有远程更新
git fetch --all

高级操作

储藏更改

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


# 储藏当前工作区
git stash

# 查看储藏列表
git stash list

# 恢复最近储藏
git stash pop

# 恢复指定储藏
git stash apply stash@{n}

# 删除储藏
git stash drop stash@{n}

标签管理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


# 创建标签
git tag v1.0.0

# 创建带注释的标签
git tag -a v1.0.0 -m "Release version 1.0.0"

# 查看标签
git tag

# 推送标签到远程
git push origin v1.0.0
git push origin --tags # 推送所有标签

# 删除标签
git tag -d v1.0.0
git push origin --delete v1.0.0

子模块

1
2
3
4
5
6
7
8


# 添加子模块
git submodule add https://github.com/username/repo.git

# 克隆包含子模块的仓库
git clone --recurse-submodules https://github.com/username/repo.git

# 更新子模块
git submodule update --init --recursive

GitHub CLI (gh) 命令

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


# 登录GitHub账号
gh auth login

# 查看当前登录状态
gh auth status

# 创建PR
gh pr create

# 查看PR列表
gh pr list

# 合并PR
gh pr merge

# 克隆仓库
gh repo clone username/repository

# 创建新仓库
gh repo create

实用技巧

比较差异

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# 比较工作区和暂存区
git diff

# 比较暂存区和最新提交
git diff --cached

# 比较两个分支
git diff branch1..branch2

# 比较特定文件在两个分支的差异
git diff branch1..branch2 -- filename

重写历史

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


# 交互式rebase(最近3次提交)
git rebase -i HEAD~3

# 修改提交作者信息
git commit --amend --reset-author

# 批量修改历史提交信息
git filter-branch -f --env-filter '
 OLD_EMAIL="old@email.com"
 NEW_NAME="New Name"
 NEW_EMAIL="new@email.com"
 if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ]; then
 export GIT_COMMITTER_NAME="$NEW_NAME"
 export GIT_COMMITTER_EMAIL="$NEW_EMAIL"
 fi
 if [ "$GIT_AUTHOR_EMAIL" = "$OLD_EMAIL" ]; then
 export GIT_AUTHOR_NAME="$NEW_NAME"
 export GIT_AUTHOR_EMAIL="$NEW_EMAIL"
 fi
' --tag-name-filter cat -- --all

清理仓库

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# 查看大文件
git rev-list --objects --all | grep "$(git verify-pack -v .git/objects/pack/*.idx | sort -k 3 -n | tail -5 | awk '{print$1}')"

# 清理历史大文件
git filter-branch --force --index-filter 'git rm --cached --ignore-unmatch path/to/large-file' --prune-empty --tag-name-filter cat -- --all

# 清理本地无效远程分支引用
git remote prune origin

# 垃圾回收
git gc --aggressive --prune=now

使用强制操作(如 --force push 或 --hard reset)时要格外小心，特别是在团队协作的项目中。

鸿蒙开发app资源库

Sun, 03 Aug 2025 08:30:18 +0800

鸿蒙图标库

鸿蒙第三方插件库

鸿蒙图标库

关于CupertinoNavigationBar图标对齐问题

Thu, 24 Jul 2025 20:27:03 +0800

开发一个自定义顶部栏，发现右侧图标与标题不在同一水平线上：

可能的原因

CupertinoNavigationBar默认布局：CupertinoNavigationBar的标题(middle)和尾部(trailing)控件默认可能有轻微的高度差异
CupertinoButton的默认内边距：您使用的CupertinoButton可能有默认的内边距影响对齐
图标本身的设计：CupertinoIcons中的图标可能有内置的视觉平衡空间

uniappx开发app，获取验证码倒计时功能

Tue, 08 Jul 2025 22:07:07 +0800

使用uniappx+uts+firstui开发app，实现一个获取手机验证码功能，记录一下代码：

uniappx开发app修改密码验证功能

Tue, 08 Jul 2025 22:07:07 +0800

实时验证：
- 新密码输入时立即验证格式
- 确认密码输入时验证格式和一致性
- 所有输入变化时更新按钮状态
错误提示：
- 添加了错误信息区域，实时显示验证结果
- 提供明确的格式错误和密码不一致提示
按钮状态逻辑优化：
- 要求所有字段非空
- 新密码必须符合格式
- 确认密码必须与新密码匹配
密码规则增强：
- 使用更严格的正则确保包含两类及以上字符
- 明确排除空格等无效字符

Flutter中使用adaptive_dialog的方法

Thu, 26 Jun 2025 22:02:15 +0800

adaptive_dialog是一个强大的Flutter插件，它能够根据运行平台(iOS或Android)自动适配对话框样式，提供一致的用户体验。本教程将详细介绍如何使用这个插件。

React 父子组件传值

Tue, 15 Apr 2025 16:41:16 +0800

在 React 中，父子组件传值方式：

1. 父组件向子组件传值（Props）

这是最基础的传值方式，通过 props 将数据从父组件传递给子组件。

微信小程序获取用户位置

Wed, 12 Mar 2025 20:57:54 +0800

在微信小程序中，从 2023 年 7 月开始，部分敏感接口（如 wx.getLocation）需要在 app.json 或 ext.json 中声明 requiredPrivateInfos 字段，否则调用时会失败并返回以下错误：

微信小程序云开发获取openid

Tue, 04 Mar 2025 21:57:45 +0800

在微信小程序云开发提供了便捷的数据库和云函数功能，可以轻松存储和获取用户信息。以下是代码示例：

react 封装一个类函数使用方法

Tue, 21 Jan 2025 14:25:11 +0800

1.编写ProductCount函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


class ProductCount {
 public static getProductCount(count: number): string {
 if (count < 10) {
 return `当前数量: 0${count}`;
 }
 return `当前数量: ${count}`;
 }
}

export default ProductCount;

2.在代码文件中导入 `ProductCount` 类。

1

import ProductCount from './ProductCount'; // 根据实际路径调整

3. 在 React 组件中使用**

在 React 项目中的组件中调用它并显示结果。

DataTable开发导出Excel文档带背景颜色

Sun, 20 Oct 2024 11:42:58 +0800

dataTable 导出Excel功能，要求在Excel文件里一行一行有背景颜色，整理了以下三种情况：

flex布局里的属性

Sun, 20 Oct 2024 11:42:58 +0800

父级属性

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


flex-direction : 设置主轴的方向（row,row-reverse,column,column-reverse）
	row：X轴从左至右（默认）【1,2,3 】
	row-reverse：X轴从右至左【 3,2,1】
	column：Y轴从上之下
	column-reverse：Y轴从下至上

justify-content : 设置主轴上的子元素排列方式
	flex-start :默认从头部开始，从左至右，X轴为主轴【1,2,3 】
	flex-end : 从尾部开始排列【 1,2,3】
	center： 在主轴居中对齐（主轴为X，则水平居中）【 1,2,3 】
	space-around: 平分剩余空间【 1, 2, 3 】
	space-between: 先两边贴边，再平分剩余空间【1, 2, 3, 4, 5】

flex-wrap : 设置元素是否换行
	nowrap：默认不换行【1,2,3,4,5,6】
	wrap：换行		 【1,2,3】
					 【4,5,6】

align-content : 设置侧轴上的子元素的排列放方式（多行）
	flex-start:默认值在侧轴的头部开始排列
	flex-end:在侧轴的尾部开始排列
	center:在侧轴中间显示
	space-around:子项在侧轴平分剩余空间
	space-between:子项在侧轴先分布在两头，再平分剩余空间
	stretch:设置子元素高度平分父元素高度

align-items : 设置侧轴上的子元素排列方式（单行）
	center：垂直居中
	flex-start：垂直居上
	flex-end：垂直居下
	stretch：拉伸

flex-flow : 复合属性，相当于同时设置了flex-direaction 和 flex-wrap
	flex-flow: row wrap;

子级属性

1
2
3
4
5
6


flex:1 子项所占的比例
align-self: 控制子项自身在侧轴上的排列方式
	flex-start:垂直居上
	flex-end: 垂直居下
	center: 居中
order: 数值越小子项越靠前

Flutter 3.0.5 使用BottomNavigationBar数量超过3个时底部导航显示为白色

Sun, 20 Oct 2024 11:42:58 +0800

查询了源码之后，得出当数量小于等于3时会默认fixed模式下使用主题色，大于3时则会默认shifting模式下使用白色，所以，type: BottomNavigationBarType.fixed, 即可.

flutter- ListTile leading加载本地图标

Sun, 20 Oct 2024 11:42:58 +0800

1
2
3
4
5
6


ListTile(
 leading: Images.assets('images/1.png'),
 title: Text('jquery 根据分类id分割数组'),
 subtitle: Text(
 '写项目的时候遇到一个问题'),
 )

现在改成这样就可以了：

flutter不设置appbar内容被状态栏遮住

Sun, 20 Oct 2024 11:42:58 +0800

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


//1,引入dart:ui

import "dart:ui";

//2,获取头部状态栏高度

MediaQueryData.fromWindow(window).padding.top



//具体用法：

Padding(

padding:

EdgeInsets.only(top: MediaQueryData.fromWindow(window).padding.top)

)

flutter父子传值StatefulWidget和StatelessWidget的区别

Sun, 20 Oct 2024 11:42:58 +0800

父组件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


ElevatedButton(
 onPressed: () {
 Navigator.of(context).push(MaterialPageRoute(
 builder: (context) => FormPage(title: 'form page!')));
 },
 style: ButtonStyle(
 padding: MaterialStateProperty.all(
 const EdgeInsets.fromLTRB(20, 10, 20, 10))),
 child: const Text('传值按钮'),
 )

子组件的StatelessWidget模式：

node 安装多版本

Sun, 20 Oct 2024 11:42:58 +0800

首先安装n模块

1

 sudo npm install -g n

1、列出所有node版本

1

n ls

2、查看远程所有node

1

 n ls-remote

3、查看当前node版本

1

node -v

4、安装指定node版本

1

sudo n 14.17.0

5、删除某个版本的node

1

sudo n rm 14.17.0

6、安装最新稳定版

1

sudo n stable

7、安装最新版本

1

sudo n lastest

8、切换node版本(输入命令后上下键盘选择确认)

1
2


$ n
//若无法正常切换，则可以试试： sudo n

vite配置

Sun, 20 Oct 2024 11:42:58 +0800

vite配置项，有些需要记录一下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


import { defineConfig, Terser } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
 base:'./', //打包公共路径
 plugins: [vue()],
 build:{
 //打包环境移除console.log，debugger
 minify:'terser',
 terserOptions:{
 compress:{
 drop_console:true,
 drop_debugger:true
 }
 },
 //打包文件按照类型分文件夹显示
 rollupOptions:{
 output:{
 chunkFileNames:'js/[name]-[hash].js',
 entryFileNames:'js/[name]-[hash].js',
 assetFileNames:'[ext]/[name]-[hash].[ext]'
 }
 }
 },
 server:{
 proxy:{
 'api':{
 target:'csdn.net',
 changeOrigin:true,
 rewrite:(path)=> path.replace('/^\/api/','')
 },
 }
 }
})

记录一下第一部分。

vite中无法使用require和@无法使用的问题

Sun, 20 Oct 2024 11:42:58 +0800

1，安装插件

1
2
3
4


//yarn 安装
yarn add -D vite-plugin-require-transform
//npm 安装
npm i vite-plugin-require-transform --S

2.在vite中配置一下即可

vue3+TS+Element-plus el-pagination分页组件显示中文

Sun, 20 Oct 2024 11:42:58 +0800

1，首先考虑改造一下main.ts

1
2
3
4
5
6


// ! element-plus vue3.0
import element from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn' //中文
//在app中引用
app.use(ElementPlus,{locale})

如果得不到解决，那就单独在pagination的组件中解决一下

vue3+ts用ref获取元素节点里的值

Sun, 20 Oct 2024 11:42:58 +0800

在vue2中获取元素节点的值：

1
2


<div ref="myRef"></div>
this.$refs.myRef

在vue3+ts中获取元素节点的值

vue3防抖

Sun, 20 Oct 2024 11:42:58 +0800

1
2
3
4
5
6
7
8
9


//utils/debounce.js
//防抖函数
export const debounce = (() => {
 let timer = 0
 return (callback, wait) => {
 clearTimeout(timer)
 timer = setTimeout(callback,wait)
 }
})()

在实例中应用

1
2
3
4


import { debounce } from "../utils/debounce";
debounce(() => {
//业务逻辑代码
},500)

记录一下。

vue3兄弟之间传值之插件mitt

Sun, 20 Oct 2024 11:42:58 +0800

1.首先安装

1
2
3
4


//npm
npm install mitt -S
//yarn
yarn add mitt -S

2.src下新建一个目录plugin,其中新建Bus.ts

vue3中defineProps传值失去响应

Sun, 20 Oct 2024 11:42:58 +0800

写小项目的时候，遇到了一个问题，异步请求出的数据，无法及时传值给子组件，一时竟想不明白为什么，经过查阅资料，发现，子组件在用defineProps接受到值以后，必须用toRefs来解构一下，才可以。

vue3自定义tab组件切换简易效果

Sun, 20 Oct 2024 11:42:58 +0800

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


<template>
 <div class="content">
 <div class="tab">
 <div @click="swichItem(item)" class="tabs-item" v-for="item in data" :key="item.name">{{item.name}}</div>
 </div>
 <component :is="current.comName"></component>
 </div>
</template>
 
<script setup lang='ts'>
import {reactive,markRaw} from 'vue'
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'

 type Tabs = {
 name:string,
 comName: any
 }
 type Com = Pick<Tabs,'comName'>

 const data = reactive<Tabs[]>([
 {
 name:'我是a组件',
 comName: markRaw(A)
 },
 {
 name:'我是b组件',
 comName: markRaw(B)
 },
 {
 name:'我是C组件',
 comName: markRaw(C)
 }
 ])

 let current = reactive<Com>({
 comName:data[0].comName
 })

 const swichItem=(item:Tabs)=>{
 current.comName = item.comName
 }
</script>
 
<style scoped>
 .tabs-item{display: inline-block; width: 100px;border: 1px solid #ddd;text-align: center;}
</style>

其中ABC三个组件味各自tab里的内容。

前端 on 特严赤傲

博客终于成形了

app端渐变背景

uniappx 开发app端 页面背景渐变颜色

Web 上用于获取用户设备当前位置的核心方法

vben admin pro 框架的 ApiComponent Api组件包装器select使用示例

vben admin pro 框架的BasicTable之 使用slots 插入组件

GitHub 操作命令完整指南

基础配置

用户配置

仓库操作

初始化与克隆

提交更改

基础操作

查看提交历史

分支管理

基础分支操作

远程分支操作

版本回滚与撤销

撤销工作区更改

回滚到特定版本

恢复删除的分支

远程同步

推送与拉取

高级操作

储藏更改

标签管理

子模块

GitHub CLI (gh) 命令

实用技巧

比较差异

重写历史

清理仓库

鸿蒙开发app资源库

鸿蒙图标库

关于CupertinoNavigationBar图标对齐问题

可能的原因

uniappx开发app，获取验证码倒计时功能

uniappx开发app修改密码验证功能

Flutter中使用adaptive_dialog的方法

React 父子组件传值

1. 父组件向子组件传值（Props）

微信小程序获取用户位置

微信小程序云开发获取openid

react 封装一个类函数使用方法

1.编写ProductCount函数

2.在代码文件中导入 ProductCount 类。

3. 在 React 组件中使用**

DataTable开发导出Excel文档带背景颜色

flex布局里的属性

Flutter 3.0.5 使用BottomNavigationBar数量超过3个时底部导航显示为白色

flutter- ListTile leading加载本地图标

flutter不设置appbar内容被状态栏遮住

flutter父子传值StatefulWidget和StatelessWidget的区别

node 安装多版本

vite配置

vite中无法使用require和@无法使用的问题

vue3+TS+Element-plus el-pagination分页组件显示中文

vue3+ts用ref获取元素节点里的值

vue3防抖

vue3兄弟之间传值之插件mitt

vue3中defineProps传值失去响应

vue3自定义tab组件切换简易效果

uniappx 开发app端页面背景渐变颜色

vben admin pro 框架的BasicTable之使用slots 插入组件

2.在代码文件中导入 `ProductCount` 类。