检测sql语句执行效率

前端

```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
  app.enableCors(); // 添加跨域
```

 自定义配置

```js
app.enableCors((req, callback) => {
   callback(null, { origin: req.headers.origin, credentials: true });
}); // 添加跨域
```



NestJs 配置跨域

```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实现防抖搜索

```ts
const job = new CronJob(`0 */1 * * * *`, async () => {
  const now = dayjs().toDate();
  const oneMinuteAgo = dayjs().subtract(5, 'minute').toDate();
  const messages = await this.pushMessageRepository.findBy({
    status: 1,
    pushTime: Between(oneMinuteAgo, now),
  });
  messages.forEach((item) => {
    this.push(item.id);
  });
});
this.schedulerRegistry.addCronJob(`cron-pushMessage`, job);
job.start();
```



js简单使用定时任务

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 不保存换行符

Git 切换分支推送，但是当前分支有内容，提示签出或存储。

解决方法：

1. 先把当前更改的代码全部“暂存”
2. 然后点vs code上面的三个...，选择“存储”，然后给存储的内容一个名字
3. 然后就可以正常切换分支推代码
4. 等一切操作结束后，返回当前分支
5. 在刚才的“存储”菜单，选择“应用最新存储”或者“弹出最新存储”
6. 刚才暂存的代码就回来了，“应用最新存储”和“弹出最新存储”的区别在于，应用会保留这个存储记录，弹出不会保存，这个可以根据个人习惯来决定。


Git 切换分支推送，但是当前分支有内容，提示签出或存储。

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

今天接触到一个mysql的业务场景

有两张表：course、teacher

course 表中有 teacher_ids 字段。里面存储的是 teacher 表的 id 以逗号分隔的字符串。

现在要查询 course 列表，并且关联查询出 teacher_ids 中关联教师的数据。



MySQL提供了一个名为`FIND_IN_SET()`的内置字符串函数，允许您在逗号分隔的字符串列表中查找指定字符串的位置。

下面说明了`FIND_IN_SET()`函数的语法。

```sql
FIND_IN_SET(needle,haystack);
```

`FIND_IN_SET()`函数接受两个参数：

- 第一个参数`needle`是要查找的字符串。
- 第二个参数`haystack`是要搜索的逗号分隔的字符串列表。

参考：https://www.yiibai.com/mysql/find_in_set.html 



原生语句用法：

```sql
select * from tp_course join tp_course_teacher on find_in_set(tp_course_teacher.id, tp_course.teacher_ids);
```

Typeorm:

```js
async find({ where, order, take, skip }: findDto) {
  const [list, total] = await this.courseRepository
    .createQueryBuilder('course')
    .leftJoinAndMapMany(
      'course.teachers',
      Teacher,
      'teacher',
      `FIND_IN_SET(teacher.id, course.teacher_ids)`,
    )
    .where(where)
    .orderBy(order)
    .take(take)
    .skip(skip)
    .getManyAndCount();
  return { list, total };
}
```
knex 过滤:
```
const targetId = 123; // 要检查的目标 id

const result = await knex('your_table')
  .whereRaw(`FIND_IN_SET(?, your_column) > 0`, [targetId])
  .select('*');
```



MYSQL关联查询以逗号分隔id的数据

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

有一点需要注意。

如果用的是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 }
])
```

# 总结
以上就是我对跨域方面知识的总结，希望对路过的朋友们有所帮助。

前端开发必备知识 — 跨域

# 前言
在后端开发中，对数据库的了解是必不可少的。这里记录一下我所掌握的一些常用命令。
# 常用命令
- `mysql_secure_installation` 初始化数据库
- `mysql -u root -p` 连接数据库
- `alter user root@localhost identified by 'root';` 更改数据库密码
- `show databases` 查看数据库
- `create database database_name` 创建数据库
- `create database database_name default character set charset_name ` 创建数据库，设置字符集
- `alter database database_name default character set charset_name ` 修改数据库字符集
- `drop database my_db` 删除数据库
- `use my_db` 选择数据库
- `show tables` 查看表
- `create table table_name(column_name column_type)` 创建表
- `drop table table_name` 删除表
- `insert into table_name values(column_value_1, column_value_2)` 插入数据
- `insert into table_name(column_name_1, column_name_2) values(column_value_1, column_value_2)` 插入数据

# 表

## 创建表

```sql
-- 创建用户表
create table user
(
userid varchar(100) primary key,
nickname varchar(20),
email varchar(20),
phone int(11),
`password` varchar(20),
createdate datetime,
avatar varchar(255),
sex int,
birthday date,
address varchar(255)
)
-- 创建博文表
create table blog
(
blogid varchar(100) primary key,
title varchar(255) not null,
content longtext
)
-- 创建发表博文表
create table blog_add
(
userid varchar(100),
blogid varchar(100),
createdate datetime
) 
-- 创建博文浏览表
create table blog_look
(
userid varchar(100),
blogid varchar(100),
foreign key(userid) references `user`(userid),
foreign key(blogid) references blog(blogid)
)
-- 创建博文点赞表
create table blog_agree
(
userid varchar(100) unique,
blogid varchar(100) unique,
foreign key(userid) references `user`(userid),
foreign key(blogid) references blog(blogid)
)
```

## 修改表结构

```sql
ALTER TABLE <表名> 
{ ADD COLUMN <列名> <类型>        #增加列
| CHANGE COLUMN <旧列名> <新列名> <新列类型>        #修改列名&数据类型
| ALTER COLUMN <列名> { SET DEFAULT <默认值> | DROP DEFAULT }        #修改某列的默认值
| MODIFY COLUMN <列名> <类型>        #修改数据类型
| DROP COLUMN <列名>        #删除列
| RENAME TO <新表名>        #重命名表 （TO可省略不写，不影响）
| CHARACTER SET <字符集名>        #修改字符集（表的编码格式等）
| COLLATE <校对规则名> }        字符集内用于字符比较和排序的一套规则
```

## 联合唯一约束

```sql
create table blog_agree
(
userid varchar(100) not null,
blogid varchar(100) not null,
foreign key(userid) references `user`(userid),
foreign key(blogid) references blog(blogid),
unique(userid,blogid)
)
```

# 触发器

查看所有触发器

```sql
show triggers;
```

删除触发器

```sql
drop trigger user_insert_before;
```

创建触发器

```sql
-- 创建触发器user_insert_before，用户信息必须符合以下条件，否则插入失败。条件如下：
-- 1. 性别只能为：null、0、1。
-- 2. 生日不能大于当天。
-- 3. 注册时间不能大于当前。
create trigger user_insert_before before insert on `user` for each row
begin
	if new.sex !=0 
	or new.sex!=1 
	or new.sex is not null
	or new.birthday > now() 
	or new.createdate > now() then
		insert into errortable values(0);
	end if;
end;

insert into user(username,nickname,email,phone,`password`,createdate,avatar,sex,birthday,address) values
(null,'小贩','1778211090@qq.com',13454133320,'admin','2022-6-1','http://heiza.work/avatar.png',1,'2000-2-5','山东省滨州市惠民县')

-- 创建触发器blog_insert_before，录入博客信息时，浏览量不能为负数，否则插入失败。
create trigger blog_insert_before before insert on blog for each row
begin
	if new.title is null or new.look < 0 then
		insert into errortable values(0);
	end if;
end;

show triggers;
drop trigger blog_insert_before;
insert into blog(title,content,look) values
('《望庐山瀑布》 [唐] 李白','日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。',-1)
```

# 函数

```sql
-- 创建一个函数get_user_age，传入用户id，返回用户当前年龄。
create function get_user_age(uid varchar(100)) returns int
reads sql data
begin
	declare age int;
	select year(now())-year(birthday) into age from user where userid = uid;
	return age;
end;
select get_user_age('db5c22fee48311eca808b025aa2e1a1b');

-- 创建一个函数get_blog_agree_count，传入博文id，返回博文的点赞数。
create function get_blog_agree_count(bid varchar(100)) returns bigint
reads sql data
begin
	declare agree_count bigint;
	select count(*) into agree_count from blog_agree where blogid = bid;
	return agree_count;
end;
select get_blog_agree_count('2f07108ee48511eca808b025aa2e1a1b');

-- 创建一个函数get_comment_agree_count，传入评论id，返回评论的点赞数。
create function get_comment_agree_count(cid varchar(100)) returns bigint
reads sql data
begin
	declare agree_count bigint;
	select count(*) into agree_count from comment_agree where commentid = cid;
	return agree_count;
end;
select get_comment_agree_count('021a265de48b11eca808b025aa2e1a1b');

-- 创建一个函数get_comment_comment_count，传入评论id，返回评论的回复数。
create function get_comment_comment_count(cid varchar(100)) returns bigint
reads sql data
begin
	declare comment_count bigint;
	select count(*) into comment_count from comment_comment where parentid = cid;
	return comment_count;
end;
select get_comment_comment_count('0219e77be48b11eca808b025aa2e1a1b');

-- 创建一个函数get_blog_comment_count，传入博文id，返回博文的评论数。
create function get_blog_comment_count(bid varchar(100)) returns bigint
reads sql data
begin
	declare blog_comment_count bigint;
	declare comment_comment_count bigint;
	select count(*) into blog_comment_count from blog_comment where blogid = bid;
	select count(*) into comment_comment_count from blog_comment join comment_comment on blog_comment.commentid = comment_comment.parentid;
	return blog_comment_count+comment_comment_count;
end;
select get_blog_comment_count('2f06ec42e48511eca808b025aa2e1a1b');
```

# 存储过程

```sql
-- 创建一个存储过程agree_blog_list，传入用户id，返回点赞的博文列表。
create procedure agree_blog_list(uid varchar(100))
reads sql data
begin
	select * from blog join blog_agree on blog.blogid = blog_agree.blogid where blog_agree.userid=uid;
end;
call agree_blog_list('db5c22fee48311eca808b025aa2e1a1b');
-- 创建一个存储过程user_blog_list，传入用户id，返回该用户发表的博文列表。
create procedure user_blog_list(uid varchar(100))
reads sql data
begin
	select * from blog join blog_add on blog.blogid = blog_add.blogid where blog_add.userid=uid;
end;
call user_blog_list('db5c22fee48311eca808b025aa2e1a1b');
```

# 视图

```sql
-- 创建视图view_user_info，查看用户信息，包含当前年龄，不包含密码信息。
create view view_user_info as select userid,username,nickname,email,phone,avatar,sex,birthday,address,createdate,get_user_age(userid) as age from user;
select * from view_user_info;

-- 创建视图view_blog_info，查看博文信息，包含点赞量和评论数。
create view view_blog_info as select blogid,title,content,look,get_blog_agree_count(blogid) as agree_count,get_blog_comment_count(blogid) as comment_count,createdate from blog;
select * from view_blog_info;
-- 创建视图view_blog_hot_list，查看点赞量大于100的文章列表。
create view view_blog_hot_list as select * from blog where get_blog_agree_count(blogid)>100;
select * from view_blog_hot_list;

-- 创建视图view_blog_hotlook_list，查看浏览量大于100的文章列表。
create view view_blog_hotlook_list as select * from blog where look>100;
select * from view_blog_hotlook_list;
```

MySQL 常用命令合集

```ts
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'public'),
      serveRoot: '/public'
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule { }
```

这样配置之后就可以通过访问 `http://localhost:3000/public/avatar.jpg`，访问到 `public` 目录中的文件了。

NestJS 配置静态资源目录

# 前言
在使用 NestJS 的过程中，涉及到了 OSS 上传文件的功能，这里简单记录一下。
# 代码实现
oss.controller.ts
```ts
import { Controller, Post, UseInterceptors, UploadedFile } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { Result } from 'src/utils/ResultType';
import { OssService } from './oss.service';

@Controller({ path: 'oss', version: '1' })
export class OssController {
  constructor(private readonly ossService: OssService) { }

  @Post('uploadImage')
  @UseInterceptors(FileInterceptor('file'))
  async uploadImage(@UploadedFile() file: Express.Multer.File) {
    const res = await this.ossService.uploadFile('images/' + file.originalname, file.buffer, file.size)
    return Result.success(res)
  }
}
```

oss.service.ts

```ts
import { Injectable } from '@nestjs/common';
import * as OSS from 'ali-oss';

@Injectable()
export class OssService {
  private client: any
  constructor() {
    this.client = new OSS({
      region: 'oss-cn-hangzhou',
      accessKeyId: 'LTAI5tPH6aKN7Jo6Ft2CPkoU',
      accessKeySecret: 'SCG5GiJ1SAcvIJ7UMSRMtu4IUemQjy',
      bucket: 'somelight'
    })
  }
  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)
    // 将文件设置为公共可读
    await this.client.putACL(ossPath, 'public-read')
    return res.url
  }

  // oss 断点上传
  private async resumeUpload(ossPath: string, localPath: string): Promise<string> {
    let checkPoint: number = 0
    let bRet = ''
    for (let i = 0; i < 3; i++) {
      let result = this.client.multipartUpload(ossPath, localPath, {
        checkPoint,
        async progress(percent: number, cpt: any) {
          checkPoint = cpt
        }
      })
      await this.client.putACL(ossPath, 'public-read')
      bRet = result.url
      break
    }
    return bRet
  }

  // 删除文件
  private async deleteOne(filePath: string) {
    if (!filePath) {
      return
    }
    await this.client.delete(filePath)
  }

  // 删除多个文件
  private async deleteMulti(filePathArr: string[]) {
    await this.client.deleteMulti(filePathArr, { quiet: true })
  }

  // 获取文件的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
      }
    }
  }
}

```

# 总结
以上就是我对NestJS处理OSS上传文件的一些总结。

NestJS 实现 OSS上传文件

# 前言
在使用NestJS的过程中，用到了JWT做登录鉴权，在这里记录一下这部分内容。

首先附上官网介绍：https://docs.nestjs.com/security/authentication
# 具体实现

先安装相关依赖

```
npm install --save @nestjs/passport passport passport-local passport-jwt
npm install --save-dev @types/passport-local
```

添加 auth 相关文件，这里面处理 token 的颁发和解析

```
nest g module auth
nest g service auth
```

创建 `auth/jwt.strategy.ts` 文件，这是 jwt 的策略文件。

```ts
import { ExtractJwt, Strategy } from 'passport-jwt';
import { PassportStrategy } from '@nestjs/passport';
import { Injectable } from '@nestjs/common';

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor() {
    super({
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
      ignoreExpiration: false,
      secretOrKey: process.env.SECRET,
    });
  }

  async validate(payload: any) {
    return payload
  }
}
```

编辑 `auth/auth.module.ts` 文件

```ts
import { Module } from '@nestjs/common';
import { JwtModule } from '@nestjs/jwt/dist';
import { AuthService } from './auth.service';
import { JwtStrategy } from './jwt.strategy';

@Module({
  imports: [
    JwtModule.register({
      secret: process.env.SECRET, // 这里是jwt的密钥
      signOptions: { expiresIn: '60s' }
    })
  ],
  providers: [AuthService, JwtStrategy],
  exports: [AuthService],
})
export class AuthModule { }

```

对应一些常量，我存储在了根目录下的 `.env`文件中，推荐包括数据库在内等关键信息都存储在这里面。

使用 process 对象需要在 `app.module.ts` 中添加以下配置

```ts
import { ConfigModule } from '@nestjs/config';

@Module({
  imports: [
    ConfigModule.forRoot(),
    ...
  ],
  controllers: [AppController],
  providers: [AppService],
})
```

编辑 `auth/auth.service.ts`文件，这里我们只需要声明一个获取 token 的函数。

```ts
import { Injectable } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';

@Injectable()
export class AuthService {
  constructor(private jwtService: JwtService) { }

  public async getToken(payload) {
    return this.jwtService.sign(payload, { secret: process.env.SECRET })
  }
}
```

编辑`user/user.module.ts`文件，引入 `AuthModule` 模块

```ts
import { Module } from '@nestjs/common';
import { UserService } from './user.service';
import { UserController } from './user.controller';
import { TypeOrmModule } from '@nestjs/typeorm';
import { User } from './entities/user.entity';
import { AuthModule } from 'src/auth/auth.module';

@Module({
  imports: [TypeOrmModule.forFeature([User]), AuthModule],
  controllers: [UserController],
  providers: [UserService],
  exports: [UserService]
})
export class UserModule { }
```

编辑 `user/user.service.ts`文件，当登录校验完成后，获取token返回给前端。

```ts
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { CreateUserDto } from './dto/create-user.dto';
import { LoginUserDto } from './dto/login-user.dto';
import { UpdateUserDto } from './dto/update-user.dto';
import { User } from './entities/user.entity';
import { Result, stateCode } from '../config/ResultType';
import { comparePassword } from 'src/utils/bcrypt';
import { AuthService } from 'src/auth/auth.service';

@Injectable()
export class UserService {
  constructor(@InjectRepository(User) private userRepository: Repository<User>, private authService: AuthService) { }

  // 用户登录
  async login(loginUserDto: LoginUserDto) {
    const { user_account } = loginUserDto
    const user = await this.userRepository.findOne({
      select: ['user_password'],
      where: {
        user_account
      }
    })
    if (user && comparePassword(loginUserDto.user_password, user.user_password)) {
      // 重新获取用户信息
      const res = await this.userRepository.findOne({ where: { user_account } })
      const token = await this.authService.getToken({ ...res })
      return Result.success({ ...res, token });
    } else {
      return Result.fail(stateCode.UNEXPECT, '用户名或密码错误')
    }
  }
  // ...
  async findOneByAccount(user_account: LoginUserDto['user_account']) {
    return await this.userRepository.findOne({
      select: ['user_id', 'user_password'],
      where: { user_account }
    });
  }

  async findOne(id: number) {
    return await this.userRepository.findOne({ where: { user_id: id } });
  }
}
```

编辑`user/user.controller.ts`文件，进行 jwt 的校验

```ts
import { Controller, Get, Post, Body, Patch, Param, Delete, UseGuards, Req } from '@nestjs/common';
import { UserService } from './user.service';
import { CreateUserDto } from './dto/create-user.dto';
import { UpdateUserDto } from './dto/update-user.dto';
import { LoginUserDto } from './dto/login-user.dto';
import { AuthGuard } from '@nestjs/passport';
import { Result } from 'src/config/ResultType';

@Controller({ path: 'user', version: '1' })
export class UserController {
  constructor(private readonly userService: UserService) { }

  @Post('login')
  login(@Body() loginUserDto: LoginUserDto) {
    return this.userService.login(loginUserDto)
  }
    
  @UseGuards(AuthGuard('jwt'))
  @Get('whoami')
  async whoami(@Req() req) {
    const res = await this.userService.findOne(+req.user.user_id) // 通过jwt中的user_id，获取用户信息
    return Result.success(res)
  }
}
```

这样，通过访问 `http://localhost:3000/v1/user/login`，就可以获取到 token 了。

通过访问 `http://localhost:3000/v1/user/whoami`，在 header 里面携带 `Authorization:Bearer token`，就可以获取到登录用户的信息。

> 注意，这里的 Bearer 是必须要携带的，不然token会校验失败。

这里的 `@UseGuards(AuthGuard('jwt'))`是对单个接口进行校验，如果整个模块都需要 jwt 校验的话，可以将这行代码放至`@Controller()`上方，对整个模块的接口都进行校验。

# 总结
以上就是我对 NestJS 中使用 JWT 的一些个人总结。

NestJS 实现 JWT

# 前言
在使用NestJS过程中接触到了 TypeORM 这个ORM框架。

这里以一个 ToDoList 为案例，介绍一下这个库的使用。

中文文档：https://typeorm.bootcss.com/

# 安装和引入

安装

`npm install --save @nestjs/typeorm typeorm mysql2`

引入数据库

```ts
// app.module.ts
import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'mysql',
      username: 'root',
      password: 'root',
      host: 'localhost',
      port: 3306,
      database: 'todolistdb',
      entities: [__dirname + '/**/*.entity{.ts,.js}'], //实体文件
      synchronize: true, //synchronize字段代表是否自动将实体类同步到数据库
      retryDelay: 500, //重试连接数据库间隔
      retryAttempts: 10, //重试连接数据库的次数
      autoLoadEntities: true, //如果为true,将自动加载实体 forFeature()方法注册的每个实体都将自动添加到配置对象的实体数组中
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule { }
```

# 建立todo对象

```ts
// src/todo/entities/todo.entity.ts
import { Column, Entity, PrimaryGeneratedColumn } from "typeorm";

@Entity()
export class Todo {
  // 自增列
  @PrimaryGeneratedColumn()
  id: number
  @Column()
  content: string
  @Column()
  status: boolean
}
```

# 增删改查

以一个简单的 ToDoList 为例

```ts
// src/todo/todo.service.ts
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Result } from 'src/config/resultType';
import { Repository } from 'typeorm';
import { CreateTodoDto } from './dto/create-todo.dto';
import { UpdateTodoDto } from './dto/update-todo.dto';
import { Todo } from './entities/todo.entity';

@Injectable()
export class TodoService {
  constructor(@InjectRepository(Todo) private todoRepository: Repository<Todo>) { }

  async create(createTodoDto: CreateTodoDto) {
    let res = await this.todoRepository.insert(createTodoDto)
    return Result.success(res)
  }

  async findAll() {
    let res = await this.todoRepository.find()
    return Result.success(res)
  }

  async findOne(id: number) {
    let res = await this.todoRepository.findOne({ where: { id } })
    return Result.success(res)
  }

  async update(id: number, updateTodoDto: UpdateTodoDto) {
    let res = await this.todoRepository.update(id, updateTodoDto)
    return Result.success(res)
  }

  async remove(id: number) {
    let res = await this.todoRepository.delete(id)
    return Result.success(res)
  }
}
// src/config/resultType.ts
export enum stateCode {
  OK = 200,
  UNEXPECT = 400, //未知错误
  NEED_AUTH = 401, //需要登录
  NO_FIND = 402, //找不到相关资源
  BAD_REQUEST = 403, //请求错误
  EXISTED = 408, //字段已存在
  SEVER_ERR = 500, //服务器错误
}

export class Result {
  constructor(private code: stateCode,
    private data: Object | Array<any> | string | null,
    private msg: string
  ) { }
  public static success(data: Object | Array<any> | string | null) {
    return new Result(200, data, "success")
  }
  public static fail(code: stateCode, msg: string) {
    return new Result(code, null, msg)
  }
}
```



# 

TypeORM 简单入门

# 前言

正则表达式是前端开发过程中不可或缺的一部分，当我们处理各种表单时，都会遇到数据格式校验的问题。

相较于通过各种判断实现的校验，正则表达式的校验更加优雅也更加灵活。

这篇文章就来介绍一下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 的实现方案，其他框架实现思路基本一致。

页面添加水印效果

# 前言

Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。

# 一、安装git

- windows下载

Git官网：[传送门](https://git-scm.com/)

淘宝镜像：[传送门](https://npm.taobao.org/mirrors/git-for-windows/)

下载完成，一路默认安装即可。

- mac

mac系统本身自带Git，一般无需二次安装，使用命令 `git --version` 可查看版本。



如果出现如下错误：

```
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
```

则说明电脑缺少命令行工具，输入 `xcode-select --install` 安装 Xcode 命令行工具即可。



如果安装命令行工具后，查看版本依然错误。

可以考虑使用 [homebrew](https://brew.sh/) 进行安装，先安装 homebrew，输入如下命令：

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

接着通过 homebrew 安装git

```
brew install git
```



# 二、环境配置

由于Git是分布式版本控制系统，所以，机器之间要互相分的开,所以每个机器都必须配置信息：

- 用户名
- 邮箱

查看当前配置信息：

```
git config --list
```

配置信息：

```
git config --global user.name '你的名字'
git config --global user.email '你的邮箱'
```

手动配置：

windows: `C：users/用户/.gitconfig`

# 三、Git 配置 Github

1. 生成SSH的key：`ssh-keygen -t rsa –C "xxx@xxx.com"`
2. 根据显示的目录`C:\Users\17789\.ssh`，找到`id_rsa.pub`，复制key
3. 登陆github，进入Settings
4. 点击New SSH key按钮，添加新的key

# 四、Git 工作流

**Git日常工作流：**

![image-20221016115407794](https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/202210161154913.png)

**Git工作区及文件状态**

![image-20221016115420175](https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/202210161154249.png)

暂存区的意义：1.创建索引。2.文件分类

# 五、Git 命令

## 1. 初始化仓库

`git init` 

初始化仓库并产生.git 文件夹

.git文件夹 非常重要,记录我们的变更内容(objects)，分支(refs)，日志(logs)，脚本（hooks）

## 2. 常用命令

- `git status` 查看当前文件状态。
- `git add 文件名称(文件夹)`将文件或者文件夹中的所有文件放到暂存区当中。
  - `git add index.html`
  - `git add components/`
  - `git add file1 file2` 会使 file1, file2 文件变绿
  - `git add .` 添加所有文件
- `git commit -m <message>` 提交此次变更。提交变更会有对应的日志生成
- `git log` 可以查看提交记录，什么人什么时间提交了commit

## 3. 分支相关

- `git branch` 用于查看分支， 高亮词条代表当前分支
- `git branch <branch-name>` 创建新分支
- `git checkout <branch-name>` 用于切换分支
- `git checkout -b <branch-name>` 创建并切换新分支
- `git merge <branch-name>` 合并分支
- `git branch -d <branch-name>` 删除分支
- `git branch -m <new-name>` 修改当前分支名称

## 4. 远程仓库

- `git clone <链接地址>` 克隆代码
- `git push origin <master>` 推送分支到远程
- `git pull` 从远程拉取代码
- `git pull origin <master>` 拉取指定分支
- `ssh-keygen` 远程仓库配置SSH配置

## 5. 文件回退

- `git reset --hard HEAD^` 回退到上一个版本
- `git reset --hard HEAD~n` 回退到上n个版本
- `git reflog` 查看版本回退日志
- `git reset --hard <commit-id>` 回退到指定版本

| 指令    | 作用范围                                |
| ------- | --------------------------------------- |
| --hard  | 回退全部，包括HEAD, index, working tree |
| --mixed | 回退部分，包括HEAD, index               |
| --soft  | 只回退HEAD                              |

## 6. 文件比较

- `git diff` 比较工作区与暂存区
- `git diff HEAD` 比较工作区与本地版本库中
  最近一次commit的内容
- `git diff --cached` 比较暂存区与本地版本库中最近一次commit的内容
- `git diff <commit-id> <commit-id>`比较两个commit之间的差异

# 六、Github使用流程

## 1. Git Bash Here

**前提：**

1. github创建项目
2. 进入项目目录
3. 进入Git Bash Here

**流程：**

1.初始化仓库 ：`git init`

2.设置远程仓库：`git remote add origin git@github.com:cat-heiza/test1.git`

3.创建分支：`git branch main`

4.将文件放到暂存区：`git add .`

5.将文件放入本地仓库：`git commit -m "第一次提交"`

6.将文件推送到远程仓库：`git push origin main`

## 2. VS Code集成git

**前提：**

1. github创建项目
2. vs code打开项目目录

**流程：**

> 使用alt + shift + P进行搜索

1.初始化存储库：`git:init...`

2.添加远程存储库：`git:add remote...`

```
添加远程仓库：
1. 使用github链接添加
2. github登录VsCode，直接在github库中选择
```

3.暂存所有更改（更改右边的“+”）

4.提交到本地仓库：输入提交备注

5.添加分支：`git:create branch...`

6.推送到远程仓库（左下角的推送）

# 总结
以上就是我对Git一些常用命令的总结。


Git 常用命令

# 前言

本文主要介绍了前端开发在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;
}
```

# 总结

以上就是个人总结的一些基本用法，上述仅为个人理解，如果有错误，还请路过的大佬斧正！

React Router V6 入门指南

# 说明

Typora是一款非常优秀的markdown编辑器，可惜的是只支持本地编写，无法进行云备份和同步。

这篇文章将介绍，如何通过多款软件协作，打造一个属于自己的云笔记平台。

# 1.  安装Typora

Typora 是一个极简风格的Markdown编辑器和阅读器，可以提供无缝的编辑和阅读体验。

推荐购买正版（89RMB）：https://store.lizhi.io/p/typora?cid=xztt6ynq

旧版免费版本：

- windows版本链接: [百度云盘地址](https://pan.baidu.com/s/1NW5-aNyb1_RiyE-_Z1aSMw)  提取码: 2580
- mac版本链接:  [百度云盘地址](https://pan.baidu.com/s/1-eAZrY-Lg5QMiHmj4jLTrw)  提取码: 2580 

# 2. 购买图床

当我们记录文章时，总会插入一些图片，而这些图片只存放在本地非常不安全。当图片不小心丢失或者移动位置时，可能相关联的文章也会变得不堪入目。所以有必要为我们笔记中的图片配置一个稳定的不易丢失的存储地址，也就是图床。

- 推荐使用 [阿里云oss](https://common-buy.aliyun.com/?spm=5176.7933691.J_5253785160.2.7c9c4c59pucWmL&commodityCode=ossbag#/buy)（9 RMB/年），40G的存储容量对于存储笔记的图片来说绰绰有余，用9元每年的价格来换一个稳定的图床，个人认为是可以接受的。

- 还可以选择 [七牛云存储](https://portal.qiniu.com/kodo/overview) （免费）,赠送的10G存储容量，用来存储笔记中的图片也完全够用。

# 3. 安装PicGo

PicGo是一个用于快速上传图片并获取图片 URL 链接的工具。

官网下载地址：[立即下载](https://github.com/Molunerfinn/PicGo/releases/tag/v2.3.0)

windows版本链接：[百度网盘地址](https://pan.baidu.com/s/1pgA4M3z_EJ4jvEeOpLISCw)  提取码: 2580 

mac版本链接：[百度网盘地址](https://pan.baidu.com/s/19q2IE50pNyxBCUc4xSbFqQ)  提取码: 2580

# 4. PicGo配置阿里云oss or 七牛云oss

**step1：**打开阿里云OSS控制台  ->  Bucket列表  ->  创建Bucket（读写权限设置为公共读、其他选项默认即可）

**step2：** 鼠标移入头像  ->  点击accesskey管理  ->  查看对应的 keyid 以及 Secret

**step3：** 打开PicGo  ->  图床设置  ->  阿里云OSS  -> 将对应的内容填进去，点击确定并设置为默认图床

![image-20220725133935191](https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220725133935191.png)

注：七牛图床操作类似，再此不再赘述。

# 5. Typora配置PicGo

打开Typora  ->  文件  ->  偏好设置  ->  根据下图进行设置

![image-20220725134638724](https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220725134638724.png)

# 6. 配置坚果云

使用坚果云主要是为了防止本地文件丢失。坚果云提供了1G的免费云存储空间，对于只存储笔记文件来说完全足够。

坚果云提供了免费的版本控制，一个月以内的文件操作都可以进行回退操作。

坚果云不像百度网盘是一个本地和云端完全分离的文件夹，它是将本地文件夹同步至云端，当本地文件夹加入新文件时，在云端也可实现同步。

**坚果云的操作非常简单，只要将笔记的文件夹上传至坚果云即可。**



![image-20220725135208847](https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220725135208847.png)

# 7. 如何实现多端查看？

**方案一：直接在坚果云上浏览（免费）**

坚果云app内置了markdown的阅读器，可以直接在坚果云中阅读文档。这也是最便捷的方式。

**方案二：有道云笔记（免费）**

点击新建  ->  上传文件夹

可以将所有markdown笔记一次性导入有道云笔记。

优点：导入方便、多端同步、只需要下载一个有道云笔记即可共享所有文档、内容匹配检索功能强大，可以在多个文档中检索关键字。

缺点：MarkDown不支持侧边栏查看文档大纲，在阅读长篇Markdown文档时体验不太好。

![image-20220725140429666](https://djc-note-images.oss-cn-hangzhou.aliyuncs.com/picgo/image-20220725140429666.png)

**方案三：marginNote 3（68 RMB，仅限ios用户使用）**

marginNote是一款优秀的阅读app，尤其是阅读PDF文档，体验极佳。

但是marginNote本身并不支持阅读Markdown文件，所以需要先将markdown文件另存为PDF文件。

marginNote中的文档可以通过iCloud自动同步多端，在iphone/ipad/mac中可以同步更新。



使用流程：

**step1：** 在typora中将markdown文件导出为PDF文件，并放入坚果云文件夹中 。

**step2：** 在 iphone/ipad中打开坚果云，将坚果云中导出的PDF文件分享至 **marginNote3** 中。



优点：支持侧边栏展示大纲、在阅读长篇文档时可以快速定位、。

缺点：导入文档相对复杂。

# 总结

以上就是关于如何搭建云笔记的全部内容，编写不易，喜欢的话留个点赞吧！！！