在线教育项目04_讲师管理前端开发
一、登录功能(临时)
跨域问题
通过一个地址访问另外一个地址,这个过程中如果有三个地方任何一个不一样,就会出现跨域问题
访问协议 :http
ip地址:都是主机地址
端口号 : 9528、8001 不一致出现跨域问题
解决方式
1、在后端接口controller加@CrossOrigin注解;
2、使用网关解决
框架使用的过程
第一步 添加路由 --router/index.js
第二步 点击路由,显示对应页面内容
第三步 实现页面的具体功能:在api文件夹创建js文件,定义接口地址和参数
第四步 在创建vue页面引入js文件,调用方法实现功能,最后使用element-ui显示数据
二、前端讲师开发
1.讲师列表
第一步 添加路由
第二步 创建路由对应的页面
第三步 在api文件夹创建edu.js定义访问接口的地址
import request from '@/utils/request'
export default{
//1.讲师列表(条件分页查询)
// current当前页,每页记录条数、teacherQuery条件的对象
getTeacherListPage(current,limit,teacherQuery){
return request({
url: `/eduservice/teacher/pageTeacherCondition/${current}/${limit}`,
method: 'post',
//条件的对象,后端用RequestBody获取数据
//data表示把对象转换为json进行传递到接口里
data:teacherQuery
})
}
}
第四步 在讲师列表页面 list.vue页面调用定义的接口方法,得到返回的数据
<template>
<div class="app-container">
讲师表单
</div>
</template>
<script>
//E:/code_path/web_code/vs1010/vue-admin-template-master/src/api/edu
import teacher from '@/api/edu/teacher.js'
export default {
//写核心代码
// data:{
// },
data(){
return{
list:null,
page:1,
limit:10,
total:0,
teacherQuery:{}
}
},
created() {
this.getList()
},
methods:{
getList(){
teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
.then(response =>{
list = response.data.rows
})
.catch(error =>{
console.log(error)
})
}
}
}
</script>
第五步 把请求接口获取到的数据在页面进行显示(利用element-ui)
2.讲师列表添加分页
<!-- 分页 -->
<!-- :是v-bind ,单项绑定
@current-change="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"
/>
3.讲师列表条件查询实现
使用element-ui实现
在列表上添加条件输入的表单,使用v-model实现数据的双向绑定,将查询的参数传入到data数据中;
清空功能:把查询表的条件值清空。然后查询所有数据;
resetData(){//清空的方法
//表单数据清空
//清空对象中的值
this.teacherQuery = {}
//查询所有数据
this.getList()
}
4.讲师列表删除功能
1、在每条记录后面添加删除按钮
2、在按钮上绑定事件
3、在绑定事件的方法里传递要删除讲师的id值
4、在api文件夹teacher.js定义删除接口的地址
5、页面调用,实现删除,删除前弹框确认是否删除
5.讲师列表删除功能
1、点击添加讲师路由,进入到对应的表单页面
2、在表单页面点击保存,提交接口,添加数据库
3、进入api中写添加方法,
4、在页面中进行调用,添加完数据需要跳转到讲师列表,用到路由跳转
5.讲师列表修改功能
1、在每条记录后面添加修改按钮
2、点击修改按钮让数据回显进入表单,根据id回显;
- 根据讲师id查出数据
- 点击修改按钮根据路由跳转,因此要添加一个隐藏路由
3、修改表单回显的数据添加到数据库完成修改
- 数据回显: 到aip中写方法
- 调用该方法实现数据回显
- 因为添加于修改都使用save页面,只有修改时数据回显、
- 判断路径中是否有id值,如果有id值则是修改,如果没有则是添加
- 在aipteacher.js中写修改接口
路由切换问题:
问题:点击修改后再点击添加,还是会有数据回显
原因:路由跳转到同一个页面,create方法只执行一次,不会去执行其中的删除数据回显;我们需要添加一个监听监听路由的变化,路由变化再执行一次设置好清空回显的方法即可;