北京商城网站建设报价,网站托管流程,名词解释seo,域名未做运行网站解析目录
一、需求介绍
二、图片上传
#xff08;一#xff09;前端页面
#xff08;二#xff09;实现图片上传
三、数据字典展示
#xff08;一#xff09;后端
#xff08;二#xff09;前端
四、表单信息提交
#xff08;一#xff09;后端
1、VO对象一前端页面
二实现图片上传
三、数据字典展示
一后端
二前端
四、表单信息提交
一后端
1、VO对象表单对象
2、定义借款认证状态枚举
3、controller
4、service
二前端
五、获取借款人状态
一后端
1、borrowerController
2、service
二前端 一、需求介绍
step1用户在个人中心点击 “立即借款” (http://localhost:3000/user/borrower)
step2展示借款人信息认证页面 step3借款人填写信息并提交
step4展示等待审核页面 step5平台审核
step6显示审批结果 二、图片上传
一前端页面
templatediv classpersonal-maindiv classpersonal-payh3i借款人信息认证/i/h3el-steps :activeactive stylemargin: 40pxel-step title填写借款人信息/el-stepel-step title提交平台审核/el-stepel-step title等待认证结果/el-step/el-stepsdiv v-ifactive 0 classuser-borrowerh6个人基本信息/h6el-form label-width120pxel-form-item label年龄el-col :span5el-input v-modelborrower.age //el-col/el-form-itemel-form-item label性别el-select v-modelborrower.sexel-option :value1 :label男 /el-option :value0 :label女 //el-select/el-form-itemel-form-item label婚否el-select v-modelborrower.marryel-option :valuetrue :label是 /el-option :valuefalse :label否 //el-select/el-form-itemel-form-item label学历el-select v-modelborrower.educationel-optionv-foritem in educationList:keyitem.value:labelitem.name:valueitem.value//el-select/el-form-itemel-form-item label行业el-select v-modelborrower.industryel-optionv-foritem in industryList:keyitem.value:labelitem.name:valueitem.value//el-select/el-form-itemel-form-item label月收入el-select v-modelborrower.incomeel-optionv-foritem in incomeList:keyitem.value:labelitem.name:valueitem.value//el-select/el-form-itemel-form-item label还款来源el-select v-modelborrower.returnSourceel-optionv-foritem in returnSourceList:keyitem.value:labelitem.name:valueitem.value//el-select/el-form-item/el-formh6联系人信息/h6el-form label-width120pxel-form-item label联系人姓名el-col :span5el-input v-modelborrower.contactsName //el-col/el-form-itemel-form-item label联系人手机el-col :span5el-input v-modelborrower.contactsMobile //el-col/el-form-itemel-form-item label联系人关系el-select v-modelborrower.contactsRelationel-optionv-foritem in contactsRelationList:keyitem.value:labelitem.name:valueitem.value//el-select/el-form-item/el-formh6身份认证信息/h6el-form label-width120pxel-form-item label身份证人像面el-upload:on-successonUploadSuccessIdCard1:on-removeonUploadRemove:multiplefalse:actionuploadUrl:data{ module: idCard1 }:limit1list-typepicture-cardi classel-icon-plus/i/el-upload/el-form-itemel-form-item label身份证国徽面el-upload:on-successonUploadSuccessIdCard2:on-removeonUploadRemove:multiplefalse:actionuploadUrl:data{ module: idCard2 }:limit1list-typepicture-cardi classel-icon-plus/i/el-upload/el-form-item/el-formh6其他信息/h6el-form label-width120pxel-form-item label房产信息el-upload:on-successonUploadSuccessHouse:on-removeonUploadRemove:multiplefalse:actionuploadUrl:data{ module: house }list-typepicture-cardi classel-icon-plus/i/el-upload/el-form-itemel-form-item label车辆信息el-upload:on-successonUploadSuccessCar:on-removeonUploadRemove:multiplefalse:actionuploadUrl:data{ module: car }list-typepicture-cardi classel-icon-plus/i/el-upload/el-form-item/el-formel-form label-width120pxel-form-itemel-buttontypeprimary:disabledsubmitBtnDisabledclicksave提交/el-button/el-form-item/el-form/divdiv v-ifactive 1div stylemargin-top:40px;el-alerttitle您的认证申请已成功提交请耐心等待typewarningshow-icon:closablefalse我们将在2小时内完成审核审核时间为周一至周五8:00至20:00。/el-alert/div/divdiv v-ifactive 2div stylemargin-top:40px;el-alertv-ifborrowerStatus 2title您的认证审批已通过typesuccessshow-icon:closablefalse/el-alertel-alertv-ifborrowerStatus -1title您的认证审批未通过typeerrorshow-icon:closablefalse/el-alert/div/div/div/div
/template
二实现图片上传
前面四个success是el文件上传组件成功后的回调函数response和file是组件为我们自动封装的传递type的原因是要区别四张图片上传阿里云时存储在不同文件中
这里前端我们要将整个表单封装到borrow对象中比如年龄(borrow.age)还有附件(borrower.borrowerAttachList)即四张图片的信息包括图片名字图片类型图片在阿里云上的地址
其次当用户上传图片又删除后我们需要删除已经上传阿里云的图片并删除borrower.borrowerAttachList里对应的信息这里使用filter函数实现
onUploadSuccessIdCard1(response, file) {this.onUploadSuccess(response, file, idCard1)
},onUploadSuccessIdCard2(response, file) {this.onUploadSuccess(response, file, idCard2)
},onUploadSuccessHouse(response, file) {this.onUploadSuccess(response, file, house)
},onUploadSuccessCar(response, file) {this.onUploadSuccess(response, file, car)
},onUploadSuccess(response, file, type) {// debuggerif (response.code ! 0) {this.$message.error(response.message)return}// 填充上传文件列表this.borrower.borrowerAttachList.push({imageName: file.name,imageUrl: response.data.url,imageType: type,})
},onUploadRemove(file, fileList) {console.log(fileList, fileList)//删除oss服务器上的内容this.$axios.$delete(/api/oss/file/remove?url file.response.data.url).then((response) {// debuggerconsole.log(远程删除)this.borrower.borrowerAttachList this.borrower.borrowerAttachList.filter(function(item) {console.log(item, item)return item.imageUrl ! file.response.data.url})})
}, 在浏览器通过vue插件查看对象封装情况 三、数据字典展示
对于以下下拉表单选项的内容储存在数据字典dict表中因此我们去查询数据库将数据字典对应的内容查询出来进行展示 思路首先根据dict_code查询出该对象的id然后通过这个id查询下面的子节点通过子节点parent_id父节点id
一后端
DictController ApiOperation(根据dictCode查询下级节点)GetMapping(/findByDictCode/{dictCode})public R findByDictCode(ApiParam(value 节点编码, required true)PathVariable String dictCode) {ListDict dictList dictService.findByDictCode(dictCode);return R.ok().data(dictList, dictList);}
DictService ListDict findByDictCode(String dictCode);
DictServiceImpl Overridepublic ListDict findByDictCode(String dictCode) {QueryWrapperDict wrapper new QueryWrapper();wrapper.eq(dict_code, dictCode);Dict dict baseMapper.selectOne(wrapper); // 父节点return this.listByParentId(dict.getId());}Overridepublic ListDict listByParentId(Long parent_id) {try {// 首先查询redis有无数据ListDict dictList (ListDict)redisTemplate.opsForValue().get(src:core:dictList parent_id);// 如果查询到数据直接返回if(dictList ! null) {log.info(redis查到数据准备返回);return dictList;}} catch (Exception e) {log.error(redis服务器异常 ExceptionUtils.getStackTrace(e));}// redis没有数据就查询数据库log.info(查询数据库);QueryWrapperDict wrapper new QueryWrapper();wrapper.eq(parent_id, parent_id);ListDict dicts baseMapper.selectList(wrapper);dicts.forEach(dict - {dict.setHasChildren(this.hasChildren(dict.getId()));});try {// 将查询到的数据放入redislog.info(将数据库查到的数据放入redis);redisTemplate.opsForValue().set(src:core:dictList parent_id, dicts, 5, TimeUnit.MINUTES);} catch (Exception e) {log.error(redis服务器异常 ExceptionUtils.getStackTrace(e));}// 返回查询到的数据return dicts;}
二前端
pages/user/borrower.vue中调用接口 created() {this.initSelected()},initSelected() {//学历列表this.$axios.$get(/api/core/dict/findByDictCode/education).then((response) {this.educationList response.data.dictList})//行业列表this.$axios.$get(/api/core/dict/findByDictCode/industry).then((response) {this.industryList response.data.dictList})//收入列表this.$axios.$get(/api/core/dict/findByDictCode/income).then((response) {this.incomeList response.data.dictList})//还款来源列表this.$axios.$get(/api/core/dict/findByDictCode/returnSource).then((response) {this.returnSourceList response.data.dictList})//联系人关系列表this.$axios.$get(/api/core/dict/findByDictCode/relation).then((response) {this.contactsRelationList response.data.dictList})},
四、表单信息提交
一后端
1、VO对象表单对象
service-core微服务创建BorrowerVO对应的是填写借款申请时的表单对象VOvalue object
Data
ApiModel(description借款人认证信息)
public class BorrowerVO {ApiModelProperty(value 性别1男 0女)private Integer sex;ApiModelProperty(value 年龄)private Integer age;ApiModelProperty(value 学历)private Integer education;ApiModelProperty(value 是否结婚1是 0否)private Boolean marry;ApiModelProperty(value 行业)private Integer industry;ApiModelProperty(value 月收入)private Integer income;ApiModelProperty(value 还款来源)private Integer returnSource;ApiModelProperty(value 联系人名称)private String contactsName;ApiModelProperty(value 联系人手机)private String contactsMobile;ApiModelProperty(value 联系人关系)private Integer contactsRelation;ApiModelProperty(value 借款人附件资料)private ListBorrowerAttach borrowerAttachList;
} 2、定义借款认证状态枚举
BorrowerStatusEnum
数据库设计中对应认证状态status 0未认证1认证中 2认证通过 -1认证失败
AllArgsConstructor
Getter
//ToString
public enum BorrowerStatusEnum {NO_AUTH(0, 未认证),AUTH_RUN(1, 认证中),AUTH_OK(2, 认证成功),AUTH_FAIL(-1, 认证失败),;private Integer status;private String msg;public static String getMsgByStatus(int status) {BorrowerStatusEnum arrObj[] BorrowerStatusEnum.values();for (BorrowerStatusEnum obj : arrObj) {if (status obj.getStatus().intValue()) {return obj.getMsg();}}return ;}
}
3、controller
borrowerController ApiOperation(保存借款人信息)PostMapping(/auth/save)public R save(RequestBody BorrowerVO borrowerVO, HttpServletRequest request) {String token request.getHeader(token);Long userId JwtUtils.getUserId(token);borrowerService.saveBorrowerVOByUserId(borrowerVO, userId);return R.ok().message(信息保存成功);}
4、service
BorrowerService void saveBorrowerVOByUserId(BorrowerVO borrowerVO, Long userId); BorrowerServiceImpl
Resource
private BorrowerAttachMapper borrowerAttachMapper;Resource
private UserInfoMapper userInfoMapper;Transactional(rollbackFor Exception.class)
Override
public void saveBorrowerVOByUserId(BorrowerVO borrowerVO, Long userId) {UserInfo userInfo userInfoMapper.selectById(userId);//保存借款人信息Borrower borrower new Borrower();BeanUtils.copyProperties(borrowerVO, borrower);borrower.setUserId(userId);borrower.setName(userInfo.getName());borrower.setIdCard(userInfo.getIdCard());borrower.setMobile(userInfo.getMobile());borrower.setStatus(BorrowerStatusEnum.AUTH_RUN.getStatus());//认证中baseMapper.insert(borrower);//保存附件ListBorrowerAttach borrowerAttachList borrowerVO.getBorrowerAttachList();borrowerAttachList.forEach(borrowerAttach - {borrowerAttach.setBorrowerId(borrower.getId());borrowerAttachMapper.insert(borrowerAttach);});//更新会员状态更新为认证中userInfo.setBorrowAuthStatus(BorrowerStatusEnum.AUTH_RUN.getStatus());userInfoMapper.updateById(userInfo);
}
二前端
pages/user/borrower.vue 脚本
save() {// debuggerthis.submitBtnDisabled truethis.$axios.$post(/api/core/borrower/save, this.borrower).then((response) {this.active 1})
},
五、获取借款人状态
当借款人申请后再一次刷新页面会发现仍然是表单这里正确的是应该显示认证中认证成功或者认证失败所以在加载页面之前我们应该请求后端获取borrowerStatus
这里的认证状态是由active和borrowerstatus共同决定的 一后端
1、borrowerController
ApiOperation(获取借款人认证状态)
GetMapping(/auth/getBorrowerStatus)
public R getBorrowerStatus(HttpServletRequest request){String token request.getHeader(token);Long userId JwtUtils.getUserId(token);Integer status borrowerService.getStatusByUserId(userId);return R.ok().data(borrowerStatus, status);
}
2、service BorrowerService
Integer getStatusByUserId(Long userId);
BorrowerServiceImpl
Override
public Integer getStatusByUserId(Long userId) {QueryWrapperBorrower borrowerQueryWrapper new QueryWrapper();borrowerQueryWrapper.select(status).eq(user_id, userId);ListObject objects baseMapper.selectObjs(borrowerQueryWrapper);if(objects.size() 0){//借款人尚未提交信息return BorrowerStatusEnum.NO_AUTH.getStatus();}Integer status (Integer)objects.get(0);return status;
} 二前端 pages/user/borrower.vue 脚本
created() {// 这里由initSelected换成getUserInfo获取borrowerStatus 状态后再决定是否调用initSelectedthis.getUserInfo()
},
//获取借款人信息
getUserInfo() {this.$axios.$get(/api/core/borrower/auth/getBorrowerStatus).then((response) {this.borrowerStatus response.data.borrowerStatusif (this.borrowerStatus 0) {//未认证this.active 0//获取下拉列表this.initSelected()} else if (this.borrowerStatus 1) {//认证中this.active 1} else if (this.borrowerStatus 2) {//认证成功this.active 2} else if (this.borrowerStatus -1) {//认证失败this.active 2}})
}
