本文详细介绍了如何改造后台系统登录接口以解决跨域问题，并在前端实现讲师列表的展示、分页、条件查询及删除功能。同时，还涵盖了讲师的新增和修改操作，包括前端页面组件的创建和API接口的调用。整个过程涉及Vue.js、Element UI和Spring Boot等技术。
一、后台系统登录功能改造
把登录的请求接口换成我们自己的接口地址。注意跨域问题。
Contorller 代码：
@CrossOrigin
@RestController
@RequestMapping("/eduService/user")
public class EduLoginController {
@PostMapping("/login")
public Result login() {
Map<String, Object> map = new HashMap<>();
map.put("token", "admin");
return Result.ok().data(map);
}
@GetMapping("/info")
public Result info() {
Map<String, Object> map = new HashMap<>();
map.put("roles", "[admin]");
map.put("name", "admin");
map.put("avatar", "http://yhstore.top/oneblog/20210823181042333.png");
return Result.ok().data(map);
}
}
二、讲师列表前端实现
1、添加路由
修改vue-admin-template-master\src\router\index.js 文件
{
path: '/teacher',
component: Layout,
redirect: '/teacher/table',
name: '讲师管理',
meta: { title: '讲师管理', icon: 'example' },
children: [
{
path: 'table',
name: '讲师列表',
component: () => import('@/views/edu/teacher/list'),
meta: { title: '讲师列表', icon: 'table' }
},
{
path: 'save',
name: '添加讲师',
component: () => import('@/views/edu/teacher/save'),
meta: { title: '添加讲师', icon: 'tree' }
}
]
}
2、创建路由对应的页面
3、定义接口地址
import request from '@/utils/request'
export default {
// 1 讲师列表
getTeacherListPage(page, pageSize, teacherQuery) {
return request({
// url: '/eduservice/teacher/pageTeacherCondition',
url: `/eduservice/teacher/pageTeacherCondition/${page}/${pageSize}`,
method: 'post',
data: teacherQuery
})
}
}
4、页面调用接口方法
<template>
<div class="app-container">
<el-table
:data="list"
style="width: 100%">
<el-table-column
prop="id"
label="id"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="intro"
label="介绍">
</el-table-column>
<el-table-column
prop="career"
label="资历">
</el-table-column>
<el-table-column
prop="level"
label="头衔">
<template slot-scope="scope">
{{scope.row.level === 1 ? '高级讲师' : '首席讲师'}}
</template>
</el-table-column>
<el-table-column
label="头像">
<template slot-scope="scope">
<img src="scope.row.avatar"/>
</template>
</el-table-column>
<el-table-column
prop="gmtCreate"
label="添加时间">
</el-table-column>
</el-table>
</div>
</template>
<script>
import teacher from "@/api/teacher/teacher.js";
export default {
data() {
return {
list: null,
page: 1,
pageSize: 10,
total: 0,
teacherQuery: {}
}
},
created() {
this.getList();
},
methods: {
getList() {
teacher.getTeacherListPage(this.page, this.pageSize, this.teacherQuery)
.then(response => {
// console.log(response);
this.list = response.data.records;
this.total = response.data.total;
})
.catch(error => {
console.log(error);
})
}
}
}
</script>
5、后端配置跨域
在 Controller 类上添加注解 @CrossOrigin。
6、进行测试
三、讲师列表分页前端实现
1、分页实现
（1）getList() 方法修改
getList(page = 1) {
this.page = page;
teacher.getTeacherListPage(this.page, this.pageSize, this.teacherQuery)
.then(response => {
// console.log(response);
this.list = response.data.records;
this.total = response.data.total;
})
.catch(error => {
console.log(error);
})
}
（2）添加分页组件
<!--分页组件-->
<el-pagination
background
layout="prev, pager, next,total,jumper"
:total="total"
:page-size="pageSize"
style="padding: 30px 0; text-align: center"
:current-page="page"
@current-change="getList">
</el-pagination>
（3）测试结果
2、讲师条件查询实现
（1）添加组件
<!--多条件查询表单-->
<el-form
:inline="true"
class="demo-form-inline"
style="margin-left: 20px; margin-top: 12px;"
>
<el-form-item label="名称">
<el-input
v-model="teacherQuery.name"
placeholder="请输入名称"
></el-input>
</el-form-item>
<el-form-item label="级别">
<el-select v-model="teacherQuery.level" placeholder="讲师头衔">
<el-option label="高级讲师" :value="1"></el-option>
<el-option label="特级讲师" :value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="添加时间">
<el-time-picker
placeholder="选择开始时间"
v-model="teacherQuery.begin"
value-format="yyyy-MM-dd HH:mm:ss"
default-time="00:00:00"
type="datetime"
></el-time-picker>
</el-form-item>
<el-form-item>
<el-time-picker
placeholder="选择截止时间"
v-model="teacherQuery.end"
value-format="yyyy-MM-dd HH:mm:ss"
default-time="00:00:00"
type="datetime"
></el-time-picker>
</el-form-item>
<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-item>
</el-form>
（2）添加方法
//清空方法
resetData() {
//表单输入项数据清空
this.teacherQuery = {};
//查询所有讲师数据
this.getList();
四、讲师删除前端实现
1、添加 API
teacher.js 文件中：
removeById(id){
return request({
url: `/eduservice/teacher/deleteTeacherById/${id}`,
method: 'delete',
})
}
2、添加方法
list.vue 中添加方法
removeById(id) {
this.$confirm("此操作将永久删除该讲师记录, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
//点击确定，执行then方法
teacher.removeById(id)
.then((resp) => {//删除成功
//提示信息
this.$message({
type: "success",
message: "删除成功!",
});
//刷新页面
this.getList();
});
3、添加组件
<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="removeById(scope.row.id)"
>删除</el-button
>
</template>
</el-table-column>
五、讲师添加前端实现
1、添加 API
teacher.js 中添加方法：
//新增讲师
saveTeacher(teacher){
return request({
url: `/eduservice/teacher/addTeacher`,
method: `post`,
data: teacher
})
2、添加组件
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="saveOrUpdate"
>保存</el-button
>
</el-form-item>
</el-form>
</div>
</template>
<script>
//引入对应的新增api方法
import teacherApi from "@/api/teacher/teacher.js";
export default {
data() {
return {
teacher: {
name: "",
sort: 0,
level: 1,
career: "",
intro: "",
avatar: "",
},
saveBtnDisabled: false, // 保存按钮是否禁用,
};
},
methods: {
saveOrUpdate() {
this.saveBtnDisabled = true;
this.saveData();
},
// 保存
saveData() {
teacherApi.saveTeacher(this.teacher).then((resp) => {//添加成功
//提示信息
this.$message({
message: "添加讲师记录成功",
type: "success",
});
//回到讲师列表 路由跳转
this.$router.push({path: '/teacher/table'})
});
},
},
};
</script>
六、讲师修改前端实现
1、添加 API
teacher.js 中添加：
//修改讲师信息
updateTeacherInfo(teacher){
return request({
url: `/eduservice/teacher/updateTeacherById`,
method: `post`,
data: teacher
})
}
2、添加方法
save.vue 添加方法：
//修改讲师的方法
updateTeacher() {
teacherApi.updateTeacherInfo(this.teacher).then((resp) => {
//提示信息
this.$message({
message: "修改讲师记录成功",
type: "success",
});
//回到讲师列表 路由跳转
this.$router.push({ path: "/teacher/table" });
});
}
将修改和添加方法进行合并：
saveOrUpdate() {
//判断修改还是新增操作
//根据teacher对象是否有id值来判断
if (!this.teacher.id) {
//没有id值，做【新增操作】
this.saveBtnDisabled = true;
this.saveData();
}else{
//有id值，做【修改操作】
this.updateTeacher()
}
}
扫一扫
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
