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

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

news 2025/7/6 13:54:30

什么是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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/7/6 7:24:02

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/7/5 21:20:33

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2025/7/4 14:58:44

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2025/7/6 10:43:18

【WebSocket】SpringBoot项目中使用WebSocket

1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖&#xff0c;添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...

编程新知 2025/6/16 21:18:44

ui框架-文件列表展示

ui框架-文件列表展示 介绍 UI框架的文件列表展示组件&#xff0c;可以展示文件夹&#xff0c;支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项&#xff0c;适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...

编程新知 2025/7/3 23:01:38

FTXUI::Dom 模块

DOM 模块定义了分层的 FTXUI::Element 树&#xff0c;可用于构建复杂的终端界面&#xff0c;支持响应终端尺寸变化。 namespace ftxui {...// 定义文档 定义布局盒子 Element document vbox({// 设置文本 设置加粗 设置文本颜色text("The window") | bold | color(…...

编程新知 2025/7/6 11:11:45

自定义线程池1.2

自定义线程池 1.2 1. 简介 上次我们实现了 1.1 版本&#xff0c;将线程池中的线程数量交给使用者决定&#xff0c;并且将线程的创建延迟到任务提交的时候&#xff0c;在本文中我们将对这个版本进行如下的优化&#xff1a; 在新建线程时交给线程一个任务。让线程在某种情况下…...

编程新知 2025/6/16 14:31:15

TMC2226超静音步进电机驱动控制模块

目前已经使用TMC2226量产超过20K，发现在静音方面做的还是很不错。 一、TMC2226管脚定义说明 二、原理图及下载地址 一、TMC2226管脚定义说明 引脚编号类型功能OB11电机线圈 B 输出 1BRB2线圈 B 的检测电阻连接端。将检测电阻靠近该引脚连接到地。使用内部检测电阻时，将此引…...

编程新知 2025/7/6 6:43:40