谷粒学院项目

项目后台设计---讲师管理

六：讲师修改（P81-P82）

1.每条记录后面添加【修改】按钮

2.点击【修改】按钮，进入讲师添加页面，进行数据回显

3.通过路由跳转进入数据回显页面，在路由index页面添加路由

（1）路由跳转：

（2）在index页面中添加隐藏路由：

4.在讲师添加页面中，实现数据回显

（1）在teacher.js中定义根据id查询接口

（2）在讲师添加页面中调用接口，实现数据回显

（3）调用 根据id查询的方法

问题：当我们添加讲师和修改讲师时，都需要跳转到讲师添加页面，添加讲师时不需要回显数据，修改讲师时需要回显数据，我们根据路径中有没有id值来判断我们是要添加讲师还是修改讲师。

5.最终修改实现

（1）在api的teacher.js中定义修改接口

（2）在页面中调用修改方法

讲师修改页面的保存按钮统一调用saveOrUpdate()方法，我们在这个方法中进行判断是修改后保存，还是添加后保存

七：路由切换问题演示和解决（P83）

第一次点击修改，进行数据回显，第二次再去点击添加讲师，进入表单页面，但是问题：表单页面还是显示修改回显数据，正确效果应该是表单数据清空。新版好像没有这个问题。

解决方案：在添加讲师时，把表单数据清空就可以了。

上面的代码没有解决问题，为什么？

多次路由跳转到同一个页面，在页面中created方法只会执行第一次，后面在进行跳转是不会执行的

最终解决方式：使用vue里面的监听

方法抽取

监听方法和created方法都调用这个抽取的方法

八：上传讲师头像（P85-P93）

1.对象存储OSS

   为了解决海量数据存储与弹性扩容，项目中我们采用云存储的解决方案- 阿里云OSS

（1）使用阿里云oos，首先创建Bucket

（2）上传文件

重要：通过java代码往Bucket中上传文件

①：准备工作：创建操作阿里云oss许可证（阿里云颁发id密钥）

②：直接集成到项目中去

2.后端集成oss

（1）创建子模块service_oss

（2）pom文件中添加依赖

（3）配置application.properties配置文件

（4）创建启动类，启动报错

启动时候，找数据库配置，但是现在模块不需要操作数据库，只做上传功能，没有配置数据库

解决方案:①：配置数据库 ②：在启动类上面添加属性，默认不去加载数据库配置

3.上传讲师头像到oss中去

（1）创建读取配置文件的常量类

package com.atguigu.oss.utils;

import org.springframework.beans.factory.InitializingBean;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

// 当项目一启动，spring接口，spring加载以后，执行接口一个方法
@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 static String END_POINT;
    public static String KEY_ID;
    public static String KEY_SECRET;
    public static String BUCKET_NAME;

    @Override
    public void afterPropertiesSet() throws Exception {
        END_POINT = endpoint;
        KEY_ID = keyId;
        KEY_SECRET = keySecret;
        BUCKET_NAME = bucketName;
    }
}

（2）创建controller 创建service

package com.atguigu.oss.controller;

import com.atguigu.commonutils.R;
import com.atguigu.oss.service.OssService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController // 交给Boot管理，里面定义的api接口往前端返回json数据
@RequestMapping("/eduoss/fileoss")
@CrossOrigin
public class OssController {

    @Autowired
    private OssService ossService;

    // 上传头像的方法
    @PostMapping
    public R uploadOssFile(MultipartFile file) {
        // 获取上传文件  MultipartFile
        // 当我们上传文件到oss中去以后，它会返回一个url路径，我们在数据库表中存这个路径
        String url = ossService.uploadFileAvatar(file);
        return R.ok().data("url", url);
    }
}

（3）在service中实现上传文件到oss上的功能

package com.atguigu.oss.service.impl;

import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.OSSException;
import com.atguigu.oss.service.OssService;
import com.atguigu.oss.utils.ConstantPropertiesUtils;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.io.InputStream;


@Service
public class OssServiceImpl implements OssService {
    // 上传头像到oss中去
    @Override
    public String uploadFileAvatar(MultipartFile file) {
        // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
        String endpoint = ConstantPropertiesUtils.END_POINT;
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = ConstantPropertiesUtils.KEY_ID;
        String accessKeySecret = ConstantPropertiesUtils.KEY_SECRET;
        // 填写Bucket名称，例如examplebucket。
        String bucketName = ConstantPropertiesUtils.BUCKET_NAME;
        // 填写本地文件的完整路径，例如D:\localpath\examplefile.txt。
        String fileName = new String();
        // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
        String filePath = "D:\localpath\examplefile.txt";

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        try {
            // 获取上传文件的输入流
            InputStream inputStream = file.getInputStream();
            // 填写文件名称
            fileName = file.getOriginalFilename();
            // 创建PutObject请求，实现文件上传
            // 第一个参数:Bucket名称
            // 第二个参数:上传到oss文件路径和文件名称
            // 第三个参数:上传文件输入流
            ossClient.putObject(bucketName, fileName, inputStream);
        } catch (OSSException oe) {
            System.out.println("Caught an OSSException, which means your request made it to OSS, "
                    + "but was rejected with an error response for some reason.");
            System.out.println("Error Message:" + oe.getErrorMessage());
            System.out.println("Error Code:" + oe.getErrorCode());
            System.out.println("Request ID:" + oe.getRequestId());
            System.out.println("Host ID:" + oe.getHostId());
        } catch (ClientException ce) {
            System.out.println("Caught an ClientException, which means the client encountered "
                    + "a serious internal problem while trying to communicate with OSS, "
                    + "such as not being able to access the network.");
            System.out.println("Error Message:" + ce.getMessage());
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
                // 把上传之后文件路径返回
                // 需要把上传到阿里云oss路径手动拼接出来
                String url = "https://" + bucketName + "." + endpoint + "/" + fileName;
                return url;
            }
            return null;
        }
    }
}

（4）文件上传过程中的一些问题

①：多次上传相同名称文件，造成最后一次上传把之前上传文件覆盖

解决方案:在文件名称添加随机唯一值，让每个文件名称不同

②：把文件进行分类管理

根据日期进行分类

4.nginx

反向代理服务器  
   1.请求转发
   2.负载均衡
   3.动静分离

（1）配置nginx实现请求转发功能

①：找到nginx配置文件

②：在nginx.conf中进行配置

配置nginx转发规则

（2）在前端中修改端口号，改为nginx监控的端口号

5.添加讲师，实现上传头像前端整合

（1）在添加讲师页面，创建上传组件，实现上传

（2）添加讲师页面，使用element-ui组件

（3）使用组件

data()定义变量和初始值
引入组件和声明组件

修改上传接口地址

编写close方法和上传成功的方法