谷粒学院day05笔记

讲师管理前端开发

首先，把后台管理系统登录改到本地（临时）
后面添加权限框架 spring security

复制代码
java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

network -> login -> request url -> 修改为本地localhost

dev.env.js -> BASE_API -> 修改为本地localhost

登录调用两个方法，一个是登录，一个是获取用户信息

1. login返回token值
2. info返回 roles name avatar

access-control-allow-origin: 
跨域问题（三个地方【协议 IP 端口号】任何一个不一样）通过一个地址不能访问另外一个地址

跨域解决方式
1. 最常用，RestController注解接口上，加上@CrossOrigin
2. 使用网关解决，nginx代理

options 测试联通服务器效果
get post put delete 真实请求

框架使用过程

学习方式，一般很少从0开始。一般先学别人怎么做，再自己独立研发。

入口文件调用路由（src/main.js） -》 路由模块定义路由（src/router/index.js） -》 添加页面（src/views） -》 添加组件 -》 添加接口 -》 添加功能

1. 讲师列表（分页条件查询）

1.1. 列表页面

列表代码写的意义不大，能改就行了

头衔取值的判断，可以用三元表达式

== 判断值， === 判断具体类型(比如字符串和int类型不同)和值

1.2 分页条

使用element-ui的表单分页条组件的代码，可以直接拷贝

注意传参

1.3 分页条件查询

使用element-ui的表单组件，可以直接拷贝

2. 讲师添加

2.1 添加页面

2.2 路由跳转（重定向）

this.$router.push('/edu/teacher/list')

3. 讲师修改

3.1 数据回显

加隐藏路由，加页面跳转

3.2 数据修改再提交

4. 讲师删除

4.1 用户体验提示框

5. 路由切换问题

点编辑后再点击保存，回显的数据未清除

多次路由跳转到同一个页面，created方法只会执行一次，后面不会执行，所以需要在mounted方法中再次调用。

用vue的监听解决（有变化就会被监听到），类比汽车报警器，有变化就会报警，路由一旦发生变化，就会被监听到。

watch: {
'$route'(to, from) { // 路由变化的方式，路由发生变化，方法就会执行
this.getTeacherInfo()
}
}