谷粒学院项目笔记5——讲师管理模块前端开发

尚硅谷谷粒学院项目第五天内容之讲师列表、讲师添加、讲师删除、讲师修改功能的实现

模拟登录功能

修改首页登录功能的请求地址

config/dev.env.js中，将BASE_API修改为本地 

开发后台接口

在service_edu模块中，新建controller：EduLoginController

@RestController
@RequestMapping("/eduservice/user")
public class EduLoginController {
    //login
    @PostMapping("login")
    public R login(){
        return R.ok().data("token","admin");
    }
    //info
    @GetMapping("info")
    public R info(){
        return R.ok().data("roles","[admin]").data("name","admin").data("avatar","\"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif\"");
    }
}

修改前端url

在src/api/login.js中，将url改为我们在后端写的url

 重启前端

访问项目首页，报network error

其实不是网络错误，而是跨域

请求应当在同一处转（访问协议、ip、端口要一样），它转出去了，就是跨域了，会报错

解决方式：

（1）在后端接口controller上加上注解：@CrossOrigin

（2） 使用网关解决（后面讲）

重启前后端服务，此时就能登录成功啦

F12可以看到，跨域请求（比如login）会请求两次，第一次是options方式（测试是否能连接上），第二次才是post请求。

前端框架使用流程概述

api文件夹 里定义的js文件负责调用后端的接口，获取数据

views文件夹 里的vue文件负责调用api里的接口 做数据呈现

router文件夹 里的js文件负责路由跳转，即不同的导航栏对应到不同的页面

讲师列表功能

添加路由

在src/views/edu/teacher下创建 list.vue 和 save.vue

在src/router/index.js下的第39行写入（复制原39行照着改）

  {
    path: '/teacher',
    component: Layout,
    redirect: '/teacher/讲师列表',
    name: '讲师管理',
    meta: { title: '讲师管理', icon: 'example' },
    children: [
      {
        path: 'list',
        name: '讲师列表',
        component: () => import('@/views/edu/teacher/list.vue'),
        meta: { title: '讲师列表', icon: 'table' }
      },
      {
        path: 'add',
        name: '添加讲师',
        component: () => import('@/views/edu/teacher/save.vue'),
        meta: { title: '添加讲师', icon: 'tree' }
      }
    ]
  },

 list.vue写入

save.vue写入

保存，做一个简单的路由测试

在 src/api 下创建 teacher/teacher.js

写入

import request from '@/utils/request'

export default{

    //讲师列表（条件分页查询）
    getTeacherListPage(current,limit,teacherQuery){
        return request({
            url:`/eduservice/teacher/pageConditionQueryTeacher/${current}/${limit}`,
            method:'post',
            data:teacherQuery //后端requestBody要json字符串，data能把techerQuery对象转换成json字符串
        })
    }
}

写list.vue

 在后端的controller上加上@CrossOrigin跨域注解

重启后端

测试

浏览器控制台中能得到后端相应的数据

 如果报类型转换异常，检查请求方式是否是post。get请求没有请求体，@RequestBody只能和post请求搭配使用

将得到的数据在页面上呈现

==判断值，===判断值和类型

在list.vue页面添加element-ui表格

浏览器效果

添加分页组件

 修改讲师列表方法

 添加条件查询表单

    
      
        
      

      
        
          
          
        
      

      
        
      
      
        
      

      查询
      清空
    

清空查询条件

 resetData(){
     this.teacherQuery={} //清空查询条件
     this.getList() //查询所有数据
 }

删除讲师

在api/teacher/teacher.js中添加：

 //删除讲师
    deleteTeacherById(id){
        return request({
            url:`/eduservice/teacher/${id}`,
            method:'delete'
        })
    }

在views/edu/teacher/list.vue中添加：

//删除讲师
deleteTeacherById(id){
    this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {  //点击confirmButton后执行
            teacher.deleteTeacherById(id)
                .then(response=>{  //提示信息
                    this.$message({
                        type:'success',
                        message:'删除成功！'
                    })
                })
             this.getList(this.currentPage)
       })
}

测试

添加讲师

后端controller中添加

 queryWrapper.orderByDesc("gmt_create");

在api/teacher/teacher.js中添加：

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

在views/edu/teacher/save.vue中：

修改讲师

在list.vue里修改路由链接

在router/index.js里添加一个隐藏路由

 在save.vue里添加created()：如果路由里有id，说明是修改讲师，需要数据回显

在save.vue里添加查询讲师和修改讲师的方法

//查询讲师信息
        getInfo(id){
            teacherApi.getInfo(id)
              .then(response=>{
                  this.teacher=response.data.teacher
              })
        },
        //修改讲师
        updateTeacher(){
            teacherApi.updateTeacher(this.teacher)
              .then(response=>{
                  this.$message({
                    type:'success',
                    message:'修改成功！'
                  })
              })
            this.$router.push({path:'/teacher/list'})
        }
      }

 在api/teacher.js里添加查询讲师和修改讲师的方法

//获取讲师信息
    getInfo(id){
        return request({
            url:`/eduservice/teacher/queryTeacher/${id}`,
            method:'get'
        })
    },
    //修改讲师
    updateTeacher(teacher){
        return request({
            url:`/eduservice/teacher/updateTeacher`,
            method:'post',
            data:teacher
        })
    }

测试

以上操作存在一个问题，点击修改讲师之后，数据回显，此时，点击添加讲师，数据依然回显，不合理

将created()里的内容提取为init()方法，添加一个路由监视器