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

芋道系统,springboot+vue3+mysql实现地址的存储与显示

1.效果图

2.前端实现:

<el-form-item label="地址" prop="entrepriseAddress"><el-cascaderv-model="formData.entrepriseAddress"size="large":options="region"/></el-form-item>
//导入组件
import { regionData } from 'element-china-area-data'

需要再项目中安装一下地址组件:

安装命令:npm install element-china-area-data  

const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {// 校验表单await formRef.value.validate()// 提交请求formLoading.value = truetry {const data = formData.value as unknown as FleetEntrepriseVOif (formType.value === 'create') {await FleetEntrepriseApi.createFleetEntreprise(data)message.success(t('common.createSuccess'))} else {await FleetEntrepriseApi.updateFleetEntreprise(data)message.success(t('common.updateSuccess'))}dialogVisible.value = false// 发送操作成功的事件emit('success')} finally {formLoading.value = false}
}

相关api接口:

 createFleetEntreprise: async (data: FleetEntrepriseVO) => {

    return await request.post({ url: `/operate/fleet-entreprise/create`, data })

  },

3.后端代码

 @Schema(description = "地址", requiredMode = Schema.RequiredMode.REQUIRED)@NotEmpty(message = "地址不能为空")private List<String> entrepriseAddress;

需要以list集合的形式保存数据,因为前端传来的地址为数组形式;

而在数据表中是以char的字符类型存储:

/**
* 地址
*/
private String entrepriseAddress;

controller层:

 @PostMapping("/create")@Operation(summary = "创建企业")@PreAuthorize("@ss.hasPermission('operate:fleet-entreprise:create')")public CommonResult<Long> createFleetEntreprise(@Valid @RequestBody FleetEntrepriseSaveReqVO createReqVO) {return success(fleetEntrepriseService.createFleetEntreprise(createReqVO));}

实现层:

  @Overridepublic Long createFleetEntreprise(FleetEntrepriseSaveReqVO createReqVO) {// 插入FleetEntrepriseDO fleetEntreprise = BeanUtils.toBean(createReqVO, FleetEntrepriseDO.class);fleetEntrepriseMapper.insert(fleetEntreprise);// 返回return fleetEntreprise.getId();}

mapper层:

@Mapper
public interface FleetEntrepriseMapper extends BaseMapperX<FleetEntrepriseDO> {default PageResult<FleetEntrepriseDO> selectPage(FleetEntreprisePageReqVO reqVO) {return selectPage(reqVO, new LambdaQueryWrapperX<FleetEntrepriseDO>().likeIfPresent(FleetEntrepriseDO::getEntrepriseName, reqVO.getEntrepriseName()).eqIfPresent(FleetEntrepriseDO::getEntrepriseVenue, reqVO.getEntrepriseVenue()).orderByDesc(FleetEntrepriseDO::getId));}}

注意点:

前端把地址以数组的形式传到后端,所以要以list集合的形式保存,当用户编辑这条信息时,把值传给前端就会显示对应的地址;

http://www.lryc.cn/news/359175.html

相关文章:

  • 【C++】C++11新特性:列表初始化、声明、新容器、右值引用、万能引用和完美转发
  • 【IB Protocal Serial--WQE】
  • C++ 混合运算的类型转换
  • 线性时间选择
  • 【对算法期中卷子的解析和反思】
  • sudo apt update sudo: apt: command not found
  • ios:文本框默认的copy、past改成中文复制粘贴
  • Qt moc系统的黑魔法?
  • MyBatis开发中常用总结
  • Git基本使用教程(学习记录)
  • 【Linux-RTC】
  • 机器学习目录
  • React开发环境配置详细讲解-04
  • Go 如何通过 Kafka 客户端库 生产与消费消息
  • 【设计模式深度剖析】【B】【结构型】【对比】| 主要区别包装的不同
  • 信息学奥赛初赛天天练-17-阅读理解-浮点数精准输出与海伦公式的巧妙应用
  • mysql - 为什么MySQL不建议使用NULL作为列默认值?
  • 数据分析案例-在线食品订单数据可视化分析与建模分类
  • 构建LangChain应用程序的示例代码:2、使用LangChain库实现的AutoGPT示例:查找马拉松获胜成绩
  • 代码随想录算法训练营第三十四 |● 1005.K次取反后最大化的数组和 ● 134. 加油站 ● 135. 分发糖果
  • GB-T 43206-2023 信息安全技术 信息系统密码应用测评要求
  • 线程进阶-1 线程池
  • LabVIEW中PID控制器系统的噪声与扰动抑制策略
  • JavaWeb笔记整理+图解——Listener监听器
  • AIGC智能办公实战 课程,祝你事业新高度
  • 专科生听劝 这种情况你就不要专转本了
  • MySQL增删查改初阶
  • IService 接口中定义的常用方法
  • api网关kong对高频的慢接口进行熔断
  • python作业:实现一个任务列表管理系统,使用到python类、对象、循环等知识