- 博客(173)
- 收藏
- 关注
RSS订阅原创 将powershell的编码默认改为UTF-8
经常用linux和windows双系统的人会发现一个问题，在linux下cat一个文本文件是正常的，但在powershell下是乱码。为了解决这个问题，我在网上找了一圈，最终确定以下方法可以完美解决powershell出现乱码的问题。
2023-06-18 18:54:03
2132
原创 WSL2网络配置
WSL2越来越好用了，但是在windows下使用clash时，配置WSL2的网络很麻烦，通常使用设置环境变量的方式有很大的弊端，例如pip和conda就不会走代理。经过我亲身体验，最好的解决方案还是配置虚拟交换机。
2023-06-01 20:41:13
3490
原创 vue3动态类属性最优雅简洁
有时候遇到某些内容需要根据用户需要切换是否加.class，我看到有很多地方用3元表达式来做切换，我想到一种既直观又简洁优雅的方式。先看代码：<script setup>import { ref } from 'vue'const isRed = ref(true)</script><template> <button @click="isRed = !isRed">切换</button> <h1 :class="{i
2023-03-07 09:00:21
1009
1
原创 deepin安装调试详细记录，全程无死机，使用方便又流畅
系统更新⾃动移除不需要的包sudo apt autoremove --purge更新本地包数据库sudo apt update更新所有可更新的包sudo apt upgrade常用软件安装编程类安装MariaDB mysqlsudo apt install libmariadbclient-dev libssl-devsudo apt install mariadb-server mariadb-clientsudo service mysql start注
2022-05-22 17:22:10
1825
原创 深入学习MobX6，使用React平台typeScript语言写MobX6的编码规范
开篇MobX是一款身经百战的状态管理库，它比Redux性能更优秀、功能更强大、使用更灵活、代码量更少！但使用率却不如Redux，我觉得有很大一部分原因是过于灵活，即完成一件事可以有多种方式。这使得不同人编写的MobX风格差异极大！也使得版本升级历史包袱重！MobX6与之前版本有不少差异！最近我把官方文档从头到尾过了一遍，感觉MobX官方文档真的非常不错，里面有很多状态管理的知识值得细细咀嚼，强烈建议有时间的话还是要亲自啃一遍官方文档。此外官方文档里的内容是真的多，啃起来很费功夫。在学习官方文档过程中越
2022-05-02 09:26:51
1380
3
原创 深入学习React Hook——useReducer，并用其代替redux
Hook使用规则只能在函数的最外层调用Hook，不能在循环、条件判断或子函数中调用。只能在React函数组件或自定义Hook中调用Hook，不可在其他JavaScript函数中使用。useReducerconst [state, dispatch] = useReducer(reducer, initialArg, init);useReducer是useState的替代方案，它和redux非常相似，使用dispatch和payload更新数据。useReducer和useContext配合
2022-04-27 19:19:19
1915
原创 深入学习React函数组件性能优化三剑客useMemo、useCallback、memo
Hook使用规则只能在函数的最外层调用Hook，不能在循环、条件判断或子函数中调用。只能在React函数组件或自定义Hook中调用Hook，不可在其他JavaScript函数中使用。usuMemoconst memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);memo是memoized的简写，意思是缓存；computeExpensiveValue的意思是“计算开销很大的值”。useMemo的作用是通过存
2022-04-27 09:55:57
767
原创 深入学习React Hook——useEffect
Hook使用规则只能在函数的最外层调用Hook，不能在循环、条件判断或子函数中调用。只能在React函数组件或自定义Hook中调用Hook，不可在其他JavaScript函数中使用。useEffect一句话简介useEffect相当于componentDidMount、componentDidUpdate、componentWillUnmount这三个生命周期方法的组合。参数参数1：函数，即effect函数体，执行各种副作用操作，如网络请求、添加订阅、添加计时器等。函数返回值，执行取消
2022-04-26 16:30:41
1286
原创 create-react-app报错的解决方法
create-react-app需要升级版本卸载旧版本yarn global remove create-react-app安装新版本yarn global add create-react-app提示某些包装不上提示信息如下：npm ERR! code ETARGETnpm ERR! notarget No matching version found for @typescript-eslint/[email protected] ERR! notarget
2022-04-25 20:19:51
3073
原创 深入学习React Hook——useState
Hook使用规则只能在函数的最外层调用Hook，不能在循环、条件判断或子函数中调用。只能在React函数组件或自定义Hook中调用Hook，不可在其他JavaScript函数中使用。useState基本用法const [state,setState] = useState(initialState)参数参数类型typeuseState右侧的<>部分是typeScript中泛型的用法，用来约束参数initialState的类型。参数初始值initialStateinitia
2022-04-25 09:33:47
2298
原创 React函数组件与类组件优劣对比
类组件的问题自从React推出Hooks之后，函数组件写法大行其道，而类组件写法有些日渐式微。为什么要推广函数组件？我觉得有以下三个原因。原因一，因为this带来的问题有一个著名的案例展示了类组件this带来的问题，下面我将其本土化复现一下这个案例。import React from "react"const ProfileFunction: React.FC<{goods:string}> = (props) => { const showMessage = () =
2022-04-25 09:32:22
4540
原创 manjaro更新mysql后不能正常使用
我一直用manjaro，最近更新后发现mysql不能登录了。服务起不来，重装也不行。仔细检查发现是mysql更新后需要libicu71-7.1.1，而manjaro系统里只有libicu70。然而安装与升级libicu71并不简单，一不小心就会把系统弄崩了。最后解决办法是用Timeshift回滚系统，然后编辑/etc/pacman.conf，添加下面2行内容：IgnorePkg = mysqlIgnorePkg = mysql-clients暂时忽略更新mysql和mysql-clie
2022-04-20 10:25:03
951
原创 关于goframe2.0规范路由——路由表及文件架构
接口描述：api/v1该目录中存放规范路由里api请求结构体与响应结构体描述文件，建议不同数据表分别写在不同文件中。图片示例如下：控制器：controller该目录中存放路由函数，通常的包名使用默认的controller。如下图所示：如果有特殊用处的路由函数，可以在controller下建子目录，子目录中的文件使用另一个包名。例如，我写的项目中发现有很多只有管理员权限才能使用的路由函数，为了方便管理，我在controller目录下建了manage子目录，将所有需要管理员权限才能使用的路由函数集
2022-04-11 21:00:47
1736
2
原创 关于goframe2.0规范路由——请求结构体与响应结构体
开篇goframe是一款模块化、高性能、企业级的Go基础开发框架。虽然goframe不像Gin那么出名，但goframe用下来的感受是非常舒服的。它有全中文的官方文档，开发团队与用户之间保持了良好沟通，对用户的信息及时反馈。goframe开发团队一直在积极地进行维护和更新，近期推出的goframe2.0版与之前1.16版有很大的提高与变动。在此我打算跟大家分享一下我对goframe2.0标准路由的使用心得，如有不妥欢迎留言讨论。api请求结构体Meta写标准路由首先要写请求结构体与响应结构体，对ap
2022-04-11 17:49:35
2464
原创 typescript报错：类型“ReactNode”的参数不能赋给类型“ReactElement＜any, string | JSXElementConstructor＜any＞＞”的参数，如何解决？
最近在做antd项目，使用typescript写layout组件，通过cloneElement给子组件的props添加initialState中的数据遇到飘红：类型“ReactNode”的参数不能赋给类型“ReactElement<any, string | JSXElementConstructor<any>>”的参数。这里涉及到下面两个知识点：ReactNode这是一种联合类型，可以是string、number、ReactElement、{}、boolean、React
2022-04-10 11:29:21
14935
原创 最优雅解决typescript报错：“元素隐式具有 “any“ 类型，因为类型为 “string“ 的表达式不能用于索引类型”
最近在前端项目中遇到在用字符串当对象的key时报错，报错信息如下：“元素隐式具有 “any” 类型，因为类型为 “string” 的表达式不能用于索引类型”在类型 XXX 上找不到具有类型为 “string” 的参数的索引签名。搜索了一圈解决方案，没一个特别优雅的。方案一，修改tsconfig是修改tsconfig.json，加下面这行参数屏蔽检查，从而不报错。"suppressImplicitAnyIndexErrors":true,方案二，写一个函数转类型export function
2022-04-07 20:51:08
53157
5
原创 阿里云服务器安装指南
一、选择操作系统操作步骤请参考gif动图，比文字描述更清晰：系统一般推荐使用Alibaba Cloud Linux 3.2104 LTS 64位，就是菜单里的第一项，是阿里云主打的系统，深度定制与优化，维护和响应也是最好的。输入2次密码，确定操作后过几秒就可以ssh登录该云服务器。注意保管好密码，该密码是ssh root@云服务器ip必须要用的。二、系统环境配置1.系统更新更新系统yum -y updateyum常用指令# 查找软件yum search name# 列出所有可更新的
2022-04-05 20:21:17
2386
原创 使用gf编译goframe项目的注意事项
要注意打包的程序和生产环境使用的glibc版本，如果两者不一致时可能造成生产环境启动不了。通常生产环境的服务器上glibc版本较低，而自己的笔记本上glibc版本较高。解决方案有两条：一是在生产环境更新glibc版本，这个很费时费力，而且搞不好会把系统弄崩溃。二是重新打包编译goframe项目，生成不依赖外部库的执行文件。进入项目路径，执行下面的指令：go build -o main -ldflags '-linkmode "external" -extldflags "-static"' m
2022-04-05 16:16:18
592
原创 把wangEditor封装成编辑器、阅读器一体两用
最近我在前端项目中使用WangEditor，确实是一个非常棒的富文本编辑器，再次向广大前端程序员隆重推荐！近期在使用过程中又发现一个问题，编辑器中的效果与展示效果不完全一致。作为完美主义者怎么能忍！于是我又搞事情了，尝试将wangEditor编辑与展示封装在一个组件中，确保编辑与展示效果完全一致！！！创建WangEditor组件在components目录下创建WangEditor子目录定义样式在WangEditor子目录中创建index.less文件，内容如下：.wangEditor { p
2022-03-11 20:25:05
2163
原创 在antd项目中使用wangEditor经验
我最近在前端项目中要用到富文本编辑器，找来找去发现wangEditor很不错，目前已经迭代到v5版本，WangEditor官方手册是纯中文文档，内容比较详细，非常值得推荐使用。我使用react开发，但官方手册对react开发者写的手册不够详尽，在使用过程中还是折腾了不少时间，其中多次提交issue叨唠开发者，项目开发者王福朋都不厌其烦地帮我解决了，非常感谢。在此我写一篇在antd中使用wangEditro开发手册致敬王福朋先生，支持开源项目。安装yarn add @wangeditor/editor-
2022-03-08 06:10:07
3586
1
原创 在manjaro平台安装前端开发环境
npm安装yay -S npm切换源npm config set registry https://registry.npm.taobao.org/更新sudo npm update npm -gyarn安装yay -S yarn切换源yarn config set registry https://registry.npm.taobao.org/更新sudo npm update yarn -gnode版本管理工具n安装sudo np
2022-02-01 12:51:22
1378
原创 解决Linux平台下使用触摸便携屏触摸功能异常
Linux平台下使用触摸副屏的状况编程时老感觉一块显示屏不够用，最近趁双11买了块触摸便携屏。通过笔记本的雷电口用typeC线连到便携屏上的typeC口，在windows平台下使用正常，但Linux平台下触摸副屏时鼠标指针响应在主屏上！安装xinputxinput软件可以解决触摸屏映射错误的问题。不同的linux平台下安装xinput的方式不尽相同，我用的是manjaro，manjaro平台下安装xinput的方法如下。yay -S xorg-xinput xorg-server xorg-xran
2021-10-28 22:59:57
3064
原创 使用React官方Hooks代替redux完整方案
redux大家都知道，它是第三方的react状态管理库，被很多人吐槽既难用又不得不用。我最近发现完全可以只用react官方hooks实现redux的大部分功能！使用起来比redux简便一些，代码量也少一下。在这里我写了一个完整的demo，一般中小型项目完全可以参考它，实现只用官方Hooks代替redux。以下是完整步骤和代码：新建项目使用官方模板创建react项目：create-react-app demo清理public/目录删除该目录下所有文件，然后在该目录下新建index.html，内容
2021-10-06 07:36:38
1856
原创 通过案例讲解react函数式组件优化函数memo！
关于react现在函数式组件大行其道，但少有人将优化函数式组件的memo讲得简单明了。下文将通过案例来讲解memo。案例先看代码：import React, { memo } from "react";const Demo = () => { let [food1, setFood1] = React.useState(20); let [food2, setFood2] = React.useState(20); const reduce1 = () => { s
2021-09-26 14:42:15
667
原创 JS数组之map、filter、reduce使用详解
map、filter、reduce都是高阶函数，它们的功能非常强大，可以搭配箭头函数来完成复杂的数组数据处理。关于它们的用法很多人写过，但少有人写结合案例来写。在这里我会对这3个函数的用法结合案例来详细讲述，并额外写了for循环版本用来帮助理解。模拟数据要详细讲述这3个高阶函数的用法必须结合实际案例来讲。现在有一个这样的数组，这个数组是任务清单：let todo = [ {id: 1, name: "吃饭", done: true}, {id: 2, name: "睡觉", done:
2021-09-16 11:59:24
1125
原创 关于JavaScrip数组sort方法配套的比较函数
最近在写个人博客网站，遇到了一个数组嵌套对象排序的问题，在解决过程中遇到了一些坑。在此详细说一下，以免后来人踩坑！需求描述现有简化后的数据内容如下：let data = [ {ArtId: 82, ArtName: "关于JavaScript处理时间戳转日期字符串与日期字符串转时间戳的函数", Date: 1630937933, State: 1,}, {ArtId: 83, ArtName: "在manjaro下安装安卓投屏软件scrcpy详细过程", Date: 163093792
2021-09-07 23:27:39
766
2
原创 关于JavaScript存、取Cookie的函数
将数据存入cookie// 将键值对存入cookiefunction setCookie(key, value, exdays = 30) { let d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); let expires = "expires=" + d.toGMTString(); document.cookie = key + "=" + value + "; " +
2021-09-04 20:05:21
219
原创 关于JavaScript处理时间戳转日期字符串与日期字符串转时间戳的函数
时间戳转日期字符串function unixToStr(num) { let d = new Date(Number(num) * 1000); return `${d.getFullYear()}年${(d.getMonth() + 1)}月${(d.getDate())}日 ${d.getHours()}时${d.getMinutes()}分${(d.getSeconds())}秒`;}讲解函数的参数是时间戳数字，单位是秒。因为JavaScript时间戳单位是1/1000秒，所
2021-09-04 19:56:00
355
原创 在manjaro下安装安卓投屏软件scrcpy详细过程
scrcpy非常实用，它可以将安卓手机投屏到电脑屏幕上，也可以在电脑上操作手机。安装scrcpy：yay -S scrcpy安装好以后并不能马上使用，因为它需要adb支持，首先得确保通过adb让电脑和安卓手机互联。手机打开USB调试模式进入开发者模式，打开USB调试模式，另外手机和电脑互联时手机上会弹出一个窗口要求确认该电脑是否可信，请确认可信。请确保手机线质量可靠，有些质量不佳的手机线是不能连接成功的。安装安卓开发包yay -S android-sdk-platform-tools-com
2021-09-04 19:52:15
1348
原创 关于GoFrame框架中Context相关梳理及实例
什么是Context？Context指的是标准库的context.Context，是一个接口对象，常用于异步IO控制以及上下文流程变量的传递。在GoFrame中Context被主要是用它来给协程之间共享数据。Context有什么用？GoFrame是网络应用开发框架，在网络应用中存在大量IO操作，使用Context可以减少IO操作，提高运行效率。比如用户登录时，通常需要连接到数据库比对用户名和密码，另外Web应用中很多模块在使用前都要判断账户信息确认权限等级，即用户每次点击要先检验权限然后才能进行后续
2021-08-04 08:08:14
4797
7
原创 学习GoFrame框架，从头开始一步步搭建个人博客WEB应用(上)
简介：GoFrame是一款中国人开发的大而全的框架，类似于Python的Django，常用的功能和模块应有尽有。goframe.org有完善、细致、全面的中文文档，非常适合中国人使用。目标：目前官网文档虽细致、全面，但没有一款面向新手的详细案例教程，...
2021-07-30 23:54:32
3934
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人