From 9f516fb20547e21ac45e0ca00fc9d96943eb6b3c Mon Sep 17 00:00:00 2001 From: "YUN-PC5\\user" Date: Fri, 26 Jan 2024 16:37:37 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/_posts/JavaScript.md | 83 ++++++++++++++- source/_posts/Linux.md | 85 +++++++++++++++ source/_posts/MySQL.md | 10 ++ source/_posts/Vue3.md | 206 ++++++++++++++++++++++++++++++++++++ 4 files changed, 383 insertions(+), 1 deletion(-) diff --git a/source/_posts/JavaScript.md b/source/_posts/JavaScript.md index c36999c..408425e 100644 --- a/source/_posts/JavaScript.md +++ b/source/_posts/JavaScript.md @@ -329,4 +329,85 @@ search搜索时，用户在不断输入值时，用防抖来节约请求资源 鼠标不断点击触发，mousedown（单位时间内只触发一次） -监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断 \ No newline at end of file +监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断 + +# Map 键值对 + +## 遍历MAP + +### keys() 方法 + +该方法返回一个新的迭代器对象，它包括`Map`对象中每个元素的键。 + +```js +const map = new Map(); +map.set('name', 'Alice'); +map.set('age', 25); + +for (const key of map.keys()) { + console.log(key); +} +// 输出：'name' 'age' +``` + +### values() 方法 + +该方法返回一个新的迭代器对象，它包括`Map`对象中每个元素的值。 + +```js +const map = new Map(); +map.set('name', 'Alice'); +map.set('age', 25); + +for (const value of map.values()) { + console.log(value); +} +// 输出：'Alice' 25 +``` + +### entries() 方法 + +该方法返回一个新的迭代器对象，它包括`Map`对象中每个元素的键值对。 + +```js +const map = new Map(); +map.set('name', 'Alice'); +map.set('age', 25); + +for (const [key, value] of map.entries()) { + console.log(key + ': ' + value); +} +// 输出：'name: Alice' 'age: 25' +``` + +### forEach() 方法 + +此方法接受一个回调函数作为参数，`Map`对象中的每个元素都会调用一次这个回调函数。回调函数中的参数依次为：`value`、`key`、`mapObject`。 + +```js +const map = new Map(); +map.set('name', 'Alice'); +map.set('age', 25); + +map.forEach((value, key) => { + console.log(key, value); +}); +// 输出：'name' 'Alice' 'age' 25 +``` + +## 进阶用法 + +### Map 和 Array 的相互转化 + +有时我们需要在 `Map` 和 `Array` 之间相互转化，比如将数组转换为字典，或者从字典转换为数组时，我们就可以结合 `Array` 构造函数和扩展运算符来实现。 + +```js +let kvArray = [['key1', 'value1'], ['key2', 'value2']]; +let myMap = new Map(kvArray); +console.log(myMap); // Map(2) {"key1" => "value1", "key2" => "value2"} + +let arrayFromMap = Array.from(myMap); +console.log(arrayFromMap); // [["key1", "value1"], ["key2", "value2"]] +``` + +### Map 的合并和复制 \ No newline at end of file diff --git a/source/_posts/Linux.md b/source/_posts/Linux.md index ba4ba89..3eaaaef 100644 --- a/source/_posts/Linux.md +++ b/source/_posts/Linux.md @@ -1227,3 +1227,88 @@ stderr_logfile=/var/log/ckadminnetcore/err.log stdout_logfile=/var/log/ckadminnetcore/out.log stopasgroup=true ``` + +## 安装 FastGithub + +```shell +wget https://gitee.com/chcrazy/FastGithub/releases/download/2.1.4/fastgithub_linux-x64.zip +dnf install -y libicu +# 配置系统代理 +# 配置系统环境变量 +vim /etc/profile + +# 尾行加上 +export http_proxy="http://127.0.0.1:38457" +export https_proxy="http://127.0.0.1:38457" + +# 生效 +source /etc/profile + +unzip fastgithub_linux-x64.zip +cd fastgithub_linux-x64 +./fastgithub +``` + +## 安装 ohmyzsh + +### 安装zsh + +```shell +dnf install -y zsh +``` + +### 脚本安装 + +```shell +sh -c "$(wget -O- https://install.ohmyz.sh/)" +``` + +### 配置 + +```shell +vim ~/.zshrc + +# 修改主题 +# ZSH_THEME='robbyrussell' +ZSH_THEME='agnoster' + +source ~/.zshrc +``` + +### 切换为默认shell + +```shell +dnf install util-linux-user -y +chsh -s /bin/zsh + +#查看默认Shell +echo $SHELL +``` + +### 主题 + +- Powerlevel10K + +```shell +``` + + + +## 安装 ElasticSearch + +```shell +cd /etc/yum.repos.d +vim elasticsearch.repo + +[elasticsearch] +name=Elasticsearch repository for 8.x packages +baseurl=https://artifacts.elastic.co/packages/8.x/yum +gpgcheck=1 +gpgkey=https://artifacts.elastic.co/GPG-KEY-elasticsearch +enabled=0 +autorefresh=1 +type=rpm-md + +dnf install --enablerepo=elasticsearch elasticsearch -y +``` + diff --git a/source/_posts/MySQL.md b/source/_posts/MySQL.md index e975aa1..ec9d6a6 100644 --- a/source/_posts/MySQL.md +++ b/source/_posts/MySQL.md @@ -384,6 +384,16 @@ select @@log_bin_trust_function_creators; set GLOBAL log_bin_trust_function_creators=1; ``` +# 信息数据库（information_schema） + +## 查看某数据库中所有表的行数 + +```mysql +select table_name,table_rows from information_schema.tables +where TABLE_SCHEMA = 'qyqdb' +order by table_rows desc; +``` + # 主从搭建 ## 主节点配置 diff --git a/source/_posts/Vue3.md b/source/_posts/Vue3.md index 1dde4d6..72d7b61 100644 --- a/source/_posts/Vue3.md +++ b/source/_posts/Vue3.md @@ -325,3 +325,209 @@ handler： 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。 +# 组合式函数(Hook) + +## 概述 + +在 Vue 应用的概念中，“组合式函数”（Composables）是一个利用 Vue 的组合式 API 来封装和复用**有状态逻辑**的函数。 + +当构建前端应用时，我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间，我们可能会抽取一个可复用的日期格式化函数。这个函数封装了**无状态的逻辑**：它在接受一些输入后立刻返回所期望的输出。复用无状态逻辑的库很多，比如你可能已经用过的lodash或是date-fns。 + +相比之下，有状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中，也可能是像触摸手势或与数据库的连接状态这样的更复杂的逻辑。 + +## 约定和最佳实践 + +### 命名 + +组合式函数约定用驼峰命名法命名，并以“use”作为开头。 + +### 输入参数 + +即便不依赖于 ref 或 getter 的响应性，组合式函数也可以接受它们作为参数。如果你正在编写一个可能被其他开发者使用的组合式函数，最好处理一下输入参数是 ref 或 getter 而非原始值的情况。可以利用`toValue()`工具函数来实现： + +```js +import { toValue } from 'vue' + +function useFeature(maybeRefOrGetter) { + // 如果 maybeRefOrGetter 是一个 ref 或 getter， + // 将返回它的规范化值。 + // 否则原样返回。 + const value = toValue(maybeRefOrGetter) +} +``` + +如果你的组合式函数在输入参数是 ref 或 getter 的情况下创建了响应式 effect，为了让它能够被正确追踪，请确保要么使用`watch()`显式地监视 ref 或 getter，要么在`watchEffect()`中调用`toValue()`。 + +## 封装下拉框Hook + +```ts +import { onMounted, reactive, ref } from 'vue'; +// 定义下拉框接收的数据格式 +export interface SelectOption { + value: string; + label: string; + disabled?: boolean; + key?: string; +} +// 定义入参格式 +interface FetchSelectProps { + apiFun: () => Promise; +} + +export function useFetchSelect(props: FetchSelectProps) { + const { apiFun } = props; + + const options = ref([]); + + const loading = ref(false); + + /* 调用接口请求数据 */ + const loadData = () => { + loading.value = true; + options.value = []; + return apiFun().then( + (data) => { + loading.value = false; + options.value = data; + return data; + }, + (err) => { + // 未知错误，可能是代码抛出的错误，或是网络错误 + loading.value = false; + options.value = [ + { + value: '-1', + label: err.message, + disabled: true, + }, + ]; + // 接着抛出错误 + return Promise.reject(err); + } + ); + }; + + // onMounted 中调用接口 + onMounted(() => { + loadData(); + }); + + return reactive({ + options, + loading, + }); +} +``` + +组件调用 + +```vue + + + +``` + +## Loading状态hook + +```ts +import { Ref, ref } from 'vue'; + +type TApiFun> = (...params: TParams) => Promise; + +interface AutoRequestOptions { + // 定义一下初始状态 + loading?: boolean; + // 接口调用成功时的回调 + onSuccess?: (data: any) => void; +} + +type AutoRequestResult> = [Ref, TApiFun]; + +/* 控制loading状态的自动切换hook */ +export function useAutoRequest(fun: TApiFun, options?: AutoRequestOptions): AutoRequestResult { + const { loading = false, onSuccess } = options || { loading: false }; + + const requestLoading = ref(loading); + + const run: TApiFun = (...params) => { + requestLoading.value = true; + return fun(...params) + .then((res) => { + onSuccess && onSuccess(res); + return res; + }) + .finally(() => { + requestLoading.value = false; + }); + }; + + return [requestLoading, run]; +} +``` + +组件调用 + +```vue + + + +``` +