当前位置： 首页 > news >正文

低代码前端框架Amis全面教程

news 2025/11/4 22:16:36

什么是Amis？

1.1 Amis的基本概念

Amis是一个基于JSON配置的前端低代码框架，由百度开源。它允许开发者通过简单的JSON配置文件来生成复杂的后台管理页面，从而大大减少了前端开发的工作量。Amis的核心理念是通过配置而非编码来实现页面的构建，这使得即使是不熟悉前端技术的开发者也能快速上手。

Amis的主要组成部分包括：

  • JSON配置文件：定义页面的结构、样式和行为。
  • 组件库：提供了一系列可复用的UI组件，如表单、表格、图表等。
  • 渲染引擎：负责解析JSON配置并生成对应的HTML和JavaScript代码。

通过这些组件和工具，Amis能够帮助开发者快速构建出功能丰富、界面美观的后台管理系统。

1.2 Amis的特点

Amis具有以下几个显著特点：

  • 低代码：通过JSON配置即可生成页面，无需编写大量前端代码，降低了开发门槛。
  • 高效：能够快速构建和迭代页面，提高了开发效率。
  • 可扩展：支持自定义组件和扩展，满足不同项目的需求。
  • 广泛应用：Amis在百度内部得到了广泛应用，在4年多的时间里创建了3w多页面，从内容审核到机器管理，从数据分析到模型训练，Amis满足了各种各样的页面需求。
  • 易于维护：由于页面是通过JSON配置来定义的，因此代码的可读性和可维护性都非常高。

通过这些特点，Amis不仅提升了开发效率，还降低了开发和维护的成本，使得更多的开发者能够参与到前端页面的开发中来。

快速开始

2.1 快速开始

Amis 是一个基于 JSON 配置的前端低代码框架，让开发者通过简单的配置就能快速生成各种后台页面。以下是快速开始使用 Amis 的步骤：

2.1.1 SDK 版本

SDK 版本适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，可以像 Vue/jQuery 那样外链代码就能使用。

  1. 下载 SDK

    • 从 GitHub 下载：文件是 sdk.tar.gz。
    • 使用 npm 下载：在 node_modules\amis\sdk 目录里就能找到。

  2. 创建 HTML 文件
    新建一个 hello.html 文件，内容如下：

    <!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"/><title>amis demo</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/><meta http-equiv="X-UA-Compatible" content="IE=Edge"/><link rel="stylesheet" href="sdk.css"/><link rel="stylesheet" href="helper.css"/><style>html, body, .app-wrapper {position: relative;width: 100%;height: 100%;margin: 0;padding: 0;}</style>
</head>
<body><div id="root" class="app-wrapper"></div><script src="sdk.js"></script><script type="text/javascript">(function() {let amis = amisRequire('amis/embed');let amisJSON = {type: 'page',title: '表单页面',body: {type: 'form',mode: 'horizontal',api: '/saveForm',controls: [{ label: 'Name', type: 'text', name: 'name' },{ label: 'Email', type: 'email', name: 'email' }]}};let amisScoped = amis.embed('#root', amisJSON);})();</script>
</body>
</html>
2.1.2 npm 版本

npm 版本适合对前端或 React 有一定了解的开发者。

  1. 安装 Amis

    npm install amis

  2. 创建 React 组件
    在你的 React 项目中创建一个组件，例如 AmisPage.js，内容如下：

    import React from 'react';
import { render as renderAmis } from 'amis';const amisJSON = {type: 'page',title: '表单页面',body: {type: 'form',mode: 'horizontal',api: '/saveForm',controls: [{ label: 'Name', type: 'text', name: 'name' },{ label: 'Email', type: 'email', name: 'email' }]}
};const AmisPage = () => {return (<div id="root">{renderAmis(amisJSON, {}, {})}</div>);
};export default AmisPage;

  3. 在主应用中引入
    在你的主应用文件（例如 App.js）中引入并使用 AmisPage 组件：

    import React from 'react';
import ReactDOM from 'react-dom';
import AmisPage from './AmisPage';const App = () => {return (<div><AmisPage /></div>);
};ReactDOM.render(<App />, document.getElementById('root'));

2.2 常见问题

在使用 Amis 的过程中，可能会遇到一些常见问题。以下是一些常见问题的解答：

2.2.1 如何处理数据交互？

Amis 提供了丰富的数据交互功能。你可以在 JSON 配置中定义 API，并在组件中使用这些 API 来获取或提交数据。例如：

{"type": "form","api": "/saveForm","controls": [{ label: "Name", type: "text", name: "name" },{ label: "Email", type: "email", name: "email" }]
}

在这个示例中，表单提交时会调用 /saveForm API。

2.2.2 如何自定义样式？

Amis 允许你通过 className 属性来添加自定义样式。例如：

{"type": "form","className": "custom-form","controls": [{ label: "Name", type: "text", name: "name" }]
}

然后在你的 CSS 文件中定义 custom-form 样式：

.custom-form {background-color: #f0f0f0;padding: 20px;
}
2.2.3 如何处理表单验证？

Amis 内置了表单验证功能。你可以在 JSON 配置中为表单字段添加验证规则。例如：

{"type": "form","controls": [{label: "Name",type: "text",name: "name",required: true},{label: "Email",type: "email",name: "email",required: true,validations: {isEmail: true}}]
}

在这个示例中，Name 和 Email 字段都是必填的，并且 Email 字段必须是一个有效的邮箱地址。

{"h1": "如何使用Amis？","h2": [{"title": "3.1 安装Amis","content": "在使用Amis之前，首先需要将其安装到你的项目中。Amis可以通过npm或yarn进行安装。以下是具体的安装步骤：\n\n### 使用npm安装\n```bash\nnpm install amis\n```\n\n### 使用yarn安装\n```bash\nyarn add amis\n```\n\n安装完成后，你就可以在你的项目中引入Amis并开始使用了。"},{"title": "3.2 创建JSON配置文件","content": "Amis的核心是通过JSON配置来生成页面。你需要创建一个JSON文件，并在其中定义页面的结构和行为。以下是一个简单的JSON配置示例：\n\n```json\n{\n  \"type\": \"page\",\n  \"body\": {\n    \"type\": \"form\",\n    \"api\": \"/saveForm\",\n    \"body\": [\n      {\n        \"type\": \"input-text\",\n        \"name\": \"name\",\n        \"label\": \"姓名\"\n      },\n      {\n        \"type\": \"input-password\",\n        \"name\": \"password\",\n        \"label\": \"密码\"\n      }\n    ]\n  }\n}\n```\n\n在这个示例中，我们定义了一个包含表单的页面，表单中有两个字段：姓名和密码。"},{"title": "3.3 引入Amis","content": "在你的项目中引入Amis，可以通过以下方式：\n\n```javascript\nimport { render as amisRender } from 'amis';\nimport 'amis/lib/themes/default.css';\nimport 'amis/lib/helper.css';\nimport 'amis/sdk/iconfont.css';\n```\n\n确保你已经引入了Amis的CSS文件，以便页面能够正确渲染。"},{"title": "3.4 渲染页面","content": "在引入Amis之后，你可以使用amisRender函数来渲染页面。以下是一个简单的示例：\n\n```javascript\nconst amisJSON = {\n  \"type\": \"page\",\n  \"body\": {\n    \"type\": \"form\",\n    \"api\": \"/saveForm\",\n    \"body\": [\n      {\n        \"type\": \"input-text\",\n        \"name\": \"name\",\n        \"label\": \"姓名\"\n      },\n      {\n        \"type\": \"input-password\",\n        \"name\": \"password\",\n        \"label\": \"密码\"\n      }\n    ]\n  }\n};\n\nconst app = document.getElementById('app');\napp.innerHTML = amisRender(amisJSON);\n```\n\n在这个示例中，我们将之前定义的JSON配置传递给amisRender函数，并将渲染结果插入到id为'app'的DOM元素中。"},{"title": "3.5 数据交互","content": "Amis支持与后端API进行数据交互。你可以在JSON配置中定义API，并在表单提交或其他操作时自动调用这些API。以下是一个示例：\n\n```json\n{\n  \"type\": \"page\",\n  \"body\": {\n    \"type\": \"form\",\n    \"api\": \"/saveForm\",\n    \"body\": [\n      {\n        \"type\": \"input-text\",\n        \"name\": \"name\",\n        \"label\": \"姓名\"\n      },\n      {\n        \"type\": \"input-password\",\n        \"name\": \"password\",\n        \"label\": \"密码\"\n      }\n    ]\n  }\n}\n```\n\n在这个示例中，表单提交时会自动调用`/saveForm`这个API，并将表单数据发送给后端。"}]
}

概念

4.1 配置与组件

在Amis中，配置与组件是构建页面的基础。Amis使用JSON配置来定义页面的结构和行为。每个组件都有其特定的配置项，通过这些配置项可以控制组件的显示和功能。

例如，一个简单的按钮组件可以这样配置：

{"type": "button","label": "点击我","actionType": "dialog","dialog": {"title": "提示","body": "你点击了按钮！"}
}

在这个例子中，type指定了组件的类型为按钮，label定义了按钮的文本，actionType和dialog则定义了按钮点击后的行为和弹出的对话框。

4.2 数据域与数据链

数据域（Data Scope）和数据链（Data Chain）是Amis中处理数据的核心概念。数据域定义了组件可以访问的数据范围，而数据链则描述了数据如何在组件之间传递。

例如，一个表单组件可以绑定到一个数据域：

{"type": "form","api": "/api/saveForm","body": [{"type": "input-text","name": "username","label": "用户名"},{"type": "input-password","name": "password","label": "密码"}]
}

在这个例子中，name属性定义了数据域中的字段名，表单提交时会将这些字段的数据发送到指定的API。

4.3 模板

模板（Template）是Amis中用于动态生成内容的一种机制。通过模板，可以根据数据动态渲染组件的内容。

例如，一个列表组件可以使用模板来显示每个项目的标题和描述：

{"type": "list","source": "${items}","item": {"type": "tpl","tpl": "<div><h3>${title}</h3><p>${description}</p></div>"}
}

在这个例子中，source指定了数据源，tpl定义了每个项目的模板，模板中的${title}和${description}会根据数据动态替换。

4.4 数据映射

数据映射（Data Mapping）是Amis中用于将数据从一个格式转换为另一个格式的一种机制。通过数据映射，可以方便地将后端返回的数据转换为前端组件需要的格式。

例如，一个API返回的数据格式如下：

{"data": {"userList": [{"name": "张三","age": 25},{"name": "李四","age": 30}]}
}

可以通过数据映射将其转换为列表组件需要的数据格式：

{"type": "list","source": "${data.userList}","item": {"type": "tpl","tpl": "<div><h3>${name}</h3><p>年龄：${age}</p></div>"}
}

4.5 表达式

表达式（Expression）是Amis中用于动态计算值的一种机制。通过表达式，可以根据数据动态计算组件的属性值。

例如，一个按钮组件可以根据条件动态显示不同的文本：

{"type": "button","label": "${isAdmin ? '管理员' : '普通用户'}"
}

在这个例子中，label属性的值会根据isAdmin的值动态计算。

4.6 联动

联动（Linkage）是Amis中用于实现组件之间交互的一种机制。通过联动，可以根据一个组件的状态动态改变另一个组件的属性。

例如，一个下拉框组件可以根据选择的项目动态改变表单的提交地址：

{"type": "form","api": "${selectedOption.api}","body": [{"type": "select","name": "selectedOption","label": "选择选项","options": [{"label": "选项1","value": "option1","api": "/api/option1"},{"label": "选项2","value": "option2","api": "/api/option2"}]}]
}

在这个例子中，api属性的值会根据selectedOption的值动态改变。

4.7 行为

行为（Action）是Amis中用于定义组件交互行为的一种机制。通过行为，可以定义组件的点击、提交、刷新等操作。

例如，一个按钮组件可以定义点击后刷新一个表格组件：

{"type": "button","label": "刷新表格","actionType": "reload","target": "myTable"
}

在这个例子中，actionType定义了按钮点击后的行为为刷新，target指定了要刷新的目标组件。

4.8 样式

样式（Style）是Amis中用于定义组件外观的一种机制。通过样式，可以自定义组件的颜色、大小、布局等。

例如，一个按钮组件可以定义自定义样式：

{"type": "button","label": "自定义样式按钮","className": "custom-button"
}

在这个例子中，className定义了按钮的自定义样式类。

4.9 类型SchemaNode

类型SchemaNode是Amis中用于定义组件结构和属性的

高级

5.1 工作原理

Amis 是一个低代码前端框架，它通过 JSON 配置来生成页面，从而减少页面开发工作量，极大提升效率。Amis 的工作原理可以分为以下几个关键步骤：

  1. JSON 配置解析：Amis 首先解析开发者提供的 JSON 配置文件。这个配置文件定义了页面的结构、组件、数据源、交互行为等。

  2. 组件渲染：根据 JSON 配置，Amis 动态生成相应的 React 组件树。每个组件都有其特定的功能和样式，这些都在配置中定义。

  3. 数据绑定：Amis 支持数据域和数据链的概念，可以在组件之间共享数据。数据绑定使得组件能够根据数据的变化自动更新。

  4. 事件处理：Amis 通过配置中的事件和动作来处理用户交互。例如，点击按钮时可以触发某个 API 请求或更新某个组件的状态。

  5. 样式和布局：Amis 提供了丰富的样式和布局选项，可以通过配置来调整组件的外观和页面布局。

通过这些步骤，Amis 能够快速生成复杂的页面，并且保持高度的灵活性和可维护性。

5.2 自定义组件-SDK

Amis 提供了自定义组件的 SDK，允许开发者扩展和创建新的组件。以下是自定义组件的基本步骤：

  1. 安装 Amis SDK：

    npm install @ams-team/amis-sdk

  2. 创建自定义组件：

    import React from 'react';
import { registerRenderer } from '@ams-team/amis-sdk';class MyCustomComponent extends React.Component {render() {return <div>My Custom Component</div>;}
}registerRenderer('my-custom-component', MyCustomComponent);

  3. 在 JSON 配置中使用自定义组件：

    {"type": "my-custom-component","props": {// 组件属性}
}

通过这种方式，开发者可以创建符合自己需求的组件，并将其集成到 Amis 页面中。

5.3 自定义组件-React

除了使用 SDK，开发者还可以直接使用 React 来创建自定义组件。以下是一个简单的示例：

  1. 创建 React 组件：

    import React from 'react';class MyReactComponent extends React.Component {render() {return <div>My React Component</div>;}
}export default MyReactComponent;

  2. 注册组件：

    import { registerRenderer } from '@ams-team/amis-sdk';
import MyReactComponent from './MyReactComponent';registerRenderer('my-react-component', MyReactComponent);

  3. 在 JSON 配置中使用：

    {"type": "my-react-component","props": {// 组件属性}
}

这种方式更加灵活，适合需要复杂逻辑和交互的自定义组件。

5.4 将 Amis 当成 UI 库用

Amis 不仅可以作为低代码框架使用，还可以作为普通的 UI 库来使用。以下是如何将 Amis 当成 UI 库的步骤：

  1. 安装 Amis：

    npm install amis

  2. 引入 Amis 组件：

    import { Button } from 'amis';function MyApp() {return <Button>Click Me</Button>;
}

  3. 使用 Amis 样式：

    import 'amis/lib/themes/default.css';

通过这种方式，开发者可以在任何 React 项目中使用 Amis 的组件，快速构建用户界面。

5.5 扩展现有组件

Amis 允许开发者扩展现有的组件，以满足特定的需求。以下是扩展现有组件的基本步骤：

  1. 继承现有组件：创建一个新的组件，继承自现有的 Amis 组件。

    import { Button } from 'amis';class ExtendedButton extends Button {render() {return <Button {...this.props} className="extended-button" />;}
}

  2. 注册扩展组件：

    import { registerRenderer } from '@ams-team/amis-sdk';registerRenderer('extended-button', ExtendedButton);

  3. 在 JSON 配置中使用扩展组件：

    {"type": "extended-button","props": {// 组件属性}
}

通过这种方式，开发者可以在不修改原有代码的情况下，增加新的功能或修改现有功能。

5.6 移动端定制

Amis 提供了移动端定制的功能，允许开发者为移动设备优化页面。通过移动端定制，开发者可以创建适配移动设备的页面，提供更好的用户体验。以下是移动端定制的基本步骤：

  1. 配置响应式布局：在 JSON 配置文件中，配置响应式布局，使页面能够根据设备屏幕大小自动调整布局。

    {"type": "page","responsive": true,"body": {// 页面内容}
}

  2. 优化交互：针对移动设备的交互特点，优化组件的交互方式。

    {"type": "button","mobile": {"actionType": "toast","toast": "Clicked on mobile"}
}

  3. 测试和调试：在移动设备上测试和调试页面，确保其在移动设备上的表现符合预期。

通过移动端定制，Amis 能够为移动设备提供优化的页面体验。

5.7 多语言

Amis 支持多语言功能，允许开发者创建多语言的页面。通过多语言支持，开发者可以为不同的语言环境提供相应的页面内容。以下是实现多语言的基本步骤：

  1. 配置语言包：创建不同语言的语言包，包含各个语言的文本内容。

    {"locale": "en","messages": {"welcome": "Welcome to Amis"}
}

  2. 切换语言：在页面中提供语言切换的功能，根据用户选择的语言加载相应的语言包。

    {"type": "button","label": "${messages.welcome}","actionType": "changeLocale","locale": "zh"
}

  3. 动态更新：在语言切换时，动态更新页面中的文本内容。

通过多语言支持，Amis 能够为全球用户提供本地化的页面体验。

5.8 可视化编辑器

Amis 提供了可视化编辑器，允许开发者通过拖拽的方式创建和编辑页面。可视化编辑器极大地简化了页面开发的过程，使非专业开发者也能快速创建复杂的页面。以下是使用可视化编辑器的基本步骤：

  1. 打开编辑器：启动 Amis 的可视化编辑器。

    npm run amis-editor

  2. 拖拽组件：在编辑器中拖拽组件，构建页面的布局。

  3. 配置属性：为每个组件配置属性，设置其行为和样式。

  4. 预览和发布：在编辑器中预览页面，确认无误后发布页面。

通过可视化编辑器，开发者可以直观地创建和编辑页面，提高开发效率。

实践经验分享

6.1 学习资料

在使用Amis进行开发时，获取高质量的学习资料是非常重要的。以下是一些推荐的学习资源：

  • 官方文档：Amis的官方文档是最权威的学习资料，包含了从基础到高级的所有内容。建议开发者首先阅读官方文档，以便对Amis有一个全面的了解。
  • GitHub仓库：Amis的GitHub仓库中包含了大量的示例代码和项目案例，可以通过这些案例学习如何实际应用Amis。
  • 社区论坛：加入Amis的社区论坛，可以与其他开发者交流经验，解决遇到的问题。
  • 在线教程：网络上有很多关于Amis的在线教程和视频课程，这些教程通常由经验丰富的开发者制作，可以帮助新手快速入门。

6.2 组件复用

在实际开发中，组件的复用可以大大提高开发效率。以下是一些组件复用的技巧：

  • 创建可复用组件：在开发过程中，可以将常用的功能封装成独立的组件，这样在不同的项目中可以直接引用这些组件，避免重复开发。
  • 使用组件库：Amis提供了丰富的内置组件，同时也有很多第三方组件库可以使用。合理利用这些组件库可以减少开发工作量。
  • 组件参数化：在设计组件时，尽量使组件参数化，这样可以通过不同的参数配置来满足不同的需求，提高组件的灵活性。

6.3 数据处理

数据处理是前端开发中的重要环节。以下是一些数据处理的技巧：

  • 数据映射：Amis支持数据映射功能，可以将后端返回的数据映射到前端组件中，使数据展示更加灵活。
  • 数据缓存：对于频繁请求的数据，可以使用缓存机制减少请求次数，提高页面加载速度。
  • 数据校验：在表单提交等场景中，对数据进行校验是非常必要的。Amis提供了丰富的数据校验功能，可以方便地进行数据校验。

6.4 调试技巧

调试是开发过程中不可避免的环节。以下是一些调试技巧：

  • 使用浏览器开发者工具：浏览器自带的开发者工具是调试的利器，可以查看页面元素、网络请求、控制台输出等。
  • 日志输出：在关键代码处添加日志输出，可以帮助快速定位问题。
  • 模拟数据：在开发阶段，可以使用模拟数据进行调试，避免依赖后端接口。

6.5 性能优化

性能优化是提升用户体验的关键。以下是一些性能优化的技巧：

  • 懒加载：对于页面中不立即需要的内容，可以使用懒加载技术，减少初始加载时间。
  • 代码分割：将代码分割成多个小块，按需加载，可以减少单次加载的文件大小。
  • 减少HTTP请求：合并CSS和JavaScript文件，减少页面加载时的HTTP请求次数。
  • 使用CDN：对于第三方资源，使用CDN可以加快资源的加载速度。

相关文章：

低代码前端框架Amis全面教程

什么是Amis&#xff1f; 1.1 Amis的基本概念 Amis是一个基于JSON配置的前端低代码框架&#xff0c;由百度开源。它允许开发者通过简单的JSON配置文件来生成复杂的后台管理页面&#xff0c;从而大大减少了前端开发的工作量。Amis的核心理念是通过配置而非编码来实现页面的构建…...

编程日记 2024/7/19 4:45:40

Windows 如何安装和卸载 OneDrive？具体方法总结

卸载 OneDrive 有人想问 OneDrive 可以卸载吗&#xff1f;如果你不使用当然可以卸载&#xff0c;下面是安装和卸载 OneDrive 中的卸载应用具体操作步骤&#xff1a; 卸载 OneDrive 我们可以从设置面板中的应用选项进行卸载&#xff0c;打开设置面板之后选择应用&#xff0c;然…...

编程日记 2024/7/19 4:44:39

c# .net core中间件，生命周期

某些模块和处理程序具有存储在 Web.config 中的配置选项。但是在 ASP.NET Core 中&#xff0c;使用新配置模型取代了 Web.config。 HTTP 模块和处理程序如何工作 官网地址&#xff1a; 将 HTTP 处理程序和模块迁移到 ASP.NET Core 中间件 | Microsoft Learn 处理程序是&#xf…...

编程日记 2024/7/19 4:43:38

Spring后端框架复习总结

之前写的博客太杂，最近想把后端框架的知识点再系统的过一遍，主要是Spring Boot和Mybatis相关，带着自己的理解使用简短的话把一些问题总结一下，尤其是开发中和面试中的高频问题，基础知识点可以参考之前写java后端专栏，这篇不再赘述。 目录 Spring什么是AOP？底层原理？事务…...

编程日记 2024/7/19 4:42:37

基于Llama Index构建RAG应用

前言 Hello&#xff0c;大家好&#xff0c;我是GISer Liu&#x1f601;&#xff0c;一名热爱AI技术的GIS开发者&#xff0c;本文参与活动是2024 DataWhale AI夏令营&#xff1b;&#x1f632; 在本文中作者将通过&#xff1a; Gradio、Streamlit和LlamaIndex介绍 LlamaIndex 构…...

编程日记 2024/7/19 4:40:35

SSLRec代码分析

文章目录 encoder-models-general_cfautocf.py data_utilsdata_handler_general_cf.py输入输出说明使用方法 trainertuner.py encoder-models-general_cf autocf.py import torch as t # 导入PyTorch并重命名为t from torch import nn # 从PyTorch导入神经网络模块 import …...

编程日记 2024/7/19 4:39:34

第四节shell条件测试(1)(2)

一,命令执行结果判定 &&在命令执行后如果没有任何报错时会执行符号后面的动作 ||在命令执行后如果命令有报错会执行符号后的动作 示例: vim lee.sh #!/bin/bash ls /mnt/file &> /dev/null &&{echo /mnt/filr is not existecho no }||{echo /mnt/fi…...

编程日记 2024/7/19 4:36:30

申请https证书的具体流程

申请HTTPS证书的具体流程通常涉及以下步骤&#xff0c;不过请注意&#xff0c;具体细节可能因不同的证书颁发机构&#xff08;CA&#xff09;而有所差异&#xff1a; 1、确定证书类型&#xff1a; 证书类型&#xff1a;根据需求选择合适的SSL证书类型。常见的有DV&#xff08;…...

编程日记 2024/7/19 4:35:29

IP溯源工具--IPTraceabilityTool

工具地址&#xff1a;xingyunsec/IPTraceabilityTool: 蓝队值守利器-IP溯源工具 (github.com) 工具介绍&#xff1a; 在攻防演练期间&#xff0c;对于值守人员&#xff0c;某些客户要求对攻击IP都进行分析溯源&#xff0c;发现攻击IP的时候&#xff0c;需要针对攻击IP进行分析…...

编程日记 2024/7/19 4:33:27

字节抖音电商 后端开发岗位 一面

笔者整理答案&#xff0c;以供参考 自我介绍 项目&#xff08;20分钟&#xff09; RocketMQ延时消息的底层实现 回答&#xff1a; 延时消息的实现主要依赖于RocketMQ中的定时任务机制。消息被发送到Broker时&#xff0c;会先存储在一个特定的延时消息队列中。Broker会定时扫…...

编程日记 2024/7/19 4:28:22

前端开发日记——在MacBook上配置Vue环境

前言 大家好&#xff0c;我是来自CSDN的寄术区博主PleaSure乐事。今天是开始学习vue的第一天&#xff0c;我使用的编译器是vscode&#xff0c;浏览器使用的是谷歌浏览器&#xff0c;后续会下载webstorm进行使用&#xff0c;当前学习阶段使用vscode也是可以的&#xff0c;不用担…...

编程日记 2024/7/19 4:24:16

测试开发面经总结（三）

TCP三次握手 TCP 是面向连接的协议&#xff0c;所以使用 TCP 前必须先建立连接&#xff0c;而建立连接是通过三次握手来进行的。 一开始&#xff0c;客户端和服务端都处于 CLOSE 状态。先是服务端主动监听某个端口&#xff0c;处于 LISTEN 状态 客户端会随机初始化序号&…...

编程日记 2024/7/19 4:21:13

开始构建我们自己的大语言模型：数据处理部分

关注本专栏&#xff08;NLP简论&#xff1a;手搓大语言模型实践&#xff09; 继续学习从头编写、训练自己的大语言模型。 接上集&#xff0c;本章我们将深入说一下大语言模型数据处理部分的细节&#xff0c;并直接提供本部分的完整代码。 【配套资源】 暂时的词汇表&#xff1…...

编程日记 2024/7/19 4:20:12

springboot系列十: 自定义转换器，处理JSON，内容协商

文章目录 自定义转换器基本介绍应用实例查看源码注意事项和细节 处理JSON需求说明应用实例 内容协商基本介绍应用实例debug源码优先返回xml注意事项和细节 ⬅️ 上一篇: springboot系列九: 接收参数相关注解 &#x1f389; 欢迎来到 springboot系列十: 自定义转换器&#xff0c…...

编程日记 2024/7/19 4:19:11

C++（new与delete操作符）

C中的new与delete new 与 delete定位new表达式 new 与 delete 在C中需要动态申请内存空间时需要使用 new 与 delete 这两个操作符 #include <iostream> using namespace std; int main() {int* p1 new int;//开辟一块int类型大小的空间给p1int* p2 new int(1);//开辟…...

编程日记 2024/7/19 4:12:05

STM32智能工业自动化监控系统教程

目录 引言环境准备智能工业自动化监控系统基础代码实现&#xff1a;实现智能工业自动化监控系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;工业自动化与管理问题解决方案与优化收尾与总结 1. 引言 智能…...

编程日记 2024/7/19 4:11:02

WPF设置欢迎屏幕，程序启动过度动画

当主窗体加载时间过长&#xff0c;这时候基本都会想添加一个等待操作来响应用户点击&#xff0c;提高用户体验。下面我记录两个方法&#xff0c;一点拙见&#xff0c;仅供参考。 方法1:在App类中使用SplashScreen类。 protected override void OnStartup(StartupEventArgs e)…...

编程日记 2024/7/19 4:09:00

Flink实时开发添加水印的案例分析

在Flink中&#xff0c;处理时间序列数据时&#xff0c;通常需要考虑事件时间和水印&#xff08;watermarks&#xff09;的处理。以下是修改前后的代码对比分析&#xff1a; 修改前的代码&#xff1a; val systemDS unitDS.map(dp > {dp.setDeviceCode(DeviceCodeEnum.fro…...

编程日记 2024/7/19 4:06:58

收银系统源码-线上商城diy装修

线下线上一体化收银系统越来越受门店重视&#xff0c;尤其是连锁多门店&#xff0c;想通过线下线上相互带动&#xff0c;相互引流&#xff0c;提升门店营业额。商城商城如何装修呢&#xff1f; 1.收银系统开发语言 核心开发语言: PHP、HTML5、Dart后台接口: PHP7.3后合管理网…...

编程日记 2024/7/19 3:58:49

Linux中nohup（no hang up）不挂起，用于在系统后台不挂断地运行命令，即使退出终端也不会影响程序的运行。

nohup的英文全称是 no hang up&#xff0c;即“不挂起”。这个命令在Linux或Unix系统中非常有用&#xff0c;主要用于在系统后台不挂断地运行命令&#xff0c;即使退出终端也不会影响程序的运行。默认情况下&#xff08;非重定向时&#xff09;&#xff0c;nohup会将输出写入一…...

编程日记 2024/7/19 3:57:48

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/9/30 22:03:38

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/11/1 2:50:59

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/9/18 22:35:44

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/9/17 19:16:20

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/10/30 5:09:33

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/11/2 23:44:31

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/9/20 22:30:25

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01