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

基于TypeScript+React+AntDesign 的车辆车型管理页面

项目目录结构:

my-app/├── node_modules/├── public/├── src/│   ├── App.js│   ├── VehicleForm.js│   └── index.js├── package.json└── README.md

目录

1.创建项目

2.列表页面VehicleForm.js,预留接口使用axios


1.创建项目

npx create-react-app my-app
cd my-app
npm install antd
npm install axios

App.js

// App.js
import React from 'react';
import 'antd/dist/reset.css'; // Import Ant Design styles
import VehicleForm from './VehicleForm'; // Import the VehicleForm componentconst App = () => {return (<div style={{ margin: '50px' }}><VehicleForm /></div>);
};export default App;

2.列表页面VehicleForm.js,预留接口使用axios

 

// VehicleForm.js
import React from 'react';
import { Form, Input, Button, Select, Row, Col, Tabs, Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import axios from 'axios';const { Option } = Select;
const { TabPane } = Tabs;const VehicleForm = () => {// Placeholder function for form submissionconst handleFormSubmit = async (values) => {try {// Example API call for form submissionconst response = await axios.post('/api/vehicle/create', values);message.success('车型已创建成功');console.log('Form submission response:', response.data);} catch (error) {console.error('Error submitting form:', error);message.error('创建车型失败');}};// Placeholder function for file uploadconst handleFileUpload = (file) => {// Simulate file upload requestconst formData = new FormData();formData.append('file', file);axios.post('/api/vehicle/upload', formData).then(response => {message.success('文件上传成功');console.log('File upload response:', response.data);}).catch(error => {console.error('File upload failed:', error);message.error('文件上传失败');});// Prevent default upload behavior (since we're manually handling it)return false;};return (<div style={{ padding: '20px', backgroundColor: '#fff', borderRadius: '8px' }}><h2>创建自定义车型</h2><Form onFinish={handleFormSubmit} layout="vertical"><Row gutter={16}>{/* 参数标识 */}<Col span={8}><Form.Item label="参数标识" name="paramId"><Input placeholder="请输入参数标识" /></Form.Item></Col>{/* 车辆厂商 */}<Col span={8}><Form.Item label="车辆厂商" name="manufacturer"><Input placeholder="请输入车辆厂商" /></Form.Item></Col>{/* 车型用途 */}<Col span={8}><Form.Itemlabel="车型用途"name="useType"rules={[{ required: true, message: '请选择车型用途' }]}><Select placeholder="请选择车型用途"><Option value="passenger">乘用车</Option><Option value="commercial">商用车</Option></Select></Form.Item></Col></Row><Row gutter={16}>{/* 相机个数 */}<Col span={8}><Form.Item label="相机个数" name="cameraCount"><Input placeholder="请输入相机个数" /></Form.Item></Col>{/* 版本 */}<Col span={8}><Form.Item label="版本" name="version"><Input placeholder="请输入版本" /></Form.Item></Col>{/* 雷米波雷达个数 */}<Col span={8}><Form.Item label="雷米波雷达个数" name="radarCount"><Input placeholder="请输入雷米波雷达个数" /></Form.Item></Col></Row><Row gutter={16}>{/* 车型年份 */}<Col span={8}><Form.Itemlabel="车型年份"name="year"rules={[{ required: true, message: '请输入车型年份' }]}><Input placeholder="请输入车型年份" /></Form.Item></Col>{/* 备注 */}<Col span={16}><Form.Item label="备注" name="remark"><Input placeholder="参考注: 修改了***内容, 解决了***问题" /></Form.Item></Col></Row>{/* 上传按钮 */}<Form.Item><Upload beforeUpload={handleFileUpload}><Button icon={<UploadOutlined />}>上传车型参数</Button></Upload></Form.Item><Tabs defaultActiveKey="1" style={{ marginTop: '20px' }}><TabPane tab="车辆基础信息" key="1"><Upload beforeUpload={handleFileUpload}><Button icon={<UploadOutlined />}>基础信息上传</Button></Upload></TabPane><TabPane tab="开源版 Cam & Lidar 标定参数" key="2">添加内容</TabPane><TabPane tab="车联网参数" key="3">添加内容</TabPane><TabPane tab="传感器参数" key="4">添加内容</TabPane></Tabs>{/* 创建车型按钮 */}<Form.Item><Button type="primary" htmlType="submit">创建车型</Button></Form.Item></Form></div>);
};export default VehicleForm;

相关文章:

基于TypeScript+React+AntDesign 的车辆车型管理页面

项目目录结构&#xff1a; my-app/├── node_modules/├── public/├── src/│ ├── App.js│ ├── VehicleForm.js│ └── index.js├── package.json└── README.md目录 1.创建项目 2.列表页面VehicleForm.js,预留接口使用axios 1.创建项目 npx crea…...

sentinel-dashboard数据 redis 持久化

概述 随着微服务的流行&#xff0c;服务和服务之间的稳定性变得越来越重要。Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件&#xff0c;主要以流量为切入点&#xff0c;从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维度来…...

【C++】——vector深度剖析模拟实现

低头赶路&#xff0c;敬事如仪 目录 1、模拟vector 1.1底层结构 1.2构造析构 1.3尾插扩容 1.4迭代器 1.5增删查改 1.6模拟中的注意事项 2、vector模拟补充 2.1迭代器区间构造问题 2.2memcpy深浅拷贝问题 2.3动态二维数组的模拟及遍历 1、模拟vector 想要模拟实现自…...

OpenCV特征检测(11)从一组点中检测直线的函数

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在一组点中使用标准霍夫变换查找直线。 该函数使用霍夫变换的一种改进方法在一组点中查找直线。 HoughLinesPointSet 是 OpenCV 中的一个函数&a…...

C++_24_适配器

A 函数对象 概念&#xff1a; ​ 重载函数调用运算符的类实例化的对象&#xff0c;就叫函数对象.又名仿函数,函数对象和&#xff08;)触发重载函数调用运算符的执行。 作用&#xff1a; ​ 为算法提供策略 示例&#xff1a; #include <iostream> using namespace s…...

算法.图论-并查集

文章目录 1. 并查集介绍2. 并查集的实现2.1 实现逻辑2.2 isSameSet方法2.3 union方法(小挂大优化)2.4 find方法(路径压缩优化) 3. 并查集模板4. 并查集习题4.1 情侣牵手4.2 相似字符串组 1. 并查集介绍 定义&#xff1a; 并查集是一种树型的数据结构&#xff0c;用于处理一些不…...

elasticSearch常见命令及历史数据迁移

es这种非关系型数据库&#xff0c;感觉可视化效果不是很好&#xff0c;个人在操作中&#xff0c;习惯性通过简单的方式去访问。也是接触不久。只能出一些基操。共同学习记录&#xff0c;大家有好的操作也可留言备注。 1&#xff0c;常见命令 1&#xff09;查询有哪些index&…...

WebLogic 漏洞复现

1、后台弱⼝令GetShell 默认账号密码&#xff1a;weblogic/Oracle123 weblogic常⽤弱⼝令&#xff1a;https://cirt.net/passwords?criteriaweblogic 这⾥注意&#xff0c; 单个账号错误密码5次之后就会⾃动锁定。 http://47.121.212.195:7001/console 2、登录后台后&#…...

web基础:域名、网页、HTML、web版本

文章目录 引言域名网站访问方式域名结构域名解析DNS解析过程 网页网页文件类型静态网页与动态网页常用动态网页编程语言 HTMLHTML 语法规则HTML 文件结构HTML 文件基本结构示例&#xff1a;常用 HTML 标签HTML文件基本结构 WEB版本 引言 web&#xff08;World Wide Web&#x…...

【项目案例】物联网比较好的10+练手项目推荐,附项目文档/源码/视频

练手项目推荐 1 智能小车 项目功能介绍&#xff1a; 本项目由三部分组成&#xff1a;应用端&#xff08;微信小程序&#xff09;、设备端&#xff08;Hi3861&#xff09;、驱动端&#xff08;UPS&#xff09;。 1. 应用端&#xff0c;采用微信小程序作为应用端控制界面。在开…...

AWS注册时常见错误处理

引言 创建AWS账号是使用AWS云服务的第一步&#xff0c;但在注册过程中可能会遇到一些常见的问题。本文中九河云将帮助您排查和解决在创建AWS账户时可能遇到的一些常见问题&#xff0c;包括未接到验证电话、最大失败尝试次数错误以及账户激活延迟等。 常见问题及解决方法 1. …...

Spark-RDD持久化

一、Spark的三种持久化机制 1、cache 它是persist的一种简化方式&#xff0c;作用是将RDD缓存到内存中&#xff0c;以便后续快速访问&#xff0c;提高计算效率。cache操作是懒执行的&#xff0c;即执行action算子时才会触发。 2、persist 它提供了不同的存储级别&#xff0…...

vue2中使用tailwindCss 详细教程

1、先看官方文档:https://www.tailwindcss.cn/ 2、先安装:npm install -D tailwindcss ---------------通过 npm 安装 tailwindcss,然后创建你自己的 create your tailwind.config.js 配置文件。 npm install -D tailwindcss 3、初始化文件—npx tailwindcss init npx ta…...

机器视觉工程师一直做调试,维护岗位,想转岗软件方面C#从零开始,快则三年不到,慢则一辈子不会

其实不是每一家做视觉检测&#xff0c;或者是做设备必须要机器视觉工程师开发&#xff0c;其实公司对标准软件更感兴趣&#xff0c;主要非常高的性价比&#xff0c;省时省钱省人。所以这里有个问题&#xff0c;就是公司平台的重要性&#xff0c;首先他对开发是刚需&#xff0c;…...

【初阶数据结构】详解二叉树 - 树和二叉树(三)(递归的魅力时刻)

文章目录 前言1. 二叉树链式结构的意义2. 手搓一棵二叉树3. 二叉树的遍历&#xff08;重要&#xff09;3.1 遍历的规则3.2 先序遍历3.3 中序遍历3.4 后序遍历3.5 遍历的代码实现3.5.1 先序遍历代码实现3.5.2 中序遍历代码实现3.5.3 后序遍历代码实现 4. 统计二叉树结点的个数5.…...

【QT】QWidget 重要属性

文章目录 enabledgeometrywindowTitlewindowIconqrc 机制windowOpacitycursorfontQFont toolTip 和 toolTipDurationfocusPolicyQt::FocusPolicy styleSheet enabled 作用&#xff1a;设置控件是否可使用. true 表⽰可用, false 表⽰禁用. 对应的API bool isEnabled(); // 获…...

什么是数据库连接池?为什么需要使用连接池?

什么是数据库连接池&#xff1f;为什么需要使用连接池&#xff1f; 什么是数据库连接池&#xff1f; 数据库连接池是一种创建和管理数据库连接的技术。在传统的应用程序中&#xff0c;每当需要与数据库进行交互时&#xff0c;都会创建一个新的数据库连接。 这种做法虽然简单…...

2024ICPC网络赛第一场C. Permutation Counting 4(线性代数)

题目链接 题目大意&#xff1a;给你n个范围[ l i , r i l_i,r_i li​,ri​]&#xff0c;每个位置可以在这个范围中选择一个数&#xff0c;然后形成排列1到n的排列p。问p的所有情况的个数的奇偶性。 一个很妙的行列式转化&#xff0c;纯纯的线性代数。 首先&#xff0c;我们把…...

01.前端面试题之ts:说说如何在Vue项目中应用TypeScript?

文章目录 一、前言二、使用Componentcomputed、data、methodspropswatchemit 三 、总结 一、前言 与link类似 在VUE项目中应用typescript&#xff0c;我们需要引入一个库vue-property-decorator&#xff0c; 其是基于vue-class-component库而来&#xff0c;这个库vue官方推出…...

【HTTP】方法(method)以及 GET 和 POST 的区别

文章目录 方法&#xff08;method&#xff09;登录上传GET 和 POST 有什么区别&#xff08;面试&#xff09;区别不准确的说法 方法&#xff08;method&#xff09; 首行中的第一部分。首行是由方法、URL 和版本号组成 方法描述了这次请求想干什么&#xff0c;最主要的是&…...

JetBrains IDE试用期重置终极指南:简单三步实现30天无限续杯

JetBrains IDE试用期重置终极指南&#xff1a;简单三步实现30天无限续杯 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter 你是否曾经在项目开发的关键时刻&#xff0c;突然看到JetBrains IDE弹出"评估期已结束…...

Gitclaw:封装复杂Git操作,提升开发效率的命令行工具

1. 项目概述&#xff1a;一个为Git操作注入“爪牙”的命令行工具如果你和我一样&#xff0c;日常开发工作重度依赖Git&#xff0c;那你肯定也经历过这样的时刻&#xff1a;面对一个需要多步操作才能完成的复杂Git任务&#xff0c;比如清理多个已合并的分支、批量重写提交历史中…...

5分钟免费获取:开源鼠标连点器MouseClick完整使用指南

5分钟免费获取&#xff1a;开源鼠标连点器MouseClick完整使用指南 【免费下载链接】MouseClick &#x1f5b1;️ MouseClick &#x1f5b1;️ 是一款功能强大的鼠标连点器和管理工具&#xff0c;采用 QT Widget 开发 &#xff0c;具备跨平台兼容性 。软件界面美观 &#xff0c;…...

PCL2启动器离线登录按钮消失?5分钟快速修复指南

PCL2启动器离线登录按钮消失&#xff1f;5分钟快速修复指南 【免费下载链接】PCL Minecraft 启动器 Plain Craft Launcher&#xff08;PCL&#xff09;。 项目地址: https://gitcode.com/gh_mirrors/pc/PCL 你是否遇到过PCL2启动器离线登录按钮突然消失的困扰&#xff1…...

CircuitPython嵌入式游戏开发:基于TileGrid的迷宫寻蛋与JSON数据持久化实践

1. 项目概述与核心价值如果你和我一样&#xff0c;对嵌入式开发充满热情&#xff0c;同时又对游戏开发抱有好奇心&#xff0c;那么将两者结合——在微控制器上编写一个完整的2D游戏——绝对是一次令人兴奋的挑战。这不仅仅是让LED闪烁或读取传感器数据&#xff0c;而是要在资源…...

AI驱动全栈开发:Cursor集成模板与高效协作实践

1. 项目概述&#xff1a;当AI代码助手遇上全栈开发最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“Cursor-FullStack-AI-App”。光看名字&#xff0c;你大概能猜到它和Cursor这个AI编程工具&#xff0c;以及全栈应用开发有关。作为一个在前后端都摸爬滚打过多年的开发者…...

避坑指南:在Unity 2022 LTS中配置XCharts插件时遇到的3个常见问题及解决方法

Unity 2022 LTS中XCharts插件实战避坑手册 当数据可视化成为现代应用的核心需求时&#xff0c;Unity开发者常会选择XCharts这类开源图表插件来快速实现专业级图表展示。但在实际项目落地过程中&#xff0c;版本兼容性、环境配置和平台适配等问题往往会让开发进程意外卡壳。本文…...

初创团队如何通过Taotoken的Token Plan实现成本可控的AI应用开发

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 初创团队如何通过Taotoken的Token Plan实现成本可控的AI应用开发 对于预算敏感的初创团队和独立开发者而言&#xff0c;在开发AI应…...

自托管链接管理平台Linko:Go+React技术栈部署与核心功能解析

1. 项目概述与核心价值最近在折腾一个挺有意思的开源项目&#xff0c;叫monsterxx03/linko。乍一看这个名字&#xff0c;可能有点摸不着头脑&#xff0c;但如果你经常需要管理一堆链接、书签&#xff0c;或者在做内容聚合、个人知识库&#xff0c;那这个工具很可能就是你一直在…...

构建团队技能仓库:从知识管理到可执行技能包的系统化实践

1. 项目概述&#xff1a;从“技能包”到高效能工具箱最近在梳理团队内部的技术资产时&#xff0c;我反复思考一个问题&#xff1a;如何让那些散落在个人电脑、项目文档和口头交流中的“隐性知识”和“高效技能”&#xff0c;变成一个团队可以随时取用、持续进化的公共资产&…...