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

oss 模块搭建与实现

这里采用的方式是通过后端传 oss，可以对比下 谷粒商城里面的，从后端拿上传凭证，然后前端直传的方式

1. <dependency>
2.     <groupId>joda-time</groupId>
3.     <artifactId>joda-time</artifactId>
4. </dependency>
6. <!-- 阿里云oss依赖 -->
7. <dependency>
8.     <groupId>com.aliyun.oss</groupId>
9.     <artifactId>aliyun-sdk-oss</artifactId>
10. </dependency>

复制代码

配置文件

1. server.port=8207
3. spring.application.name=service-oss
5. spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
6. spring.jackson.time-zone=GMT+8
8. spring.cloud.nacos.discovery.server-addr=localhost:8848
10. aliyun.oss.endpoint=oss-cn-hangzhou.aliyuncs.com
11. aliyun.oss.accessKeyId=LTAI5tCvwJjdKorLjaS9ynds
12. aliyun.oss.secret=xxxx
13. aliyun.oss.bucket=xxxx

复制代码

配置常量读取

1. @Component
2. public class ConstantOssPropertiesUtils implements InitializingBean {
3.     @Value("${aliyun.oss.endpoint}")
4.     private String endpoint;
6.     @Value("${aliyun.oss.accessKeyId}")
7.     private String accessKeyId;
9.     @Value("${aliyun.oss.secret}")
10.     private String secret;
12.     @Value("${aliyun.oss.bucket}")
13.     private String bucket;
15.     public static String EDNPOINT;
16.     public static String ACCESS_KEY_ID;
17.     public static String SECRECT;
18.     public static String BUCKET;
20.     @Override
21.     public void afterPropertiesSet() throws Exception {
22.         EDNPOINT = endpoint;
23.         ACCESS_KEY_ID = accessKeyId;
24.         SECRECT = secret;
25.         BUCKET = bucket;
26.     }
27. }

复制代码

Service 核心实现

1. @Service
2. public class FileServiceImpl implements FileService {
3.     //获取上传文件
4.     @Override
5.     public String upload(MultipartFile file) {
6.         // yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
7.         String endpoint = ConstantOssPropertiesUtils.EDNPOINT;
8.         // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
9.         String accessKeyId = ConstantOssPropertiesUtils.ACCESS_KEY_ID;
10.         String accessKeySecret = ConstantOssPropertiesUtils.SECRECT;
11.         String bucketName = ConstantOssPropertiesUtils.BUCKET;
13.         try {
14.             // 创建OSSClient实例。
15.             OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
16.             // 获取文件流
17.             InputStream inputStream = file.getInputStream();
18.             String filename = file.getOriginalFilename();
19.             //为防止文件名重复造成文件覆盖，生成随机值，添加到文件中
20.             String uuid = UUID.randomUUID().toString().replaceAll("-","");
21.             filename = uuid + filename;
22.             //按照当前日期创建文件夹，上传到当前文件夹里面  /2021/02/01/01.jpg
23.             String timeUrl = new DateTime().toString("yyyy/MM/dd");
24.             filename = timeUrl + "/" + filename;
26.             // 调用方法，实现上传  参数2为上传文件（路径+）名称
27.             ossClient.putObject(bucketName, filename, inputStream);
28.             // 关闭OSSClient。
29.             ossClient.shutdown();
30.             // 返回上传后文件路径
31.             // 例：https://yygh-atguigu-li.oss-cn-beijing.aliyuncs.com/qq.jpg
32.             String url = "https://" + bucketName + "." + endpoint + "/" + filename;
33.             return url;
34.         } catch (IOException e) {
35.             e.printStackTrace();
36.             return null;
37.         }
38.     }
39. }

复制代码

controller

1. @RestController
2. @RequestMapping("/api/oss/file")
3. public class FileApiController {
5.     @Autowired
6.     private FileService fileService;
8.     //上传文件到阿里云
9.     @PostMapping("fileUpload")
10.     public Result fileUpload(MultipartFile file){  //通过MultipartFile可以得到上传文件
11.         //获取上传文件
12.         String url = fileService.upload(file);  //上传后得到路径
13.         return Result.ok(url);
14.     }
15. }

复制代码

用户认证功能实现

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

service

1. @Override
2.     public void userAuth(Long userId, UserAuthVo userAuthVo) {
3.         //1.根据用户id查询用户信息
4.         UserInfo userInfo = baseMapper.selectById(userId);
5.         //2.设置认证信息
6.         //认证人姓名
7.         userInfo.setName(userAuthVo.getName());
8.         //其他认证信息
9.         userInfo.setCertificatesType(userAuthVo.getCertificatesType());
10.         userInfo.setCertificatesNo(userAuthVo.getCertificatesNo());
11.         userInfo.setCertificatesUrl(userAuthVo.getCertificatesUrl());
12.         userInfo.setAuthStatus(AuthStatusEnum.AUTH_RUN.getStatus());
13.         //3.进行信息更新
14.         baseMapper.updateById(userInfo);
15.     }

复制代码

用户信息剖析

1. public class AuthContextHolder {
2.     //获取当前用户id
3.     public static Long getUserId(HttpServletRequest request) {
4.         //从header中获取token
5.         String token = request.getHeader("token");
6.         //从token中获取userid
7.         Long userId = JwtHelper.getUserId(token);
8.         return userId;
9.     }
11.     //获取当前用户名称
12.     public static String getUserName(HttpServletRequest request) {
13.         //从header中获取token
14.         String token = request.getHeader("token");
15.         //从token中获取userid
16.         String userName = JwtHelper.getUserName(token);
17.         return userName;
18.     }
19. }

复制代码

接口实现

1. @ApiOperation("用户认证接口")
2.     @PostMapping("auth/userAuth")
3.     public Result userAuth(@RequestBody UserAuthVo userAuthVo, HttpServletRequest request) {
4.         // 传递 用户id 和 认证数据vo对象
5.         userInfoService.userAuth(AuthContextHolder.getUserId(request), userAuthVo);
8.         return Result.ok();
9.     }
11.     @ApiOperation("获取用户id信息接口")
12.     @GetMapping("auth/getUserInfo")
13.     public Result getUserInfo(HttpServletRequest request) {
14.         Long userId = AuthContextHolder.getUserId(request);
16.         UserInfo userInfo = userInfoService.getById(userId);
18.         return Result.ok(userInfo);
19.     }

复制代码

前端实现

1. //用户认证接口
2. saveUserAuth(userAuth) {
3.     return request({
4.         url: `${api_name}/auth/userAuth`,
5.         method: 'post',
6.         data: userAuth
7.     })
8. },
9. //根据userid获取用户信息
10. getUserInfo() {
11.     return request({
12.         url: `${api_name}/auth/getUserInfo`,
13.         method: `get`
14.     })
15. },

复制代码

1. <template>
2.   <!-- header -->
3.   <div class="nav-container page-component">
4.     <!--左侧导航 #start -->
5.     <div class="nav left-nav">
6.       <div class="nav-item selected">
7.         <span
8.           class="v-link selected dark"
9.           οnclick="javascript:window.location='/user'"
10.           >实名认证
11.         </span>
12.       </div>
13.       <div class="nav-item">
14.         <span
15.           class="v-link selected dark"
16.           οnclick="javascript:window.location='/order'"
17.         >
18.           挂号订单
19.         </span>
20.       </div>
21.       <div class="nav-item">
22.         <span
23.           class="v-link clickable dark"
24.           οnclick="javascript:window.location='/patient'"
25.         >
26.           就诊人管理
27.         </span>
28.       </div>
29.       <div class="nav-item">
30.         <span class="v-link clickable dark"> 修改账号信息 </span>
31.       </div>
32.       <div class="nav-item">
33.         <span class="v-link clickable dark"> 意见反馈 </span>
34.       </div>
35.     </div>
36.     <!-- 左侧导航 #end -->
37.     <!-- 右侧内容 #start -->
38.     <div class="page-container">
39.       <div>
40.         <div class="title">实名认证</div>
41.         <div class="status-bar">
42.           <div class="status-wrapper">
43.             <span class="iconfont"></span>{{ userInfo.param.authStatusString }}
44.           </div>
45.         </div>
46.         <div class="tips">
47.           <span class="iconfont"></span>
48.           完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证。
49.         </div>
50.         <div class="form-wrapper" v-if="userInfo.authStatus == 0">
51.           <div>
52.             <el-form
53.               :model="userAuah"
54.               label-width="110px"
55.               label-position="left"
56.             >
57.               <el-form-item prop="name" label="姓名：" class="form-normal">
58.                 <div class="name-input">
59.                   <el-input
60.                     v-model="userAuah.name"
61.                     placeholder="请输入联系人姓名全称"
62.                     class="input v-input"
63.                   />
64.                 </div>
65.               </el-form-item>
66.               <el-form-item prop="certificatesType" label="证件类型：">
67.                 <el-select
68.                   v-model="userAuah.certificatesType"
69.                   placeholder="请选择证件类型"
70.                   class="v-select patient-select"
71.                 >
72.                   <el-option
73.                     v-for="item in certificatesTypeList"
74.                     :key="item.value"
75.                     :label="item.name"
76.                     :value="item.name"
77.                   >
78.                   </el-option>
79.                 </el-select>
80.               </el-form-item>
81.               <el-form-item prop="certificatesNo" label="证件号码：">
82.                 <el-input
83.                   v-model="userAuah.certificatesNo"
84.                   placeholder="请输入联系人证件号码"
85.                   class="input v-input"
86.                 />
87.               </el-form-item>
88.               <el-form-item prop="name" label="上传证件：">
89.                 <div class="upload-wrapper">
90.                   <div class="avatar-uploader">
91.                     <el-upload
92.                       class="avatar-uploader"
93.                       :action="fileUrl"
94.                       :show-file-list="false"
95.                       :on-success="onUploadSuccess"
96.                     >
97.                       <div class="upload-inner-wrapper">
98.                         <img
99.                           v-if="userAuah.certificatesUrl"
100.                           :src="userAuah.certificatesUrl"
101.                           class="avatar"
102.                         />
103.                         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
104.                         <div v-if="!userAuah.certificatesUrl" class="text">
105.                           上传证件合照
106.                         </div>
107.                       </div>
108.                     </el-upload>
109.                   </div>
110.                   <img
111.                     src="//img.114yygh.com/static/web/auth_example.png"
112.                     class="example"
113.                   />
114.                 </div>
115.               </el-form-item>
116.             </el-form>
117.             <div class="bottom-wrapper">
118.               <div class="button-wrapper">
119.                 <div class="v-button" @click="saveUserAuah()">
120.                   {{ submitBnt }}
121.                 </div>
122.               </div>
123.             </div>
124.           </div>
125.         </div>
126.         <div class="context-container" v-if="userInfo.authStatus != 0">
127.           <div>
128.             <el-form
129.               :model="formData"
130.               label-width="110px"
131.               label-position="right"
132.             >
133.               <el-form-item prop="name" label="姓名：" class="form-normal">
134.                 <div class="name-input">
135.                   {{ userInfo.name }}
136.                 </div>
137.               </el-form-item>
138.               <el-form-item prop="name" label="证件类型：">
139.                 {{ userInfo.certificatesType }}
140.               </el-form-item>
141.               <el-form-item prop="name" label="证件号码：">
142.                 {{ userInfo.certificatesNo }}
143.               </el-form-item>
144.             </el-form>
145.           </div>
146.         </div>
147.       </div>
148.     </div>
149.     <!-- 右侧内容 #end -->
150.     <!-- 登录弹出框 -->
151.   </div>
152.   <!-- footer -->
153. </template>
155. <script>
156. import "~/assets/css/hospital_personal.css";
157. import "~/assets/css/hospital.css";
158. import "~/assets/css/personal.css";
160. import dictApi from "@/api/dict";
161. import userInfoApi from "@/api/userInfo";
163. const defaultForm = {
164.   name: "",
165.   certificatesType: "",
166.   certificatesNo: "",
167.   certificatesUrl: "",
168. };
169. export default {
170.   data() {
171.     return {
172.       userAuah: defaultForm,
173.       certificatesTypeList: [],
174.       fileUrl: "http://localhost:81/api/oss/file/fileUpload",
175.       userInfo: {
176.         param: {},
177.       },
178.       submitBnt: "提交",
179.     };
180.   },
181.   created() {
182.     this.init();
183.   },
184.   methods: {
185.     init() {
186.       this.getUserInfo();
187.       this.getDict();
188.     },
189.     getUserInfo() {
190.       userInfoApi.getUserInfo().then((response) => {
191.         this.userInfo = response.data;
192.       });
193.     },
194.     saveUserAuah() {
195.       if (this.submitBnt == "正在提交...") {
196.         this.$message.info("重复提交");
197.         return;
198.       }
199.       this.submitBnt = "正在提交...";
200.       userInfoApi
201.         .saveUserAuth(this.userAuah)
202.         .then((response) => {
203.           this.$message.success("提交成功");
204.           window.location.reload();
205.         })
206.         .catch((e) => {
207.           this.submitBnt = "提交";
208.         });
209.     },
210.     getDict() {
211.       dictApi.findByDictCode("CertificatesType").then((response) => {
212.         this.certificatesTypeList = response.data;
213.       });
214.     },
215.     onUploadSuccess(response, file) {
216.       if (response.code !== 200) {
217.         this.$message.error("上传失败");
218.         return;
219.       }
220.       // 填充上传文件列表
221.       this.userAuah.certificatesUrl = file.response.data;
222.     },
223.   },
224. };
225. </script>
226. <style>
227. .header-wrapper .title {
228.   font-size: 16px;
229.   margin-top: 0;
230. }
231. .content-wrapper {
232.   margin-left: 0;
233. }
234. .patient-card .el-card__header .detail {
235.   font-size: 14px;
236. }
237. .page-container .title {
238.   letter-spacing: 1px;
239.   font-weight: 700;
240.   color: #333;
241.   font-size: 16px;
242.   margin-top: 0;
243.   margin-bottom: 20px;
244. }
245. .page-container .tips {
246.   width: 100%;
247.   padding-left: 0;
248. }
249. .page-container .form-wrapper {
250.   padding-left: 92px;
251.   width: 580px;
252. }
253. .form-normal {
254.   height: 40px;
255. }
256. .bottom-wrapper {
257.   width: 100%;
258.   padding: 0;
259.   margin-top: 0;
260. }
261. </style>

复制代码

上传文件报错

oss模块添加配置

1. spring.servlet.multipart.max-file-size=500MB
2. spring.servlet.multipart.max-request-size=500MB

复制代码

预约挂号页面调解

预约挂号前验证 是否实名认证

1. // 预约
2.     schedule(depcode) {
3.       // 登录判断
4.       let token = cookie.get("token");
5.       if (!token) {
6.         loginEvent.$emit("loginDialogEvent");
7.         return;
8.       } //判断认证
10.       userInfoApi.getUserInfo().then((response) => {
11.         let authStatus = response.data.authStatus; // 状态为2认证通过
12.         if (!authStatus || authStatus != 2) {
13.           window.location.href = "/user";
14.           return;
15.         }
16.       });
18.       window.location.href =
19.         "/hospital/schedule?hoscode=" +
20.         this.hospital.hoscode +
21.         "&depcode=" +
22.         depcode;
23.     },

复制代码

就诊人管理

预约下单必要选择就诊人，因此我们要实现就诊人管理，前端就诊人管理其实就是要实现一个完整的增删改查
user 长途调用 cmn 模块，检察数据字典
这个功能必要提一下的这块的处理惩罚，对于数据的封装，所有的基础资料只存了 code, 剩余的信息长途调用 cmn 模块获取，重点注意下这里的

1. //根据登录用户id获取就诊列表
2.     @Override
3.     public List<Patient> findAllUserId(Long userId) {
4.         //据登录用户id查询所有就诊人信息列表
5.         QueryWrapper<Patient> wrapper = new QueryWrapper<>();
6.         wrapper.eq("user_id", userId);
7.         List<Patient> patientList = baseMapper.selectList(wrapper);
8.         //通过远程调用得到部分编码对应的具体内容，查询数据字典表中的内容  例如 编号2000对应的是身份证方式
9.         patientList.stream().forEach(item -> {
10.             this.packPatient(item);  //将param中的一些属性封装进patient中
11.         });
12.         return patientList;
13.     }
15. //将param中的一些属性封装进patient中
16.     private Patient packPatient(Patient patient) {
17.         //根据证件类型，获取证件类型名称
18.         String certificatesTypeString = dictFeignClient.getName
19.                 (DictEnum.CERTIFICATES_TYPE.getDictCode(), patient.getCertificatesType());
20.         //联系人证件类型
21.         String contactsCertificatesTypeString = dictFeignClient.getName
22.                 (DictEnum.CERTIFICATES_TYPE.getDictCode(), patient.getContactsCertificatesType());
23.         //省
24.         String provinceString = dictFeignClient.getName(patient.getProvinceCode());
25.         //市
26.         String cityString = dictFeignClient.getName(patient.getCityCode());
27.         //区
28.         String districtString = dictFeignClient.getName(patient.getDistrictCode());
29.         patient.getParam().put("certificatesTypeString", certificatesTypeString);
30.         patient.getParam().put("contactsCertificatesTypeString", contactsCertificatesTypeString);
31.         patient.getParam().put("provinceString", provinceString);
32.         patient.getParam().put("cityString", cityString);
33.         patient.getParam().put("districtString", districtString);
34.         patient.getParam().put("fullAddress", provinceString + cityString + districtString + patient.getAddress());
35.         return patient;
36.     }

复制代码

其他代码可自行参考资料中的代码
做完之后的结果

用户管理

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。