记录谷粒学院的一些问题--------------chapter4

一.整合管理端页面信息
前端页面环境使用框架主要基于两种技术实现出来vue-admin-template模板 = vue + element-ui,整体框架目录如下，
├── build // 构建脚本
├── config // 全局配置
├── node_modules // 项目依赖模块
├── src //项目源代码
├── static // 静态资源
└── package.jspon // 项目信息和依赖配置
1.build目录一般是放项目构建的脚本文件

2.config目录
有相应的prod和dev两种环境，那么要在index.js将插件useEslint:false，修正代码的插件改为false，并且在dev环境下的地址要进行修改，修改成访问后端接口地址(相应后端接口的地址，当前为本机，因为相应接口的application.yml中配置的端口号为8001)。

3.src目录
├── api // 各种接口
├── assets // 图片等资源
├── components // 各种公共组件，非公共组件在各自view下维护
├── icons //svg icon
├── router // 路由表
├── store // 存储
├── styles // 各种样式
├── utils // 公共工具，非公共工具，在各自view下维护
├── views // 各种layout
├── App.vue //项目顶层组件
├── main.js //项目入口文件
└── permission.js //认证入口

二.讲师管理前端开发
为了能够后台管理系统能登录所以改造成本地（临时性），后面会将登录添加权限框架spring security
1.查看底层状态码（20000可以根据业务需求进行更改，这要和前端对接好需要的json格式，返回相应的状态码）

2.来看登录会调用两个方法一个是,login登陆操作的，以及info登录之后获取用户信息的方法，所以创建接口两个方法实现登录。
1）login返回token值（其中箭头函数response=>前几chapter有说到，response对象中有data属性其中存放的值）

2）info返回roles（角色） name（姓名） avatar（用户头像）

3）编写相应的登录和获取用户信息的接口，目前改造成存放在内存中的数据。（后台管理系统的登录接口）

但出现了如下问题，第一个错误是因为没有开启服务，所以无法获取到后台服务器的接口，

当开启后又出现第二个错误:跨域问题。接下来讲一下跨域问题是什么？
通过一个地址去访问另外一个地址，这个过程中如果有三个地方任何一个不一样就会发生跨域问题。
①访问协议 http https
②ip地址 192.168.1.1 172.11.11.11（两个ip地址不同）
③端口号 9528 8001 （两个端口号不同）

那么知道了跨域问题的根源，那就好解决，一个是http://localhost:9528,http://localhost:8001
首先是访问协议都是http，接下来ip地址都是localhost（本机的ip地址）,端口号两者不同，跨域的解决方式
①在后端接口controller添加注解（常见）@CrossOrigin解决跨域问题

②使用网关解决（后面使用Gateway也可以解决）
3.为什么浏览器会发送两次相应的请求，第一次相当于预请求Options，尝试是否能连通服务器，状态码为200后才真正发送相应的请求。

4.在整合添加讲师模块的接口时出现的几个小问题
①id字段使用的自动生成策略配置错误，没有将其改成ID_WORKER_STR,这是相应的字符串字段，ID_WORKER时Long类型的字段

②使用了索引导致添加讲师失败的情况，删除索引即可

③在添加和修改模块都是去到save.vue界面为了区分两者，因为修改是带着id进行查询并且对表单进行回显，而添加不需要带id。

④路由问题：vue-router导航切换 时，如果两个路由都渲染同个组件，组件会重（chong）用,组件的生命周期钩子（created）不会再被调用, 使得组件的一些数据无法根据 path的改变得到更新。
实例：当我点击修改进入到添加讲师的页面进行回显数据后，再次点击添加讲师，理应表单清空。

解决方法:
1、我们可以在watch中监听路由的变化，当路由变化时，重新调用created中的内容
2、在init方法中我们判断路由的变化，如果是修改路由，则从api获取表单数据，如果是新增路由，则重新初始化表单数据

created() {
    //页面渲染之前执行，一般执行methods里面的方法
    //因为添加和修改都是进入同一个表单中
    //用于判断表单是否为添加和修改则需要判断路径中是否有id值
    this.init();
  },
  watch: {
    $route(to, from) {
      console.log("watch $route");
      this.init();
    }
  },
  methods: {
    //根据讲师id查询方法
    init() {
      if (this.$route.params && this.$route.params.id) {
        //用于表单回显渲染页面的，但只有一次在页面渲染好后不再执行
        const id = this.$route.params.id;
        this.getInfo(id);
      }else{//路径中没有id值，做添加
        //表单清空
        this.teacher ={}
      }
    },
    getInfo(id) {
      teacherApi
        .getTeacherInfo(id)
        .then(response => {
          this.teacher = response.data.teacher;
        })
        .catch(error => {});
    },
    saveOrUpdate() {
      //对保存也要进行判断
      if (!this.teacher.id) {
        this.saveTeacher();
      } else {
        this.updateTeacher();
      }
    },