嚴華 发表于 2024-7-30 17:10:35

尚医通-阿里云OSS、用户认证与就诊人

oss 模块搭建与实现

这里采用的方式是通过后端传 oss,可以对比下 谷粒商城里面的,从后端拿上传凭证,然后前端直传的方式
<dependency>
    <groupId>joda-time</groupId>
    <artifactId>joda-time</artifactId>
</dependency>

<!-- 阿里云oss依赖 -->
<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
</dependency>
配置文件
server.port=8207

spring.application.name=service-oss

spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8

spring.cloud.nacos.discovery.server-addr=localhost:8848

aliyun.oss.endpoint=oss-cn-hangzhou.aliyuncs.com
aliyun.oss.accessKeyId=LTAI5tCvwJjdKorLjaS9ynds
aliyun.oss.secret=xxxx
aliyun.oss.bucket=xxxx
配置常量读取
@Component
public class ConstantOssPropertiesUtils implements InitializingBean {
    @Value("${aliyun.oss.endpoint}")
    private String endpoint;

    @Value("${aliyun.oss.accessKeyId}")
    private String accessKeyId;

    @Value("${aliyun.oss.secret}")
    private String secret;

    @Value("${aliyun.oss.bucket}")
    private String bucket;

    public static String EDNPOINT;
    public static String ACCESS_KEY_ID;
    public static String SECRECT;
    public static String BUCKET;

    @Override
    public void afterPropertiesSet() throws Exception {
      EDNPOINT = endpoint;
      ACCESS_KEY_ID = accessKeyId;
      SECRECT = secret;
      BUCKET = bucket;
    }
}
Service 核心实现
@Service
public class FileServiceImpl implements FileService {
    //获取上传文件
    @Override
    public String upload(MultipartFile file) {
      // yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1(杭州)为例,Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
      String endpoint = ConstantOssPropertiesUtils.EDNPOINT;
      // 阿里云账号AccessKey拥有所有API的访问权限,风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维,请登录RAM控制台创建RAM用户。
      String accessKeyId = ConstantOssPropertiesUtils.ACCESS_KEY_ID;
      String accessKeySecret = ConstantOssPropertiesUtils.SECRECT;
      String bucketName = ConstantOssPropertiesUtils.BUCKET;

      try {
            // 创建OSSClient实例。
            OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
            // 获取文件流
            InputStream inputStream = file.getInputStream();
            String filename = file.getOriginalFilename();
            //为防止文件名重复造成文件覆盖,生成随机值,添加到文件中
            String uuid = UUID.randomUUID().toString().replaceAll("-","");
            filename = uuid + filename;
            //按照当前日期创建文件夹,上传到当前文件夹里面/2021/02/01/01.jpg
            String timeUrl = new DateTime().toString("yyyy/MM/dd");
            filename = timeUrl + "/" + filename;

            // 调用方法,实现上传参数2为上传文件(路径+)名称
            ossClient.putObject(bucketName, filename, inputStream);
            // 关闭OSSClient。
            ossClient.shutdown();
            // 返回上传后文件路径
            // 例:https://yygh-atguigu-li.oss-cn-beijing.aliyuncs.com/qq.jpg
            String url = "https://" + bucketName + "." + endpoint + "/" + filename;
            return url;
      } catch (IOException e) {
            e.printStackTrace();
            return null;
      }
    }
}
controller
@RestController
@RequestMapping("/api/oss/file")
public class FileApiController {

    @Autowired
    private FileService fileService;

    //上传文件到阿里云
    @PostMapping("fileUpload")
    public Result fileUpload(MultipartFile file){//通过MultipartFile可以得到上传文件
      //获取上传文件
      String url = fileService.upload(file);//上传后得到路径
      return Result.ok(url);
    }
}
用户认证功能实现

用户登录乐成后都要举行身份认证,认证通过后才可以预约挂号
认证过程:用户填写信息(姓名、证件类型、证件号码和证件照片)==> 平台审批
用户认证计划接口:
1、提交认证
2、上传证件图片
3、获取提交认证信息
后端实现

service
@Override
    public void userAuth(Long userId, UserAuthVo userAuthVo) {
      //1.根据用户id查询用户信息
      UserInfo userInfo = baseMapper.selectById(userId);
      //2.设置认证信息
      //认证人姓名
      userInfo.setName(userAuthVo.getName());
      //其他认证信息
      userInfo.setCertificatesType(userAuthVo.getCertificatesType());
      userInfo.setCertificatesNo(userAuthVo.getCertificatesNo());
      userInfo.setCertificatesUrl(userAuthVo.getCertificatesUrl());
      userInfo.setAuthStatus(AuthStatusEnum.AUTH_RUN.getStatus());
      //3.进行信息更新
      baseMapper.updateById(userInfo);
    }
用户信息剖析
public class AuthContextHolder {
    //获取当前用户id
    public static Long getUserId(HttpServletRequest request) {
      //从header中获取token
      String token = request.getHeader("token");
      //从token中获取userid
      Long userId = JwtHelper.getUserId(token);
      return userId;
    }

    //获取当前用户名称
    public static String getUserName(HttpServletRequest request) {
      //从header中获取token
      String token = request.getHeader("token");
      //从token中获取userid
      String userName = JwtHelper.getUserName(token);
      return userName;
    }
}
接口实现
@ApiOperation("用户认证接口")
    @PostMapping("auth/userAuth")
    public Result userAuth(@RequestBody UserAuthVo userAuthVo, HttpServletRequest request) {
      // 传递 用户id 和 认证数据vo对象
      userInfoService.userAuth(AuthContextHolder.getUserId(request), userAuthVo);


      return Result.ok();
    }

    @ApiOperation("获取用户id信息接口")
    @GetMapping("auth/getUserInfo")
    public Result getUserInfo(HttpServletRequest request) {
      Long userId = AuthContextHolder.getUserId(request);

      UserInfo userInfo = userInfoService.getById(userId);

      return Result.ok(userInfo);
    }
前端实现

//用户认证接口
saveUserAuth(userAuth) {
    return request({
      url: `${api_name}/auth/userAuth`,
      method: 'post',
      data: userAuth
    })
},
//根据userid获取用户信息
getUserInfo() {
    return request({
      url: `${api_name}/auth/getUserInfo`,
      method: `get`
    })
},
<template>
<!-- header -->
<div class="nav-container page-component">
    <!--左侧导航 #start -->
    <div class="nav left-nav">
      <div class="nav-item selected">
      <span
          class="v-link selected dark"
          οnclick="javascript:window.location='/user'"
          >实名认证
      </span>
      </div>
      <div class="nav-item">
      <span
          class="v-link selected dark"
          οnclick="javascript:window.location='/order'"
      >
          挂号订单
      </span>
      </div>
      <div class="nav-item">
      <span
          class="v-link clickable dark"
          οnclick="javascript:window.location='/patient'"
      >
          就诊人管理
      </span>
      </div>
      <div class="nav-item">
      <span class="v-link clickable dark"> 修改账号信息 </span>
      </div>
      <div class="nav-item">
      <span class="v-link clickable dark"> 意见反馈 </span>
      </div>
    </div>
    <!-- 左侧导航 #end -->
    <!-- 右侧内容 #start -->
    <div class="page-container">
      <div>
      <div class="title">实名认证</div>
      <div class="status-bar">
          <div class="status-wrapper">
            <span class="iconfont"></span>{{ userInfo.param.authStatusString }}
          </div>
      </div>
      <div class="tips">
          <span class="iconfont"></span>
          完成实名认证后才能添加就诊人,正常进行挂号,为了不影响后续步骤,建议提前实名认证。
      </div>
      <div class="form-wrapper" v-if="userInfo.authStatus == 0">
          <div>
            <el-form
            :model="userAuah"
            label-width="110px"
            label-position="left"
            >
            <el-form-item prop="name" label="姓名:" class="form-normal">
                <div class="name-input">
                  <el-input
                  v-model="userAuah.name"
                  placeholder="请输入联系人姓名全称"
                  class="input v-input"
                  />
                </div>
            </el-form-item>
            <el-form-item prop="certificatesType" label="证件类型:">
                <el-select
                  v-model="userAuah.certificatesType"
                  placeholder="请选择证件类型"
                  class="v-select patient-select"
                >
                  <el-option
                  v-for="item in certificatesTypeList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.name"
                  >
                  </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="certificatesNo" label="证件号码:">
                <el-input
                  v-model="userAuah.certificatesNo"
                  placeholder="请输入联系人证件号码"
                  class="input v-input"
                />
            </el-form-item>
            <el-form-item prop="name" label="上传证件:">
                <div class="upload-wrapper">
                  <div class="avatar-uploader">
                  <el-upload
                      class="avatar-uploader"
                      :action="fileUrl"
                      :show-file-list="false"
                      :on-success="onUploadSuccess"
                  >
                      <div class="upload-inner-wrapper">
                        <img
                        v-if="userAuah.certificatesUrl"
                        :src="userAuah.certificatesUrl"
                        class="avatar"
                        />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div v-if="!userAuah.certificatesUrl" class="text">
                        上传证件合照
                        </div>
                      </div>
                  </el-upload>
                  </div>
                  <img
                  src="//img.114yygh.com/static/web/auth_example.png"
                  class="example"
                  />
                </div>
            </el-form-item>
            </el-form>
            <div class="bottom-wrapper">
            <div class="button-wrapper">
                <div class="v-button" @click="saveUserAuah()">
                  {{ submitBnt }}
                </div>
            </div>
            </div>
          </div>
      </div>
      <div class="context-container" v-if="userInfo.authStatus != 0">
          <div>
            <el-form
            :model="formData"
            label-width="110px"
            label-position="right"
            >
            <el-form-item prop="name" label="姓名:" class="form-normal">
                <div class="name-input">
                  {{ userInfo.name }}
                </div>
            </el-form-item>
            <el-form-item prop="name" label="证件类型:">
                {{ userInfo.certificatesType }}
            </el-form-item>
            <el-form-item prop="name" label="证件号码:">
                {{ userInfo.certificatesNo }}
            </el-form-item>
            </el-form>
          </div>
      </div>
      </div>
    </div>
    <!-- 右侧内容 #end -->
    <!-- 登录弹出框 -->
</div>
<!-- footer -->
</template>

<script>
import "~/assets/css/hospital_personal.css";
import "~/assets/css/hospital.css";
import "~/assets/css/personal.css";

import dictApi from "@/api/dict";
import userInfoApi from "@/api/userInfo";

const defaultForm = {
name: "",
certificatesType: "",
certificatesNo: "",
certificatesUrl: "",
};
export default {
data() {
    return {
      userAuah: defaultForm,
      certificatesTypeList: [],
      fileUrl: "http://localhost:81/api/oss/file/fileUpload",
      userInfo: {
      param: {},
      },
      submitBnt: "提交",
    };
},
created() {
    this.init();
},
methods: {
    init() {
      this.getUserInfo();
      this.getDict();
    },
    getUserInfo() {
      userInfoApi.getUserInfo().then((response) => {
      this.userInfo = response.data;
      });
    },
    saveUserAuah() {
      if (this.submitBnt == "正在提交...") {
      this.$message.info("重复提交");
      return;
      }
      this.submitBnt = "正在提交...";
      userInfoApi
      .saveUserAuth(this.userAuah)
      .then((response) => {
          this.$message.success("提交成功");
          window.location.reload();
      })
      .catch((e) => {
          this.submitBnt = "提交";
      });
    },
    getDict() {
      dictApi.findByDictCode("CertificatesType").then((response) => {
      this.certificatesTypeList = response.data;
      });
    },
    onUploadSuccess(response, file) {
      if (response.code !== 200) {
      this.$message.error("上传失败");
      return;
      }
      // 填充上传文件列表
      this.userAuah.certificatesUrl = file.response.data;
    },
},
};
</script>
<style>
.header-wrapper .title {
font-size: 16px;
margin-top: 0;
}
.content-wrapper {
margin-left: 0;
}
.patient-card .el-card__header .detail {
font-size: 14px;
}
.page-container .title {
letter-spacing: 1px;
font-weight: 700;
color: #333;
font-size: 16px;
margin-top: 0;
margin-bottom: 20px;
}
.page-container .tips {
width: 100%;
padding-left: 0;
}
.page-container .form-wrapper {
padding-left: 92px;
width: 580px;
}
.form-normal {
height: 40px;
}
.bottom-wrapper {
width: 100%;
padding: 0;
margin-top: 0;
}
</style>
上传文件报错
https://i-blog.csdnimg.cn/blog_migrate/5e536f04a5b951ff94d2f5a7caf4913a.png
oss模块添加配置
spring.servlet.multipart.max-file-size=500MB
spring.servlet.multipart.max-request-size=500MB
https://i-blog.csdnimg.cn/blog_migrate/1a84084b80b072a97203e156e0b879ff.png
预约挂号页面调解

预约挂号前验证 是否实名认证
// 预约
    schedule(depcode) {
      // 登录判断
      let token = cookie.get("token");
      if (!token) {
      loginEvent.$emit("loginDialogEvent");
      return;
      } //判断认证

      userInfoApi.getUserInfo().then((response) => {
      let authStatus = response.data.authStatus; // 状态为2认证通过
      if (!authStatus || authStatus != 2) {
          window.location.href = "/user";
          return;
      }
      });

      window.location.href =
      "/hospital/schedule?hoscode=" +
      this.hospital.hoscode +
      "&depcode=" +
      depcode;
    },
就诊人管理

预约下单必要选择就诊人,因此我们要实现就诊人管理,前端就诊人管理其实就是要实现一个完整的增删改查
user 长途调用 cmn 模块,检察数据字典
这个功能必要提一下的这块的处理惩罚,对于数据的封装,所有的基础资料只存了 code, 剩余的信息长途调用 cmn 模块获取,重点注意下这里的
//根据登录用户id获取就诊列表
    @Override
    public List<Patient> findAllUserId(Long userId) {
      //据登录用户id查询所有就诊人信息列表
      QueryWrapper<Patient> wrapper = new QueryWrapper<>();
      wrapper.eq("user_id", userId);
      List<Patient> patientList = baseMapper.selectList(wrapper);
      //通过远程调用得到部分编码对应的具体内容,查询数据字典表中的内容例如 编号2000对应的是身份证方式
      patientList.stream().forEach(item -> {
            this.packPatient(item);//将param中的一些属性封装进patient中
      });
      return patientList;
    }

//将param中的一些属性封装进patient中
    private Patient packPatient(Patient patient) {
      //根据证件类型,获取证件类型名称
      String certificatesTypeString = dictFeignClient.getName
                (DictEnum.CERTIFICATES_TYPE.getDictCode(), patient.getCertificatesType());
      //联系人证件类型
      String contactsCertificatesTypeString = dictFeignClient.getName
                (DictEnum.CERTIFICATES_TYPE.getDictCode(), patient.getContactsCertificatesType());
      //省
      String provinceString = dictFeignClient.getName(patient.getProvinceCode());
      //市
      String cityString = dictFeignClient.getName(patient.getCityCode());
      //区
      String districtString = dictFeignClient.getName(patient.getDistrictCode());
      patient.getParam().put("certificatesTypeString", certificatesTypeString);
      patient.getParam().put("contactsCertificatesTypeString", contactsCertificatesTypeString);
      patient.getParam().put("provinceString", provinceString);
      patient.getParam().put("cityString", cityString);
      patient.getParam().put("districtString", districtString);
      patient.getParam().put("fullAddress", provinceString + cityString + districtString + patient.getAddress());
      return patient;
    }
其他代码可自行参考资料中的代码
做完之后的结果
https://i-blog.csdnimg.cn/blog_migrate/caf0830b75fd6249497a4b0e0aea28e2.png https://i-blog.csdnimg.cn/blog_migrate/f23573d8e454d3740a73ba274698cd8c.png 用户管理

前面我们做了用户登录、用户认证与就诊人,如今我们必要把这些信息在我们的平台管理体系做一个统一管理
撤消增删查改还有 锁定,认证审批接口,也比力常规,简朴看下结果,代码就不看了
https://i-blog.csdnimg.cn/blog_migrate/77f9eed4925f15c68a62ce89e8730a2f.png

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 尚医通-阿里云OSS、用户认证与就诊人