低代码前端框架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 那样外链代码就能使用。
-
下载 SDK
- 从 GitHub 下载:文件是
sdk.tar.gz
。 - 使用 npm 下载:在
node_modules\amis\sdk
目录里就能找到。
- 从 GitHub 下载:文件是
-
创建 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 有一定了解的开发者。
-
安装 Amis
npm install amis
-
创建 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;
-
在主应用中引入
在你的主应用文件(例如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 的工作原理可以分为以下几个关键步骤:
-
JSON 配置解析:Amis 首先解析开发者提供的 JSON 配置文件。这个配置文件定义了页面的结构、组件、数据源、交互行为等。
-
组件渲染:根据 JSON 配置,Amis 动态生成相应的 React 组件树。每个组件都有其特定的功能和样式,这些都在配置中定义。
-
数据绑定:Amis 支持数据域和数据链的概念,可以在组件之间共享数据。数据绑定使得组件能够根据数据的变化自动更新。
-
事件处理:Amis 通过配置中的事件和动作来处理用户交互。例如,点击按钮时可以触发某个 API 请求或更新某个组件的状态。
-
样式和布局:Amis 提供了丰富的样式和布局选项,可以通过配置来调整组件的外观和页面布局。
通过这些步骤,Amis 能够快速生成复杂的页面,并且保持高度的灵活性和可维护性。
5.2 自定义组件-SDK
Amis 提供了自定义组件的 SDK,允许开发者扩展和创建新的组件。以下是自定义组件的基本步骤:
-
安装 Amis SDK:
npm install @ams-team/amis-sdk
-
创建自定义组件:
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);
-
在 JSON 配置中使用自定义组件:
{"type": "my-custom-component","props": {// 组件属性} }
通过这种方式,开发者可以创建符合自己需求的组件,并将其集成到 Amis 页面中。
5.3 自定义组件-React
除了使用 SDK,开发者还可以直接使用 React 来创建自定义组件。以下是一个简单的示例:
-
创建 React 组件:
import React from 'react';class MyReactComponent extends React.Component {render() {return <div>My React Component</div>;} }export default MyReactComponent;
-
注册组件:
import { registerRenderer } from '@ams-team/amis-sdk'; import MyReactComponent from './MyReactComponent';registerRenderer('my-react-component', MyReactComponent);
-
在 JSON 配置中使用:
{"type": "my-react-component","props": {// 组件属性} }
这种方式更加灵活,适合需要复杂逻辑和交互的自定义组件。
5.4 将 Amis 当成 UI 库用
Amis 不仅可以作为低代码框架使用,还可以作为普通的 UI 库来使用。以下是如何将 Amis 当成 UI 库的步骤:
-
安装 Amis:
npm install amis
-
引入 Amis 组件:
import { Button } from 'amis';function MyApp() {return <Button>Click Me</Button>; }
-
使用 Amis 样式:
import 'amis/lib/themes/default.css';
通过这种方式,开发者可以在任何 React 项目中使用 Amis 的组件,快速构建用户界面。
5.5 扩展现有组件
Amis 允许开发者扩展现有的组件,以满足特定的需求。以下是扩展现有组件的基本步骤:
-
继承现有组件:创建一个新的组件,继承自现有的 Amis 组件。
import { Button } from 'amis';class ExtendedButton extends Button {render() {return <Button {...this.props} className="extended-button" />;} }
-
注册扩展组件:
import { registerRenderer } from '@ams-team/amis-sdk';registerRenderer('extended-button', ExtendedButton);
-
在 JSON 配置中使用扩展组件:
{"type": "extended-button","props": {// 组件属性} }
通过这种方式,开发者可以在不修改原有代码的情况下,增加新的功能或修改现有功能。
5.6 移动端定制
Amis 提供了移动端定制的功能,允许开发者为移动设备优化页面。通过移动端定制,开发者可以创建适配移动设备的页面,提供更好的用户体验。以下是移动端定制的基本步骤:
-
配置响应式布局:在 JSON 配置文件中,配置响应式布局,使页面能够根据设备屏幕大小自动调整布局。
{"type": "page","responsive": true,"body": {// 页面内容} }
-
优化交互:针对移动设备的交互特点,优化组件的交互方式。
{"type": "button","mobile": {"actionType": "toast","toast": "Clicked on mobile"} }
-
测试和调试:在移动设备上测试和调试页面,确保其在移动设备上的表现符合预期。
通过移动端定制,Amis 能够为移动设备提供优化的页面体验。
5.7 多语言
Amis 支持多语言功能,允许开发者创建多语言的页面。通过多语言支持,开发者可以为不同的语言环境提供相应的页面内容。以下是实现多语言的基本步骤:
-
配置语言包:创建不同语言的语言包,包含各个语言的文本内容。
{"locale": "en","messages": {"welcome": "Welcome to Amis"} }
-
切换语言:在页面中提供语言切换的功能,根据用户选择的语言加载相应的语言包。
{"type": "button","label": "${messages.welcome}","actionType": "changeLocale","locale": "zh" }
-
动态更新:在语言切换时,动态更新页面中的文本内容。
通过多语言支持,Amis 能够为全球用户提供本地化的页面体验。
5.8 可视化编辑器
Amis 提供了可视化编辑器,允许开发者通过拖拽的方式创建和编辑页面。可视化编辑器极大地简化了页面开发的过程,使非专业开发者也能快速创建复杂的页面。以下是使用可视化编辑器的基本步骤:
-
打开编辑器:启动 Amis 的可视化编辑器。
npm run amis-editor
-
拖拽组件:在编辑器中拖拽组件,构建页面的布局。
-
配置属性:为每个组件配置属性,设置其行为和样式。
-
预览和发布:在编辑器中预览页面,确认无误后发布页面。
通过可视化编辑器,开发者可以直观地创建和编辑页面,提高开发效率。
实践经验分享
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? 1.1 Amis的基本概念 Amis是一个基于JSON配置的前端低代码框架,由百度开源。它允许开发者通过简单的JSON配置文件来生成复杂的后台管理页面,从而大大减少了前端开发的工作量。Amis的核心理念是通过配置而非编码来实现页面的构建…...

Windows 如何安装和卸载 OneDrive?具体方法总结
卸载 OneDrive 有人想问 OneDrive 可以卸载吗?如果你不使用当然可以卸载,下面是安装和卸载 OneDrive 中的卸载应用具体操作步骤: 卸载 OneDrive 我们可以从设置面板中的应用选项进行卸载,打开设置面板之后选择应用,然…...

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

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

基于Llama Index构建RAG应用
前言 Hello,大家好,我是GISer Liu😁,一名热爱AI技术的GIS开发者,本文参与活动是2024 DataWhale AI夏令营;😲 在本文中作者将通过: Gradio、Streamlit和LlamaIndex介绍 LlamaIndex 构…...
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 …...
第四节shell条件测试(1)(2)
一,命令执行结果判定 &&在命令执行后如果没有任何报错时会执行符号后面的动作 ||在命令执行后如果命令有报错会执行符号后的动作 示例: vim lee.sh #!/bin/bash ls /mnt/file &> /dev/null &&{echo /mnt/filr is not existecho no }||{echo /mnt/fi…...

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

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

字节抖音电商 后端开发岗位 一面
笔者整理答案,以供参考 自我介绍 项目(20分钟) RocketMQ延时消息的底层实现 回答: 延时消息的实现主要依赖于RocketMQ中的定时任务机制。消息被发送到Broker时,会先存储在一个特定的延时消息队列中。Broker会定时扫…...

前端开发日记——在MacBook上配置Vue环境
前言 大家好,我是来自CSDN的寄术区博主PleaSure乐事。今天是开始学习vue的第一天,我使用的编译器是vscode,浏览器使用的是谷歌浏览器,后续会下载webstorm进行使用,当前学习阶段使用vscode也是可以的,不用担…...

测试开发面经总结(三)
TCP三次握手 TCP 是面向连接的协议,所以使用 TCP 前必须先建立连接,而建立连接是通过三次握手来进行的。 一开始,客户端和服务端都处于 CLOSE 状态。先是服务端主动监听某个端口,处于 LISTEN 状态 客户端会随机初始化序号&…...
开始构建我们自己的大语言模型:数据处理部分
关注本专栏(NLP简论:手搓大语言模型实践) 继续学习从头编写、训练自己的大语言模型。 接上集,本章我们将深入说一下大语言模型数据处理部分的细节,并直接提供本部分的完整代码。 【配套资源】 暂时的词汇表࿱…...

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

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);//开辟…...

STM32智能工业自动化监控系统教程
目录 引言环境准备智能工业自动化监控系统基础代码实现:实现智能工业自动化监控系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景:工业自动化与管理问题解决方案与优化收尾与总结 1. 引言 智能…...
WPF设置欢迎屏幕,程序启动过度动画
当主窗体加载时间过长,这时候基本都会想添加一个等待操作来响应用户点击,提高用户体验。下面我记录两个方法,一点拙见,仅供参考。 方法1:在App类中使用SplashScreen类。 protected override void OnStartup(StartupEventArgs e)…...
Flink实时开发添加水印的案例分析
在Flink中,处理时间序列数据时,通常需要考虑事件时间和水印(watermarks)的处理。以下是修改前后的代码对比分析: 修改前的代码: val systemDS unitDS.map(dp > {dp.setDeviceCode(DeviceCodeEnum.fro…...
收银系统源码-线上商城diy装修
线下线上一体化收银系统越来越受门店重视,尤其是连锁多门店,想通过线下线上相互带动,相互引流,提升门店营业额。商城商城如何装修呢? 1.收银系统开发语言 核心开发语言: PHP、HTML5、Dart后台接口: PHP7.3后合管理网…...

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

51c自动驾驶~合集58
我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留,CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制(CCA-Attention),…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
Python爬虫实战:研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...

Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...

C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API,查询的是单条数据,比如根据主键ID查询用户信息,sql如下: select id, name, age from user where id #{id}API默认返回的数据格式是多条的,如下: {&qu…...

k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...

Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...

论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...