前后端路由实现，接口对接测试，跨域问题、教师列表分页列表查询，删除功能，增加和修改功能(五)

一、与后台端口对接

1、修改dev.env.js文件中后台端口的url,改为自己的后台端口

BASE_API: ‘“http://localhost:8001/”’

2、由于vue-element-admin登录是需要到后端请求的
看下use.js中的方法

所以写个接口模拟下后端的登录

/**
 * @description: 前端模拟请求
 *
 * @author  wangxihao
 * @email wangxh0108@163.com
**/
@RestController
@RequestMapping("/eduservice/user")
@CrossOrigin        //解决跨域问题
public class TestController {

    @PostMapping("login")
    public R login(){
        return R.ok().data("token","admin");
    }


    @GetMapping("info")
    public R info(){
        return R.ok().data("name","admin").data("roles","[admin]").data("avatar","https://img-blog.csdnimg.cn/dd3b1fea736f47f7bb63ac5601842f70.png#pic_center");
    }

}

然后在前端配置中修改请求的url，与上面的/eduservice/user对应

测试登陆成功

二、跨域问题

现在使用注解@CrossOrigin //解决跨域问题

1、入口文件中调用路由（自己了解）
src/main.js

......
import router from './router' //引入路由模块
......
new Vue({
  el: '#app',
  router, //挂载路由
  store,
  render: h => h(App)
})

2、路由模块中定义路由（自己了解）

src/router/index.js
......
export const constantRouterMap = [
  ......
]
export default new Router({
  ......
  routes: constantRouterMap
})    

三、路由定义

1、复制icon图标
将vue-element-admin/src/icons/svg 中的图标复制到 guli-admin项目中
2、修改路由
修改 src/router/index.js 文件，重新定义constantRouterMap
注意：每个路由的name不能相同

注意 ： 请求地址要和后端对应，import (’@/views/edu/teacher/list’),

 export const constantRouterMap = [
  { path: '/login', component: () => import('@/views/login/index'), hidden: true },
  { path: '/404', component: () => import('@/views/404'), hidden: true },
  // 首页
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    name: 'Dashboard',
    children: [{
      path: 'dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '谷粒学院后台首页', icon: 'dashboard' }
    }]
  },
  // 讲师管理
 //定义路由
    {
      path: '/teacher',
       component: Layout,
       redirect: '/teacher/table',
       name: '讲师管理',
       meta: { title: '讲师管理', icon: 'example' },
       children: [{
               path: 'table',
               name: '讲师列表',
               component: () =>
                   import ('@/views/edu/teacher/list'),
               meta: { title: 'Table', icon: 'table' }
           },
           {
               path: 'save',
               name: '添加讲师',
               component: () =>
                   import ('@/views/edu/teacher/save'),
               meta: { title: 'Tree', icon: 'tree' }
           }
       ]
   },
  { path: '*', redirect: '/404', hidden: true }
]

3、创建vue组件
在src/views文件夹下创建以下文件夹和文件

4、form.vue

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

5、list.vue

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

运行项目发现已成功

四、分页列表

1、定义api
创建文件 src/api/teacher/teacher.js

import request from '@/utils/request'

//讲师列表（条件查询分页）
export default {
    getTeacherListPage(current, limit, teacherQuery) {
        return request({
            url: `/eduservice/teacher/pageTeacher/${current}/${limit}`,
            method: 'post',
            data: teacherQuery
        })
    }


}

2、初始化vue组件
src/views/edu/teacher/list.vue

<template>
  <div class="app-container">
    讲师表单
  </div>
</template>
<script>
// 引入teacher.js文件
import teacher from '@/api/teacher/teacher'

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

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

3、测试
成功得到数据

接着展示在列表中
1、定义api
创建文件 src/api/edu/teacher.js

export default {
    getTeacherListPage(current, limit, teacherQuery) {
        return request({
            url: `/eduservice/teacher/pageTeacher/${current}/${limit}`,
            method: 'post',
            data: teacherQuery
        })
    }
}

2、初始化vue组件
src/views/edu/teacher/list.vue
我直接将方法写上去了 这里就不一步一步写了

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


       <!--查询表单  :inline="true"在一行显示-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="teacherQuery.name" placeholder="讲师名"/>
      </el-form-item>
      <el-form-item>
        <el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔">
          <el-option :value="1" label="高级讲师"/>
          <el-option :value="2" label="首席讲师"/>
        </el-select>
      </el-form-item>
      <el-form-item label="添加时间">
        <el-date-picker
          v-model="teacherQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="teacherQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getlist()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>



    <!-- 表格    list数据     -->
    <!-- v-loading="listLoading"  加载动画 暂时没有 -->
    <el-table
      
      :data="list"
      element-loading-text="数据加载中"
      stripe
      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>
    
     <!-- 分页   当前页   记录   总记录数    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"
    />


  </div>
</template>
<script>
// 引入teacher.js文件
import teacher from "@/api/teacher/teacher";

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

  // },
  data() {
    //定义变量和初始值
    return {
      list: null, // 数据列表 查询出来返回的结果
      total: 0, // 总记录数
      page: 1, // 当前页码
      limit: 5, // 每页记录数
      teacherQuery: {}, // 查询条件
    };
  },
  created() {
    //页面渲染之前执行，一般调用methods中的方法
    this.getlist();
  },
  methods: {
    //创建具体方法，调用teacher.js中的方法
    //讲师列表的方法    page = 1 分页时传参调用方法
    getlist(page = 1) {
        this.page = page;
      teacher
        .getTeacherListPage(this.page, this.limit, this.teacherQuery)
        .then((response) => {
          //请求成功
          //response 为成功返回的数据
          console.log(response);
          this.list = response.data.rows;
          this.total = response.data.total;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 重置
    resetData(){
        this.teacherQuery = {};
        this.getlist()
    },
        
    }
  },
};
</script>

测试成功！

五、删除

1、定义api
src/api/edu/teacher.js

 //通过id删除
    removeDataById(id) {
        return request({
            url: `/eduservice/teacher/${id}`,
            method: 'delete'
        })
    },

2、定义methods
src/views/edu/teacher/list.vue
使用MessageBox 弹框组件

 //删除
    removeDataById(id){
        // alert(id);

         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             //调用teacher中的id
        
            teacher.removeDataById(id)
                .then(response =>{
                alert("删除成功！")
                this.getlist();
            })
            .catch(response =>{
                alert("删除失败！")
            })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })

测试
删除成功！

六、新增

1、定义api
src/api/edu/teacher.js

//添加讲师
    addTeacher(teacher) {
        return request({
            url: `/eduservice/teacher/addTeacher`,
            method: 'post',
            data: teacher
        })
    },

2、初始化组件和方法的定义

<template>
  <div class="app-container">
    讲师添加
    <el-form label-width="120px">
      <el-form-item label="讲师名称">
        <el-input v-model="teacher.name" />
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number
          v-model="teacher.sort"
          controls-position="right"
          :min="0"
        />
      </el-form-item>

      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level" clearable placeholder="请选择">
          <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
          <el-option :value="1" label="高级讲师" />
          <el-option :value="2" label="首席讲师" />
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="teacher.career" />
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input v-model="teacher.intro" :rows="10" type="textarea" />
      </el-form-item>
      <!-- 讲师头像：TODO -->
      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveTeacher"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import teacherApi from "@/api/teacher/teacher";

export default {
  data() {
    return {
      teacher: {
        name: "",
        sort: 0,
        level: 1,
        career: "",
        intro: "",
        avatar: "",
      },
      saveBtnDisabled: false, // 保存按钮是否禁用,
    }
  },
  created() {
  },
  methods: {
    //添加讲师的方法
    saveTeacher() {
      teacherApi.addTeacher(this.teacher).then((response) => {
        //提示信息
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        //跳转到页面
        this.$router.push({ path: "/teacher/table" });
      });
    },
  },
};
</script>

七、修改

1、点击修改的时候做一个路由跳转，使用element-ui组件

在index.js中写路由

  {
                //编辑讲师
                path: 'edit/:id', //:id相当于占位符  可以传参数
                name: 'EduTeacherEdit',
                component: () =>
                    import ('@/views/edu/teacher/save'),
                meta: { title: '编辑讲师', icon: 'tree' },
                hidden: true
            }

2、点击修改的时候要有数据回显，通过getTeacherInfo方法

//数据回显 根据id
    getInfo(id) {
      teacherApi.getTeacherInfo(id).then((response) => {
        this.teacher = response.data.teacher;
      });
    },

3、看下新增（修改）页面save.vue的总代码吧

<template>
  <div class="app-container">
    讲师添加
    <el-form label-width="120px">
      <el-form-item label="讲师名称">
        <el-input v-model="teacher.name" />
      </el-form-item>
      <el-form-item label="讲师排序">
        <el-input-number
          v-model="teacher.sort"
          controls-position="right"
          :min="0"
        />
      </el-form-item>

      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level" clearable placeholder="请选择">
          <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
          <el-option :value="1" label="高级讲师" />
          <el-option :value="2" label="首席讲师" />
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历">
        <el-input v-model="teacher.career" />
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input v-model="teacher.intro" :rows="10" type="textarea" />
      </el-form-item>
      <!-- 讲师头像：TODO -->
      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="updateOrSave"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import teacherApi from "@/api/teacher/teacher";

export default {
  data() {
    return {
      teacher: {
        name: "",
        sort: 0,
        level: 1,
        career: "",
        intro: "",
        avatar: "",
      },
      saveBtnDisabled: false, // 保存按钮是否禁用,
    }
  },
  created() {
    //页面渲染之前执行     如果有id的话 为修改
    console.log(this.$route.params.id);
    
    if (this.$route.params && this.$route.params.id) {
      //从路径获取id
      const id = this.$route.params.id;
      //调用根据id查询的方法
      this.getInfo(id);
    }
  },
  //路由监听事件
   watch: {  //当路由发生变化的时候就会执行    解决点击修改再点击添加的时候 数据回显不会消失问题
    $route(to, from) {
      this.teacher = {};
    }
  },
  methods: {
    //数据回显 根据id
    getInfo(id) {
      teacherApi.getTeacherInfo(id).then((response) => {
        this.teacher = response.data.teacher;
      });
    },
    //判断是新增还是修改    有id就是修改
    updateOrSave(){
      console.log(this.teacher.id);
        if(!this.teacher.id){
          this.saveTeacher()
        }else{
           //修改
          this.updateTeacher()
        }
    },
    //修改讲师
    updateTeacher() {
      teacherApi.updateTeacherInfo(this.teacher).then((response) => {
        //提示信息
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        //跳转到页面
        this.$router.push({ path: "/teacher/table" });
      });
    },
    //添加讲师的方法
    saveTeacher() {
      teacherApi.addTeacher(this.teacher).then((response) => {
        //提示信息
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        //跳转到页面
        this.$router.push({ path: "/teacher/table" });
      });
    },
  },
};
</script>

测试

八、存在问题

vue-router导航切换 时，如果两个路由都渲染同个组件，组件会重（chong）用,
组件的生命周期钩子（created）不会再被调用, 使得组件的一些数据无法根据 path的改变得到更新
因此：
1、我们可以在watch中监听路由的变化，当路由变化时，重新调用created中的内容
2、在init方法中我们判断路由的变化，如果是修改路由，则从api获取表单数据，
如果是新增路由，则重新初始化表单数据

上面代码中已经使用过这个代码

//路由监听事件
   watch: {  //当路由发生变化的时候就会执行    解决点击修改再点击添加的时候 数据回显不会消失问题
    $route(to, from) {
      this.teacher = {};
    }
  },