谷粒学院16万字笔记+1600张配图(六)——上传讲师头像

冷不防 2023-10-02 21:24 31阅读 0赞

> 项目源码与所需资料  
> 链接：https://pan.baidu.com/s/1azwRyyFwXz5elhQL0BhkCA?pwd=8z59  
> 提取码：8z59

#### 文章目录 ####

*  demo06-上传讲师头像
 *   *  1.阿里云oss
     *   *  1.1介绍
         *  1.2开通"对象存储oss"服务
         *  1.3创建Bucket
         *  1.4在阿里云后台上传默认头像
         *  1.5创建操作阿里云oss的许可证
     *  2.后端环境搭建——后端集成oss
     *   *  2.1在service下创建子模块service\_oss
         *  2.2添加依赖
         *  2.3配置
         *  2.4创建启动类
         *  2.5启动项目
     *  3.创建常量类
     *  4.后端接口实现
     *   *  4.1controller层
         *  4.2service层
         *   *  4.2.1在接口OssService定义方法
             *  4.2.2在实现类OssServiceImpl实现方法
         *  4.3测试
         *  4.4后端接口完善
         *   *  4.4.1文件名重复
             *  4.4.2把文件进行分类管理
             *  4.4.3测试
     *  5.nginx
     *   *  5.1简介
         *  5.2nginx常用功能
         *   *  5.2.1请求转发
             *  5.2.2负载均衡
             *  5.2.3动静分离
         *  5.3为什么需要使用nginx
         *  5.4安装nginx
         *  5.5重启nginx
         *  5.6使用nginx配置项目请求转发
         *  5.7测试
     *  6.前端页面(在save.html整合上传组件)
     *   *  6.1得到上传组件
         *  6.2在save.html添加上传组件
         *  6.3使用组件
         *  6.4引入组件和声明组件
         *  6.5修改上传接口地址
         *  6.6定义close和cropSuccess方法
         *  6.7设置默认头像
         *  6.8测试
         *  6.9bug

## demo06-上传讲师头像 ##

### 1.阿里云oss ###

#### 1.1介绍 ####

为什么要使用对象存储oss?

我们在javaweb阶段应该也做过上传,那时候我们要么把文件存到tomcat中,要么把文件存到本地路径中,比如说我是存到本地路径中,那么你在你的电脑上是访问不到我电脑中的文件的(除非做特殊处理)。

所以我们需要把内容存到一个所有人都能访问到的地方,这个地方就是对象存储oss:**存到oss中的文件可以被别人访问**

#### 1.2开通"对象存储oss"服务 ####

1.进入阿里云官网[https://www.aliyun.com][https_www.aliyun.com]

2.有账号的点击"登录",没有账号的点击"立即注册"来注册账号(建议使用支付宝注册,因为注册后需要做实名认证,使用支付宝注册的话比较方便)

![在这里插入图片描述][786713d2dc1a46ab94c17956086b2eef.png_pic_center]

3.注册成功后登录账号,进行实名认证

4.在搜索栏搜索"对象存储oss",点击"对象存储OSS"

![在这里插入图片描述][116e4512a233486e8ddd23815b9cece3.png_pic_center]

5.开通oss服务

![在这里插入图片描述][10352546f6ab4dbeadc963ff8dd02e2b.png_pic_center]

![在这里插入图片描述][0db5f3c1cf9f4e3992a40738591a5b6b.png_pic_center]

![在这里插入图片描述][c44f31becb744f2c928ca425a90999e4.png_pic_center]

![在这里插入图片描述][c38f4478c4d047d98da3c8e92bfd1b2e.png_pic_center]

#### 1.3创建Bucket ####

Bucket就相当于一个电脑中的包,或者说是文件夹

1.点击"创建Bucket"

![在这里插入图片描述][21accd4d6bc949929ab0c57d339fb882.png_pic_center]

2.填写信息

![在这里插入图片描述][3d738a9f1b7e46559d4111145f281405.png_pic_center]

*  Bucket名称随便填写,但是别写中文
 *  存储类型选择"低频访问存储"就够用了
 *  区域使用默认的就可以了
 *  读写权限设为"公共读"或"公共读写"都可以,我设置的是"公共读"

#### 1.4在阿里云后台上传默认头像 ####

1.点击文件管理–>上传文件来上传讲师默认头像

![在这里插入图片描述][9766de9fe6004d89b1af2ad073c37ab1.png_pic_center]

2.将图片拖拽过来

![在这里插入图片描述][3bf620a814264ff3a14bc4245ffe01c2.png_pic_center]

3.可以看到此时显示"已扫描待上传",然后我们点击"上传文件"即可

![在这里插入图片描述][e78ec3d05a2147e6a7ac79929a8641cc.png_pic_center]

4.回到"文件管理",点击"详情"就可以显示出我们刚刚上传的照片的详细信息

![在这里插入图片描述][2b010ec5ff254bad8b172dc6ad0fa874.png_pic_center]

5.在这张照片的详细信息中我们可以看到oss为我们生成的图片地址[https://edu-mxy.oss-cn-hangzhou.aliyuncs.com/default.jpg][https_edu-mxy.oss-cn-hangzhou.aliyuncs.com_default.jpg]

![在这里插入图片描述][48224e405bb2481e990198464248fd4c.png_pic_center]

6.在浏览器地址栏输入 [https://edu-mxy.oss-cn-hangzhou.aliyuncs.com/default.jpg][https_edu-mxy.oss-cn-hangzhou.aliyuncs.com_default.jpg]就可以下载保存这张图片了

![在这里插入图片描述][2b562e532c2245b2961d174c8f106e54.png_pic_center]

#### 1.5创建操作阿里云oss的许可证 ####

实际开发中,是要使用java代码操作阿里云oss,然后上传文件到阿里云oss,使用java代码操作阿里云oss是需要许可证的(许可证就是阿里云给你颁发一个id和秘钥,只有拿着id和秘钥才可以操作).下面我们来创建许可证

1.点击头像中的"AccessKey 管理"

![在这里插入图片描述][d8e44cfc76e04c2f8abb969066bab1ac.png_pic_center]

2.点击"继续使用 AccessKey"

![在这里插入图片描述][5abc811ebef943bc889254e0b71fa08d.png_pic_center]

3.点击"创建 AccessKey"

![在这里插入图片描述][5dd4624da01049b59acd1d1087a0a044.png_pic_center]

4.就会生成id和秘钥

![在这里插入图片描述][d4bae59a0048443baf2ed0d028900d13.png_pic_center]

### 2.后端环境搭建——后端集成oss ###

#### 2.1在service下创建子模块service\_oss ####

1.在service上右键,选择New–>Module…

![在这里插入图片描述][0f4971c0c5c64c1f8d1f06411897f831.png_pic_center]

2.我们这里是创建一个maven工程

![在这里插入图片描述][55174dddd86d4b3d9233a24ead3b7465.png_pic_center]

3.填写信息

![在这里插入图片描述][9f6eb45e02d24780a84c7c8550911fda.png_pic_center]

#### 2.2添加依赖 ####

在service\_oss中添加下面这些依赖(在service中添加下面这些依赖也是可以的,但因为这些依赖只会在service\_oss中使用,所以我们在service\_oss添加就可以了)

<dependencies>
        
        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
        </dependency>
    
        
        <dependency>
            <groupId>joda-time</groupId>
            <artifactId>joda-time</artifactId>
        </dependency>
    </dependencies>

![在这里插入图片描述][6360918867e44ce98ff675a831cef820.png_pic_center]

#### 2.3配置 ####

1.进行配置前先看一下我们的地域节点:

点击对象存储–>Bucket列表–>edu-mxy–>概览,可以看到我的地域节点是oss-cn-hangzhou.aliyuncs.com(咱俩的地域节点可能不一样,你就看你的就行)

![在这里插入图片描述][bfb23bd18b4a4351b197e42f273be8e1.png_pic_center]

2.创建配置文件application.properties并编写配置

#服务端口
    server.port=8002
    #服务名
    spring.application.name=service-oss
    
    #环境设置：dev、test、prod
    spring.profiles.active=dev
    
    #阿里云 OSS
    #不同的服务器，地址不同
    aliyun.oss.file.endpoint=oss-cn-hangzhou.aliyuncs.com
    aliyun.oss.file.keyid=LTAI5tMUCkxmE6ouUc2dmbXm
    aliyun.oss.file.keysecret=0Py10jHOPVkeFp6MiIm88c9QqyykUE
    #bucket可以在控制台创建，也可以使用java代码创建
    aliyun.oss.file.bucketname=edu-mxy

![在这里插入图片描述][756c1b14944c40a5a20d0b5911973834.png_pic_center]

*  `aliyun.oss.file.endpoint=oss-cn-hangzhou.aliyuncs.com`是地域节点,就是第1步我让你看的那个
 *  `aliyun.oss.file.keyid=LTAI5tMUCkxmE6ouUc2dmbXm`、`aliyun.oss.file.keysecret=0Py10jHOPVkeFp6MiIm88c9QqyykUE`分别是id和秘钥(我们在"1.5创建操作阿里云oss的许可证"的第4步得到的)
    
     *  我平时习惯在等号(=)两边加空格,但是这里的id、秘钥一定不能在等号(=)右边加空格,加的空格会被识别为id、秘钥的一部分(地域节点和Bucket名称我不知道是不是也这样,但我懒得去试,我索性在等号右边都不加空格不就行了)
 *  `aliyun.oss.file.bucketname=edu-mxy`是Bucket的名称,我们在"1.3创建Bucket"的第2步填写信息时填的Bucket名称

注意:

*  因为地域节点、id、秘钥、Bucket名称,这些都是固定的,所以我们写到配置文件中,后面再使用常量类来读取("3.创建常量类"实现的)
 *  **地域节点、id、秘钥、Bucket名称,都填你们自己的,别写成我的了**

#### 2.4创建启动类 ####

创建包com.atguigu.oss,然后在该包下创建主启动类OssApplication,并在类中编写代码

@SpringBootApplication
    @ComponentScan(basePackages = {
        "com.atguigu"})
    public class OssApplication {
        
        public static void main(String[] args) {
        
            SpringApplication.run(OssApplication.class, args);
        }
    }

![在这里插入图片描述][dc0297efca894c84a9dfe321077f70ca.png_pic_center]

#### 2.5启动项目 ####

1.在"main"上右键选择"Run ‘OssApplication’"启动项目

![在这里插入图片描述][b739e7dbe67c4483b88f75cebfd87e84.png_pic_center]

2.发现项目不能正常启动,我们来看一下报错描述

![在这里插入图片描述][be4fd4c5edde4bd99cbac4c757415558.png_pic_center]

我们大概能够理解这段描述:就是说启动项目时会找数据库的配置使得能和数据库建立连接,但是我们这个service\_oss项目并不需要和数据库建立连接,所以也就没有添加数据库的配置,最后结果就是无法正常启动项目

3.有两种解决方法(我这里使用的是方法二)

解决方法一:

在配置文件application.properties中添加数据库的配置

解决方法二(推荐):

给启动类的注解@SpringBootApplication添加属性`exclude = DataSourceAutoConfiguration.class`,**该属性作用是:默认不加载数据库配置**

![在这里插入图片描述][07225c134a404d2c9922de92405bdf48.png_pic_center]

4.再次启动该项目,发现现在可以正常启动了

### 3.创建常量类 ###

1.在service\_oss模块的oss包下创建包utils,然后在该包下创建常量类ConstantPropertiesUtils,该类的作用是**读取配置文件application.properties中的地域节点、id、秘钥、Bucket名称**

@Component
    public class ConstantPropertiesUtils {
        
        //读取配置文件内容
        @Value("${aliyun.oss.file.endpoint}")
        private String endpoint;
    
        @Value("${aliyun.oss.file.keyid}")
        private String keyId;
    
        @Value("${aliyun.oss.file.keysecret}")
        private String keySecret;
    
        @Value("${aliyun.oss.file.bucketname}")
        private String bucketName;
    }

![在这里插入图片描述][a190a54add0b4dfa826ce82afd12c049.png_pic_center]

注意:这里的@Value注解导的是Spring里面的,别导错包了。该注解的作用是:就拿属性`endpoint`及其注解`@Value("${aliyun.oss.file.endpoint}")`来举例:**在初始化bean时会读取到配置文件中aliyun.oss.file.endpoint的值并赋值给属性endpoint**

2.我们确认读取到配置文件中的内容并且赋值给了属性,但是这些属性都是私有的呀,我们怎么才能获取到这些属性的值呢?

这就要借助于InitializingBean接口了:实现了InitializingBean接口的类在初始化bean时都会执行接口中的方法afterPropertiesSet。

完整的实现流程:

*  给常量类添加注解@Component将其交给Spring管理
 *  给属性添加@Value
 *  定义public的静态常量
 *  让常量类实现InitializingBean接口,重写接口的方法afterPropertiesSet,方法内部将私有属性的值赋值给public的静态常量

这样的话,启动service\_oss项目后,因为常量类被@Component修饰,所以会初始化bean,在初始化bean的过程中,会先读取配置文件的内容并赋值给私有属性,然后执行重写的afterPropertiesSet方法,方法内部将私有属性的值赋值给public的静态常量

@Component
    public class ConstantPropertiesUtils implements InitializingBean {
        
        //读取配置文件内容
        @Value("${aliyun.oss.file.endpoint}")
        private String endpoint;
        @Value("${aliyun.oss.file.keyid}")
        private String keyId;
        @Value("${aliyun.oss.file.keysecret}")
        private String keySecret;
        @Value("${aliyun.oss.file.bucketname}")
        private String bucketName;
    
        //定义public的静态常量
        public static String END_POINT;
        public static String ACCESS_KEY_ID;
        public static String ACCESS_KEY_SECRET;
        public static String BUCKET_NAME;
    
        @Override
        public void afterPropertiesSet() throws Exception {
        
            END_POINT = endpoint;
            ACCESS_KEY_ID = keyId;
            ACCESS_KEY_SECRET = keySecret;
            BUCKET_NAME = bucketName;
        }
    }

![在这里插入图片描述][06e0bb09f1fd4e2e9c18d7e43860ba4b.png_pic_center]

### 4.后端接口实现 ###

因为项目service\_oss没有用到数据表,所以没办法用代码生成器来生成代码,只能我们全部手敲

#### 4.1controller层 ####

1.在oss包下创建包service,然后在service包下创建接口OssService、在service包下创建包impl,然后在impl包下创建类OssServiceImpl并且:①让该类其实现接口OssService②给该类添加注解@Service将其交给Spring管理

![在这里插入图片描述][89634b3521ef435f8c779c193ae6eec5.png_pic_center]

2.在oss包下创建包controller,然后在controller包下创建类OssController,并在类中编写代码

@RestController
    @RequestMapping("/eduoss/fileoss")
    @CrossOrigin //解决跨域问题
    public class OssController {
        
        @Autowired
        private OssService ossService;
    
        //上传头像的方法
        @PostMapping
        public R uploadOssFile(
                MultipartFile file) {
         //MultipartFile file用来得到用户上传的文件
            //上传文件到oss,并得到文件的url
            String url = ossService.uploadFileAvatar(file);
            return R.ok().data("url",url);
        }
    }

![在这里插入图片描述][f8e0aac85b3944d584c69c6931d8dddf.png_pic_center]

*  得到用户上传的文件后,我们需要将文件上传到阿里云oss,上传的方法在service层定义,控制层负责调用service层定义的上传文件的方法uploadFileAvatar(后面我们会去service层定义该方法)
 *  数据表edu\_teacher的avatar字段用来存用户头像,但存的并不是头像文件,而是头像的地址:oss会为图片生成地址("1.4在阿里云后台上传默认头像"的第5步说过),我们将这个地址存到avatar字段中
    
     *  所以说,我们后面在service层定义的uploadFileAvatar方法需要返回图片的地址,然后在controller层用一个变量来接收这个地址,所以有了这行代码:`String url = ossService.uploadFileAvatar(file);`

#### 4.2service层 ####

##### 4.2.1在接口OssService定义方法 #####

public interface OssService {
        
        //上传头像到oss
        String uploadFileAvatar(MultipartFile file);
    }

![在这里插入图片描述][e42507a318214516b00afdc3375d90c4.png_pic_center]

##### 4.2.2在实现类OssServiceImpl实现方法 #####

@Service
    public class OssServiceImpl implements OssService {
        
        //上传头像到oss
        @Override
        public String uploadFileAvatar(MultipartFile file) {
        
            //1.工具类获取数据
            String endpoint = ConstantPropertiesUtils.END_POINT;
            String accessKeyId = ConstantPropertiesUtils.ACCESS_KEY_ID;
            String accessKeySecret = ConstantPropertiesUtils.ACCESS_KEY_SECRET;
            String bucketName = ConstantPropertiesUtils.BUCKET_NAME;
    
            //2.创建OSS实例
            OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
    
            try {
        
                //3.获取到将要上传的文件的输入流
                InputStream inputStream = file.getInputStream();
    
                //4.获取到将要上传的文件的名称
                String fileName = file.getOriginalFilename();
    
                //5.调用oss的方法实现上传
                ossClient.putObject(bucketName, fileName, inputStream);
    
                //6.关闭OSS对象
                ossClient.shutdown();
    
                //7.拼接路径
                String url = "https://" + bucketName + "." + endpoint + "/" + fileName;
                return url;
            } catch (Exception e) {
        
                e.printStackTrace();
                return null;
            }
        }
    }

![在这里插入图片描述][8a117ac0d44649698f728146eb18556d.png_pic_center]

注意点一:putObject方法的三个参数:

*  第一个参数:Bucket名称
 *  第二个参数:文件上传到oss的哪个地方(即文件路径)和文件名称。比如:/aa/bb/1.jpg
    
     *  我们目前是把图片全部存到oss的根目录下,所以参数只需要文件名称就可以了。我们以后可能会分类存图片,那么参数就需要是`文件路径+文件名称`比如:/aa/bb/1.jpg(在"4.4.2把文件进行分类管理"中实现了)
 *  第三个参数:上传的文件的输入流

注意点二:阿里云oss会为我们生成图片路径,但是人家没有给我们提供可以直接得到路径的接口,所以需要我们手动拼接图片路径。我们在"1.4在阿里云后台上传默认头像"的第5步看过阿里云oss为我们生成的图片路径,是:https://edu-mxy.oss-cn-hangzhou.aliyuncs.com/default.jpg,从这个路径中我们可以推出路径格式是:`https//+Bucket名称+小数点+地域节点+单斜杠+文件名称`,所以代码是`String url = "https://" + bucketName + "." + endpoint + "/" + fileName;`

#### 4.3测试 ####

接下来我们使用swagger进行测试:

1.先从控制台中将我们在"1.4在阿里云后台上传默认头像"上传的默认头像删掉

![在这里插入图片描述][9dd1b07f5ae14597a6b8de780817ba5d.png_pic_center]

2.启动service\_oss项目

3.在地址栏输入[http://localhost:8002/swagger-ui.html][http_localhost_8002_swagger-ui.html]

4.点击"选择文件",选择我们我们要上传的图片

![在这里插入图片描述][8c056692f79c43ff870f56b560bff0a8.png_pic_center]

5.点击"Try it out!"进行测试

![在这里插入图片描述][4e4dcb34e1434131a3f4efeeaa7233f4.png_pic_center]

6.可以看到测试成功,并且返回的数据中有图片的地址

![在这里插入图片描述][a973596d827340c4976ad65050c923d4.png_pic_center]

7.刷新控制台,可以看到图片成功上传到了阿里云oss中

![在这里插入图片描述][56585cc90ac84a1c88c7984948ef4a51.png_pic_center]

#### 4.4后端接口完善 ####

##### 4.4.1文件名重复 #####

如果这个用户上传了名字为default.jpg的图片,另一个用户后来也上传了名字为default.jpg的图片,那么后来上传的default.jpg会覆盖掉以前上传的default.jpg

解决方法:在文件名称中添加随机唯一值,使得每个文件的名称都不相同

接下来我们在实现类OssServiceImpl的uploadFileAvatar方法中添加如下代码:

//完善:在文件名称里面添加随机唯一的值
    //wer4-43u5-323oo-...
    String uuid = UUID.randomUUID().toString().replaceAll("-", "");
    fileName = uuid + fileName;

![在这里插入图片描述][68ccc52b1b5541a0a7465c44c70da610.png_pic_center]

使用UUID的方式生成的随机值里面会有横杠(-),比如:wer4-43u5-323oo-…

这个横杠想去掉就去掉,不想去掉就不去掉,我这里使用replaceAll方法将横杠去掉了

##### 4.4.2把文件进行分类管理 #####

这里我们根据日期进行分类

//完善:把文件按照日期进行分类:2022/08/17/01.jpg
    //1.获取当前时间
    String datePath = new DateTime().toString("yyyy/MM/dd");
    //2.拼接
    fileName = datePath + "/" + fileName;

![在这里插入图片描述][5571f7a6fb1143cea5e72b545ec57517.png_pic_center]

获取当前日期:我们可以先new Date(),然后用SimpleDateFormat对日期进行格式转换,转换为我们想要的形式:2022/08/17，但这样做太麻烦了,我们在"2.2添加依赖"中添加了日期工具栏依赖,我们用这个依赖提供的方法来达到我们想要的效果

##### 4.4.3测试 #####

接下来我们使用swagger进行测试:

1.先从控制台中将我们在"1.4在阿里云后台上传默认头像"上传的默认头像删掉

![在这里插入图片描述][933811049090499eb61b0d29d073bdcd.png_pic_center]

2.重启service\_oss项目

3.在地址栏输入[http://localhost:8002/swagger-ui.html][http_localhost_8002_swagger-ui.html]

4.点击"选择文件",选择我们我们要上传的图片,然后点击"Try it out!"进行测试

![在这里插入图片描述][2176ad25d92942c89a4395c0f6d6470a.png_pic_center]

5.可以看到测试成功,并且返回的数据中有图片的地址

![在这里插入图片描述][efd0a6fd9e8e4298b2cf3ada4fec8e8f.png_pic_center]

6.刷新控制台,可以看到图片成功上传到了阿里云oss中,并且把文件按照日期进行分类

![在这里插入图片描述][1f1d2f5ad2eb4b77861b7c9565fd65c1.png_pic_center]

### 5.nginx ###

#### 5.1简介 ####

nginx的官方描述:**反向代理服务器**

nginx的常用功能:

*  请求转发
 *  负载均衡
 *  动静分离

#### 5.2nginx常用功能 ####

##### 5.2.1请求转发 #####

![在这里插入图片描述][596dc60db055404d802e4216e372927e.png_pic_center]

假设我们现在有一个9001端口的nginx,还有两个服务器,一个是8001端口的eduservice,一个是8002端口的eduoss。我们先通过浏览器发送请求到nginx,然后nginx根据不同的请求转发到对应的服务器中

问题:我们有好几个服务器,那么nginx是怎么找到对应的服务器呢?方式有很多种,我们这里说一种常用的方式:**根据路径匹配进行转发**。比如说,如果关于eduservice服务器的所有请求路径中都含有eduservice,那么我们就在nginx中设置一个规则:当请求路径中包含有eduservice,就把请求转发到8001端口

##### 5.2.2负载均衡 #####

要做负载均衡有一个特点:需要用到集群。集群:比如说我现在有两台服务器,一个端口是8081,另一个端口是8082,但是**这两台服务器放的都是edu这个项目**

![在这里插入图片描述][72eaf69f6c534c2b87e1900c2cbc99a7.png_pic_center]

假设我现在有两台服务器,一个端口是8081,另一个端口是8082,但是这两台服务器放的都是edu这个项目,我们先通过浏览器发送请求到nginx,然后nginx会将请求平均分摊到这两个服务器中,假设我们现在有四个请求,那么8081端口的服务器和8082端口的服务器就会分别处理两个请求

问题:nginx是怎么做到平均分摊请求的呢?nginx中有很多算法:①**轮询**:一个一个来,先给第一个服务器一个请求,然后给第二个服务器一个请求,再给第一个服务器一个请求,然后再给第二个服务器一个请求,直到将nginx中的请求全都分出去②根据请求时间,谁的时间最短就先去访问谁③权重…

我们以后做负载均衡不会使用nginx,会使用网关,因为网关帮我们将功能做了封装,更加方便、简单

##### 5.2.3动静分离 #####

我们在tomcat里面放了java代码部分,然后又专门找了个服务器放静态资源(html、图片…),当我们访问java代码时就去请求tomcat,当我们访问静态资源时就去请求我们的静态服务器

#### 5.3为什么需要使用nginx ####

我们以前是只有一个端口号为8001的服务器,所以在前端项目的config–>dev.env.js中写了`BASE_API: '"http://localhost:8001"',`(忘了这行代码作用的去看"demo05-讲师管理前端"的"3.1修改前端项目访问路径"的第3步),但是我们现在又有了一个端口号为8002的服务器(阿里云oss项目),那么我们怎么应该怎么在前端项目中改呢?如下图,在dev.env.js中加一行代码`BASE_API1: '"http://localhost:8002"',`(注意:马上就会说到,这种做法是不可行的,我加了这行代码并截图后就立马把这行代码删掉了)

![在这里插入图片描述][92903a3fa6bc41d180e088436cfc28cd.png_pic_center]

这种做法是不可行的:如果这样做,那么前端项目中的很多规则就都要改,比如src–>utils–>request.js,如下图所示,画方框的这部分代码就需要修改,修改后的代码中需要有判断

![在这里插入图片描述][f4cc0927d53c414ba9121a6e11638499.png_pic_center]

这个时候就要用到我们的nginx了:我们将config–>dev.env.js的`BASE_API: '"http://localhost:8001"',`中的端口号改为nginx的9001,然后nginx再做请求转发

#### 5.4安装nginx ####

1.nginx的压缩包在资料里面有(和老师的版本一样),我们将其解压

![在这里插入图片描述][3a3a4a5101df4ce8942375113e151a96.png_pic_center]

2.在解压后的在地址栏中输入cmd后按回车进入命令行窗口

![在这里插入图片描述][aa5ad5ab2d5b4f2a8ff23e9b319075ac.png_pic_center]

3.使用命令nginx.exe启动nginx,如果看到光标在闪就说明启动成功

![在这里插入图片描述][f18fa58f3c5d4ea6a9c579ea92d27087.png_pic_center]

#### 5.5重启nginx ####

1.关闭nginx

在上一步使用cmd启动nginx后,如果关闭cmd窗口,nginx不会停止,我们需要使用命令nginx.exe -s stop关闭nginx

![在这里插入图片描述][efea36fe0dc34968ae42c009335290ec.png_pic_center]

2.启动nginx

使用命令nginx.exe启动nginx(具体操作看"5.4安装nginx"的第2步和第3步)

#### 5.6使用nginx配置项目请求转发 ####

1.打开nginx的配置文件nginx.conf

![在这里插入图片描述][dc4d26c4c76a4610b37688541e66849f.png_pic_center]

2.nginx默认端口号是80,我们将它改为81(不改也可以,但可能有冲突)

![在这里插入图片描述][7fb5ca9576624e4eae642e78afa26e51.png_pic_center]

3.配置nginx转发规则

在http\{…\}里面编写以下代码来创建配置

server {
    	listen       9001;
    	server_name  localhost;
    	
    	location ~ /eduservice/ {
    		proxy_pass http://localhost:8001;
    	}
    	
    	location ~ /eduoss/ {
    		proxy_pass http://localhost:8002;
    	}
    }

![在这里插入图片描述][488f9d1a09c74264ac4435f8aa47b98b.png_pic_center]

*  `listen 9001;`表示对外的监听端口是9001
 *  `location ~ /eduoss/ {...}`中的`~`表示此时的匹配方式是正则匹配,这样的话只要路径里面包含/eduoss/就可以匹配上,不加`~`的话代表只有路径就是/eduoss/时才可以匹配上
 *  `location ~ /eduservice/ {...}`和`location ~ /eduoss/ {...}`里面的/eduservice/、/eduoss/的来源如下截图:

![在这里插入图片描述][c678c4cb7205408e92e3aefed67f756b.png_pic_center]

![在这里插入图片描述][a2b208dbf5c5492d82ddf99f705fcfc8.png_pic_center]

![在这里插入图片描述][6904e9e899644619b6ac218c21a87746.png_pic_center]

4.在config–>dev.env.js中将前端请求地址修改为nginx的地址

![在这里插入图片描述][1b68a39e15944bfa92a92580bd8841ca.png_pic_center]

#### 5.7测试 ####

1.修改nginx配置后需要重启nginx(忘了的可以去看"5.5重启nginx")

2.启动8001项目和8002项目

3.修改了前端了配置文件,所以需要重启前端项目

①在终端按Ctrl+c,然后输入y并按回车即可停掉前端项目

![在这里插入图片描述][b9dd828520db4f4b990288258696c43b.png_pic_center]

②在终端使用命令npm run dev启动前端项目

4.在地址栏输入[http://localhost:9528][http_localhost_9528]可以看到登录页面,此时按F12点开开发者工具,然后点击按钮"Sign in"按钮

![在这里插入图片描述][46115fc698a14e86a5f76840242508e2.png_pic_center]

5.在"NetWork"菜单栏下的"Fetch/XHR"菜单栏下,这两个请求我们随便点一个看看,发现请求路径中的端口号是9001,这说明我们成功配置请求转发。

再说一下具体请求流程:浏览器先将请求发送给nginx,然后nginx根据路径匹配规则将请求发送给相应的服务器

![在这里插入图片描述][f15fc2c19334465abc86b3aecc765cad.png_pic_center]

### 6.前端页面(在save.html整合上传组件) ###

#### 6.1得到上传组件 ####

1.我们可以像以前一样,去element-ui官网复制一个上传组件过来,但里面的组件都太难看了。还记不记得"demo05-讲师管理前端"的"1.搭建项目前端页面环境"的第1步?我们当时说了资料中有一个"vue-element-admin"的压缩文件,我们开发过程中想要什么功能都可以从这里去找

2.可以看到vue-element-admin–>src–>components下有很多组件,其中我们上传需要的组件是"ImageCropper"和"PanThumb"

![在这里插入图片描述][4203b59f2aba4c9191fb3b061c15c6e1.png_pic_center]

3.你不用将资料中的"vue-element-admin.zip"解压缩,然后从解压后的文件中找到上传组件。我直接将上传组件的这两个文件夹放到了资料中

![在这里插入图片描述][2761753830a04ad4a53f826e2beff331.png_pic_center]

4.将上传组件的两个文件夹复制到前端项目的src–>components中

![在这里插入图片描述][d8c47a45ac564cbda82b791f7e787a0c.png_pic_center]

#### 6.2在save.html添加上传组件 ####

在save.html中添加如下代码(只要会修改就可以了,不需要手敲)

<el-form-item label="讲师头像">
    
      
      <pan-thumb :image="teacher.avatar"/>
      
      <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
      </el-button>
    
      <image-cropper
                    v-show="imagecropperShow"
                    :width="300"
                    :height="300"
                    :key="imagecropperKey"
                    :url="BASE_API+'/admin/oss/file/upload'"
                    field="file"
                    @close="close"
                    @crop-upload-success="cropSuccess"/>
    </el-form-item>

![在这里插入图片描述][cb48096afcfd4937b0a567836f0838e7.png_pic_center]

*  `image-cropper`是真正的上传组件,是一个表单,用来上传头像
    
     *  我们以前发送请求都是使用ajax,但是**ajax不能直接上传文件**,所以我们需要**用提交表单的方式来上传文件**
 *  `:v-show`:是否显示上传组件
    
     *  当点击"更换头像"后,会触发`@click="imagecropperShow=true"`,此时就会显示上传组件
 *  `:key`:类似于标签的id属性
 *  `:url`:表单提交的路径
 *  `field="file"`:我们在前端学过,上传按钮的代码是:`<input type="file" name="file"/>`。`field="file"`就相当于以前上传按钮中的`name="file"`
 *  `@close`:关闭上传组件
 *  `@crop-upload-success`:上传成功后会调用这里面的方法

#### 6.3使用组件 ####

在`data() {...}`中创建数据模型

imagecropperShow: false, //上传组件是否显示(默认不显示)
    imagecropperKey: 0, //上传组件的key值
    BASE_API: process.env.BASE_API, //固定写法,表示获得dev.env.js里面的BASE_API值

![在这里插入图片描述][167797b67b8d41769b272372bc373267.png_pic_center]

#### 6.4引入组件和声明组件 ####

1.引入组件模块

import ImageCropper from '@/components/ImageCropper'
    import PanThumb from '@/components/PanThumb'

![在这里插入图片描述][bb4bdd5aa73e4e759012d24c8e3c3271.png_pic_center]

2.在`export default {...}`中做一个声明,这样才可以使用这个组件

components: {
         ImageCropper, PanThumb },

![在这里插入图片描述][9226af0729f643299043eb7f255a23aa.png_pic_center]

#### 6.5修改上传接口地址 ####

![在这里插入图片描述][5f4b89afa2c441e1a99bc0529a9e5b53.png_pic_center]

#### 6.6定义close和cropSuccess方法 ####

定义close方法,点击弹框的关闭按钮时执行此方法,方法内部来关闭弹框;

定义cropSuccess方法,上传成功后回调

//点击弹框的关闭按钮时执行此方法
    close() {
        
      //关掉弹框
      this.imagecropperShow = false
    },
    //上传成功后回调
    cropSuccess(data) {
        
      //1.关掉弹框
      this.imagecropperShow = false
      //2.得到图片地址并赋值
      this.teacher.avatar = data.url
    },

![在这里插入图片描述][f0cba9b70bc845159f2c96b5e0886c10.png_pic_center]

`cropSuccess(data) {...}`的参数data是后端返回的数据,就和"demo04-前端技术"的"4.axios"的第7步的②里面的`.then(response => {...})`中的参数response类似,只是后者想要得到url需要`response.data.data.url`,而前者因为人家给做了封装,想要得到url只需要`data.url`

#### 6.7设置默认头像 ####

我们在"4.4.3测试"中上传的默认头像的地址是https://edu-mxy.oss-cn-hangzhou.aliyuncs.com/2022/08/17/66e307e5727c41d7a3617891509278dcdefault.jpg所以我们在init方法中添加如下一行代码来设置默认头像

this.teacher.avatar = 'https://edu-mxy.oss-cn-hangzhou.aliyuncs.com/2022/08/17/66e307e5727c41d7a3617891509278dcdefault.jpg'

![在这里插入图片描述][2d61da6eaf6b415aafbfbbee614f943b.png_pic_center]

#### 6.8测试 ####

1.刷新页面,在"添加讲师"路由上传图片

![在这里插入图片描述][ba991da643d042c1b8727de0d21b701c.png_pic_center]

2.点击"保存"后就成功添加了这条讲师数据

![在这里插入图片描述][04b0c398aa0f48d7b838a2f8dae8eacc.png_pic_center]

3.去数据库看,可以看到确实成功添加讲师数据

![在这里插入图片描述][8baa2fca4ed7437cb53a736a450c370e.png_pic_center]

4.去阿里云控制台看刚刚上传的图片的详情:

![在这里插入图片描述][ffaa540e70804497b9a013dbd8c9c5ae.png_pic_center]

发现一个问题:红框圈的这里是file而不是我们本地的文件名233

这是因为:考虑到我们有的人给文件起名会起中文,所以上传组件内部给我们做了优化:**我们通过该组件上传的所有文件这个位置都固定是file而不再是本地的文件名**

#### 6.9bug ####

1.点击"更换头像"成功上传头像后,如果再点"更换头像",会出现下图所示的弹框。这个弹框显示"上传成功"而不是让我们选择图片重新上传,这显然不是我们想要的弹框

![在这里插入图片描述][c878eeb2ec114bde8acd20b2917278ab.png_pic_center]

2.我们只有将这个弹框关闭后再次点击"更换头像"才会出现我们想要的弹框

![在这里插入图片描述][f9012ef234064c6292a36e5999b01bde.png_pic_center]

3.想要解决这个bug需要**每次关闭弹框或上传成功后都初始化上传组件**:

给close方法和cropSuccess方法都添加一行代码this.imagecropperKey = this.imagecropperKey + 1;

![在这里插入图片描述][4f28b007c2e34232b049537f3a314d89.png_pic_center]

为什么这行代码可以初始化上传组件?

*  在这两处都加上这行代码后,无论是关闭弹框还是成功上传头像,imagecropperKey的值都会自增1,且在"6.2在save.html添加上传组件"中我们说过`:key="imagecropperKey"`的作用类似于标签的id属性,也就说**无论是关闭弹框还是成功上传头像,上传组件的id都会自增1**,所以**每次点击"更换头像"后打开的都是新的上传组件,这样就实现了初始化上传组件**
    
     *  当然,我这里是每次让imagecropperKey自增1,其实,让他自增多少,自减多少都是可以的,因为**我们的目的仅仅是让每次的imagecropperKey的值不一样就可以了**

[https_www.aliyun.com]: https://www.aliyun.com
[786713d2dc1a46ab94c17956086b2eef.png_pic_center]: https://img-blog.csdnimg.cn/786713d2dc1a46ab94c17956086b2eef.png#pic_center
[116e4512a233486e8ddd23815b9cece3.png_pic_center]: https://img-blog.csdnimg.cn/116e4512a233486e8ddd23815b9cece3.png#pic_center
[10352546f6ab4dbeadc963ff8dd02e2b.png_pic_center]: https://img-blog.csdnimg.cn/10352546f6ab4dbeadc963ff8dd02e2b.png#pic_center
[0db5f3c1cf9f4e3992a40738591a5b6b.png_pic_center]: https://img-blog.csdnimg.cn/0db5f3c1cf9f4e3992a40738591a5b6b.png#pic_center
[c44f31becb744f2c928ca425a90999e4.png_pic_center]: https://img-blog.csdnimg.cn/c44f31becb744f2c928ca425a90999e4.png#pic_center
[c38f4478c4d047d98da3c8e92bfd1b2e.png_pic_center]: https://img-blog.csdnimg.cn/c38f4478c4d047d98da3c8e92bfd1b2e.png#pic_center
[21accd4d6bc949929ab0c57d339fb882.png_pic_center]: https://img-blog.csdnimg.cn/21accd4d6bc949929ab0c57d339fb882.png#pic_center
[3d738a9f1b7e46559d4111145f281405.png_pic_center]: https://img-blog.csdnimg.cn/3d738a9f1b7e46559d4111145f281405.png#pic_center
[9766de9fe6004d89b1af2ad073c37ab1.png_pic_center]: https://img-blog.csdnimg.cn/9766de9fe6004d89b1af2ad073c37ab1.png#pic_center
[3bf620a814264ff3a14bc4245ffe01c2.png_pic_center]: https://img-blog.csdnimg.cn/3bf620a814264ff3a14bc4245ffe01c2.png#pic_center
[e78ec3d05a2147e6a7ac79929a8641cc.png_pic_center]: https://img-blog.csdnimg.cn/e78ec3d05a2147e6a7ac79929a8641cc.png#pic_center
[2b010ec5ff254bad8b172dc6ad0fa874.png_pic_center]: https://img-blog.csdnimg.cn/2b010ec5ff254bad8b172dc6ad0fa874.png#pic_center
[https_edu-mxy.oss-cn-hangzhou.aliyuncs.com_default.jpg]: https://edu-mxy.oss-cn-hangzhou.aliyuncs.com/default.jpg
[48224e405bb2481e990198464248fd4c.png_pic_center]: https://img-blog.csdnimg.cn/48224e405bb2481e990198464248fd4c.png#pic_center
[2b562e532c2245b2961d174c8f106e54.png_pic_center]: https://img-blog.csdnimg.cn/2b562e532c2245b2961d174c8f106e54.png#pic_center
[d8e44cfc76e04c2f8abb969066bab1ac.png_pic_center]: https://img-blog.csdnimg.cn/d8e44cfc76e04c2f8abb969066bab1ac.png#pic_center
[5abc811ebef943bc889254e0b71fa08d.png_pic_center]: https://img-blog.csdnimg.cn/5abc811ebef943bc889254e0b71fa08d.png#pic_center
[5dd4624da01049b59acd1d1087a0a044.png_pic_center]: https://img-blog.csdnimg.cn/5dd4624da01049b59acd1d1087a0a044.png#pic_center
[d4bae59a0048443baf2ed0d028900d13.png_pic_center]: https://img-blog.csdnimg.cn/d4bae59a0048443baf2ed0d028900d13.png#pic_center
[0f4971c0c5c64c1f8d1f06411897f831.png_pic_center]: https://img-blog.csdnimg.cn/0f4971c0c5c64c1f8d1f06411897f831.png#pic_center
[55174dddd86d4b3d9233a24ead3b7465.png_pic_center]: https://img-blog.csdnimg.cn/55174dddd86d4b3d9233a24ead3b7465.png#pic_center
[9f6eb45e02d24780a84c7c8550911fda.png_pic_center]: https://img-blog.csdnimg.cn/9f6eb45e02d24780a84c7c8550911fda.png#pic_center
[6360918867e44ce98ff675a831cef820.png_pic_center]: https://img-blog.csdnimg.cn/6360918867e44ce98ff675a831cef820.png#pic_center
[bfb23bd18b4a4351b197e42f273be8e1.png_pic_center]: https://img-blog.csdnimg.cn/bfb23bd18b4a4351b197e42f273be8e1.png#pic_center
[756c1b14944c40a5a20d0b5911973834.png_pic_center]: https://img-blog.csdnimg.cn/756c1b14944c40a5a20d0b5911973834.png#pic_center
[dc0297efca894c84a9dfe321077f70ca.png_pic_center]: https://img-blog.csdnimg.cn/dc0297efca894c84a9dfe321077f70ca.png#pic_center
[b739e7dbe67c4483b88f75cebfd87e84.png_pic_center]: https://img-blog.csdnimg.cn/b739e7dbe67c4483b88f75cebfd87e84.png#pic_center
[be4fd4c5edde4bd99cbac4c757415558.png_pic_center]: https://img-blog.csdnimg.cn/be4fd4c5edde4bd99cbac4c757415558.png#pic_center
[07225c134a404d2c9922de92405bdf48.png_pic_center]: https://img-blog.csdnimg.cn/07225c134a404d2c9922de92405bdf48.png#pic_center
[a190a54add0b4dfa826ce82afd12c049.png_pic_center]: https://img-blog.csdnimg.cn/a190a54add0b4dfa826ce82afd12c049.png#pic_center
[06e0bb09f1fd4e2e9c18d7e43860ba4b.png_pic_center]: https://img-blog.csdnimg.cn/06e0bb09f1fd4e2e9c18d7e43860ba4b.png#pic_center
[89634b3521ef435f8c779c193ae6eec5.png_pic_center]: https://img-blog.csdnimg.cn/89634b3521ef435f8c779c193ae6eec5.png#pic_center
[f8e0aac85b3944d584c69c6931d8dddf.png_pic_center]: https://img-blog.csdnimg.cn/f8e0aac85b3944d584c69c6931d8dddf.png#pic_center
[e42507a318214516b00afdc3375d90c4.png_pic_center]: https://img-blog.csdnimg.cn/e42507a318214516b00afdc3375d90c4.png#pic_center
[8a117ac0d44649698f728146eb18556d.png_pic_center]: https://img-blog.csdnimg.cn/8a117ac0d44649698f728146eb18556d.png#pic_center
[9dd1b07f5ae14597a6b8de780817ba5d.png_pic_center]: https://img-blog.csdnimg.cn/9dd1b07f5ae14597a6b8de780817ba5d.png#pic_center
[http_localhost_8002_swagger-ui.html]: http://localhost:8002/swagger-ui.html
[8c056692f79c43ff870f56b560bff0a8.png_pic_center]: https://img-blog.csdnimg.cn/8c056692f79c43ff870f56b560bff0a8.png#pic_center
[4e4dcb34e1434131a3f4efeeaa7233f4.png_pic_center]: https://img-blog.csdnimg.cn/4e4dcb34e1434131a3f4efeeaa7233f4.png#pic_center
[a973596d827340c4976ad65050c923d4.png_pic_center]: https://img-blog.csdnimg.cn/a973596d827340c4976ad65050c923d4.png#pic_center
[56585cc90ac84a1c88c7984948ef4a51.png_pic_center]: https://img-blog.csdnimg.cn/56585cc90ac84a1c88c7984948ef4a51.png#pic_center
[68ccc52b1b5541a0a7465c44c70da610.png_pic_center]: https://img-blog.csdnimg.cn/68ccc52b1b5541a0a7465c44c70da610.png#pic_center
[5571f7a6fb1143cea5e72b545ec57517.png_pic_center]: https://img-blog.csdnimg.cn/5571f7a6fb1143cea5e72b545ec57517.png#pic_center
[933811049090499eb61b0d29d073bdcd.png_pic_center]: https://img-blog.csdnimg.cn/933811049090499eb61b0d29d073bdcd.png#pic_center
[2176ad25d92942c89a4395c0f6d6470a.png_pic_center]: https://img-blog.csdnimg.cn/2176ad25d92942c89a4395c0f6d6470a.png#pic_center
[efd0a6fd9e8e4298b2cf3ada4fec8e8f.png_pic_center]: https://img-blog.csdnimg.cn/efd0a6fd9e8e4298b2cf3ada4fec8e8f.png#pic_center
[1f1d2f5ad2eb4b77861b7c9565fd65c1.png_pic_center]: https://img-blog.csdnimg.cn/1f1d2f5ad2eb4b77861b7c9565fd65c1.png#pic_center
[596dc60db055404d802e4216e372927e.png_pic_center]: https://img-blog.csdnimg.cn/596dc60db055404d802e4216e372927e.png#pic_center
[72eaf69f6c534c2b87e1900c2cbc99a7.png_pic_center]: https://img-blog.csdnimg.cn/72eaf69f6c534c2b87e1900c2cbc99a7.png#pic_center
[92903a3fa6bc41d180e088436cfc28cd.png_pic_center]: https://img-blog.csdnimg.cn/92903a3fa6bc41d180e088436cfc28cd.png#pic_center
[f4cc0927d53c414ba9121a6e11638499.png_pic_center]: https://img-blog.csdnimg.cn/f4cc0927d53c414ba9121a6e11638499.png#pic_center
[3a3a4a5101df4ce8942375113e151a96.png_pic_center]: https://img-blog.csdnimg.cn/3a3a4a5101df4ce8942375113e151a96.png#pic_center
[aa5ad5ab2d5b4f2a8ff23e9b319075ac.png_pic_center]: https://img-blog.csdnimg.cn/aa5ad5ab2d5b4f2a8ff23e9b319075ac.png#pic_center
[f18fa58f3c5d4ea6a9c579ea92d27087.png_pic_center]: https://img-blog.csdnimg.cn/f18fa58f3c5d4ea6a9c579ea92d27087.png#pic_center
[efea36fe0dc34968ae42c009335290ec.png_pic_center]: https://img-blog.csdnimg.cn/efea36fe0dc34968ae42c009335290ec.png#pic_center
[dc4d26c4c76a4610b37688541e66849f.png_pic_center]: https://img-blog.csdnimg.cn/dc4d26c4c76a4610b37688541e66849f.png#pic_center
[7fb5ca9576624e4eae642e78afa26e51.png_pic_center]: https://img-blog.csdnimg.cn/7fb5ca9576624e4eae642e78afa26e51.png#pic_center
[488f9d1a09c74264ac4435f8aa47b98b.png_pic_center]: https://img-blog.csdnimg.cn/488f9d1a09c74264ac4435f8aa47b98b.png#pic_center
[c678c4cb7205408e92e3aefed67f756b.png_pic_center]: https://img-blog.csdnimg.cn/c678c4cb7205408e92e3aefed67f756b.png#pic_center
[a2b208dbf5c5492d82ddf99f705fcfc8.png_pic_center]: https://img-blog.csdnimg.cn/a2b208dbf5c5492d82ddf99f705fcfc8.png#pic_center
[6904e9e899644619b6ac218c21a87746.png_pic_center]: https://img-blog.csdnimg.cn/6904e9e899644619b6ac218c21a87746.png#pic_center
[1b68a39e15944bfa92a92580bd8841ca.png_pic_center]: https://img-blog.csdnimg.cn/1b68a39e15944bfa92a92580bd8841ca.png#pic_center
[b9dd828520db4f4b990288258696c43b.png_pic_center]: https://img-blog.csdnimg.cn/b9dd828520db4f4b990288258696c43b.png#pic_center
[http_localhost_9528]: http://localhost:9528
[46115fc698a14e86a5f76840242508e2.png_pic_center]: https://img-blog.csdnimg.cn/46115fc698a14e86a5f76840242508e2.png#pic_center
[f15fc2c19334465abc86b3aecc765cad.png_pic_center]: https://img-blog.csdnimg.cn/f15fc2c19334465abc86b3aecc765cad.png#pic_center
[4203b59f2aba4c9191fb3b061c15c6e1.png_pic_center]: https://img-blog.csdnimg.cn/4203b59f2aba4c9191fb3b061c15c6e1.png#pic_center
[2761753830a04ad4a53f826e2beff331.png_pic_center]: https://img-blog.csdnimg.cn/2761753830a04ad4a53f826e2beff331.png#pic_center
[d8c47a45ac564cbda82b791f7e787a0c.png_pic_center]: https://img-blog.csdnimg.cn/d8c47a45ac564cbda82b791f7e787a0c.png#pic_center
[cb48096afcfd4937b0a567836f0838e7.png_pic_center]: https://img-blog.csdnimg.cn/cb48096afcfd4937b0a567836f0838e7.png#pic_center
[167797b67b8d41769b272372bc373267.png_pic_center]: https://img-blog.csdnimg.cn/167797b67b8d41769b272372bc373267.png#pic_center
[bb4bdd5aa73e4e759012d24c8e3c3271.png_pic_center]: https://img-blog.csdnimg.cn/bb4bdd5aa73e4e759012d24c8e3c3271.png#pic_center
[9226af0729f643299043eb7f255a23aa.png_pic_center]: https://img-blog.csdnimg.cn/9226af0729f643299043eb7f255a23aa.png#pic_center
[5f4b89afa2c441e1a99bc0529a9e5b53.png_pic_center]: https://img-blog.csdnimg.cn/5f4b89afa2c441e1a99bc0529a9e5b53.png#pic_center
[f0cba9b70bc845159f2c96b5e0886c10.png_pic_center]: https://img-blog.csdnimg.cn/f0cba9b70bc845159f2c96b5e0886c10.png#pic_center
[2d61da6eaf6b415aafbfbbee614f943b.png_pic_center]: https://img-blog.csdnimg.cn/2d61da6eaf6b415aafbfbbee614f943b.png#pic_center
[ba991da643d042c1b8727de0d21b701c.png_pic_center]: https://img-blog.csdnimg.cn/ba991da643d042c1b8727de0d21b701c.png#pic_center
[04b0c398aa0f48d7b838a2f8dae8eacc.png_pic_center]: https://img-blog.csdnimg.cn/04b0c398aa0f48d7b838a2f8dae8eacc.png#pic_center
[8baa2fca4ed7437cb53a736a450c370e.png_pic_center]: https://img-blog.csdnimg.cn/8baa2fca4ed7437cb53a736a450c370e.png#pic_center
[ffaa540e70804497b9a013dbd8c9c5ae.png_pic_center]: https://img-blog.csdnimg.cn/ffaa540e70804497b9a013dbd8c9c5ae.png#pic_center
[c878eeb2ec114bde8acd20b2917278ab.png_pic_center]: https://img-blog.csdnimg.cn/c878eeb2ec114bde8acd20b2917278ab.png#pic_center
[f9012ef234064c6292a36e5999b01bde.png_pic_center]: https://img-blog.csdnimg.cn/f9012ef234064c6292a36e5999b01bde.png#pic_center
[4f28b007c2e34232b049537f3a314d89.png_pic_center]: https://img-blog.csdnimg.cn/4f28b007c2e34232b049537f3a314d89.png#pic_center