谷粒学苑_第五天

npm run build
1

package com.lkw.eduservice.controller;

import com.lkw.commonutils.R;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@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");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

npm run dev
1

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

   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

1
2
3
4
5

import request from '@/utils/request'



export function getTeacherListPage(current,limit,teacherQuery) {
  return request({
    //细节:url后面是`不是'
    url: ` http://localhost:8001/eduservice/teacher/pageTeacherCondition/${current}/${limit}`,
    method: 'post',
    //teacherQuery条件对象，后端使用RequestBody获取数据
    //data表示把对象转换json进行传递到接口里面
    data:teacherQuery
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

   
    
1
2
3
4
5
6
7
8
9

添加默认页码:

list.vue完整代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

条件查询

组件代码

            
    
      
        
      
      
        
          
          
        
      
      
        
      
      
        
      
      查 询
      清空
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

清空组件

清空按钮已存在

清空方法:

     resetData(){// 清空的方法
      //表单输入项数据清空
      this.teacherQuery = {}
 
      //查询所有讲师数据
      this.getList
    }
1
2
3
4
5
6
7

记得打逗号

讲师删除

在teacher.js补充方法:

//删除讲师
deleteTeacherId(id){
  return request({
    url: `http://localhost:8001/eduservice/teacher/${id}`,
    method: 'delete'
  })
}
1
2
3
4
5
6
7

在这里用的全地址,因为不写全就访问到localhost:9528了

记得打逗号

在list.vue添加方法:

 removeDataById(id) {
      this.$confirm("此操作将永久删除讲师记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 点击确定，执行then方法
        teacher.deleteTeacherId(id)

          .then((response) => {
            //删除成功
            //提示消息
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            //回到列表页面
            this.getList(this.page);
          });
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

讲师添加

teacher.js添加代码:

注意逗号

import request from '@/utils/request'


export default{

  getTeacherListPage(current,limit,teacherQuery) {
    return request({
      //细节:url后面是`不是'
      url: ` http://localhost:8001/eduservice/teacher/pageTeacherCondition/${current}/${limit}`,
      method: 'post',
      //teacherQuery条件对象，后端使用RequestBody获取数据
      //data表示把对象转换json进行传递到接口里面
      data: teacherQuery
    })
  },
   //删除讲师
   deleteTeacherId(id){
    return request({
      url: ` http://localhost:8001/eduservice/teacher/${id}`,
      method: 'delete'
    })
  },
  //添加讲师
  addTeacher(teacher){
    return request({
      url: ` http://localhost:8001/eduservice/teacher/addTeacher`,
      method: 'post',
      data: teacher
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

在save.vue添加代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

讲师编辑

在src/rou

,
      {
        path: 'save/:id',
        name: 'EduTeacherEdit',
        component: () => import('@/views/edu/teacher/save'),
        meta: { title: '编辑讲师', noCache: true },
        hidden: true
      }
1
2
3
4
5
6
7
8

save/:id的id相当于占位符

修改list.vue的修改按钮的路径

然后,点击修改就会重定向到save路径

数据回显:

定义一个接口在teacher.js

,
  getTeacherInfo(id){
    return request({
      url: `http://localhost:8001/eduservice/teacher/getTeacher/${id}`,
      method: 'get'
    })
  },
1
2
3
4
5
6
7

在save.vue

 //根据讲师id查询方法
    getInfo(id){
      teacherApi.getTeacherInfo(id)
      .then(response=>{
        this.teacher=response.data.teacher
      })
    },

1
2
3
4
5
6
7
8

注意逗号

调用id查询的方法,如果id为null就不调用,有id就查询回显

使用created检查参数

save.vue的created:

    if (this.$route.params && this.$route.params.id) {
      //从路径获取id值
      const id = this.$route.params.id;
      //调用根据id查询的方法
      this.getInfo(id);
    }
1
2
3
4
5
6

teacher.js里添加修改讲师方法:

  ,
      //修改讲师
  updateTeacherInfo(teacher) {
    return request({
      url: `/eduservice/teacher/updateTeacher`,
      method: 'post',
      data: teacher
    })
  }
1
2
3
4
5
6
7
8
9

save.vue添加修改讲师的方法

    ,
        //修改讲师的方法
    updateTeacher(){
      teacherApi.updateTeacherInfo(this.teacher)
        .then(response => {
        //提示信息
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        //回到列表页面 路由跳转
        this.$router.push({ path: "/teacher/table" });
        })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

判断修改还是添加:

更改saveOrUpdate方法的内容:

    saveOrUpdate() {
      //判断是修改还是添加
      if (!this.teacher.id) {
        //添加
        this.saveTeacher();
      } else {
        //修改
        this.updateTeacher();
      }
    },

1
2
3
4
5
6
7
8
9
10
11

修bug

点了修改讲师会出现数据回显,再点添加讲师,数据不会消失,所以添加讲师的时候表单数据清空

可以用vue监听

可以监听id然后调用清空方法

//但是用的新版本的前端模板没有这个情况,该问题跳过