前端

```tsx
import { InboxOutlined } from "@ant-design/icons";
import Dragger from "antd/lib/upload/Dragger";

export default function AppUpload() {
  return (

    <div>
      <Dragger
        accept=".apk"
        action={"http://localhost:5200/api/oss/uploadApp"}
        name="file"
        height={160}
        listType="picture"
        maxCount={1}
      >
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p className="ant-upload-text">点击或者拖拽文件上传</p>
      </Dragger>
    </div>

  );
}
```

后端

```ts
  @Post('uploadApp')
  @UseInterceptors(FileInterceptor('file'))
  async uploadFile(@UploadedFile() file) {
    const fileName = `daanjiexi-latest.apk`;
    const res = await this.ossStaticService.uploadFile(
      'app/' + fileName,
      file.buffer,
      file.size,
    );
    return res;
  }
```

service

```ts
import { Injectable } from '@nestjs/common';
import * as OSS from 'ali-oss';

@Injectable()
export class OssStaticService {
  private client: any;
  constructor() {
    this.client = new OSS({
      region: process.env.OSS_REGION,
      accessKeyId:  process.env.OSS_ACCESS_KEY_ID,
      accessKeySecret:  process.env.OSS_ACCESS_KEY_SECRET,
      bucket:  process.env.OSS_STATIC_BUCKET,
    });
  }
  public async uploadFile(
    ossPath: string,
    localPath: any,
    size: number,
  ): Promise<string> {
    if (size > 5 * 1024 * 1024) {
      return await this.resumeUpload(ossPath, localPath);
    } else {
      return await this.upload(ossPath, localPath);
    }
  }
  // oss put上传文件
  private async upload(ossPath: string, localPath: string): Promise<string> {
    const res = await this.client.put(ossPath, localPath);
    // 将文件设置为公共可读
    return res.url;
  }

  // oss 断点上传
  private async resumeUpload(
    ossPath: string,
    localPath: string,
  ): Promise<string> {
    let checkPoint: number = 0;
    let res = await this.client.multipartUpload(ossPath, localPath, {
      checkPoint,
      progress: (percent: number, cpt: any) => {
        checkPoint = cpt;
      },
    });
    const url = res.res.requestUrls[0].split('?')[0];
    return url;
  }

  // 获取文件的url
  public async getFileSignatureUrl(filePath: string): Promise<string> {
    if (!filePath) {
      return null;
    }
    const result = await this.client.signatureUrl(filePath, { expires: 36000 });
    return result;
  }

  // 判断文件是否存在
  public async existObject(ossPath: string): Promise<boolean> {
    try {
      const result = await this.client.get(ossPath);
      if (result.res.status === 200) {
        return true;
      }
    } catch (err) {
      if (err.code === 'NoSuchKey') {
        return false;
      }
    }
  }
}

```



ant design通过后端上传文件

```js
import { flushSync } from "react-dom";

// 错误赋值
setFileList(newFileList)

// 正确赋值
flushSync(() => setFileList(newFileList)); // 防止某个文件一直转圈
```





antd 上传多个文件某文件一直加载



```ts
import Mousetrap from "mousetrap";

export function useKeyboard() {
  const [, setVisible] = useRecoilState(GlobalUserOpenState);
  const [, setOpen] = useRecoilState(GlobalDocSerachOpen);
  const [, setGlobalDocSearchOptions] = useRecoilState(GlobalDocSearchOptions);
  const [, setGlobalDocSerachCustomColumns] = useRecoilState(GlobalDocSerachCustomColumns);
  const [, setOpenSearch] = useRecoilState(GlobalSearchOpenState); // 全局搜索

  // 监听快捷键
  useEffect(() => {
    // 全局用户搜索
    Mousetrap.bind("u", function () {
      setVisible((value: boolean) => !value);
    });

    // 全局文档搜索
    Mousetrap.bind("s", function () {
      setOpen((value: boolean) => !value);
      setGlobalDocSerachCustomColumns(() => []);
      setGlobalDocSearchOptions(() => undefined);
    });

    // 大搜
    Mousetrap.bind(["command+k", "ctrl+k"], function () {
      setOpenSearch(true);
    });
  });
}

```



一个全局快捷键的hook

拖拽

```tsx
import { getOssPolicy } from "@/services";
import { InboxOutlined } from "@ant-design/icons";
import { uuidv4 } from "uuid";
import { UploadFile, UploadProps } from "antd";
import Dragger from "antd/lib/upload/Dragger";
import _ from "lodash";
import { useEffect, useState } from "react";
import { useQuery } from "react-query";

type Props = {
  value?: Array<string>;
  onChange?: (value: Array<string>) => void;
};

export default function UploadImage({ value, onChange }: Props) {
  // 文件列表
  const [fileList, setFileList] = useState<UploadFile[]>([]);

  // 获取oss信息
  const { data: ossPolicy } = useQuery(getOssPolicy.name, () => {
    return getOssPolicy({
      path: "upload/",
      bucked_host: "https://dajxstatic.oss-cn-beijing.aliyuncs.com",
    });
  });

  // 初始化文件列表
  useEffect(() => {
    const initList: any = _.map(value, (item) => ({ url: item, id: item }));
    setFileList(initList);
  }, []);

  // 文件列表改变时，改变表单数据，改变文件列表
  const handleChange: UploadProps["onChange"] = ({ file, fileList: newFileList }) => {
    setFileList(newFileList);
    if (_.every(newFileList, (item) => item.status === "done")) {
      const imgs = _.map(fileList, (i: any) =>
        i.fileName ? `https://static.daanjiexi.com/upload/${i.fileName}` : i.name
      );
      onChange?.(imgs);
    }
  };
  return (
    <div>
      <Dragger
        action={ossPolicy?.host}
        name="file"
        key="Image-Upload"
        accept="image/png, image/jpeg"
        listType="picture-card"
        fileList={fileList}
        multiple={true}
        showUploadList={true}
        onChange={handleChange}
        data={(file) => {
          file.fileName = `${uuidv4()}.${file.name.split(".").pop()}`;
          return {
            key: `upload/${file.fileName}`,
            policy: ossPolicy.policy,
            signature: ossPolicy.signature,
            OSSAccessKeyId: ossPolicy.accessid,
            success_action_status: "200",
          };
        }}
      >
        <p className="ant-upload-drag-icon">
          <InboxOutlined />
        </p>
        <p className="ant-upload-text">点击或者拖拽文件来添加图片</p>
      </Dragger>
    </div>
  );
}
```

使用

```tsxÏ
<UploadImage
  value={showImgList}
  onChange={(value: string[]) => {
    if (!value) return;
    console.log("newvalue", value);
    setShowImgList(value);
  }}
/>
```

粘贴图片

```tsx
  useEffect(() => {
    const handPaste = async (event: any) => {
      const items = (event.clipboardData || event.originalEvent.clipboardData).items;
      const imgs = _.filter(items, (item) => item.type.indexOf("image") !== -1);
      const imgUrls = _.map(imgs, async (item) => {
        const fromData = new FormData();
        fromData.append("file", item.getAsFile());
        return uploadStaticOss(fromData).then((res) => res.value);
      });
      const urls = await Promise.all(imgUrls);
      setShowImgList((prev) => {
        return [...prev, ...urls];
      });
      toggleShowImg(true);
    };
    document.addEventListener("paste", handPaste);
    return () => {
      document.removeEventListener("paste", handPaste);
    };
  }, []);
```

点击上传，和拖拽基本一致，改下antd组件类型即可

```tsx
import { getOssPolicy } from "@/services";
import { InboxOutlined, PlusOutlined } from "@ant-design/icons";
import { uuidv4 } from "amis";
import { Upload, UploadFile, UploadProps } from "antd";
import Dragger from "antd/lib/upload/Dragger";
import _ from "lodash";
import { useEffect, useState } from "react";
import { useQuery } from "react-query";

type Props = {
  value?: Array<string>;
  onChange?: (value: Array<string>) => void;
};

export default function UploadImage({ value, onChange }: Props) {
  // 文件列表
  const [fileList, setFileList] = useState<UploadFile[]>([]);

  // 获取oss信息
  const { data: ossPolicy } = useQuery(getOssPolicy.name, () => {
    return getOssPolicy({
      path: "upload/",
      bucked_host: "https://dajxstatic.oss-cn-beijing.aliyuncs.com",
    });
  });

  // 初始化文件列表
  useEffect(() => {
    const initList: any = _.map(value, (item) => ({ url: item, id: item }));
    setFileList(initList);
  }, [value]);

  // 文件列表改变时，改变表单数据，改变文件列表
  const handleChange: UploadProps["onChange"] = ({ file, fileList: newFileList }) => {
    setFileList(newFileList);
    if (_.every(newFileList, (item) => item.status === "done")) {
      const imgs = _.map(fileList, (i: any) =>
        i.fileName ? `https://static.daanjiexi.com/upload/${i.fileName}` : i.name
      );
      onChange?.(imgs);
    }
  };
  return (
    <div>
      <Upload
        action={ossPolicy?.host}
        name="file"
        key="Image-Upload"
        accept="image/png, image/jpeg"
        listType="picture-card"
        fileList={fileList}
        multiple={true}
        showUploadList={true}
        onChange={handleChange}
        data={(file) => {
          file.fileName = `${uuidv4()}.${file.name.split(".").pop()}`;
          return {
            key: `upload/${file.fileName}`,
            policy: ossPolicy.policy,
            signature: ossPolicy.signature,
            OSSAccessKeyId: ossPolicy.accessid,
            success_action_status: "200",
          };
        }}
      >
        <div className="text-2xl">
          <PlusOutlined />
        </div>
      </Upload>
    </div>
  );
}
```



antd 封装拖拽上传图片组件+粘贴自动上传

例子1:

```react
const [key, setKey] = useState("");
const [t, setT] = useState(0);

const emptySearch = useMemo(() => {
  return !(t || key || startTime || endTime || qryUserId);
}, [t, key, startTime, endTime, qryUserId]);

useQuery({
  queryKey: [startTime, endTime, msgType, qryUserId, t],
  queryFn: () =>
    emptySearch
      ? []
      : getHistoryMessages({
          chat_id: curChatId,
          key,
          start_time: startTime,
          end_time: endTime,
          msg_type: msgType,
          qry_user_id: qryUserId,
        }),
  onSuccess: (res) => {
    setMsgData(res);
  },
});

const debouncedSearch = useCallback(
  _.debounce((value: string) => {
    value.trim() ? setT(new Date().getTime()) : setT(0);
  }, 500),
  []
);

<Input
  allowClear
  size="small"
  placeholder="搜索"
  prefix={<SearchOutlined />}
  className="rounded-md text-sm"
  value={key}
  onChange={(e) => {
    setKey(e.target.value);
    debouncedSearch(e.target.value);
  }}
/>
```

例子2:

```tsx
  const debouncedInitChatSolveList = useCallback(
    _.debounce((params) => {
      initChatSolveList(params);
    }, 500),
    []
  );

  // 如果过滤条件发生变化，且当前列表为已完成，则重新拉取列表
  useEffect(() => {
    if (chatListStatus === CHAT_STATUS.SOLVED) {
      setChatListLoading(true);
      debouncedInitChatSolveList({
        status: CHAT_STATUS.SOLVED,
        key: curChatWhere.text,
        mine: curChatWhere.mine,
        page_index: curChatWhere.page_index,
      });
      setChatListLoading(false);
    }
  }, [curChatWhere]);
```



react hook配合lodash实现防抖搜索

VirtualTable.tsx

```tsx
import { TableProps } from "antd";
import { Table } from "antd";
import classNames from "classnames";
import _ from "lodash";
import ResizeObserver from "rc-resize-observer";
import React, { ReactNode, useEffect, useRef, useState } from "react";
import { VariableSizeGrid as Grid } from "react-window";
type Props = {
  columns: any;
  dataSource: any[];
  scroll: Record<string, any>;
  loading?: boolean;
  tableTitle: () => ReactNode;
};
export const VirtualTable = (props: Props) => {
  const { columns, scroll, tableTitle, loading } = props;

  const [tableWidth, setTableWidth] = useState(0);

  const mergedColumns: any = columns!.map((column: any) => {
    if (column.width) {
      return column;
    }
    return {
      ...column,
      width: 200,
    };
  });

  const gridRef = useRef<any>();
  const [connectObject] = useState<any>(() => {
    const obj = {};
    Object.defineProperty(obj, "scrollLeft", {
      get: () => {
        if (gridRef.current) {
          return gridRef.current?.state?.scrollLeft;
        }
        return null;
      },
      set: (scrollLeft: number) => {
        if (gridRef.current) {
          gridRef.current.scrollTo({ scrollLeft });
        }
      },
    });

    return obj;
  });

  const resetVirtualGrid = () => {
    gridRef.current?.resetAfterIndices({
      columnIndex: 0,
      shouldForceUpdate: true,
    });
  };

  useEffect(() => resetVirtualGrid, [tableWidth]);

  const renderVirtualList: any = (rawData: object[], { scrollbarSize, ref, onScroll }: any) => {
    ref.current = connectObject;
    const totalHeight = rawData.length * 54;

    return (
      <Grid
        ref={gridRef}
        className="virtual-grid"
        columnCount={mergedColumns.length}
        columnWidth={(index: number) => {
          const { width } = mergedColumns[index];
          return totalHeight > (scroll?.y as number) && index === mergedColumns.length - 1
            ? (width as number) - scrollbarSize - 1
            : (width as number);
        }}
        height={scroll!.y as number}
        rowCount={rawData.length}
        rowHeight={() => 54}
        width={tableWidth}
        onScroll={({ scrollLeft }: { scrollLeft: number }) => {
          onScroll({ scrollLeft });
        }}
      >
        {({ columnIndex, rowIndex, style }: { columnIndex: number; rowIndex: number; style: React.CSSProperties }) => (
          <div
            className={classNames("virtual-table-cell p-2 box-border", {
              "virtual-table-cell-last": columnIndex === mergedColumns.length - 1,
            })}
            style={{
              ...style,
            }}
          >
            {mergedColumns[columnIndex].render
              ? mergedColumns[columnIndex].render(
                  (rawData[rowIndex] as any)[(mergedColumns as any)[columnIndex].dataIndex],
                  rawData[rowIndex]
                )
              : (rawData[rowIndex] as any)[(mergedColumns as any)[columnIndex].dataIndex]}
          </div>
        )}
      </Grid>
    );
  };
  return (
    <ResizeObserver
      onResize={({ width }) => {
        setTableWidth(width);
      }}
    >
      <Table
        {...props}
        className="virtual-table"
        columns={mergedColumns}
        pagination={false}
        loading={loading}
        components={{
          body: renderVirtualList,
        }}
        title={tableTitle}
      />
    </ResizeObserver>
  );
};
```

使用

```tsx
      <VirtualTable
        columns={columns}
        dataSource={list}
        scroll={{ y: document.body.clientHeight - 310, x: 2000 }}
        loading={isLoading}
        tableTitle={() => (
          <div className="flex justify-between w-full">
            <Pagination
              current={page}
              size="small"
              total={data?.total}
              showTotal={(total) => `共 ${total} 条`}
              pageSize={10000}
              showQuickJumper
              onChange={(page) => setPage(page)}
            />
            <div className="flex-auto flex justify-end items-center">
              <Button className="mr-2" type="primary" onClick={toggleCreateOpen}>
                新增数据
              </Button>
              <Input.Search
                placeholder="搜索当页数据"
                className="mr-1 w-48"
                allowClear
                onChange={_.debounce((e) => setKeywords(e.target.value), 300)}
              />
            </div>
          </div>
        )}
      />
```



react通过react-window实现虚拟列表

JSON.stringify 不保存换行符

```js
JSON.stringify(list, null, 2);
```

将 `JSON.stringify` 第二个参数设置为 `null`，表示不添加任何间距，而将第三个参数设置为 数字 或 `" "`，表示缩进使用一个空格。由于第三个参数是空字符串，因此不会添加分隔符，也就不会有换行符出现在生成的 JSON 字符串中。


JSON.stringify 不保存换行符

Ant Design 在多层弹窗中使用下拉菜单组件选择框层级出现问题，解决方案。

```tsx
<DatePicker getPopupContainer={(node) => node.parentNode} />
```

`getPopupContainer={(node) => node.parentNode} `这段代码的意义就是让选择器的层级基于当前父节点。


处理在多层弹窗中下拉菜单组件产生的层级问题（Ant Design）

由于获取获取选项列表的接口对返回数据的长度加了限制，所以有了在搜索下拉框添加搜索功能的需求，这里记录一下封装搜索组件的过程。

下拉框组件：

```tsx
import { getProductList } from "@/services/product";
import { Select } from "antd";
import _ from "lodash";
import { useState } from "react";
import { useQuery } from "react-query";

type Props = {
  value?: number;
  onChange?: (value: number) => void;
};

export default function SearchProduct({ value, onChange }: Props) {
  const [productName, setProductName] = useState(""); // 产品列表
  // 获取物品列表
  const { data: productOptions } = useQuery({
    queryKey: [getProductList.name, productName],
    queryFn: async () => {
      const data = await getProductList({ productName });
      const res = _.map(data?.list, (item) => ({ value: item.id, label: item.productName }));
      return res;
    },
  });

  // 搜索物品
  const searchProduct = _.debounce((value) => {
    setProductName(value);
  }, 300);
  return (
    <Select
      showSearch
      placeholder="请选择物品"
      options={productOptions}
      onSearch={searchProduct}
      defaultActiveFirstOption={false}
      showArrow={false}
      filterOption={false}
      onChange={onChange}
      value={value}
    />
  );
}
```

使用：

```tsx

<Form labelCol={{ span: 4 }} form={form} onFinish={onSubmit}>
  <Form.Item label="物品" name="productId">
    <SearchProduct />
  </Form.Item>
</Form>
```

需要注意的是，form-item的子组件会默认携带上value和onChange事件，所以直接自定义组件控制好这两个属性就可以实现对外层form的双向数据绑定。


基于 ant design 封装一个可搜索的select组件

```tsx
import { Button, Drawer, message, Modal, Pagination, Switch, Table, Image, RowProps } from "antd";
import dayjs from "dayjs";
import _ from "lodash";
import React, { useMemo, useState } from "react";
import { useMutation, useQuery } from "react-query";
import type { ColumnsType, TableProps } from "antd/es/table";
import CreateVideo from "./CreateVideo";
import { delVideo, editVideo, getVideoList, sortVideo } from "@/services/course";
import type { DragEndEvent } from "@dnd-kit/core";
import { DndContext } from "@dnd-kit/core";
import { CSS } from "@dnd-kit/utilities";
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
import { MenuOutlined } from "@ant-design/icons";

type Prop = {
  open: boolean;
  courseId?: number;
  onClose: () => void;
};

export default function Video({ courseId, open, onClose }: Prop) {
  const [page, setPage] = useState(1);
  const [size, setSize] = useState(50);
  const [sort, setSort] = useState("");
  const [sortStatus, setSortStatus] = useState("");

  // 视频列表
  const [videoList, setVideoList] = useState<any>([]);
  const { data, isLoading, refetch } = useQuery({
    queryKey: [getVideoList.name, page, size, sort, sortStatus, courseId],
    queryFn: () => {
      if (open) {
        return getVideoList({ page, size, sort, sortStatus, courseId: courseId });
      }
    },
    onSuccess: (data) => {
      setVideoList(data?.list || []);
    },
  });

  // table 列配置
  const columns = useMemo(
    () =>
      [
        {
          key: "sort",
        },
        {
          title: "ID",
          dataIndex: "id",
        },
        {
          title: "视频名称",
          dataIndex: "name",
        },
        {
          title: "视频链接",
          dataIndex: "url",
        },
        {
          title: "封面",
          dataIndex: "cover",
          render: (value) => <>{value ? <Image width={40} height={40} src={value} alt="" /> : ""}</>,
        },
        {
          title: "是否免费",
          dataIndex: "isFree",
          render: (value) => <span>{value === 1 ? "免费" : "收费"}</span>,
        },
        {
          title: "金额(¥)",
          sorter: true,
          dataIndex: "price",
        },
        {
          title: "章节",
          dataIndex: "chapter",
        },
        {
          title: "播放次数",
          sorter: true,
          dataIndex: "views",
        },
        {
          title: "创建时间",
          dataIndex: "createdAt",
          sorter: true,
          render: (value) => <span>{dayjs(value).format("YYYY-MM-DD HH:mm:ss")}</span>,
        },
        {
          title: "操作",
          dataIndex: "action",
          render: (value, record) => (
            <>
              <Button
                size="small"
                type="link"
                onClick={() => {
                  setCurId(record.id);
                  setOpenDrawer(true);
                }}
              >
                编辑
              </Button>
              <Button size="small" type="link" danger onClick={() => handleRemoveVideo(record)}>
                删除
              </Button>
            </>
          ),
        },
      ] as ColumnsType<Video>,
    []
  );
  // table change事件
  const onChange: TableProps<any>["onChange"] = (pagination, filters, sorter: any, extra) => {
    if (sorter.order) {
      setSort(sorter.field);
      setSortStatus(sorter.order === "ascend" ? "ASC" : "DESC");
    } else {
      setSort("");
      setSortStatus("");
    }
  };

  // 删除视频
  const { mutate: remove, isLoading: removeLoading } = useMutation({
    mutationFn: (id: number) => delVideo(id),
    onSuccess: () => {
      if (data && data?.total - 1 <= (page - 1) * size) {
        if (page > 1) {
          setPage(page - 1);
        }
      }
      refetch();
      message.success("删除成功");
    },
  });
  // 删除提示框
  const handleRemoveVideo = (video: Video) => {
    Modal.confirm({
      title: "提示",
      content: `确定要删除此条数据吗？`,
      okButtonProps: {
        loading: removeLoading,
      },
      onOk: async () => {
        await remove(video.id);
      },
    });
  };

  // 修改视频排序
  const { mutate: sortVideoList } = useMutation({
    mutationFn: (sortList: Array<{ id: number; sort: number }>) => sortVideo(sortList),
    onSuccess: () => {
      refetch();
    },
  });

  // 拖拽
  const onDragEnd = ({ active, over }: DragEndEvent) => {
    if (active.id !== over?.id) {
      setVideoList((previous: any) => {
        const activeIndex = previous.findIndex((i: any) => i.id === active.id);
        const overIndex = previous.findIndex((i: any) => i.id === over?.id);
        const newArray = arrayMove(previous, activeIndex, overIndex);
        const updateSort = _.map(newArray, (item: any, i: number) => ({ id: item.id, sort: i + 1 }));
        sortVideoList(updateSort);
        return arrayMove(previous, activeIndex, overIndex);
      });
    }
  };

  // 行元素
  const Row = ({ children, ...props }: any) => {
    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
      id: props["data-row-key"],
    });

    const style: React.CSSProperties = {
      ...props.style,
      transform: CSS.Transform.toString(transform && { ...transform, scaleY: 1 })?.replace(
        /translate3d\(([^,]+),/,
        "translate3d(0,"
      ),
      transition,
      ...(isDragging ? { position: "relative", zIndex: 9999 } : {}),
    };

    return (
      <tr {...props} ref={setNodeRef} style={style} {...attributes}>
        {React.Children.map(children, (child) => {
          if ((child as React.ReactElement).key === "sort") {
            return React.cloneElement(child as React.ReactElement, {
              children: (
                <MenuOutlined
                  ref={setActivatorNodeRef}
                  style={{ touchAction: "none", cursor: "move" }}
                  {...listeners}
                />
              ),
            });
          }
          return child;
        })}
      </tr>
    );
  };
  // 当前选中视频
  const [curId, setCurId] = useState<number>();
  // 抽屉开关
  const [openDrawer, setOpenDrawer] = useState(false);
  // 关闭抽屉
  const closeDrawer = () => {
    setCurId(undefined);
    setOpenDrawer(false);
    refetch();
  };
  return (
    <Drawer open={open} title="视频列表" width={1300} zIndex={900} onClose={onClose}>
      <DndContext onDragEnd={onDragEnd}>
        <SortableContext items={videoList.map((i: any) => i.id)} strategy={verticalListSortingStrategy}>
          <Table
            rowKey="id"
            size="middle"
            pagination={false}
            columns={columns}
            components={{
              body: {
                row: Row,
              },
            }}
            dataSource={videoList}
            loading={isLoading}
            onChange={onChange}
            title={() => (
              <div className="flex justify-between w-full">
                <div>
                  <Pagination
                    showSizeChanger
                    showQuickJumper
                    size="small"
                    total={data?.total}
                    current={page}
                    pageSize={size}
                    showTotal={(total) => `共 ${total} 条`}
                    onShowSizeChange={(current, size) => {
                      setPage(current);
                      setSize(size);
                    }}
                    onChange={(page, size) => {
                      setPage(page);
                    }}
                  />
                </div>
                <div>
                  <Button type="primary" onClick={() => setOpenDrawer(true)}>
                    新增视频
                  </Button>
                </div>
              </div>
            )}
          />
        </SortableContext>
      </DndContext>
      <CreateVideo open={openDrawer} editId={curId} courseId={courseId} onClose={closeDrawer} />
    </Drawer>
  );
}

```

后端service

```ts
  // 视频列表排序
  async sort(sortList: Array<{ id: number; sort: number }>) {
    const ids = _.map(sortList, (i) => i.id).join(',');
    const updateCases = _.map(
      sortList,
      (i) => `WHEN ${i.id} THEN '${i.sort}'`,
    ).join(' ');
    const sql = `UPDATE tp_course_video SET sort = CASE id ${updateCases} END WHERE id IN (${ids})`;
    await this.datasource.manager.transaction(async (transaction) => {
      await transaction.query(sql);
    });
    return null;
  }
```



mysql 批量更新单个字段的多个值

```sql
UPDATE categories 
    SET display_order = CASE id 
        WHEN 1 THEN 3 
        WHEN 2 THEN 4 
        WHEN 3 THEN 5 
    END
WHERE id IN (1,2,3)
```

上面这段SQL是批量更新display_order字段，id为1则改为3，id为2则改为4，以此类推。

要更新多个字段时，只需要稍加修改：

```sql
UPDATE categories 
    SET display_order = CASE id 
        WHEN 1 THEN 3 
        WHEN 2 THEN 4 
        WHEN 3 THEN 5 
    END, 
    title = CASE id 
        WHEN 1 THEN 'New Title 1'
        WHEN 2 THEN 'New Title 2'
        WHEN 3 THEN 'New Title 3'
    END
WHERE id IN (1,2,3)
```



教你如何拿下 ant design 拖拽表格

今天接到一个需要播放视频的需求，公司采用了阿里云视频点播的方案。准确的说是阿里云视频点播中的“web播放器”。

当时心想，不就是调用一下API吗，so easy～当真正开发起来之后，果然不出意外的打脸了。

传送门：[官方文档](https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.125547.0.0.453d6515OGF7Wz)

官方文档的介绍可以说是“相当简洁”，再加上全是原生js的示例，一时间我竟不知该如何入手。

当我看完这份“一览无余”的文档后，我开始动手了～

# 引入

首先根据官方文档将播放器接入

首先是引入Web播放器SDK，这里我使用的是`npm方式引入`。

- 安装npm包。

```undefined
npm i aliyun-aliplayer
```

- 导出aliplayer和样式。

```javascript
//导出aliplayer
import 'aliyun-aliplayer'
// 导出样式
import 'aliyun-aliplayer/dist/skins/default/aliplayer-min.css'
```

然后将元素挂载到页面，元素放在哪里都可以，保证能获取到即可。

```html
<div id="J_prismPlayer"></div>
```

# 踩坑+爬坑

当完成前两步后，只剩下实例化播放器。当我认为会一切顺利的时候，爬坑之旅开始了。

我司采用的是“VID+PlayAuth播放”方式，其他播放方式大致相同，就不在此多做介绍了。

下面是官方文档的示例：

```jsx
var player = new Aliplayer({
           id: 'J_prismPlayer',
           width: '100%',
           vid : '<your video ID>',//必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
           playauth : '<your PlayAuth>',//必选参数。音视频播放凭证。
         },function(player){
           console.log('The player is created.')
        });
```

在我跟这段代码深入交流一番后，得到结论：创建实例时必须传递正确的`vid`和`playauth`，传空值或者错误值都不行。都会展示类似下图所示的内容。

![image-20230518175533915](/Users/mac/Library/Application Support/typora-user-images/image-20230518175533915.png)

在我略加思索后，得出了如下代码：

```tsx
// 播放器
const [player, setPlayer] = useState<any>(null);
// 当前播放视频
const [curPlayVideo, setCurPlayVideo] = useState<any>(null);
// 初始化播放器
useEffect(()=>{
  if(!curPlayVideo) return; // 如果播放视频不存在，不创建实例
  var instance = new Aliplayer({
             id: 'J_prismPlayer',
             width: '100%',
             vid : curPlayVideo.vid,
             playauth : curPlayVideo.playauth,
           });
  setPlayer(instance);
},[curPlayVideo])
```

这里通过监听`curPalyVideo`对象，对播放器进行实例化。

当程序设置`curPlayVideo` 对象后，播放器进行实例化，代码运行正常。效果如下图所示。

![image-20230518180025078](/Users/mac/Library/Application Support/typora-user-images/image-20230518180025078.png)

但是凭我多年的爬坑经验告诉我，事情绝不会这么简单。

我化身测试一通乱点，果然发现了问题：每点击一个视频进行播放时，都会创建一个视频播放的实例。

这会导致播放器出现各种问题，比如多个视频重叠、暂停按钮无效等。效果如下图所示。

![image-20230519095118433](/Users/mac/Library/Application Support/typora-user-images/image-20230519095118433.png)

鲁迅曾经说过：发现问题就等于问题解决了一半。

相信各位读者老爷也能看出来，解决这个问题的核心就是让视频播放器只存在一个实例。

我这里有两种实现思路：

第一种：只创建一个实例，通过操作该实例的`vid`和`playauth`参数，实现视频的切换。

第二种：保持只存在一个实例，当创建实例时，将之前已存在的实例进行销毁，实现视频的切换。



刚开始我采用了第一种方案进行实现，通过翻阅官方文档，我找到了下面这个方法。

![image-20230518182409476](/Users/mac/Library/Application Support/typora-user-images/image-20230518182409476.png)

使用播放器实例调用此方法。

```js
player.replayByVidAndPlayAuth(vedio?.vid, vedio?.playauth)
```

结果浏览器报错，找不到这个方法。

自认为使用方法并没有问题，所以第一种实现思路就被我pass了，如果有大佬对这方面有了解，再次感谢指正！



最终我采用了第二种实现思路：每当创建一个播放器实例，就把之前存在的实例销毁。

代码最终效果如下：

```tsx
// 播放器
const [player, setPlayer] = useState<any>(null);
// 当前播放视频
const [curPlayVideo, setCurPlayVideo] = useState<any>(null);
// 初始化播放器
useEffect(()=>{
  if(!curPlayVideo) return; // 如果播放视频不存在，不创建实例
  var instance = new Aliplayer({
             id: 'J_prismPlayer',
             width: '100%',
             vid : curPlayVideo.vid,
             playauth : curPlayVideo.playauth,
           });
  setPlayer(instance);
  return () => {
    instance.dispose(); // 销毁实例
  }
},[curPlayVideo])
```

当用户改变`curPlayVideo`对象时，程序会先将已存在的实例销毁，然后重新创建新的实例。

经过我严谨的测试后，程序运行一切正常。效果如下图所示。

![image-20230519094845006](/Users/mac/Library/Application Support/typora-user-images/image-20230519094845006.png)

# 代码优化

当我以为万事大吉的时候，又出现问题啦！😭

在 web 端来看，代码一切正常，但是在 appCloud 中使用时，出现一些了bug。

在 appCloud 中，当视频全屏，然后还原后。播放器会直接销毁然后重新创建，之前的观看进度也不会保留。

经过分析后得出结论，这是 appCloud 本身产生的问题，当视频全屏切换时，h5 页面会重新加载，进而导致播放器销毁然后重新创建。

这里针对这个特殊情况进行优化：对实例进行判断，如果实例已存在，则不创建实例。不再对播放器进行销毁。

另外发现在某些场景下视频播放会自动进入全屏模块，需要设置一下播放器类型。这部分内容参考了 CSDN的[某篇文章](https://blog.csdn.net/u010214074/article/details/115959319)

最终版代码如下：

```tsx
// 播放器
const [player, setPlayer] = useState<any>(null);
// 当前播放视频
const [curPlayVideo, setCurPlayVideo] = useState<any>(null);
// 初始化播放器
useEffect(()=>{
  if(!curPlayVideo) return; // 如果播放视频不存在，不创建实例
  if (player) { // 如果实例已存在，不创建实例
    player.replayByVidAndPlayAuth(
      curPlayVideo?.play_info?.vid,
      curPlayVideo?.play_info?.playauth
    );
    return;
  }
  var instance = new Aliplayer({
             id: 'J_prismPlayer',
             width: '100%',
             vid : curPlayVideo.vid,
             playauth : curPlayVideo.playauth,
           },
           function (instance: any) {
              instance.on("ready", () => {
                const ua = navigator.userAgent.toLocaleLowerCase();
                const video = document.querySelector("video");
                if (!video) return;
                // x5内核
                if (
                  ua.match(/tencenttraveler/) != null ||
                  ua.match(/qqbrowse/) != null
                ) {
                  video.removeAttribute("x5-playsinline"); // x5内核 启用同层H5播放器（会有黑屏缓冲问题）
                  video.setAttribute("x5-video-player-type", "h5-page");
                } else {
                  // ios端
                  video.setAttribute("webkit-playsinline", true);
                  video.setAttribute("playsinline", true);
                }
              });
      });
  setPlayer(instance);
},[curPlayVideo])
```

# 扩展

在我的不懈努力下，视频已经可以正常的切换和播放了。

但是一个成熟的播放器只能播放视频是不够的，还应该有各种配置。

幸运的是，aliplayer已经为我们考虑到了很多场景。

具体的配置项都在这里面：[播放器接口说明](https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.125572.0.0.1faf5398bR8fdV)

通过对这些属性、方法和事件的处理，完全可以实现个性化配置的播放器，相信各位观众老爷都是有这个实力的，我就不在这废话了。

# 总结

踩坑之时无人为我指路，爬坑之后得此文章，希望能帮助到有需要的人。


看我如何在 React 中使用 aliPlayer

简单来说需要在组件初始化的时候，将数据转为特定的时间类型。

有一点需要注意。

如果用的是ant design 4.x 的版本，需要使用 moment 进行格式转换。

如果使用的是 ant design 5.x 的版本，则需要使用 dayjs 进行格式转换。

处理 ant design中 DatePicker 组件数据不回填的问题

# 前言

今天接到一个需求，要求随着页面向下滚动，上方的搜索组件背景颜色从透明逐渐转为白色。

具体的实现思路就是通过监听页面元素的滚动高度，让搜索组件的透明度随之变化。

但是实现后发现过渡效果有很明显的卡顿感，本文将介绍此问题的解决方法。

# 解决方法
搜索组件，这里主要就是控制背景颜色的透明度。

```react
<div
	style={{
        background: `rgba(255,255,255,${opacity})`
  	}}
  > ... </div>
```

优化前的逻辑，渐变效果有很明显的卡顿。

```react
// 顶部搜索透明度0-1
const [opacity, setOpacity] = useState(0)
// 监听滚动事件
useEffect(() => {
    document.addEventListener('scroll', () => {
      setOpacity(opacity => window.scrollY / 70)
    })
}, [])
```

优化后的逻辑，渐变效果非常顺滑。

```react
// 顶部搜索透明度0-1
const [opacity, setOpacity] = useState(0)
// 页面滚动
const handleScroll = () => {
	setOpacity(window.scrollY / 70)
};
// 添加监听事件
useEffect(() => {
	document.addEventListener('scroll', () => handleScroll());
	return () => document.removeEventListener('scroll', handleScroll);
}, []);
```

排查后发现，每次加载这个页面时都会给 `document` 添加滚动事件。导致的结果就是随着页面加载次数的增多，效果也变得越来越卡。

解决方法就是给 `useEffect` 添加一个清除函数，这样每次重新加载页面时，会把之前的滚动事件清除掉，再重新进行事件的添加。

这样就能保证页面始终都只有一个滚动监听事件，问题也随之解决。

react 处理滚动事件更新UI卡顿的问题

# Promise规范
Promise是一套专门处理异步场景的规范，它能有效的避免回调地域的产生，使异步代码更加清晰、简洁、统一。

这套规范最早诞生于前端社区，规范名称为 Promise A+

该规范出现后，立即得到了很多开发者的响应。

Promise A+规定：

1. 所有的异步场景，都可以看作是一个异步任务，在JS中应该表现为一个对象，该对象称为**Promise对象**，也叫做任务对象。

![](https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220904184507075.png)

2. 每个任务对象，都应该有两个阶段、三个状态

![](https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220904185042143.png)

3. `挂起->完成`，称为 *resolve*,`挂起->失败`称之为 *reject*。任务完成时，可以有一个相关数据；任务失败时，可能有一个失败原因；

![](https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220904190338797.png)

4. 可以针对任务进行后续处理，针对完成状态的后续处理称之为*onFulfilled*，针对失败的后续处理称之为*onRejected*。

![](https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220904191124320.png)

# Promise API

ES6提供了一套API，实现了Promise A+规范。

基本使用如下：

```js
const promise = new Promise((resolve,reject)=>{
	//成功
	resolve(data)
	//失败
	reject(reason)
})
promise.then((data)=>{
	//onFulfilled
},(reason)=>{
    //onRejected
})
```

**catch方法**

```js
.catch(onRejected) === .then(null,onRejected)
```

小案例：

```js
const pro = new Promise((resolve, reject) => {
  console.log("开始短跑");
  const duration = Math.floor(Math.random() * 3000);
  setTimeout(() => {
    if (Math.random() > 0.5) {
      console.log("短跑结束");
      resolve(duration);
    } else {
      reject("脚扭伤了");
    }
  }, duration);
});
pro.then(
  (data) => {
    console.log("成功", data);
  },
  (reason) => {
    console.log("失败", reason);
  }
);
```

# 链式调用

![](https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220905183035960.png)

1. then方法必定会返回一个新的Promise，可以理解为后续处理也是一个任务。
2. 新任务的状态取决于后续处理。
   - 若没有相关的后续处理，新任务的状态和前任务一致，数据为前任务的数据。
   - 说有后续处理但还未执行，新任务为挂起状态。
   - 若后续处理执行了，则根据后续处理的情况确定新任务的状态。
     - 后续处理执行无错，新任务的状态为完成，数据为后续处理的返回值。
     - 后续处理执行有错，新任务的状态为失败，数据为异常对象。
     - 后续执行后返回的是一个任务对象，新任务的状态和数据与该任务对象一致。

> 小知识：当.then里面不是一个函数时，可以把它当做.then(null)。
>
> .then(console.log)，会将数据传递给console.log()，也就是打印数据。

**常见任务处理代码**

```js
// 任务成功后，执行处理1，失败则执行处理2
pro.then(处理1).catch()

// 任务成功后，依次执行处理1、处理2
pro.then(处理1).then(处理2)

// 任务成功后，依次执行处理1、处理2，若任务失败或前面的处理有错误，执行处理3
pro.then(处理1).then(处理2).catch(处理3)
```

# Promise的静态方法

| 方法名                       | 含义                                                         |
| ---------------------------- | ------------------------------------------------------------ |
| Promise.resolve(data)        | 直接返回一个完成状态的任务                                   |
| Promise.reject(reason)       | 直接返回一个失败状态的任务                                   |
| Promise.all(任务数组)        | 返回一个任务<br />任务数组全部成功则成功<br />任何一个失败则失败 |
| Promise.any(任务数组)        | 返回一个任务<br />任务数组任一成功则成功<br />任务全部失败则失败 |
| Promise.allSettled(任务数组) | 返回一个任务<br />任务数组全部已决则成功<br />该任务不会失败 |
| Promise.race(任务数组)       | 返回一个任务<br />任务数组任一已决则已决，状态和其一致       |

练习：

```js
// 获取某一页的学生数据
function fetchStudents(page) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.1) {
        reject(new Error(`网络错误，获取第${page}页数据失败`));
        return;
      }
      const stus = new Array(10).fill(null).map((d, i) => ({
        id: `NO.${(page - 1) * 10 + i + 1}`,
        name: `姓名${(page - 1) * 10 + i + 1}`,
      }));
      resolve(stus);
    }, Math.floor(Math.random() * 3000));
  });
}

// 获取1-10页的学生，最终按照页码的顺序合并成一个数组，如果某些页码的数据获取失败，则提示错误
Promise.all(new Array(10).fill(null).map((it, i) => fetchStudents(i + 1)))
  .then((data) => {
    console.log(data.flat());
  })
  .catch((err) => {
    console.log(err);
  });
// 获取1-10页的学生，最终按照页码的顺序合并成一个数组，如果某些页码的数据获取失败，就不加入该数据即可
Promise.allSettled(
  new Array(10).fill(null).map((it, i) => fetchStudents(i + 1))
).then((data) => {
  data = data.filter((it) => it.status === "fulfilled").map((it) => it.value).flat();
  console.log(data);
});
// 获取1-10页的学生，打印最先获取到的数据，如果全部都获取失败，则打印所有的错误消息
Promise.any(new Array(10).fill(null).map((it, i) => fetchStudents(i + 1)))
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err.errors);
  });
// 获取1-10页的学生，输出最先得到的结果（有结果输出结果，有错误输出错误）
Promise.race(new Array(10).fill(null).map((it, i) => fetchStudents(i + 1)))
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  });
```

# async & await

**消除回调**

有了Promise，异步任务就有了统一的处理方式。

有了统一的处理方式，ES官方就可以对其进一步优化。

ES7推出了两个关键字 *asycn* 和 *await*，用于更加优雅的表达Promise。

**async**

async关键字用于修饰函数，被它修饰的函数，一定返回Promise。

```js
// function m() {
//   return new Promise((resolve) => {
//     resolve(123);
//   });
// }
async function m() {
  return 123;
}
async function n() {
  const data = null;
  data.toString();
}
console.log(m()); // fulfilled 123
console.log(n()); // rejected Error
```

**await**

*await* 关键字表示等待某个Promise完成，它必须用于 *async* 函数中。

```js
function delay(duration) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, duration);
  });
}

// delay(2000).then(() => {
//   console.log("执行");
// });
(async () => {
  await delay(2000);
  console.log("执行");
})();
```

*await* 也可以等待其他数据。

```js
async function method(){
    const n = await 1; //等同于 await Promise.resolve(1)
}
```

如果需要针对失败的任务进行处理，可以使用 *try-catch* 语法。

```js
(async () => {
  try {
    await delay(2000);
    console.log("执行");
  } catch (err) {
    console.log("失败", err);
  }
})();
```

案例：每隔一秒输出一个ok

```js
function delay(duration) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, duration);
  });
}
(async () => {
  for (let i = 0; i < 3; i++) {
    await delay(1000);
    console.log("ok");
  }
})();
```

# 总结
以上就是我对 Promise 相关知识的全部总结，欢迎路过的朋友留言讨论。

JavaScript详解 — Promise

# 前言
在前端开发过程中，不可避免的会遇到跨域的问题。这篇文章将详细介绍跨域以及解决方案。

网络请求需要符合同源策略，什么是同源策略？

`源 = 协议 + 主机 + 端口`，两个源相同，称之为同源，两个源不同，称之为 跨源 或 跨域。

解决跨域的方案有：代理、CORS、JSONP

# 代理

**适用场景：生产环境不发生跨域，但开发环境发生跨域**

对于前端开发而言，大部分的跨域问题，都是通过代理解决的

因此，只需要在开发环境使用代理解决跨域即可，这种代理又称之为开发代理

在实际开发中，只需要对开发服务器稍加配置即可完成

```js
// vite.config.js
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://81.70.9.51:8081',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

```

```js
// vue 的开发服务器代理配置
// vue.config.js
module.exports = {
  devServer: { // 配置开发服务器
    proxy: { // 配置代理
      "/api": { // 若请求路径以 /api 开头
        target: "http://dev.taobao.com", // 将其转发到 http://dev.taobao.com
      },
    },
  },
};
```

# CORS

`CORS`是基于`http1.1`的一种跨域解决方案，它的全称是**C**ross-**O**rigin **R**esource **S**haring，跨域资源共享。

它的总体思路是：**如果浏览器要跨域访问服务器的资源，需要获得服务器的允许**

<img src="https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20230105093402741.png" alt="image-20230105093402741" style="zoom:50%;" />

针对不同的请求，CORS 规定了三种不同的交互模式，分别是

- 简单请求
- 需要预检的请求
- 附带身份凭证的请求

## 简单请求

同时满足以下条件时，浏览器会认为它是一个简单请求：

1. 请求方式属于下面的一种：get、post、head
2. 请求头仅包含安全的字段，常见的安全字段如下：
   - Accept
   - Accept-Language
   - Content-Language
   - Content-Type
   - DPR
   - Download
   - Save-Data
   - Viewport-Width
   - Width
3. 请求头如果包含`Content-Type`，仅限下面的值之一：
   - `text/plain`
   - `multipart/form-data`
   - `application/x-www-form-urlencoded`

如果以上三个条件同时满足，浏览器判定为简单请求。

```js
// 简单请求
fetch('http://crossdomain.com/api/news');

// 请求方法不满足要求，不是简单请求
fetch('http://crossdomain.com/api/news', {
  method: 'PUT',
});

// 加入了额外的请求头，不是简单请求
fetch('http://crossdomain.com/api/news', {
  headers: {
    a: 1,
  },
});

// 简单请求
fetch('http://crossdomain.com/api/news', {
  method: 'post',
});

// content-type不满足要求，不是简单请求
fetch('http://crossdomain.com/api/news', {
  method: 'post',
  headers: {
    'content-type': 'application/json',
  },
});
```

**简单请求的交互**

当浏览器判定某个**ajax 跨域请求**是**简单请求**时，会发生以下的事情

1. **请求头中会自动添加`Origin`字段**

比如，在页面`http://my.com/index.html`中有以下代码造成了跨域

```js
// 简单请求
fetch('http://crossdomain.com/api/news');
```

请求发出后，请求头会是下面的格式：

```js
GET /api/news/ HTTP/1.1
Host: crossdomain.com
Connection: keep-alive
...
Referer: http://my.com/index.html
Origin: http://my.com
```

看到最后一行没，`Origin`字段会告诉服务器，是哪个源地址在跨域请求

1. **服务器响应头中应包含`Access-Control-Allow-Origin`**

当服务器收到请求后，如果允许该请求跨域访问，需要在响应头中添加`Access-Control-Allow-Origin`字段

该字段的值可以是：

- *：表示我很开放，什么人我都允许访问
- 具体的源：比如`http://my.com`，表示我就允许你访问

> 实际上，这两个值对于客户端`http://my.com`而言，都一样，因为客户端才不会管其他源服务器允不允许，就关心自己是否被允许
>
> 当然，服务器也可以维护一个可被允许的源列表，如果请求的`Origin`命中该列表，才响应`*`或具体的源
>
> **为了避免后续的麻烦，强烈推荐响应具体的源**

## 需要预检的请求

 简单的请求对服务器的威胁不大，所以允许使用上述的简单交互即可完成。

但是，如果浏览器不认为这是一种简单请求，就会按照下面的流程进行：

1. **浏览器发送预检请求，询问服务器是否允许**
2. **服务器允许**
3. **浏览器发送真实请求**
4. **服务器完成真实的响应**

比如，在页面`http://my.com/index.html`中有以下代码造成了跨域

```js
// 需要预检的请求
fetch('http://crossdomain.com/api/user', {
  method: 'POST', // post 请求
  headers: {
    // 设置请求头
    a: 1,
    b: 2,
    'content-type': 'application/json',
  },
  body: JSON.stringify({ name: 'alight', age: 18 }), // 设置请求体
});
```

浏览器发现它不是一个简单请求，则会按照下面的流程与服务器交互

1. **浏览器发送预检请求，询问服务器是否允许**

```
OPTIONS /api/user HTTP/1.1
Host: crossdomain.com
...
Origin: http://my.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: a, b, content-type
```

可以看出，这并非我们想要发出的真实请求，请求中不包含我们的请求头，也没有消息体。

这是一个预检请求，它的目的是询问服务器，是否允许后续的真实请求。

预检请求**没有请求体**，它包含了后续真实请求要做的事情

预检请求有以下特征：

- 请求方法为`OPTIONS`
- 没有请求体
- 请求头中包含
  - `Origin`：请求的源，和简单请求的含义一致
  - `Access-Control-Request-Method`：后续的真实请求将使用的请求方法
  - `Access-Control-Request-Headers`：后续的真实请求会改动的请求头

1. **服务器允许**

服务器收到预检请求后，可以检查预检请求中包含的信息，如果允许这样的请求，需要响应下面的消息格式

```
HTTP/1.1 200 OK
Date: Tue, 21 Apr 2020 08:03:35 GMT
...
Access-Control-Allow-Origin: http://my.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: a, b, content-type
Access-Control-Max-Age: 86400
...
```

对于预检请求，不需要响应任何的消息体，只需要在响应头中添加：

- `Access-Control-Allow-Origin`：和简单请求一样，表示允许的源
- `Access-Control-Allow-Methods`：表示允许的后续真实的请求方法
- `Access-Control-Allow-Headers`：表示允许改动的请求头
- `Access-Control-Max-Age`：告诉浏览器，多少秒内，对于同样的请求源、方法、头，都不需要再发送预检请求了

1. **浏览器发送真实请求**

预检被服务器允许后，浏览器就会发送真实请求了，上面的代码会发生下面的请求数据

```
POST /api/user HTTP/1.1
Host: crossdomain.com
Connection: keep-alive
...
Referer: http://my.com/index.html
Origin: http://my.com

{"name": "alight", "age": 18 }
```

1. **服务器响应真实请求**

```
HTTP/1.1 200 OK
Date: Tue, 21 Apr 2020 08:03:35 GMT
...
Access-Control-Allow-Origin: http://my.com
...

添加用户成功
```

可以看出，当完成预检之后，后续的处理与简单请求相同

整个交互过程：

<img src="https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20230105104525509.png" alt="image-20230105104525509" style="zoom: 80%;" />

## 附带身份凭证的请求

默认情况下，ajax 的跨域请求并不会附带 cookie，这样一来，某些需要权限的操作就无法进行

不过可以通过简单的配置就可以实现附带 cookie

```js
// xhr
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

// fetch api
fetch(url, {
  credentials: 'include',
});

// axios
const request = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 3000,
  withCredentials: true // 允许跨域携带cookie
});
```

这样一来，该跨域的 ajax 请求就是一个附带身份凭证的请求

当一个请求需要附带 cookie 时，无论它是简单请求，还是预检请求，都会在请求头中添加`cookie`字段

**服务器响应时，需要明确告知客户端：服务器允许这样的凭据**

响应头需要在**预检请求的响应头的基础上**添加以下字段：`Access-Control-Allow-Credentials: true`

例如：

```
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: X-Requested-With,Content-Type
Access-Control-Allow-Methods: PUT,POST,GET,DELETE,OPTIONS
Access-Control-Allow-Origin: http://alight.work
```

对于一个附带身份凭证的请求，若服务器没有明确告知，浏览器仍然视为跨域被拒绝。

注意：对于附带身份凭证的请求，服务器设置 `Access-Control-Allow-Origin: *`无效。这就是为什么不推荐使用 * 的原因。

如果想要达到任何域都可以跨域携带cookie的效果，服务端可以将响应头的`Access-Control-Allow-Origin`，直接设置成请求头的`Access-Control-Allow-Origin`

类似这种效果：`Access-Control-Allow-Origin: req.headers.origin || *`

**补充**

在跨域访问时，JS 只能拿到一些最基本的响应头，如：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要访问其他头，则需要服务器设置本响应头。

`Access-Control-Expose-Headers`头让服务器把允许浏览器访问的头放入白名单，例如：

```
Access-Control-Expose-Headers: authorization, a, b
```

这样 JS 就能够访问指定的响应头了。

# JSONP

在CORS出现之前，人们想了一种奇妙的办法来实现跨域，这就是JSONP。

JSONP需要浏览器和服务器配合来实现。

JSONP的做法是：**当需要跨域请求时，不使用AJAX，转而生成一个script元素去请求服务器，由于浏览器并不阻止script元素的请求，这样请求可以到达服务器。服务器拿到请求后，响应一段JS代码，这段代码实际上是一个函数调用，调用的是客户端预先生成好的函数，并把浏览器需要的数据作为参数传递到函数中，从而间接的把数据传递给客户端**

JSONP有着明显的缺点，即其只能支持GET请求

流程：

1. 准备好一个函数，相当于ajax的回调函数。

```js
function callback(data){
// data是服务器传来的数据
}
```

2. 生成一个script元素跨域访问服务器地址

```js
<script src="http://domain.com/api/data"></script>
```

3. 服务器响应一段 js 代码的函数调用，把数据作为参数传递

```js
callback([
	{ name: 'alight', age: 18 }
])
```

# 总结
以上就是我对跨域方面知识的总结，希望对路过的朋友们有所帮助。

前端开发必备知识 — 跨域

# 前言

正则表达式是前端开发过程中不可或缺的一部分，当我们处理各种表单时，都会遇到数据格式校验的问题。

相较于通过各种判断实现的校验，正则表达式的校验更加优雅也更加灵活。

这篇文章就来介绍一下JavaScript中正则表达式的那些事儿~

# 一、创建正则表达式

1、字面量创建

```js
let reg = /-(\w)/g; // 匹配所有的 -[a-z]
```

2、构造函数创建

```js
let reg = new RegExp("\-(\\w)", "g");
let reg = new RegExp(/-(\w)/, "g");
```

> 转义字符：\
>
> 特殊符号在字符串中使用时需要在前面加转义字符。另外转义字符还可以用来进行字符串的换行。

# 二、常用方法

**正则表达式常用方法：**

- reg.test(str)：判断字符串是否匹配正则表达式，返回布尔值。
- reg.exec(str)：找到第一个匹配的值，返回其位置。

**字符串正则相关常用方法：**

- str.match(reg)：返回一个符合正则条件的数组。

# 三、修饰符

- i：忽略大小写

```js
let reg = /abc/i;
let str = 'aBC';
console.log(reg.test(str)) //true
```

- g：全局匹配

```js
let reg = /abc/g;
let str = 'abcdddabc';
console.log(reg.test(str)) //true
console.log(str.match(reg)) //[ 'abc', 'abc' ]
```

- m：多行匹配

```js
let reg1 = /abc$/m;
let reg2 = /abc$/;
let str = 'aabc\nbbb';
console.log(reg1.test(str)) //true
console.log(reg2.test(str)) //false
```

> 注意：可以多个修饰符同时使用，比如 `let reg = /abc/ig`

# 四、表达式

一个表达式代表一位字符。

- `[abc]`：表示查找中括号之间的任何字符。例如：[0-9]、[A-z]、[0-9A-z]
- `[^abc]`：表示查找任何不在中括号之间的字符。这里`^` 代表非的意思。
- `(abc|cba)`：这里`|` 代表或的意思。`()`和数学中的作用类似，会优先计算。

# 五、元字符

和表达式是一个东西，通过一些特定的字符来表示一些常用的表达式。

- `.`：非换行的任何字符。

- `\s`：space，任何为空的字符。

- `\d`：`[0-9]`，digit，任何数字。

- `\w`：`[0-9A-z_]` ，word，数字字母_。

- `\b`：border，单词边界。

- `[\w\W]`：类似这种代表所有字符。

- `\1`：代表反向引用第一个小括号包裹的表达式中的值。

  - ```js
    let reg = /(\w)\1(\w)\2/g
    let str = "aabb123aabb"
    console.log(str.match(reg)) // [ 'aabb', 'aabb' ]
    ```

- `\u0000`：查找Unicode字符集。比如`[\u4e00-\u9fa5]`是中文字符集。

> 元字符用小写字母来代表一类字符，对应的大写字母代表与之相反的字符。
>
> 比如：\d 代表数字，\D 代表非数字。

# 六、量词

- `n+`：包含至少一个n的字符串

- `n*`：包含零个或多个n的字符串

- `n?`：包含零个或一个n的字符串

- `n{X}`：包含X个n的字符串

- `n{X,Y}`：包含X至Y个n的字符串，贪婪匹配原则

- `n{X,}`：包含至少X个n的字符串，惰性匹配原则

- `^n`：以 n 开头的字符串

- `n$`：以 n 结尾的字符串

- `?=n`：正向查找，匹配后一个字符串为n的字符

  - ```js
    let reg = /\w(?=&)/g
    let str = "1&321&1"
    console.log(str.match(reg)) // [ '1', '1' ]
    ```

- `?!n`：正向查找，匹配后一个字符串不为n的字符。

- `?<=n`：反向查找，匹配前一个字符串为n的字符。

  - ```js
    let reg = /(?<=&)\w/g
    let str = "1&321&1"
    console.log(str.match(reg)) // [ '3', '1' ]
    ```

- `?!=n`：反向查找，匹配前一个字符串不为n的字符。

>正则表达式默认是贪婪匹配原则，能多则多。
>
>量词后面加 ？变为惰性匹配原则，能少则少。使用两个?，能取0不取1。
>
>```js
>let reg1 = /n+/g
>let reg2 = /n+?/g
>let str = "nnnn"
>console.log(str.match(reg1)) // [ 'nnnn' ]
>console.log(str.match(reg2)) // [ 'n', 'n', 'n', 'n' ]
>```

# 七、常用的正则表达式汇总

# 结尾

以上就是我对JavaScript中的正则表达式的一些知识总结，更多内容请看 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp)

JavaScript中的正则表达式

今天在开发过程中出现了一个bug，在这里简单记录一下。

ElementUI table组件，清空排序或筛选的条件后，表格的排序的那个小三角样式还在。

这时需要给table设置一个 ref 属性，如下

```vue
<el-table
   ref="currentTable"
...>

</el-table>
```

然后当重新加载数据的时候，只需要如下设置

```js
this.$refs.currentTable?.clearSort()
this.$refs.currentTable?.clearFilter()
```



ElementUI table排序条件样式不清空的问题

# 前言
今天接到一个给页面添加水印的需求。在看过各种五花八门的版本之后，我找到了最稳妥的添加水印方式，在此记录一下。

先列需求：

- 需要灵活处理水印的显示与隐藏。
- 需要添加防删除处理，让用户不能消除水印。

实现原理：

通过 js 创建一个 watermark 元素和一个 canvas 元素，设置watermark 元素的 background-image 为 canvas 使之显示水印。通过 MutationObserver 来监听DOM结构。当 watermark 元素被修改或删除时自动恢复，从而达到仿删除的效果。

具体实现：

**watermark.js**

```js
import $store from '@/store';

export default const watermark = {
	set: (str1, str2) => {
        const canvas = document.createElement('canvas');
        canvas.width = 150;
        canvas.height = 150;
        const ctx = canvas.getContext('2d');
        ctx.rotate(-20 * Math.PI / 180); 
        ctx.translate(-50, 20);
        ctx.font = '100 16px Microsoft JhengHei';
        ctx.fillStyle = '#f4f4f4';
        ctx.fillText(str1, canvas.width / 3, canvas.height / 2);
        ctx.fillText(str2, canvas.width / 3, canvas.ehight / 2 + 20);
        const watermark = document.createElement('div');
        const styleStr = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 10000;
        pointer-events: none;
        background-repeat: repeat;
        mix-blend-mode: multiply;
        background-image: url('${canvas.toDataUrl('image/png')}');
        `
        watermark.setAttribute('style', styleStr);
        watermark.id = 'watermark';
        document.body.appenChild(watermark);
        
        // 防删除处理
        const observer = new MutationObserver(() => {
            const watermarkInstance = document.getElementById('watermark');
            if((!watermarkInstance || watermarkInstance && watermarkInstance.getAttribute('style') !== styleStr)){
                if(watermarkInstance){
                    watermarkInstance.setAttribute('style', styleStr);
                }else{
                    if($store.state.user.account){
                        document.body.appendChild(watermark);
                    }else{
                        observer.disconnect();
                    }
                }
            }
        })
        observer.observe(document.body, {
            attributes: true,
            subtree: true,
            childList: true
        })
    },
    close: () => {
        const watermark = document.getElementById('watermark');
        document.body.removeChild(watermark);
    }
}
```

使用：

```js
import $store from '@store';
import watermark from 'utils/watermark'
// 添加水印
watermark.set($store.state.user.account, '这是一段文本');
// 移除水印
watermark.close();
```

# 总结

这里是 Vue 的实现方案，其他框架实现思路基本一致。

页面添加水印效果

# 前言

本文主要介绍了前端开发在chrome devtools中的调试方式。

# 一、前端开发调试特点

调试，也叫Debug。有如下特点：

- 多平台：浏览器、NodeJS、小程序、桌面应用、Hybrid。
- 多环境：本地开发环境、线上环境。
- 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole...
- 多技巧：Console、BreakPoint、sourceMap、代理...

# 二、Chrome devTools

如何打开 Chrome devTools？

- F12快捷键。
- 鼠标右键 -> 检查。

## 1. Elements

- 在Elements中选中元素 -> 鼠标右键 -> Force state -> 选择伪类。
- 在Elements中选中元素 -> 选中右侧Styles栏 -> 点击 `:hov` 选项，可选择伪类。

- 点击.cls 开启动态修改元素的class。
- 输入字符串可以动态的给元素添加类名。
- 勾选/取消类名可以动态的查看类名生效效果。
- 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览。
- Computed下点击样式里的箭头可以跳转到styles面板中的Css。

## 2. Console

- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table *这个用来打印数组非常方便。
- console.dir 可以以文件树的方式展示dom元素。
- console.time 作为测试代码开始的节点。
- console.timeEnd 作为测试代码结束的节点。
- console.count 获取一段代码执行的次数。

## 3. Source

区域1：页面资源文件目录树

区域2：代码预览区域

区域3：Debug工具栏，从左到右依次为

- 暂停(继续)
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活(关闭)所有断点
- 代码执行异常处自动

区域4：断点调试器

<img src="https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220805225507005.png" alt="image-20220805225507005" style="zoom: 80%;" />



- 使用关键字debugger或代码预览区域的行号可以设置断点。
- 执行到断点处时代码暂停执行。
- 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点。
- 暂停状态下，鼠标hover变量可以查看变量的值。
- 在调试器Watch右侧点击 +，可以添加对变量的监控，查看该变量的值。
- 展开Scope可以查看作用域列表(包含闭包)。
- 展开Call Stack可以查看当前javaScript代码的调用栈。

<img src="https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220805231215593.png" alt="image-20220805231215593" style="zoom:80%;" />

Source tag虽然可以进行调试，却需要阅读JavaScript的源码，那么通过webpack等工具打包压缩后的代码该如何调试呢？

可以使用一个工具 `souce-map`。SouceMap可以映射源码，通过如下配置将 `souce-map` 配置到项目中。

<img src="https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220806092252975.png" alt="image-20220806092252975" style="zoom: 50%;" />

> 既然SourceMap 可以映射源码，那压缩后的代码不就又不安全了吗？
>
> 通常公司会先带上SourceMap打包项目，将含有SourceMap文件的项目上传到监控平台，然后将SourceMap文件删除，再将不带SourceMap文件的项目部署上线。

## 4. Network

- 区域1：控制面板
- 区域2：过滤面板
- 区域3：概览区域
- 区域4： Request Table面板
- 区域5：总结面板
- 区域6：请求详情面板

<img src="https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220806095548091.png" alt="image-20220806095548091" style="zoom: 80%;" />

## 5. Application

Application面板展示与本地存储相关的信息。

- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie

## 6. Performance

区域1：控制面板。

区域2：概览面板。

- FPS：每秒帧数。
- CPU：处理各个任务花费的时间。
- NET：各个请求花费时间。

区域3：线程面板。

- Frames：帧线程。
- Main：主线程，负责执行Javascript, 解析HTML /CSS,完成绘制。
- Raster：Raster线程， 负责完成某个layer或者某些块(tile)的绘制。

区域4：统计面板。

<img src="https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220806110446920.png" alt="image-20220806110446920" style="zoom:80%;" />

运用：

页面卡顿 -> 查看FPS指标 -> 寻找性能瓶颈 -> 优化代码。

示例：[官方示例地址](https://googlechrome.github.io/ devtools -samples/jank/)

<img src="https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220806110756861.png" alt="image-20220806110756861" style="zoom:80%;" />

## 7. Lighthouse

核心WEB指标：

- Largest Contentful Paint (LCP) :最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
- First Input Delay (FID) :首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
- Cumulative Layout Shift (CLS) :累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，面的CLS应保持在0.1.或更少。

<img src="https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220806110857796.png" alt="image-20220806110857796" style="zoom:80%;" />

# 总结

如果上述方法还不能解决你所遇到的问题，这里还有一份在江湖中颇负盛名的武林秘籍...

> 传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。
>
> ​																															--《程序员修炼之道》

前端开发必备知识 — 调试工具

# 前言

Axios 是一个基于 Promise 的网络请求库。Axios 使用简单,包尺寸小且提供了易于扩展的接口。

# 安装

npm:

```bash
$ npm install axios
```

yarn:

```bash
$ yarn add axios
```

# Axios API

## 发送请求

可以向 `axios` 传递相关配置来创建请求

##### axios(config)

```js
// 发起一个post请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
// 在 node.js 用GET请求获取远程图片
axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });
```

##### axios(url[, config])

```js
// 发起一个 GET 请求 (默认请求方式)
axios('/user/12345');
```



**请求方式别名**：

为方便起见，为所有支持的请求方法提供了别名。

- axios.request(config)
- axios.get(url, [config])
- axios.post(url, [data], [config]])
- axios.delete(url, [config])
- axios.head(url, [config])
- axios.put(url, [data], [config])
- axios.patch(url, [data], [config]])
- axios.options(url, [config])

## config 配置对象

最常用的配置：

```js
axios({
  method: 'get', // post、get、put....
  baseURL: '', // 请求的域名，基本地址
  url: '', // 请求的路径
  params: {}, // 会将请求参数拼接在url上
  data: {}, // 会将请求参数放在请求体中
  headers: {}, // 设置请求头，例如设置token等
  timeout: 1000, // 设置请求超时时长，单位：ms
})
```



## 全局配置

```js
axios.defaults.baseURL = 'http://alight.work/api';
axios.defaults.timeout = 10000;
```

在实际项目中，很少用全局配置。

## 实例配置

> 可以使用自定义配置新建一个axios实例

```js
const instance = axios.create({
  baseURL: 'http://alight.work/api',
  timeout: 10000,
})

instance.get('/getUserInfo').then(res => {
  // ...
})
```

**请求配置**：

```js
const instance = axios.create();
instance.get('/getUserInfo', {
  timeout: 5000
})
```



## 并发请求

同时进行多个请求，并统一处理返回值

- axios.all(iterable)
- axios.spread(callback)

```js
axios.all([
  axios.get('/a'),
  axios.get('/b')
]).then(axios.spread((aRes, bRes) => {
  console.log(aRes, bRes);
}))
```

## 拦截器

interceptors，在发起请求之前做一些处理，或者在响应回来之后做一些处理。

**请求拦截器**： 

```js
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config;
})
```

**响应拦截器**：

```js
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
})
```

**移除拦截器**：

```js
const myInterceptor = axios.interceptors.request.use(config => {});
axios.interceptors.request.eject(myInterceptor);
```

**为axios实例添加拦截器**：

```js
const instance = axios.create();
instance.interceptors.request.use(config => {});
```

## 取消请求

用于取消正在进行的http请求

```js


const source = axios.CancelToken.source();

axios.get('/getUserInfo', {
  cancelToken: source.token
}).then(res => {
  console.log(res);
}).catch(error => {
  if(axios.isCancel(error)) {
    // 取消请求
    console.log(error.message);
  } else {
    // 处理错误
  }
})

// 取消请求 参数 可选
source.cancel('取消请求');
```

## 错误处理

在请求错误时进行的处理
request / response 是error的上下文，标志着请求发送 / 得到响应
在错误中，如果响应有值，则说明是响应时出现了错误。
         如果响应没值，则说明是请求时出现了错误。
在错误中，如果请求无值，则说明是请求未发送出去，如取消请求。

```js
axios.get('/user/12345')
  .catch(function (error) {
    // 错误可能是请求错误，也可能是响应错误
    if (error.response) {
      // 响应错误
    } else if (error.request) {
      // 请求错误
    } else {
      console.log('Error', error.message);
    }
    console.log(error.config);
  });
```

在实际开发过程中，一般在拦截器中统一添加错误处理
请求拦截器中的错误，会当请求未成功发出时执行，但是要注意的是：取消请求后，请求拦截器的错误函数也不会执行，因为取消请求不会抛出异常，axios对其进行了单独的处理。
在更多的情况下，我们会在响应拦截器中处理错误。

```js
const instance = axios.create({});
instance.interceptors.request(config => {

}, error => {
  return Promise.reject(error);
})

instance.interceptors.response(response => {

}, error => {
  return Promise.reject(error);
})
```

## axios 预检

当axios的请求为非简单请求时，浏览器会进行预检，及发送OPTIONS请求。请求到服务器，询问是否允许跨域。如果响应中允许预检中请求的跨域行为，则浏览器会进行真正的请求。否则会报405错误。

# 总结

以上就是我对 Axios 常用功能的一些总结。

Axios 使用手册


![image-20221008125822293](https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/202210081258404.png)

# 前言

redux toolkit 是redux官方出品的工具包，能够便捷的使用redux进行状态管理。

redux toolkit文档：[传送门](https://redux-toolkit.js.org/api/configureStore)

redux toolkit中文文档：[传送门](https://redux-toolkit-cn.netlify.app/)

# 安装

- yarn 安装：

```
yarn add react-redux @reduxjs/toolkit
```

- npm 安装

```
npm i react-redux @reduxjs/toolkit
```

# 使用

## 1. 创建切片

**Slice切片** 类似umijs中的**model**模块，就是将整个数据仓库分割成一个个单独的文件，可以按照功能或页面进行分类，方便管理和维护。

>  **切片”是应用中单个功能的 Redux reducer 逻辑和 action 的集合**

使用`createSlice`函数创建切片，属性包含`name`、`initstate`、`reducers`和`extraReducers`。

- `name`：相当于这个切片的名字，每个切片都要有自己的名字，用于在整个数据仓库中做区分。
- `initstate`： 就是这个仓库切片要存储的信息。redux的所有操作本质上就是操作state。
- `reducers`：存放所有的reducer，reducer可以理解为**仓库管理员**，对状态数据的操作必须要通过`reducer`来进行执行。每一个`reducer`函数都对应着一个`action`。并且会集成到`slice.actions`中。

- `extraReducers`：用来处理异步操作的reducer，redux本身不支持异步操作数据，所以redux toolkit集成了`redux-thunk`，通过它可以对数据进行异步操作。流程如下：
  1. 在`createSlice`函数的前面，使用`createAsyncThunk`函数创建异步操作函数。
  2. 使用内部集成的`thunkAPI`可以操作切片的各种`action`。
  3. 将异步函数放入`extraReducers`中，每个异步函数都有三种状态：`pending`、`fufilled`、`rejected`。

使用流程：

**step1：** 

使用`createSlice()`函数创建切片，

**step2：** 

将异步函数和所有`reducer`函数导出，格式如上示例。

将切片默认导出。代码如下：

```jsx
// 文件所在目录：src/pages/counter/slice.js
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

//- 异步方法
export const asyncSetNum = createAsyncThunk(
  "counter/asyncSetNum",
  (payload, thunkAPI) => {
    //此处仅用于测试异步，真实项目中可进行ajax请求等操作
    setTimeout(() => { 
      thunkAPI.dispatch(counterSlice.actions.setNum(payload));
    }, 3000);
  }
);

export const counterSlice = createSlice({
  name: "counter",
  initialState: {
    count: 0,
  },
  reducers: {
    increate: (state) => {
      state.count += 1;
    },
    decreate: (state) => {
      state.count -= 1;
    },
    setNum: (state, { payload }) => ({ ...state, ...payload }),
  },
  extraReducers: {
    [asyncSetNum.fulfilled]: (state, action) => state,
  },
});

//- reducer方法的每个case都会生成一个action
export const { increate, decreate, addNum } = counterSlice.actions;
export default counterSlice.reducer;
```



## 2. 创建仓库、引入切片

使用`configureStore()`函数创建仓库，属性包含`reducer`、`middleware`、`devTools`、`preloadedState`、`enhancers`。

**step1：** 将所有切片引入，配置到仓库的`reducer`中。示例代码如下：

```javascript
// 文件所在目录：src/store/index.js
import { configureStore } from "@reduxjs/toolkit";
import counter from "../pages/counter/model.js";
import common from "./models/common.js";
export const store = configureStore({
  reducer: {
    counter,
    common,
  },
});

```

**step2：** 配置到项目中。示例代码如下：

```jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { store } from "./store";
import { Provider } from "react-redux";
import { BrowserRouter as Router } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router>
        <App />
      </Router>
    </Provider>
  </React.StrictMode>
);

```



## 3. 使用仓库

**step1：** 从`react-redux`库中引入`useSelector()`和`useDispatch()`函数。

- `useSelector()`用于获取仓库中的数据。
- `useDispatch()`用于执行仓库中的`action`。

**step2：** 从切片中引入所需的`action`函数。

**step3：** 通过`dispatch`对象使用各种`action`函数。

示例代码如下：

```jsx
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increate, decreate, asyncSetNum } from "./model";
const Counter = () => {
  const { count } = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  return (
    <div>
      <button
        onClick={() => {
          dispatch(decreate());
        }}
      >
        -
      </button>
      {count}
      <button
        onClick={() => {
          dispatch(increate());
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          dispatch(asyncSetNum({ count: 10 }));
        }}
      >
        异步设置为10
      </button>
    </div>
  );
};

export default Counter;
```

# 总结 

上面列举的只是个人比较习惯的一种写法，更多**redux toolkit**使用技巧可以自行查阅相关文档。

redux toolkit 使用指南

# 前言

今天在开发过程中发现，当下列菜单的项过多时（大于10000条），页面会有明显的卡顿。这里记录一下通过 `vue-virtual-scroll-list` 对下拉菜单进行性能优化。

项目中使用的是 element ui 组件库，下面是基于element ui进行封装的，其他组件库的封装都大同小异，这里就不赘述了。

这里实现了长列表的优化，也实现了长列表的搜索功能，毕竟如果是几万条数据，不通过搜索根本无法查找数据。

# 代码实现
```vue
// VirtualSelect.vue 
<template>
    <div class="virtual-select">
        <el-select
           v-modle="myValue"
           :placeholder="placeholder"
           filterable
           clearable
           remote
           :remote-method="getFilterData"
           @visible-change="visibleOption">
            <virtual-list 
              ref="virtualList"
              class="virtual-list"
              :data-key="primaryKey"
              :data-sources="filterData"
              :data-component="componentItem"
            />
        </el-select>
    </div>
</template>
<script>
import VirtualList from 'vue-virtual-scroll-list'
export default {
    components: {
        VirtualList
    },
    props: {
        value: {
            default: () => {}
        },
        dataList: {
            type: Array,
            default: () => []
        },
        primaryKey: {
            type: String,
            default: ''
        },
        searchKey: {
            type: Array,
            default: () => []
        },
        placeholder: {
            type: String,
            default: ''
        },
        componentItem: {
            default: ''
        }
    },
    data() {
        return {
            myValue: '',
            data: [],
            filterData: []
        }
    },
    watch: {
        dataList(val) {
            if (val) {
                this.data = val
                this.filterData = val
            }
        },
        value(val) {
            this.myValue = val
        },
        myValue(val) {
            this.$emit('input', val)
        }
    },
    methods: {
        getFilterData(query) {
            if (query !== '') {
                this.$refs.virtualList.reset()
                this.filterData = this.data.filter(item => {
                    if(this.searchKey.length > 0) {
                        const res = this.searchKey.filter(searchVal => {
                            return item[searchVal].toString().toLowerCase().indexOf(query.toLowerCase()) !== -1
                        })
                        return res.length > 0
                    }
                })
            } else {
                this.filterData = this.data
            }
        },
        visibleOption(bool) {
            if (!bool) {
                setTimeout(() => { this.filterData = this.data }, 10)
            } else {
                this.$refs.virtualList.reset()
            }
        }
    }
}
</script>
<style lang="scss">
    .virtual-list {
        max-height: 235px;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 10px;
        }
        &::-webkit-scrollbar-track {
            background: #fff;
            border-radius: 10px;
        }
        &::-webkit-scrollbar-thumb {
            background: #e7e7e7;
            border-radius: 10px;
        }
    }
    .virtual-select {
        .el-select {
            .el-select__caret:first-child::before {
                content: '\e6e1'
            }
            .if-focus {
                .el-select__caret:first-child {
                    transform: rotate(0deg);
                }
            }
        }
    }
</style>
// VirtualOption.vue
<template>
    <el-option
         :label="source.name+'-'+source.phone"
         :value="source.id"
    />
</template>
<script>
export default {
    props: {
        source: {
            type: Object,
            default: () => {}
        }
    }
}
</script>
```

使用：

```vue
<template>
    <virtual-select
        v-model="currentData"
        :dataList="dataList"
        primaryKey="id"
        :searchKey="['name', 'phone']"
        placeholder="请选择数据"
        :componentItem="virtualOption"
    />
</template>
<script>
import VirtualSelect from './components/VirtualSelect.vue'
import VirtualOption from './components/VirtualOption.vue'
export default {
    components: { VirtualSelect },
    data() {
        return {
            currentData: null,
            dataList: [
                { id: 1, name: '小杜', phone: 13833222233 },
                { id: 2, name: '小王', phone: 18322333322 }
            ],
            virtualOption: VirtualOption
        }
    }
}
</script>
```

通过 vue-virtual-scroll-list 库对 element UI 的 Select 组件进行性能优化

# 说明

最近使用React Router V6较多，记录一些常用的功能和API。

详细内容请自行查阅官方文档：[传送门](https://reactrouter.com/docs/en/v6)

# 一、路由配置

## 1. Router组件

它本身不做任何展示，仅提供路由模式配置，另外，该组件会产生一个上下文，上下文中会提供一些实用的对象和方法，供其他相关组件使用。

1. `<HashRouter>`：使用hash模式匹配
2. `<BrowserRouter>`：使用BrowserHistory模式匹配

通常情况下，Router组件只有一个，包裹整个`<App/>`。

```jsx
//- src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { store } from "./store";
import { Provider } from "react-redux";
import { BrowserRouter as Router } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router>
        <App />
      </Router>
    </Provider>
  </React.StrictMode>
);
```

## 2. Routes组件

v6版本中移出了先前的`<Switch>`，引入了新的替代者：`<Routes>`。

`<Routes>`的子元素只能有`<Route>`组件，因为 `<Routes>` 组件会循环所有子元素，然后让每个子元素去完成匹配，若匹配到，则渲染对应的组件，然后停止循环。

路由是根据最佳匹配而不是按顺序选择的

嵌套的 parent route 的 path 不用加。但如果不是嵌套，而是分散在子组件中，就需要尾部加上。

推荐使用React Router V6提供的**`useRoutes()`**配置 **路由表** 。

## 3. Route组件

Route 组件必须使用 Routes 嵌套。

根据不同的地址，展示不同的组件。

**重要属性：**

- **path**：匹配的路径

  ​	1. 默认不区分大小写，可以设置**`caseSensitive`**属性，来区分大小写

  ​	2. 默认精准匹配，可以设置path路径为/a/*，来动态匹配路由

  ​	3. 如果不写path，默认匹配不到路由

  ​	4. 设置path路径为*，则匹配除已设置的路由以外的任意路径

  ​	5. 设置path路径为 / ，则匹配为整个网站的空路径。

- **index**：是否是主路由，如果设置为 true 的话不能有 children

- **element**：匹配成功后显示的组件，可以向组件传入props

## 嵌套路由

- 嵌套路由的 path 可以不用写父级，会直接拼接。

- 动态路由通过 :id 的形式实现。

- /a/b 的匹配度大于 /a/* ，输入精确地址会精确匹配，而不是匹配到动态路由。

- 嵌套路由必须在父级追加 **`<Outlet/>`** 组件，作为子级组件的占位符。

- 除了使用`<Route>`组件作为`<Routes>`组件的**children**的方式，还可以通过 **`useRoutes()`** 生成对应的**element**。



## 路由配置流程

**step1：** 使用 **Router**组件包裹整个 **`<App/>`**。

```jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { store } from "./store";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);
```

**step2：** 配置路由，有两种方案，使用**`useRoutes()`**钩子配置**路由表**，或使用组件进行嵌套。推荐使用第一种。

**方案一：** 使用**`useRoutes()`**配置**路由表**：

- 使用`<Suspense>`组件用来进行路由组件的懒加载，进行性能优化。

```jsx
//- src/App.js
import { routes } from "./router";
import { useRoutes } from "react-router-dom";
import "./App.css";

function App() {
  const element = useRoutes(routes);
  return element;
}

export default App;

//- src/router/index.js
import { Suspense } from "react";
import Home from "../pages/home";
import Login from "../pages/login";
import Demo from "../pages/demo";
import BaseLayout from "../layouts/BaseLayout";

//- 懒加载优化
const lazyLoad = (children) => {
  return <Suspense fallback={<h1>Loading...</h1>}>{children}</Suspense>;
};

export const routes = [
  {
    path: "/",
    element: <BaseLayout />,
    children: [
      {
        index: true,
        element: lazyLoad(<Home />),
      },
      {
        path: "/demo",
        element: lazyLoad(<Demo />),
      },
    ],
  },
  {
    path: "/login",
    element: lazyLoad(<Login />),
  },
];

```

**方案二：** 直接使用`<Routes>`组件配置路由：

```jsx
//- src/App.js
import { Routes, Route } from "react-router-dom";
import "./App.css";
import BaseLayout from "./layouts/BaseLayout";
import Home from "./pages/home";
import Counter from "./pages/counter";
import Demo from "./pages/demo";
import Login from "./pages/login";

function App() {
  return (
    <Routes>
      <Route path="/" element={<BaseLayout />}>
        <Route index element={<Home />} />
        <Route path="/counter" element={<Counter />} />
        <Route path="/demo" element={<Demo />} />
      </Route>
      <Route path="/login" element={<Login />} />
    </Routes>
  );
}

export default App;

```

**step3：** 在**Layout**中添加 **`<Outlet/>`** 组件，作为子级路由的占位符。

```jsx
//- src/layouts/BaseLayout.jsx
import React from "react";
import { Link, Outlet } from "react-router-dom";

const BaseLayout = () => {
  return (
    <div>
      <main>
        <Link to="/">首页</Link>
        <Link to="/demo">测试页</Link>
      </main>
      <div>
        <Outlet />
      </div>
    </div>
  );
};

export default BaseLayout;
```



# 二、路由跳转



## 1. link跳转

**`<Link>`** 组件

组件属性：

1.  **to：**是基于父级 Route 的 path。
    - 字符串：跳转的目标。
    - 对象：pathname（url路径）、search（字符串类型）、hash（字符串类型）。
2.  **replace：**boolean，默认 false，即跳转路由要用 push 还是 replace。
3.  **target：**\_self、\_blank、\_parent、_top。
4.  **state：**object，即点击后可以给 to 传对应的 state。
5.  **ref：**可以将内部a元素的ref附着在传递的对象或函数参数上。
6.  **reloadDocument：**boolean，是否重新加载文档。

```jsx
<Link to="/路径">按钮</Link>
```

## 2. NavLink组件跳转

1. 通常用作导航栏中的跳转。
2. 默认会给当前活动的NavLink的组件加一个.active。
3. 会给当前活动的NavLink传递一个isActive属性，可以在className、style、children中使用该属性。
4. **caseSensitive：**boolean，是否区分大小写。

```jsx
<NavLink className={({ isActive }) => isActive ? "red" : "blue"} />
```



## 3. **Navigate** 重定向组件

1. 可以用来匹配未定义的路由。
2. **to：** 基于父级 Route 的 path。
   - 字符串：跳转的目标。
   - 对象：pathname（url路径）、search（字符串类型）、hash（字符串类型）。
3. **replace：**boolean，默认 false，即跳转路由要用 push 还是 replace。
4. **state：**object，传递 state。

```jsx
<Route path="*" element={<Navigate to="/"/>} />
```



## **4. useNavigate()跳转**

`useNavigate()`函数用来实现编程式导航。

函数参数：

- path：跳转的路径	
  - `naviaget("xxx")`默认就是 `history.push`。
  - `naviaget("xxx", { replace: true })`就是 `history.replace`。
  - `naviaget(to: number)`就是 `history.go`。
  - 如果携带**params**参数或**search**参数。
- option：配置对象。
  - `replace：` boolean，相当于`history.replace`。
  - `state：` object，用于传递信息。

```jsx
import React from 'react'
import {useNavigate} from 'react-router-dom'
 
export default function Demo() {
  const navigate = useNavigate()
  const handleTo = () => {
    navigate('/login', {
      replace: false,
      state: {a:1, b:2}
    }) 
  }
  
  return (
    <div>
      <button onClick={handleTo}>跳转</button>
    </div>
  )
```



# 三、获取参数

##  1. **获取state数据**

1. `useLocation()` 获取**state**数据。

```JSX
import { useLocation } from "react-router-dom";
let location = useLocation()
let data=location.state
```

## **2. 获取地址栏数据**

1. `useParams()` 获取动态路由的值。
2. `useSearchParams()` 获取查询字符串的值。

```jsx
  // 获取动态路由的值
  const params = useParams();
  const data=params.参数名

  // 获取查询字符串的值
  const [searchParams, setSearchParams] = useSearchParams();
  const data=searchParams.get('参数名')
  // 修改查询字符串的值
  setSearchParams('a=1&b=2&c=3')
```

## 3. 解析Url中的参数值

1. `useResolvedPath()` 给定一个 **URL**，解析其中的`path`、`search`、`hash`值。

```jsx
console.log('useResolvedPath',useResolvedPath('/user?id=001&name=tom#qws'))
 //输出：{pathname: "/user", search: "?id=001&name=tom", hash: "#qws"}
```



# 四、导航守卫                     

应用场景：当进入首页或任意页面时，先判断是否已经登录，如果未登录，会自动重定向到登录页。

实现原理：创建一个高阶组件，将原来的组件包裹，通过高阶组件进行判断，如果条件成立返回children，否则进行重定向。

```jsx
//- src/router/AuthProvider.jsx
import { useSelector } from 'react-redux';
import { Navigate, useLocation } from 'react-router-dom';

const AuthProvider = ({ children }) => {
  const location = useLocation();
  const isLogin = useSelector(state => state.user.isLogin);
  const userInfo = useSelector(state => state.user.userInfo);

  // 如果是登录页面，直接跳转
  if (location.pathname === '/login' || location.pathname === '/register') {
    return children;
  };

  // 如果登录信息有问题，重新登录。否则直接跳转
  if (!isLogin || !userInfo) {
    return <Navigate to="/login" />;
  } else {
    return children;
  }
};

export default AuthProvider;
```

```jsx
//- src/router/index.jsx

import { Navigate, useRoutes } from 'react-router-dom';
import Home from '../pages/Home';
import AddOrEdit from '../pages/AddOrEdit';
import Detail from '../pages/Detail';
import About from '../pages/About';
import Email from '../components/Email';
import Tel from '../components/Tel';
import Login from '../pages/Login';
import BaseLayout from '../components/BaseLayout';
import AuthProvider from './AuthProvider';

export default function RouterConfig() {
  const routes = useRoutes([
    {
      path: '/',
      element: <BaseLayout />,
      children: [
        {
          path: '/home',
          element: <Home />
        }, {
          path: '/add',
          element: <AddOrEdit />
        }, {
          path: '/edit/:id',
          element: <AddOrEdit />
        }, {
          path: '/detail/:id',
          element: <Detail />
        }, {
          path: '/about',
          element: <About />
        }
      ]
    }, {
      path: '/login',
      element: <Login />
    }, {
      path: '*',
      element: <Navigate to='/home' replace />
    }
  ]);
  return <AuthProvider>{routes}</AuthProvider>;
}

```

# 五、路由过渡动画

实现思路：

1. 用`<TransitionGroup/>`组件将`<Routes/>`组件包裹，因为`<Routes/>`组件下只能包含`<Route/>`组件
2. 创建一个`<TransitionRoute/>`的高阶组件，将要加入动画的组件包裹，传入in、key属性，以供内部的`<CSSTransition/>`组件使用。
3. 内容使用`<CSSTransition/>`组件包裹`props.children`，通过自定义css文件或者引入`animate.css`库，添加动态效果。
4. className使用对象的方式添加：`classNames={{ enter: "animate__fadeIn" }}`。

```jsx
//- App.js
import React from "react";
import { Routes, Route, Navigate } from "react-router-dom";
import StudentList from "./pages/student/StudentList";
import StudentAdd from "./pages/student/StudentAdd";
import TransitionRoute from "./TransitionRoute";
import { useLocation } from "react-router-dom";
import { TransitionGroup } from "react-transition-group";

function App() {
  const location = useLocation();
  return (
	<TransitionGroup>
        <Route
          path="/student/list"
          element={
            <TransitionRoute keyText={location.key} in={location.pathname==="/student/list"}>
              <StudentList />
            </TransitionRoute>
          }
        />
        <Route
          path="/student/add"
          element={
            <TransitionRoute keyText={location.key} in={location.pathname==="/student/add"}>
              <StudentAdd />
            </TransitionRoute>
          }
        />
      </Route>
    </Routes>
    </TransitionGroup>
  );
}

export default App;
```

```jsx
//- src/TransitionRoute.js
import React from "react";
import { CSSTransition } from "react-transition-group";
import "animate.css";
// import './TransitionRoute.css'
/**
 * 传入两个属性
 * key：csstransition组件的key值
 * in：是否改变动画状态
 * timeout：多长时间后，去掉之前的样式，添加样式enter-done/exit-done，默认0.8秒
 */
export default function TransitionRoute(props) {
  return (
    <CSSTransition
    	key={props.keyText}
    	in={props.in}
      	timeout={props.timeout}
      	classNames={{ enter: "animate__bounceIn",exit:"animate__bounceIn" }}
    >
      {props.children}
    </CSSTransition>
  );
}
TransitionRoute.defaultProps={
    timeout:800
}
```

# 六、滚动条复位

使用场景：当用户切换路由时，滚动条默认不会变化，需要我们手动将滚动条恢复至顶部。

实现方法：

**step1：** 首先封装一个滚动回顶部的函数`resetScroll()`。

`resetScroll()`函数实现思路：

1. 创建一个`animate()`函数，接受动画开始位置`start`，结束位置`end`，和要执行的回调函数`callback`，返回一个定时器。
2. 调用两个`animate()`函数，传入`scrollTop`和`scrollLeft`等参数。

```js
let timer1, timer2;

/**
 * 滚动条横向和纵向动画复位
 */
export default function resetScroll() {
    clearInterval(timer1);
    clearInterval(timer2);
    var html = document.documentElement;
    timer1 = animate(html.scrollTop, 0, (val) => {
        html.scrollTop = val;
    })
    timer2 = animate(html.scrollLeft, 0, (val) => {
        html.scrollLeft = val;
    })
}

/**
 * 在300毫秒之内，从指定的初始值，变化到结束值
 * @param {*} start 
 * @param {*} end 
 */
function animate(start, end, callback) {
    var tick = 16; //每隔16毫秒完成一次变化
    var total = 300; //总时间为1000毫秒
    var times = Math.ceil(total / tick); //变化的次数
    var curTimes = 0;
    var dis = (end - start) / times; //总距离/次数，每次运动的距离
    var timer = setInterval(() => {
        curTimes++;
        start += dis;
        if (curTimes === times) {
            start = end;
            clearInterval(timer);
        }
        callback(start);
    }, tick)
    return timer;
}
```

**step2：**通过各种方式使用`resetScroll()`函数

1. 高阶组件

```jsx
//- withScroll.js：
import React from "react"
import reset from "./resetScroll"
export default function withScroll(Comp) {
    return class ScrollWrapper extends React.Component {
        componentDidMount() {
            reset();
        }
        render() {
            return <Comp {...this.props} />
        }
    }
}

使用：
const PageWithScroll = withScroll(Page1)
```

2. 自定义Hook

```jsx
//- useScroll.js
import { useEffect } from "react"
import reset from "./resetScroll"

export default function useScroll(pathname) {
    useEffect(reset, [pathname])
}
使用：

import useScroll from "./useScroll"
useScroll(props.location.pathname);//调用时滑动
```

3. 导航守卫判断

实现思路：在当前页面中传入`location.pathname`给跳转后的页面，在跳转后的页面判断两个`path`是否相同，不同则调用`resetScroll`。

```jsx
// ResetScrollRoute.jsx：
import React from 'react'
import { useLocation } from "react-router-dom";
import reset from "./resetScroll"

export default function ResetScrollRoute({oldPathname}) {
    const location = useLocation();
    const nowPathname = location.pathname;
    if(oldPathname!==nowPathname){ 
        reset()
    }
    return props.children;
}
```

# 总结

以上就是个人总结的一些基本用法，上述仅为个人理解，如果有错误，还请路过的大佬斧正！

前端分类文章