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

1.效果图

2.前端实现：

<el-form-item label="地址" prop="entrepriseAddress">
        <el-cascader
      v-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 = true
  try {
    const data = formData.value as unknown as FleetEntrepriseVO
    if (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));
    }

实现层：

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