尚医通项目学习笔记Part1

---

前言

最近在跟着B站上面尚硅谷的视屏学习尚医通的项目，想要通过实战项目巩固之前学习的知识。在项目联系的过程中，虽然一步步跟着老师的操作来，但还是能遇到各种千奇百怪的bug，每天找bug的时间要花到学习时间的一半。为了避免这些辛苦找bug的时间被浪费，也为了巩固自己所学的项目知识。所以决定通过CSDN，日常的记录一些项目学习过程中的所学所想。

希望有共同想法的同学可以一起学习，一起进步！

---

一、目前学习进度

断断续续看这个项目也快一个星期了，目前是完成了前后端的hosp和cmn两个模块，可以使用nginx访问两个服务。

二、学习记录

1.项目简介

1.1 项目所会用到的技术栈

SpringBoot：简化新Spring应用的初始搭建以及开发过程
SpringCloud：基于Spring Boot实现的云原生应用开发工具，SpringCloud使用的技术：（SpringCloudGateway、Spring Cloud Alibaba Nacos、Spring Cloud Alibaba Sentinel、SpringCloud Task和SpringCloudFeign等）
MyBatis-Plus：持久层框架
Redis：内存缓存
RabbitMQ：消息中间件
HTTPClient: Http协议客户端
Swagger2：Api接口文档工具
Nginx：负载均衡
Lombok
Mysql：关系型数据库
MongoDB：面向文档的NoSQL数据库
Vue.js：web 界面的渐进式框架
Node.js： JavaScript 运行环境
Axios：Axios 是一个基于 promise 的 HTTP 库
NPM：包管理器
Babel：转码器
Webpack：打包工具
Docker ：容器技术
Git：代码管理工具

1.2 业务流程

2.项目学习笔记

2.1MyBatis-Plus相关

第一天主要是学习了MyBatis-Plus相关的基本操作，如何运用MyBatis-Plus来帮助我们后端开发更加简洁。我是第一次接触MyBatis-Plus，觉得很神奇，可以不用写具体的SQL语句，简化了我们之前的不少操作，对开发人员很友好。这一部分因为都是基本的操作，所以基本没遇到什么问题。

2.2搭建项目框架

第二天主要是搭建了项目的整体框架。之前写代码都是在IDEA的一个project里进行的。通过这部分的学习，也让我知道了一个完整项目的后端应该有多个module组成。每个module有自己的功能。

整个项目的框架如上。
common模块是用来放一些公共的工具，如处理异常的工具、编码工具和后面要用到的测试Swagger类。
common模块用来存放一些具体的类，如用户和医院类。
service模块里面实现业务功能，最基本的增删改查都在这个模块实现。

此外还了解了基本的Git如何使用，如何将代码上传到国产Github码云上。

2.3前端搭建

这一天主要了解了项目前端要用到的相关知识。
知道了ECMAScript 6是JavaScript的下一代标准，了解了Vue的最基本的使用语法。

认识了前端的Maven——npm这个神器，通过它下载依赖，让我们的项目管理轻松了许多。需要注意的是，npm使用的时候和Maven一样需要手动修改镜像，不然下载的速度会特别的慢。

npm config set registry https://registry.npm.taobao.org 

之后还学习了babel转码工具和webpack打包工具。

接着着重了解了vue-element-admin后台管理系统方案，这是基于饿了么团队的element-ui开发的。使用这套方案前端基本的框架和样式已经帮我们搭好了，这样可以为我们项目的前端开发节省大量的时间，当前端有额外的需求时，只需要去element-ui的网站下载相关的内容加入到我们的前端系统中即可。简直是项目开发过程中的一大神器。

2.3.1前端开发流程

项目的前端遵循以上的开发流程。

2.3.2前端开发

确定开发流程后，我们按照后端实现功能来相应完成前端的开发过程。在前端页面中添加相应的组件，绑定相应的方法，实现前后端的功能。
当我们完成基本的项目功能，运行前后端开始测试的时候，却发现前端调用后端数据的时候请求失败了。

这是因为前后端调用数据的时候产生了跨域的问题。跨域就是请求双方协议、域名和端口号有一处不同时，会产生的问题。解决跨域的问题有很多，最简单的方法是在要调用到的控制类中加入SpringBoot中的注解@CrossOrigin，允许开启跨域操作。如下：

就当我以为这样就可以解决问题的时候，再次运行程序之后却还是报了同样的错误。难道是版本的问题导致注解不生效了？难道要设置一些其他的东西？我在网上看了很多帖子，甚至B站上面也搜了不少相关视屏，可惜无一解决我的问题，就在我焦头烂额之际，我突然发现，浏览器下端的显示跨域的方法名和我在前端/src/api/xx.js里的方法名不一样！赶忙修改后，再次运行，果然成功了。一个拼写的粗心，让我付出了三个多小时查错的代价，以后写代码的时候一定要注意这些细节！

同时也让我知道了，浏览器那一端报跨域的错误，不一定是你没有设置跨域，也有可能是你拼写错误导致根本不存在这个方法！

3.service/cmn开发

完成了service/hosp的开发过后，接下来进行service/cmn的开发。这个模块里面主要是一些数据字典的操作。首先通过阿里巴巴的EasyExcel完成了数据字典的导入和导出，给数据字典添加缓存因为我没有学过Redis所以这部分的内容就先跳过了，接着通过使用Nginx作为反向代理服务器来实现访问两个不同端口的业务。

可是我的Nginx在配置完成后一直似乎没有起到作用，浏览器一直给我报跨域的错误。吸取上次的拼写错误后，这次我更改了对应端口后单独测试，发现单独测试的时候可以运行，那就应该不是跨域的问题。应该是Nginx没有起作用，但是在确认了nginx.conf没有修改错误，重启了多次Nginx后还是无法解决问题。又在网上找了各种方法还是没办法解决这个问题。晚上吃完晚饭后，在网上看到说要检查Nginx默认的端口号有没有被占用，打开任务管理器详细信息那一栏自习一看，不对呀，怎么有这么多Nginx.exe进程。

原来是我第一次配置Nginx的时候有点小问题，然后一直没有成功关闭Nginx，在之后的多次测试中又启动了无数的Nginx，最后关闭了所有的Nginx，在确认自己的配置没有错的情况下，启动Nginx和服务器，终于没有报错。解决了困扰了一个下午的问题。

Part1小结

学习是一个急不得的过程，在学习新东西的过程中肯定会遇到各种问题，我们遇到问题不要着急，要享受解决问题的过程，在问题中巩固自己的所学从而牢牢掌握相应知识，做到下次不再犯。