芋道系统，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集合的形式保存，当用户编辑这条信息时，把值传给前端就会显示对应的地址；