在线教育day5

任务：讲师管理前端开发

1. 登录功能简单实现
2. 讲师列表(分页条件查询)
3. 讲师添加
4. 讲师删除
5. 讲师修改

---

1. 登录功能简单实现

1.修改vue-admin-template-master中config文件夹下的dev.env.js文件

2. 修改vue-admin-template-master中/src/api文件夹下的login.js文件:

3. 后台编写Controller

上面调用login和info方法返回的值得个数根据/src/store/modules/下的user.js来确定。


4. 测试

重启前台和后台，测试：

访问失败。因为跨域访问资源，所以会失败。

什么是跨域：访问协议，IP地址，端口号3个中有任何一个不同则为跨域，即不同源，禁止访问

由于端口号不同，所以禁止访问。

解决办法：

解决方法很多，常见的有几种：

（1）Controller上面添加注解

（2）使用网关解决(待解决)

重启后端服务器，测试：

---

2. 讲师列表(分页条件查询)

根据src/router/index.js来查看路由情况，以及模板中各个页面的位置，这样可以将自己的页面添加到模板中的指定位置中。

1. 添加路由
   

2. 修改路由对应页面内容

创建list.vue和save.vue，这里以list.vue为例。list.vue如下：

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

     <!-- element-ui的表格 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row>

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="name" label="名称" width="80" />

      <el-table-column label="头衔" width="80">
        <template slot-scope="scope">
          {{ scope.row.level===1?'高级讲师':'首席讲师' }}
        </template>
      </el-table-column>

      <el-table-column prop="intro" label="资历" />

      <el-table-column prop="gmtCreate" label="添加时间" width="160"/>

      <el-table-column prop="sort" label="排序" width="60" />

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <router-link :to="'/edu/teacher/edit/'+scope.row.id">
            <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


   </div>
</template>

<script>

//引入teacher.js文件
import teacher from '@/api/edu/teacher'

export default{
   //data:{}也行
   data(){//定义数据变量和初始值
       return{
          list:null,//查询之后的返回值
          page: 1,//当前页
          limit:10,//每页记录数
          total:0,//总记录数
          teacherQuery:{}//条件对象
       }
   },
   created(){//页面渲染之前执行，一般调用methods中定义的方法
        //调用getList()
        this.getList()
   },
   methods:{//创建具体的方法，调用teacher.js定义的方法
      //讲师列表方法
      getList(){
          teacher.getTeacherListPage(this.page, this.limit, this.teacherQuery)
                 .then(response => {//请求成功
                    //console.log(response)
                    this.list = response.data.rows
                    this.total = response.data.total
                    console.log(this.list)
                    console.log("total = "+this.total)
                 })
                 .catch(error =>{//请求失败
                    console.log(error)
                 })
      }
   }
}
</script>

重要步骤：

1. /src/api/edu/文件夹下创建teacher.js，用来获取后端数据
   
2. list.vue中引入teacher.js，并显示数据在element-ui表格中。
   
   
   测试结果：
   

---

3. 讲师列表分页实现

1.list.js引入element-ui分页插件。

2. methods修改。

3. 测试

---

4. 添加条件查询

1. element-ui引入查询表单
   

2. 清空：清空所有选项；查询所有数据
   

3. 测试：实现查询，清空，分页功能
   

---

5.讲师删除功能

1. 添加element-ui删除按钮并绑定事件。
   
2. teacher.js中调用后台删除方法。
   
3. list.vue中引入teacher.js(前面已经引入)，并定义删除讲师方法。

测试：

6. 添加讲师功能

1. save.vue中添加element-ui插件：
   
2. 在teacher.js中调用后端的接口
   
3. save.vue中调用teacher.js接口
   先导入teacher.js；然后3步走：data()，定义双向绑定的数据，created()，渲染前调用，methods()，方法在这里面定义

注意：这里增加和保存共用一个页面。

<script>
   import teacherApi from '@/api/edu/teacher'
   export default{
       data(){
           return {
               teacher:{name:'', sort:0, level:1, career:'', intro:'', avatar:''}
               //也可以写成teacher{}
           }
       },
       saveBtnDisabled:false,//保存按钮是否禁用  
       created(){
   
       },
       methods:{
           saveOrUpdate(){
               //添加讲师
               this.saveTeacher()
           },

           //添加讲师的方法
           saveTeacher(){
               teacherApi.addTeacher(this.teacher)
                         .then(response => {//添加成功
                            //1.提示用户，添加成功
                            this.$message({
                                type:'success',
                                message:'添加成功！'
                            });
                            //2.跳转到列表页面(路由跳转)
                                 this.$router.push({path: '/teacher/table'})
                         })
                         .catch(error =>{

                         })
           }
       }
   }
</script>

注意这里的路由跳转：this.$router.push({path: ‘/teacher/table’})。跳转到添加页面。

4. 添加后，页面跳转到分页条件查询页面，添加的内容应该第一个，所以修改后台，将查找结果顺序按修改时间降序排序。
   
   测试：
   

---

7. 修改讲师功能

1. 页面添加修改按钮；
   

2. 修改时，先跳转到修改页面，这里修改和增加公用一个页面，所以跳转到增加页面；
   

这里是隐藏路由，否则他会显示在菜单上，所以隐藏起来。

修改list.vue的修改路由：


2. 数据回显，即根据讲师id将数据查出来放在页面；

先在teacher.js定义调用后端接口的方法：根据讲师ID查找讲师信息

然后在修改页面(即添加页面save.vue)来调用teacher.js中的接口方法。

最后调用getInfo方法，这里有点麻烦：在哪调用该方法呢？

因为添加讲师页面和修改讲师页面共用一个页面，而添加讲师不用调用getInfo方法，所以这里要进行区分，区分是进行添加还是进行修改。怎么区分呢？

解决办法：根据路由中的id来区分，如果是添加讲师，路由中是没有id的，如果是修改讲师，路由中会携带id信息。

注意：这里是在页面渲染前进行调用的，即在created()里面做判断。

小插曲：这里url传入的id有可能是自动生成的19位数字，后台用的Integer来接收出现异常，改为Long解决了问题。

修改数据后，实现保存功能。

1. teacher.js添加访问后端的方法
   

2. 修改页面保存按钮事件方法调用teacher.js中定义的修改方法
   
   点击保存按钮，调用saveOrUpdate()，里面来调用上面定义的updateTeacher()。

   这里也要注意下：
   因为修改和保存共用一个页面，点击保存按钮，要判断是添加还是保存。
   
   这里和前面的判断有区别，前面是在页渲染之前做判断。

bug:点击修改按钮后，再点击添加讲师，列表中的数据还在。

解决方法：将表单数据清空

问题原因：

多次跳转到同一页面时，只在第一次执行created()，以后不执行，所以我们由修改页面跳转到添加页面时，因为共用一个页面，所以不会执行created()方法，所以不会清空修改页面表单里面的数据。

解决办法：用vue监听

而直在init()中添加else也不行，因为create只执行一次。

实质上是让它每次跳转到页面就调用init()方法。

测试：

---

(完)