第十二篇【传奇开心果系列】Ant Design Mobile of React开发移动应用：内置组件实现酷炫CSS 动画

news2024/11/14 21:09:14

Ant Design Mobile of React 开发移动应用示例博文系列

第一篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:从helloworld开始
第二篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:天气应用
第三篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:健身追踪
第四篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：数据存储的七种类型讲解和示例
第五篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：基础页面制作介绍和示例代码
第六篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：UI框架39个组件集中讲解和示例代码
第七篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：安装配置node和npm避坑攻略
第八篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：打包上架部署云服务托管等后期工作
第九篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：使用内置组件实现响应式设计
第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用：涉相关基础知识介绍和示例
第十一篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:移动商城应用
第十二篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:内置组件实现酷炫CSS 动画

传奇开心果博文系列

    • Ant Design Mobile of React 开发移动应用示例博文系列
  • 博文目录
    • 一、前言
    • 二、CSS动画介绍
    • 三、淡入淡出动画开发中应用示例代码
    • 四、滑动动画开发中应用示例代码
    • 五、缩放动画开发中应用示例代码
    • 六、渐变色动画开发中应用示例代码
    • 七、旋转动画开发中应用示例代码
    • 八、弹跳动画开发中应用示例代码
    • 九、归纳总结知识点

博文目录

一、前言

CSS 动画：Ant Design Mobile of React 提供了一些内置组件实现的酷炫的CSS动画效果，如淡入淡出、滑动等。了解 CSS 动画的基本原理和使用方式可以帮助开发者在开发中添加自定义的动画效果，提升用户体验。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、CSS动画介绍

Ant Design Mobile of React 提供了一些内置组件实现的酷炫的CSS动画效果，可以用于创建各种动态和交互式的用户界面。

1.淡入淡出（Fade）动画

可以通过设置组件的 transitionName 属性来实现。例如，你可以将一个组件的 transitionName 设置为 'fade'，然后在 CSS 样式中定义 fade-enter、fade-enter-active、fade-exit 和 fade-exit-active 类名，分别表示进入和离开动画的不同状态。

2.滑动（Slide）动画

可以通过设置组件的 transitionName 属性来实现。你可以将一个组件的 transitionName 设置为 'slide'，然后在 CSS 样式中定义 slide-enter、slide-enter-active、slide-exit 和 slide-exit-active 类名，分别表示进入和离开动画的不同状态。

3.缩放（Scale）动画

可以通过设置组件的 transitionName 属性来实现缩放效果。你可以将一个组件的 transitionName 设置为 'scale'，然后在 CSS 样式中定义 scale-enter、scale-enter-active、scale-exit 和 scale-exit-active 类名，分别表示进入和离开动画的不同状态。

4.渐变色（Gradient）动画

可以通过设置组件的 transitionName 属性来实现渐变色效果。你可以将一个组件的 transitionName 设置为 'gradient'，然后在 CSS 样式中定义 gradient-enter、gradient-enter-active、gradient-exit 和 gradient-exit-active 类名，分别表示进入和离开动画的不同状态。

5.旋转（Rotate）动画

可以通过设置组件的 transitionName 属性来实现旋转效果。你可以将一个组件的 transitionName 设置为 'rotate'，然后在 CSS 样式中定义 rotate-enter、rotate-enter-active、rotate-exit 和 rotate-exit-active 类名，分别表示进入和离开动画的不同状态。

6.弹跳（Bounce）动画

可以通过设置组件的 transitionName 属性来实现弹跳效果。你可以将一个组件的 transitionName 设置为 'bounce'，然后在 CSS 样式中定义 bounce-enter、bounce-enter-active、bounce-exit 和 bounce-exit-active 类名，分别表示进入和离开动画的不同状态。
这些动画效果可以根据你的需求进行定制和扩展。你可以在 Ant Design Mobile of React 的官方文档中找到更多关于这些动画效果的详细信息和示例代码。

三、淡入淡出动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你需要先引入相应的 CSS 样式文件或库，以确保动画效果能够正常工作。通常情况下，你可以在项目的入口文件（如 index.js）中引入这些样式。
以下是一个使用淡入淡出效果的示例代码：
首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装：

npm install @am-design/css

或

yarn add @am-design/css

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用淡入淡出效果。例如，你可以创建一个名为 FadeExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const FadeExample = () => {
  const [show, setShow] = useState(false);

  const handleToggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="fade"
        unmountOnExit
      >
        <div className="fade-content">Content</div>
      </CSSTransition>
    </div>
  );
};

export default FadeExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现淡入淡出效果。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。
接着，在 CSS 样式文件中定义淡入淡出效果的类名：

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

以上代码中，fade-enter 和 fade-exit 类名定义了进入和离开动画的初始状态，而 fade-enter-active 和 fade-exit-active 类名定义了进入和离开动画的活动状态。
最后，你可以在你的应用中使用 FadeExample 组件来展示淡入淡出效果：

import React from 'react';
import FadeExample from './FadeExample';

const App = () => {
  return (
    <div>
      <h1>Ant Design Mobile of React</h1>
      <FadeExample />
    </div>
  );
};

export default App;

通过以上代码，你就可以在你的移动应用中使用淡入淡出效果了。当点击 “Toggle” 按钮时，FadeExample 组件的内容将以淡入淡出的方式显示或隐藏。

四、滑动动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你可以使用滑动（Slide）动画效果。以下是一个使用滑动动画的示例代码：

首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装。

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用滑动动画。例如，你可以创建一个名为 SlideExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const SlideExample = () => {
  const [show, setShow] = useState(false);

  const handleToggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="slide"
        unmountOnExit
      >
        <div className="slide-content">Content</div>
      </CSSTransition>
    </div>
  );
};

export default SlideExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现滑动动画。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。

接着，在 CSS 样式文件中定义滑动动画的类名：

.slide-enter {
  transform: translateX(-100%);
}

.slide-enter-active {
  transform: translateX(0);
  transition: transform 300ms;
}

.slide-exit {
  transform: translateX(0);
}

.slide-exit-active {
  transform: translateX(100%);
  transition: transform 300ms;
}

以上代码中，slide-enter 和 slide-exit 类名定义了进入和离开动画的初始状态，而 slide-enter-active 和 slide-exit-active 类名定义了进入和离开动画的活动状态。

最后，你可以在你的应用中使用 SlideExample 组件来展示滑动动画：

import React from 'react';
import SlideExample from './SlideExample';

const App = () => {
  return (
    <div>
      <h1>Ant Design Mobile of React</h1>
      <SlideExample />
    </div>
  );
};

export default App;

通过以上代码，你就可以在你的移动应用中使用滑动动画了。当点击 “Toggle” 按钮时，SlideExample 组件的内容将以滑动的方式显示或隐藏。

五、缩放动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你可以使用滑动缩放动画效果。以下是一个使用滑动缩放动画的示例代码：

首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装。

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用滑动缩放动画。例如，你可以创建一个名为 ZoomSlideExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const ZoomSlideExample = () => {
  const [show, setShow] = useState(false);

  const handleToggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="zoom-slide"
        unmountOnExit
      >
        <div className="zoom-slide-content">Content</div>
      </CSSTransition>
    </div>
  );
};

export default ZoomSlideExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现滑动缩放动画。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。

接着，在 CSS 样式文件中定义滑动缩放动画的类名：

.zoom-slide-enter {
  opacity: 0;
  transform: translateY(-100%) scale(0.5);
}

.zoom-slide-enter-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 300ms, transform 300ms;
}

.zoom-slide-exit {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.zoom-slide-exit-active {
  opacity: 0;
  transform: translateY(100%) scale(0.5);
  transition: opacity 300ms, transform 300ms;
}

以上代码中，zoom-slide-enter 和 zoom-slide-exit 类名定义了进入和离开动画的初始状态，而 zoom-slide-enter-active 和 zoom-slide-exit-active 类名定义了进入和离开动画的活动状态。

最后，你可以在你的应用中使用 ZoomSlideExample 组件来展示滑动缩放动画：

import React from 'react';
import ZoomSlideExample from './ZoomSlideExample';

const App = () => {
  return (
    <div>
      <h1>Ant Design Mobile of React</h1>
      <ZoomSlideExample />
    </div>
  );
};

export default App;

通过以上代码，你就可以在你的移动应用中使用滑动缩放动画了。当点击 “Toggle” 按钮时，ZoomSlideExample 组件的内容将以滑动缩放的方式显示或隐藏。

六、渐变色动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你可以使用渐变色动画效果。以下是一个使用渐变色动画的示例代码：

首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装：

npm install @am-design/css

或

yarn add @am-design/css

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用渐变色动画。例如，你可以创建一个名为 GradientAnimationExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const GradientAnimationExample = () => {
  const [show, setShow] = useState(false);

  const handleToggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="gradient-animation"
        unmountOnExit
      >
        <div className="gradient-animation-content">Content</div>
      </CSSTransition>
    </div>
  );
};

export default GradientAnimationExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现渐变色动画。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。

接着，在 CSS 样式文件中定义渐变色动画的类名：

.gradient-animation-enter {
  opacity: 0;
}

.gradient-animation-enter-active {
  opacity: 1;
  transition: opacity 300ms;
  animation: gradient-animation 3s infinite;
}

.gradient-animation-exit {
  opacity: 1;
}

.gradient-animation-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

@keyframes gradient-animation {
  0% {
    background: linear-gradient(to right, #ff0000, #00ff00);
  }
  50% {
    background: linear-gradient(to right, #00ff00, #0000ff);
  }
  100% {
    background: linear-gradient(to right, #0000ff, #ff0000);
  }
}

以上代码中，gradient-animation-enter 和 gradient-animation-exit 类名定义了进入和离开动画的初始状态，而 gradient-animation-enter-active 和 gradient-animation-exit-active 类名定义了进入和离开动画的活动状态。

@keyframes 定义了渐变色动画的关键帧，从左到右依次变化颜色。

最后，你可以在你的应用中使用 GradientAnimationExample 组件来展示渐变色动画：

import React from 'react';
import GradientAnimationExample from './GradientAnimationExample';

const App = () => {
  return (
    <div>
      <h1>Ant Design Mobile of React</h1>
      <GradientAnimationExample />
    </div>
  );
};

export default App;

通过以上代码，你就可以在你的移动应用中使用渐变色动画了。当点击 “Toggle” 按钮时，GradientAnimationExample 组件的内容将以渐变色的方式显示或隐藏，并且背景颜色会按照定义的动画效果进行变化。

七、旋转动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你可以使用旋转动画效果。以下是一个使用旋转动画的示例代码：

首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装：

npm install @am-design/css

或

yarn add @am-design/css

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用旋转动画。例如，你可以创建一个名为 RotateAnimationExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const RotateAnimationExample = () => {
  const [show, setShow] = useState(false);

  const handleToggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="rotate-animation"
        unmountOnExit
      >
        <div className="rotate-animation-content">Content</div>
      </CSSTransition>
    </div>
  );
};

export default RotateAnimationExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现旋转动画。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。

接着，在 CSS 样式文件中定义旋转动画的类名：

.rotate-animation-enter {
  opacity: 0;
  transform: rotate(0);
}

.rotate-animation-enter-active {
  opacity: 1;
  transform: rotate(360deg);
  transition: opacity 300ms, transform 300ms;
}

.rotate-animation-exit {
  opacity: 1;
  transform: rotate(360deg);
}

.rotate-animation-exit-active {
  opacity: 0;
  transform: rotate(0);
  transition: opacity 300ms, transform 300ms;
}

以上代码中，rotate-animation-enter 和 rotate-animation-exit 类名定义了进入和离开动画的初始状态，而 rotate-animation-enter-active 和 rotate-animation-exit-active 类名定义了进入和离开动画的活动状态。

最后，你可以在你的应用中使用 RotateAnimationExample 组件来展示旋转动画：

import React from 'react';
import RotateAnimationExample from './RotateAnimationExample';

const App = () => {
  return (
    <div>
      <h1>Ant Design Mobile of React</h1>
      <RotateAnimationExample />
    </div>
  );
};

export default App;

通过以上代码，你就可以在你的移动应用中使用旋转动画了。当点击 “Toggle” 按钮时，RotateAnimationExample 组件的内容将以旋转的方式显示或隐藏。

八、弹跳动画开发中应用示例代码

在这里插入图片描述当使用 Ant Design Mobile of React 开发移动应用时，你可以使用弹跳动画效果。以下是一个使用弹跳动画的示例代码：

首先，你需要安装 @am-design/css 库，它包含了 Ant Design Mobile 的 CSS 样式文件。你可以使用 npm 或 yarn 进行安装：

npm install @am-design/css

或

yarn add @am-design/css

然后，在你的入口文件中，引入 Ant Design Mobile 的 CSS 样式文件：

import '@am-design/css/dist/am-design.css';

接下来，你可以在你的组件中使用弹跳动画。例如，你可以创建一个名为 BounceAnimationExample 的组件：

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const BounceAnimationExample = () => {
  const [show, setShow] = useState(false);

  const handleToggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={handleToggle}>Toggle</button>
      <CSSTransition
        in={show}
        timeout={300}
        classNames="bounce-animation"
        unmountOnExit
      >
        <div className="bounce-animation-content">Content</div>
      </CSSTransition>
    </div>
  );
};

export default BounceAnimationExample;

在上面的代码中，我们使用了 react-transition-group 库中的 CSSTransition 组件来实现弹跳动画。通过设置 in 属性来控制组件的显示和隐藏，timeout 属性定义了动画的持续时间，classNames 属性指定了动画效果的类名前缀。

接着，在 CSS 样式文件中定义弹跳动画的类名：

.bounce-animation-enter {
  opacity: 0;
  transform: translateY(-100%);
}

.bounce-animation-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.bounce-animation-exit {
  opacity: 1;
  transform: translateY(0);
}

.bounce-animation-exit-active {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 300ms, transform 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

以上代码中，bounce-animation-enter 和 bounce-animation-exit 类名定义了进入和离开动画的初始状态，而 bounce-animation-enter-active 和 bounce-animation-exit-active 类名定义了进入和离开动画的活动状态。

最后，你可以在你的应用中使用 BounceAnimationExample 组件来展示弹跳动画：

import React from 'react';
import BounceAnimationExample from './BounceAnimationExample';

const App = () => {
  return (
    <div>
      <h1>Ant Design Mobile of React</h1>
      <BounceAnimationExample />
    </div>
  );
};

export default App;

通过以上代码，你就可以在你的移动应用中使用弹跳动画了。当点击 “Toggle” 按钮时，BounceAnimationExample 组件的内容将以弹跳的方式显示或隐藏。

希望这些示例能够帮助你理解如何在 Ant Design Mobile of React 中使用内置动画。如果你有任何进一步的问题，请随时提问。

九、归纳总结知识点

使用 Ant Design Mobile of React 的 CSS 内置动画的知识点总结如下：

  1. Ant Design Mobile（AM）提供了一些内置的 CSS 动画效果，可以直接在组件中使用。

  2. 在使用内置动画之前，需要确保已正确引入 Ant Design Mobile 的 CSS 样式文件。

  3. 内置动画类名的命名规则为 am-animation-<animation-name>，其中 <animation-name> 是具体的动画名称。

  4. 可以通过在组件的 className 属性中添加内置动画类名来应用相应的动画效果。

  5. 内置动画可以应用于组件的进入、离开和活动状态，具体的类名为：

    • 进入动画：am-animation-enter 和 am-animation-enter-active
    • 离开动画：am-animation-exit 和 am-animation-exit-active
    • 活动动画：am-animation-active

  6. 内置动画可以使用在 CSSTransition 组件中，通过设置相应的类名和持续时间来控制动画效果。

  7. 内置动画可以与其他 CSS 类名和样式一起使用，以实现更复杂的动画效果。

  8. 可以使用 @keyframes 规则自定义和扩展内置动画，以满足特定的需求。

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述总结以上知识点，你可以在 Ant Design Mobile of React 中利用内置动画类名和 CSSTransition 组件来实现各种动画效果。通过合理应用这些知识点，可以为你的移动应用增添一些生动和吸引人的交互效果。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1397755.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

flutter获取地理定位：geolocator依赖详细用法

flutter获取地理定位：geolocator依赖详细用法

本文使用geolocator插件实现app物理定位功能。 该插件的主要功能有&#xff1a; 获取最后已知位置&#xff1b;获取设备当前位置&#xff1b;获取连续的位置更新&#xff1b;检查设备是否启用了定位服务&#xff1b;计算两个地理坐标之间的距离&#xff08;米&#xff09;&am…
阅读更多...
linux网络协议栈2--网络包接收发送流程

linux网络协议栈2--网络包接收发送流程

上文我们讲了报文格式&#xff0c;应该对数据传输格式有了一定了解&#xff0c;这篇文章主要讲述的是网络包接收和发送的流程&#xff0c;主要是大方面来介绍。 网络包接收流程 当网络数据帧通过网络传输到达网卡时&#xff0c;网卡会将网络数据帧通过DMA的方式放到环形缓冲区…
阅读更多...
Flutter轮播图Banner

Flutter轮播图Banner

使用插件&#xff1a;flutter_swiper 实现轮播图 pubspec.yaml 增加 &#xff1a;flutter_swiper : ^lastest_version 在项目文件夹下打开命令行执行&#xff1a;flutter packages get 安装插件 home_page.dart中使用swiper 程序运行:先启动虚拟设备后&#xff0c;执行命令f…
阅读更多...
【C语言】linux内核ipoib模块 - ipoib_send

【C语言】linux内核ipoib模块 - ipoib_send

一、ipoib_send函数定义 int ipoib_send(struct net_device *dev, struct sk_buff *skb,struct ib_ah *address, u32 dqpn) {struct ipoib_dev_priv *priv ipoib_priv(dev);struct ipoib_tx_buf *tx_req;int hlen, rc;void *phead;unsigned int usable_sge priv->max_sen…
阅读更多...
redis数据安全（一）数据持久化

redis数据安全（一）数据持久化

一、Redis数据安全措施: 1、将数据持久化至硬盘 2、将数据复制至其他机器&#xff1b; 复制是在数据持久化的基础上进行的。 二、将数据持久化至硬盘 1、介绍&#xff1a;Redis是一个基于内存的数据库&#xff0c;它的数据是存放在内存中&#xff0c;内存有个问题就是关闭…
阅读更多...
大模型 RAG 面试篇

大模型 RAG 面试篇

1.LLMs 存在模型幻觉问题&#xff0c;请问如何处理&#xff1f; 检索LLM。 先用问题在领域数据库里检索到候选答案&#xff0c;再用LLM对答案进行加工。 2.基于LLM向量库的文档对话 思路是怎么样&#xff1f; 加载文件读取文本文本分割文本向量化问句向量化在文本向量中匹配…
阅读更多...
构建高效外卖系统：技术实践与代码示例

构建高效外卖系统：技术实践与代码示例

外卖系统在现代社会中扮演着重要的角色&#xff0c;为用户提供了便捷的用餐解决方案。在这篇文章中&#xff0c;我们将探讨构建高效外卖系统的技术实践&#xff0c;同时提供一些基础的代码示例&#xff0c;帮助开发者更好地理解和应用这些技术。 1. 技术栈选择 构建外卖系统…
阅读更多...
Python爬虫从入门到入狱系列合集

Python爬虫从入门到入狱系列合集

我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448; 入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448; 虚 拟 环 境 搭 建 &#xff1a;&#x1f449;&…
阅读更多...
【Qt5】QString的成员函数chop

【Qt5】QString的成员函数chop

2024年1月19日&#xff0c;周五下午 QString 的 chop 方法用于从字符串的末尾移除指定数量的字符。这个方法会修改原始字符串&#xff0c;并返回 void。 下面是一个简单的示例&#xff1a; #include <QString> #include <QDebug>int main() {QString originalStr…
阅读更多...
python使用jupyter记笔记

python使用jupyter记笔记

目录 一、安装 二、运行jupyter 三、使用 四、记笔记 Jupyter Notebook&#xff08;此前被称为 IPython notebook&#xff09;是一个交互式笔记本&#xff0c;支持运行 40 多种编程语言。 Jupyter Notebook 的本质是一个 Web 应用程序&#xff0c;便于创建和共享程序文档&a…
阅读更多...
接口的返回值中所需信息作为其他接口入参使用（postman与jmeter的使用）

接口的返回值中所需信息作为其他接口入参使用（postman与jmeter的使用）

一、背景&#xff1a; 偶尔会用到一个场景&#xff0c;两个接口之前的调用有依赖关系&#xff0c;将其中一个的返回参数中的部分信息取出来作为入参在第二个接口中使用&#xff0c;代码内是比较好实现&#xff0c;只要定义一个变量&#xff0c;用于参数传递。 如果是测试过程中…
阅读更多...
java小项目：简单的收入明细记事本，超级简单（不涉及数据库，通过字符串来记录）

java小项目：简单的收入明细记事本，超级简单（不涉及数据库，通过字符串来记录）

一、效果 二、代码 2.1 Acount类 package com.demo1;public class Acount {public static void main(String[] args) {String details "收支\t账户金额\t收支金额\t说 明\n"; //通过字符串来记录收入明细int balance 10000;boolean loopFlag true;//控制循…
阅读更多...
关于datagrip的一个错误。Unexpected update count received (Actual: 3, Expected: 1).

关于datagrip的一个错误。Unexpected update count received (Actual: 3, Expected: 1).

这一行原本的值是<null><null><null>,现在我们把它修改为1,114&#xff0c;无名氏&#xff0c;但却报错。 这是对应的sql语句&#xff0c;原因在于有三行全为 <null><null><null>&#xff0c;where无法指定是哪一行&#xff0c;所以看起来…
阅读更多...
电子学会C/C++编程等级考试2023年12月（七级）真题解析

电子学会C/C++编程等级考试2023年12月（七级）真题解析

C/C++等级考试（1~8级）全部真题・点这里 第1题：迷宫 一天Extense在森林里探险的时候不小心走入了一个迷宫，迷宫可以看成是由n * n的格点组成，每个格点只有2种状态，.和#，前者表示可以通行后者表示不能通行。同时当Extense处在某个格点时，他只能移动到东南西北(或者说上下…
阅读更多...
【RabbitMQ】RabbitMQ安装与使用详解以及Spring集成

【RabbitMQ】RabbitMQ安装与使用详解以及Spring集成

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《RabbitMQ实战》。&#x1f3af;&#x1f3af; &am…
阅读更多...
GPT应用开发：编写插件获取实时天气信息

GPT应用开发：编写插件获取实时天气信息

欢迎阅读本系列文章&#xff01;我将带你一起探索如何利用OpenAI API开发GPT应用。无论你是编程新手还是资深开发者&#xff0c;都能在这里获得灵感和收获。 本文&#xff0c;我们将继续展示聊天API中插件的使用方法&#xff0c;让你能够轻松驾驭这个强大的工具。 插件运行效…
阅读更多...
母婴品牌找小红书达人卖货怎么做？

母婴品牌找小红书达人卖货怎么做？

小红书母婴种草推广&#xff0c;就是品牌方找小红书上的达人进行产品体验和内容分享&#xff0c;从而达到卖货的目的&#xff0c;软广形式更容易被大众所接受&#xff0c;而且小红书平台上的宝妈用户群体都是有一定消费水平的一二线城市用户&#xff0c;所以这样就会形成一套完…
阅读更多...
git提权

git提权

实验环境——vulnhub-dc2靶场 git提权 前提&#xff1a;用户可以使用sudo中git权限 查看sudo权限 sudo -l可以发现git命令存在sudo提权 基于此进行权限提升 方式&#xff1a; sudo git help config #在末行命令模式输入 !/bin/bash 或 !sh #完成提权 sudo git -p help…
阅读更多...
2023年12月 C/C++（七级）真题解析#中国电子学会#全国青少年软件编程等级考试

2023年12月 C/C++（七级）真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++等级考试（1~8级）全部真题・点这里 第1题：迷宫 一天Extense在森林里探险的时候不小心走入了一个迷宫，迷宫可以看成是由n * n的格点组成，每个格点只有2种状态，.和#，前者表示可以通行后者表示不能通行。同时当Extense处在某个格点时，他只能移动到东南西北(或者说上下…
阅读更多...
【大坑】MyBatisPlus使用updateById莫名将数据四舍五入了

【大坑】MyBatisPlus使用updateById莫名将数据四舍五入了

问题描述 我目前在为本地的一所高中开发一个成绩分析的网站&#xff0c;后端使用的是SpringBootMyBatisPlus&#xff0c;业务逻辑是用户在前端上传EXCEL文件&#xff0c;后端从文件中读取成绩存到数据库用于分析。但是奇怪的是&#xff1a;在后端&#xff0c;进入数据库之前的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023