在线教育项目04_讲师管理前端开发

---

一、登录功能（临时）

跨域问题

通过一个地址访问另外一个地址，这个过程中如果有三个地方任何一个不一样，就会出现跨域问题

访问协议 ：http
ip地址：都是主机地址
端口号 ： 9528、8001 不一致出现跨域问题

解决方式

1、在后端接口controller加@CrossOrigin注解；
2、使用网关解决

框架使用的过程

第一步 添加路由 --router/index.js
第二步 点击路由，显示对应页面内容
第三步 实现页面的具体功能：在api文件夹创建js文件，定义接口地址和参数
第四步 在创建vue页面引入js文件，调用方法实现功能，最后使用element-ui显示数据

二、前端讲师开发

1.讲师列表

第一步 添加路由

第二步 创建路由对应的页面

第三步 在api文件夹创建edu.js定义访问接口的地址

import request from '@/utils/request'

export default{
    //1.讲师列表（条件分页查询）
    // current当前页，每页记录条数、teacherQuery条件的对象
    getTeacherListPage(current,limit,teacherQuery){
        return request({
            url: `/eduservice/teacher/pageTeacherCondition/${current}/${limit}`,
            method: 'post',
            //条件的对象，后端用RequestBody获取数据
            //data表示把对象转换为json进行传递到接口里
            data:teacherQuery

          })
    }
}

第四步 在讲师列表页面 list.vue页面调用定义的接口方法，得到返回的数据

<template>
  <div class="app-container">
    讲师表单
  </div>
</template>

<script>
//E:/code_path/web_code/vs1010/vue-admin-template-master/src/api/edu
import teacher from '@/api/edu/teacher.js'

export default {
  //写核心代码
  // data:{

  // },
  data(){
    return{
     list:null,
     page:1,
     limit:10,
     total:0,
     teacherQuery:{} 
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList(){
      teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
      .then(response =>{
        list = response.data.rows
      })
      .catch(error =>{
        console.log(error)
      })
    }
  }
}
</script>

第五步 把请求接口获取到的数据在页面进行显示（利用element-ui）

2.讲师列表添加分页

  <!-- 分页 -->
       <!-- :是v-bind ，单项绑定
         @current-change="getList" :绑定自己写的分页方法
        -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList" 
    />

3.讲师列表条件查询实现

使用element-ui实现
在列表上添加条件输入的表单，使用v-model实现数据的双向绑定，将查询的参数传入到data数据中；

清空功能：把查询表的条件值清空。然后查询所有数据；

resetData(){//清空的方法
      //表单数据清空
      //清空对象中的值
      this.teacherQuery = {}
      //查询所有数据
      this.getList()

    }

4.讲师列表删除功能

1、在每条记录后面添加删除按钮
2、在按钮上绑定事件

3、在绑定事件的方法里传递要删除讲师的id值

4、在api文件夹teacher.js定义删除接口的地址
5、页面调用，实现删除，删除前弹框确认是否删除

5.讲师列表删除功能

1、点击添加讲师路由，进入到对应的表单页面
2、在表单页面点击保存，提交接口，添加数据库
3、进入api中写添加方法，
4、在页面中进行调用，添加完数据需要跳转到讲师列表，用到路由跳转

5.讲师列表修改功能

1、在每条记录后面添加修改按钮
2、点击修改按钮让数据回显进入表单，根据id回显；

• 根据讲师id查出数据
• 点击修改按钮根据路由跳转，因此要添加一个隐藏路由
  

3、修改表单回显的数据添加到数据库完成修改

• 数据回显： 到aip中写方法
  
• 调用该方法实现数据回显
  
• 因为添加于修改都使用save页面，只有修改时数据回显、
• 判断路径中是否有id值，如果有id值则是修改，如果没有则是添加
• 在aipteacher.js中写修改接口

路由切换问题：
问题：点击修改后再点击添加，还是会有数据回显
原因：路由跳转到同一个页面，create方法只执行一次，不会去执行其中的删除数据回显；我们需要添加一个监听监听路由的变化，路由变化再执行一次设置好清空回显的方法即可；