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

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

在这个示例中,NameEmail 字段都是必填的,并且 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定义了按钮的文本,actionTypedialog则定义了按钮点击后的行为和弹出的对话框。

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可以加快资源的加载速度。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里云ACP云计算高级攻城狮通用知识

&#x1f525;概述 阿里云云计算高级工程师ACP认证是面向使用阿里云云计算产品的架构、开发、运维类人员的专业技术认证&#xff0c;主要考核考生利用阿里云云计算技术服务体系设计稳定、安全、高性能、易扩展、低成本的企业云计算架构的能力。 前提&#xff1a;在写适用人群…

Spring后端框架复习总结

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

word的进阶

Word的基本操作 这里主要用到的软件是WPS软件。 一、创建一个文档 第一种&#xff1a;快捷键&#xff1a;ctrln第二种&#xff1a;通过界面鼠标点击 二、设置文档背景 更换过的背景如下&#xff1a; 三、章节、目录导航的设置 四、插入目录页 五、对历史文档进行管理 六、…

大数减法c++

这里写目录标题 key key 检查减数和被减数的大小&#xff0c;大的放前&#xff0c;小的放后确定结果是正数&#xff0c;还是负数&#xff0c;即符号位从低位开始减如果a[i]<b[i]&#xff0c;则向高位借1当10&#xff0c;a[i1]–;a[i]10 #include <iostream> #include…

Java_MyBatisPlus

MyBatisPlus属于是MyBatis的拓展&#xff0c;不影响原MyBatis框架下的代码运行&#xff0c;并对MyBatis框架进行拓展及优化。 使用步骤&#xff1a; 注意&#xff1a;继承BaseMapper时要填写泛型为要操作的实体类。 基本原理&#xff1a; MyBatisPlus通过扫描实体类&#xff…

【鸿蒙学习笔记】构建布局・选项卡 (Tabs)

官方文档&#xff1a;选项卡 (Tabs) 目录标题 底部导航顶部导航侧边导航限制导航栏的滑动切换固定导航栏・可滚动导航栏自定义导航栏切换至指定页签 底部导航 Entry Component struct Bujv_tabs {build() {Column() {Tabs({ barPosition: BarPosition.End }) {TabContent() {T…

怎么给PDF文件设置加密保护?有哪些方法?

pdf作为一种便携式文档&#xff0c;是展示内容的首选&#xff0c;目前也已广泛应用于交换和分享等&#xff0c;例如内部报告以及商业提案等。然而&#xff0c;在如今的数字化时代&#xff0c;随着越来越多的企业将其文档存储和在线分享&#xff0c;pdf文件也可能面临安全隐私泄…

深入理解ADB:Android调试桥详解与使用指南

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Android ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 1. 什么是ADB&#xff1f; ADB的基本原理&#xff1a; 2. ADB的安装与配置 安装ADB工具集&#xff1a; 配置ADB环境变量&am…

人大金仓数据库驱动导入maven

1.去人大金仓官网去查找合适的驱动人大金仓-成为世界卓越的数据库产品与服务提供商 2.下载解压后 执行下面的代码 mvn install:install-file -DgroupIdkingbase -DartifactIdkingbase8 -Dversion8 -DfileF:\1foryou\foryou-report\kingbase8-8.6.0.jar -Dpackagingjar -Dgene…

FastAPI -- 第三弹(自定义响应、中间件、代理、WebSockets)

路径操作的高级配置 OpenAPI 的 operationId from fastapi import FastAPIapp FastAPI()# 通过 operation_id 参数设置 app.get("/items/", operation_id"some_specific_id_you_define") async def read_items():return [{"item_id": "F…

使用LVS+NGinx+Netty实现数据接入

数据接入 链接参考文档 LVSKeepalived项目 车辆数据上收&#xff0c;TBox通过TCP协议连接到TSP平台 建立连接后进行数据上传。也可借由该连接实现远程控制等操作。 通过搭建 LV—NGinx—Netty实现高并发数据接入 LVS&#xff1a;四层负载均衡&#xff08;位于内核层&#x…

Odoo17架构概述

多层架构 Odoo遵循多层架构&#xff0c;这意味着演示&#xff0c;业务逻辑和数据存储是分开的。更具体地说&#xff0c;它使用三层架构。 UI展示层 UI表示层是 HTML5、JavaScript 和 CSS 的组合。 应用程序的最顶层是用户界面。界面的主要功能是将任务和结果转换为用户可以理…

【数据结构】二叉树———Lesson2

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…

Uniapp 组件 props 属性为 undefined

问题 props 里的属性值都是 undefined 代码 可能的原因 组件的名字要这样写&#xff0c;这个官方文档有说明

自动驾驶上的边缘计算的盒子的工作原理是什么?学习软件还要学习硬件是比较难的,但是学习硬件的再学习软件就是降维打击

边缘计算&#xff08;Edge Computing&#xff09;是一种分布式计算范式&#xff0c;它将数据处理和计算能力从集中式数据中心移至靠近数据源的边缘设备。这样可以显著减少延迟&#xff0c;提高响应速度&#xff0c;并减少带宽使用。下面是边缘计算的底层原理及其运行机制的详细…

【Django】网上蛋糕商城后台-商品管理

1.商品管理功能 当管理员点击商品管理时&#xff0c;发送服务器请求 path(admin/goods_list/, viewsAdmin.goods_list), # 处理商品列表请求 def goods_list(request):try:type request.GET["type"]except:type 0try:ym request.GET["ym"]except:ym …

Spring Cloud Loadbalancer 的使用

一、默认负载均衡策略 Spring Cloud LoadBalancer 默认的负载均衡策略是轮询。 轮询效果示例 我们需要示例一个请求分发到不同的模块上&#xff0c;所以我们需要创建多模块项目。 新建 Spring Boot &#xff08;3.0.2&#xff09;的 Maven 项目&#xff08;JDK 17&#xff09…

ETL数据集成丨通过ETLCloud工具,将Oracle数据实时同步至Doris中

ETLCloud是一个全面的数据集成平台&#xff0c;专注于解决大数据量和高合规要求环境下的数据集成需求。采用先进的技术架构&#xff0c;如微服务和全Web可视化的集成设计&#xff0c;为用户提供了一站式的数据处理解决方案。 主要特点和功能包括&#xff1a; 实时数据处理&…

【已解决】Django连接MySQL启动报错Did you install mysqlclient?

在终端执行python manage.py makemigrations报错问题汇总 错误1&#xff1a;已安装mysqlclient&#xff0c;提示Did you install mysqlclient? 当你看到这样的错误信息&#xff0c;表明Django尝试加载MySQLdb模块但未找到&#xff0c;因为MySQLdb已被mysqlclient替代。 【解…

Linux——Shell脚本和Nginx反向代理服务器

1. Linux中的shell脚本【了解】 1.1 什么是shell Shell是一个用C语言编写的程序&#xff0c;它是用户使用Linux的桥梁 Shell 既是一种命令语言&#xff0c;有是一种程序设计语言 Shell是指一种应用程序&#xff0c;这个应用程序提供了一个界面&#xff0c;用户通过这个界面访问…