分类前端技术下的文章

【vue3源码】认识Block

2024-08-19

在Vue 3中，Block是一个抽象的概念，它代表了一个可以被渲染的实体。在Vue 3的渲染系统中，Block可以是一个元素、组件或者是一段文本。Block是构建VNode树的基本单位。

在Vue 3的源码中，Block被定义在packages/runtime-core/src/vdom.ts文件中，它是一个使用Provide/Inject的服务。

以下是一个简化的Block定义示例：




import { provide, inject } from 'vue';
 
// 定义Block服务
export const BlockProviderSymbol = Symbol() as InjectionKey<VNode[]>;
 
// 在父组件中设置Block
export function setupBlock(props: { msg?: string }) {
  const blockChildren = ref<VNode[]>([]);
  provide(BlockProviderSymbol, blockChildren);
 
  // 可以根据需要对blockChildren进行操作
  // 例如，如果父组件接受一个msg属性，可以将其作为文本节点添加到blockChildren中
  if (props.msg) {
    blockChildren.value.push(createTextVNode(props.msg));
  }
 
  // 返回blockChildren以供注入
  return blockChildren;
}
 
// 在子组件中使用Block
export function useBlockContext() {
  return inject(BlockProviderSymbol, null);
}

在这个例子中，setupBlock函数提供了一个可注入的blockChildren VNode数组，可以在父组件中使用。useBlockContext函数用于在子组件中接收这个数组。如果父组件传递了一个msg属性，它会将这个文本作为一个新的VNode添加到blockChildren数组中。子组件可以通过调用useBlockContext来访问这个数组，并将其渲染出来。

这个例子展示了如何在Vue 3应用中创建一个Block服务，并在父子组件之间共享VNode数据。

typescript正则匹配除了想定字符之外的字符

2024-08-19

在TypeScript或JavaScript中，我们可以使用正则表达式来匹配除了预期之外的字符。这可以通过一个负向字符集来实现。

解法1：使用[^...]定义一个否定的字符集。




let str = "abc123";
let regExp = /[^0-9]/; // 匹配除了数字以外的任意字符
console.log(str.match(regExp)); // 输出："abc"

解法2：使用[^...]定义一个否定的字符集，并使用量词?来使匹配为非贪婪匹配。




let str = "abc123";
let regExp = /[^0-9]+?/; // 匹配除了数字以外的字符，量词?使其为非贪婪匹配
console.log(str.match(regExp)); // 输出：undefined

解法3：使用(?!...)负向前瞻断言。




let str = "abc123";
let regExp = /.*(?!123)/; // 匹配不以"123"结尾的所有字符
console.log(str.match(regExp)); // 输出："abc"

解法4：使用(?!...)负向前瞻断言，并使用量词?来使匹配为非贪婪匹配。




let str = "abc123";
let regExp = /.*?(?!123)/; // 匹配不以"123"结尾的字符，量词?使其为非贪婪匹配
console.log(str.match(regExp)); // 输出：undefined

以上就是在TypeScript或JavaScript中使用正则表达式来匹配除了预期之外的字符的几种方法。

Vue3+Vite+Ts的Axios企业级封装+本地存储封装

2024-08-19

以下是针对Vue3+Vite+Ts项目中Axios的企业级封装以及本地存储的封装的示例代码：




// http.ts
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { store } from '@/store/index';
 
// 创建axios实例
const service = axios.create({
  // API的base_url
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 请求超时时间
  timeout: 5000
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头等信息
    if (store.state.user.token) {
      config.headers['Authorization'] = `Bearer ${store.state.user.token}`;
    }
    return config;
  },
  error => {
    // 请求错误处理
    console.log(error); // for debug
    Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    // 根据返回的状态码做相应处理，例如401未授权等
    return res;
  },
  error => {
    ElMessage({
      message: '服务器异常',
      type: 'error',
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);
 
export default service;
 
// storage.ts
export const setLocal = <T>(key: string, value: T) => {
  localStorage.setItem(key, JSON.stringify(value));
};
 
export const getLocal = <T>(key: string): T | null => {
  const value = localStorage.getItem(key);
  if (value) {
    return JSON.parse(value);
  }
  return null;
};
 
export const removeLocal = (key: string) => {
  localStorage.removeItem(key);
};

在这个封装中，我们使用axios创建了一个实例，并对请求和响应进行了拦截处理。对于本地存储，我们提供了基本的设置、获取和删除操作，并使用泛型保证了存取数据的类型安全。

vue3学习——Ref全家桶

2024-08-19

在Vue 3中，ref是一个用于创建响应式引用对象的API。ref可以用于跟踪单个响应式值。ref是reactive对象的一个轻量版本，适用于跟踪单个值。

ref在Vue 3中的使用场景主要是在组件内部管理状态。

以下是一个使用ref的基本示例：




<template>
  <div>
    <input v-model="message" />
    <p>Message: {{ message }}</p>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const message = ref('');
    return { message };
  }
};
</script>

在这个例子中，我们创建了一个响应式的ref，它被初始化为空字符串。v-model用于双向绑定输入框的值到message。

ref全家桶是指一系列相关的API，如toRef、toRefs和customRef，它们用于在不同的场景下对ref进行扩展或自定义。

例如，toRef可以用来创建一个响应式引用，该引用是另一个响应式对象的特定属性：




import { reactive, toRef } from 'vue';
 
const state = reactive({
  foo: 'bar',
  baz: 'qux'
});
 
const fooRef = toRef(state, 'foo');
 
// 现在 fooRef 是一个响应式引用，它跟踪 state.foo 的变化

toRefs可以用来将reactive对象的属性转换为ref对象：




import { reactive, toRefs } from 'vue';
 
const state = reactive({
  foo: 'bar',
  baz: 'qux'
});
 
const stateRefs = toRefs(state);
 
// stateRefs 现在是一个带有 foo 和 baz 属性的对象，
// 每个属性都是指向 state 中相应属性的 ref

customRef可以用来创建自定义的ref，它可以定义在属性被读取和更改时执行的自定义行为：




import { customRef } from 'vue';
 
const myRef = customRef((track, trigger) => {
  return {
    get() {
      // 当值被读取时执行
      track();
      return theValue;
    },
    set(newValue) {
      // 当值被更改时执行
      theValue = newValue;
      trigger();
    }
  };
});
 
// 使用 myRef 就像使用普通 ref 一样

这些是ref全家桶的基本概念和使用方法。

2024-08-19

在Vue 3和TypeScript中使用Ant Design Vue 3创建一个Modal表单，你可以使用Modal组件的form属性来简化表单的创建过程。以下是一个简单的例子：




<template>
  <a-button type="primary" @click="showModal">
    打开表单Modal
  </a-button>
  <a-modal
    v-model:visible="isModalVisible"
    title="表单Modal"
    :width="600"
    :bodyStyle="{ padding: '24px 24px 0' }"
    destroyOnClose
    :maskClosable="false"
    :modalRender="modalRender"
  />
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Modal, Form, Input, Button } from 'ant-design-vue';
 
export default defineComponent({
  setup() {
    const isModalVisible = ref<boolean>(false);
 
    const showModal = () => {
      isModalVisible.value = true;
    };
 
    const modalRender = (formProps: any) => {
      return (
        <Form {...formProps}>
          <Form.Item label="名称" name="name">
            <Input />
          </Form.Item>
          <Form.Item label="描述" name="description">
            <Input.TextArea />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button type="link" onClick={formProps.onReset}>
              重置
            </Button>
          </Form.Item>
        </Form>
      );
    };
 
    return {
      isModalVisible,
      showModal,
      modalRender,
    };
  },
});
</script>

在这个例子中，我们创建了一个Modal窗口，并通过modalRender属性定义了一个渲染函数，该函数使用Form组件来渲染一个表单。当用户点击打开表单的按钮时，showModal函数被触发，显示Modal窗口。用户填写表单并提交后，Modal窗口将关闭。

Teams Toolkit 之 Incoming Webhook

2024-08-19

Incoming Webhook 是 Microsoft Teams 中的一项功能，允许你以编程方式向 Teams 频道发送通知。这可以通过 Teams Toolkit 在 Visual Studio Code 中实现。

以下是一个使用 Python 创建 Incoming Webhook 并发送消息的示例：




import requests
import json
 
# 你的 Incoming Webhook URL
webhook_url = "https://outlook.office.com/webhook/..."
 
# 你想发送的消息
message = {
    "@context": "https://schema.org/extensions",
    "@type": "MessageCard",
    "text": "这是一个测试消息",
    "potentialAction": [
        {
            "@type": "ActionCard",
            "name": "查看详情",
            "actions": [
                {
                    "@type": "OpenUri",
                    "name": "查看详情",
                    "targets": [
                        {
                            "os": "default",
                            "uri": "https://example.com"
                        }
                    ]
                }
            ]
        }
    ]
}
 
# 发送 POST 请求到 Incoming Webhook URL
response = requests.post(webhook_url, data=json.dumps(message), headers={'Content-Type': 'application/json'})
 
# 打印响应结果
print(response.text)

在这个示例中，我们首先导入了必要的模块，并定义了你的 Incoming Webhook URL 和你想发送的消息。然后我们使用 requests 库发送一个 POST 请求到这个 URL，消息的内容是我们之前定义的 JSON 对象。最后，我们打印出响应结果。

确保你有一个有效的 Incoming Webhook URL，并且在发送请求时替换 message 变量中的内容为你想要发送的实际消息。

Vite-Vue3-TypeScript：002-配置别名

2024-08-19

在Vite + Vue3 + TypeScript项目中配置路径别名，可以使用tsconfig.json文件来实现。

打开项目根目录下的tsconfig.json文件，然后在compilerOptions中添加baseUrl和paths配置：




{
  "compilerOptions": {
    "baseUrl": ".", // 这里设置基础路径为项目根目录
    "paths": {
      "@/*": ["./*"] // 定义一个别名@指向根目录
    }
    // ...其他配置
  },
  // ...其他配置
}

这样配置后，在代码中就可以使用@作为别名来引用根目录下的文件，例如：




// 引用src目录下的utils.ts文件
import Utils from '@/utils.ts';

请注意，Vite 使用其自己的别名解析逻辑，通常不需要在tsconfig.json中配置paths。但是，如果你需要在TypeScript中使用别名，上述配置仍然适用。

TypeScript基础篇 - TS日常类型上篇

2024-08-19




// 定义一个简单的用户类型
interface User {
  id: number;
  name: string;
  email?: string; // 可选属性
}
 
// 定义一个函数，接受User类型的参数
function greet(user: User) {
  return `Hello, ${user.name}!`;
}
 
// 使用
let user: User = { id: 1, name: "Alice" };
console.log(greet(user)); // 输出: Hello, Alice!

这段代码定义了一个简单的用户接口User，并且定义了一个接受User类型参数的greet函数。然后，我们创建了一个User类型的实例，并调用了greet函数。这个例子展示了TypeScript中如何定义和使用类型，以及如何在实际代码中应用它们。

antdpro v4实现动态菜单以及动态路由

2024-08-19

在Ant Design Pro中实现动态菜单和动态路由，通常需要结合umi的路由插件和Ant Design Pro框架的菜单配置。以下是一个简化的例子：

使用umi的dynamicImport进行路由的动态加载。
根据用户角色或权限动态生成菜单。

假设你有一个API可以返回用户的菜单数据和路由数据。




// 假设API返回的菜单数据格式
const menuData = [
  {
    id: '1',
    name: '首页',
    path: '/dashboard',
  },
  {
    id: '2',
    name: '用户管理',
    path: '/users',
    children: [
      {
        id: '2-1',
        name: '用户列表',
        path: '/users/list',
      },
      {
        id: '2-2',
        name: '用户详情',
        path: '/users/detail',
      },
    ],
  },
  // ...更多菜单
];
 
// 使用umi的defineConfig定义配置
export default defineConfig({
  routes: [
    {
      path: '/',
      component: '../layouts/BasicLayout',
      // 动态生成路由
      routes: dynamicRoutes(menuData),
    },
    // ...其他静态路由
  ],
});
 
// 将菜单数据转换为路由配置
function dynamicRoutes(menuData) {
  return menuData.map(item => ({
    path: item.path,
    component: dynamic({ loader: () => import(`../pages${item.path}`), loading: false }),
    routes: item.children ? dynamicRoutes(item.children) : [],
  }));
}
 
// 菜单组件中根据menuData渲染
const { SubMenu } = Menu;
 
function renderMenuItems(menuData) {
  return menuData.map(item => {
    if (item.children) {
      return (
        <SubMenu key={item.id} title={item.name}>
          {renderMenuItems(item.children)}
        </SubMenu>
      );
    }
    return <Menu.Item key={item.id}>{item.name}</Menu.Item>;
  });
}

在上述代码中，dynamicRoutes函数负责将菜单数据转换为umi路由配置，其中dynamic是umi提供的一个高阶组件，用于代码分割。renderMenuItems函数负责根据菜单数据渲染对应的菜单项。

请注意，这只是一个简化的例子，实际应用中你可能需要结合权限管理逻辑来决定哪些菜单项和子路由项对当前用户是可见的。