1.在router中配置路由菜单
import Vue from 'vue'
import Router from 'vue-router'
// in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading;
// detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading
Vue.use(Router)
/* Layout */
import Layout from '../views/layout/Layout'
/**
* hidden: true if `hidden:true` will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu, whatever its child routes length
* if not set alwaysShow, only more than one route under the children
* it will becomes nested mode, otherwise not show the root menu
* redirect: noredirect if `redirect:noredirect` will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
title: 'title' the name show in submenu and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar,
}
**/
export const constantRouterMap = [
{ path: '/login', component: () => import('@/views/login/index'), hidden: true },
{ path: '/404', component: () => import('@/views/404'), hidden: true },
{
path: '/',
component: Layout,
redirect: '/dashboard',
name: 'Dashboard',
hidden: true,
children: [{
path: 'dashboard',
component: () => import('@/views/dashboard/index')
}]
},
{
path: '/teacher',
component: Layout,
redirect: '/example/table',
name: '讲师管理',
meta: { title: '讲师管理', icon: 'example' },
children: [
{
path: 'list',
name: '讲师列表',
component: () => import('@/views/teacher/list'),
meta: { title: '讲师列表', icon: 'table' }
},
{
path: 'add',
name: '添加讲师',
component: () => import('@/views/teacher/add'),
meta: { title: '添加讲师', icon: 'tree' }
},
{
path: 'add/:id',
name: 'EduTeacherEdit',
component: () => import('@/views/teacher/add'),
meta: { title: '编辑讲师', noCache: true },
hidden: true
}
]
},
{
path: '/example',
component: Layout,
redirect: '/example/table',
name: 'Example',
meta: { title: 'Example', icon: 'example' },
children: [
{
path: 'table',
name: 'Table',
component: () => import('@/views/table/index'),
meta: { title: 'Table', icon: 'table' }
},
{
path: 'tree',
name: 'Tree',
component: () => import('@/views/tree/index'),
meta: { title: 'Tree', icon: 'tree' }
}
]
},
{
path: '/form',
component: Layout,
children: [
{
path: 'index',
name: 'Form',
component: () => import('@/views/form/index'),
meta: { title: 'Form', icon: 'form' }
}
]
},
{
path: '/nested',
component: Layout,
redirect: '/nested/menu1',
name: 'Nested',
meta: {
title: 'Nested',
icon: 'nested'
},
children: [
{
path: 'menu1',
component: () => import('@/views/nested/menu1/index'), // Parent router-view
name: 'Menu1',
meta: { title: 'Menu1' },
children: [
{
path: 'menu1-1',
component: () => import('@/views/nested/menu1/menu1-1'),
name: 'Menu1-1',
meta: { title: 'Menu1-1' }
},
{
path: 'menu1-2',
component: () => import('@/views/nested/menu1/menu1-2'),
name: 'Menu1-2',
meta: { title: 'Menu1-2' },
children: [
{
path: 'menu1-2-1',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
name: 'Menu1-2-1',
meta: { title: 'Menu1-2-1' }
},
{
path: 'menu1-2-2',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
name: 'Menu1-2-2',
meta: { title: 'Menu1-2-2' }
}
]
},
{
path: 'menu1-3',
component: () => import('@/views/nested/menu1/menu1-3'),
name: 'Menu1-3',
meta: { title: 'Menu1-3' }
}
]
},
{
path: 'menu2',
component: () => import('@/views/nested/menu2/index'),
meta: { title: 'menu2' }
}
]
},
{
path: 'external-link',
component: Layout,
children: [
{
path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
meta: { title: 'External Link', icon: 'link' }
}
]
},
{ path: '*', redirect: '/404', hidden: true }
]
export default new Router({
// mode: 'history', //后端支持可开
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
2.添加完成路由菜单后，在views文件夹中添加对应的组件，先添加简单的页面元素。这里面添加的组件一定要和上面配置的路由中保持一致。在src文件夹下的views文件夹下创建teacher文件夹，然后在该文件夹下分别创建list、add组件。创建完该组件后首先添加简单的页面元素
3.添加了简单的页面元素后，就需要在api文件中创建对应的js文件向后端发送请求。此文件命名为teacher.js
import request from '@/utils/request'
export default {
// 带条件的分页查询讲师列表
getTeacherPageVo(current, limit, teacherQuery){
return request({
url: `/eduservice/eduteacher/getTeacherPageVo/${current}/${limit}`,
method: 'post',
data: teacherQuery // 转换成json传递
})
},
// 根据id删除讲师
delTeacher(id){
return request({
url: `/eduservice/eduteacher/${id}`,
method: 'delete'
})
},
// 添加讲师
addTeacher(eduTeacher){
return request({
url: `/eduservice/eduteacher/addTeacher`,
method: 'post',
data: eduTeacher // 转换成json传递
})
},
// 根据id查询讲师
getTeacherById(id){
return request({
url: `/eduservice/eduteacher/getTeacherById/${id}`,
method: 'get'
})
},
// 修改讲师
updateTeacher(eduTeacher){
return request({
url: `/eduservice/eduteacher/updateTeacher`,
method: 'post',
data: eduTeacher // 转换成json传递
})
}
}4.发送请求的api创建完成后，就需要对页面从后端获取的数据进行渲染
list.vue的文件内容如下
<template>
<div id="app-container">
讲师列表
<!--查询表单-->
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-input v-model="teacherQuery.name" placeholder="讲师名"/>
</el-form-item>
<el-form-item>
<el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔">
<el-option :value="1" label="高级讲师"/>
<el-option :value="2" label="首席讲师"/>
</el-select>
</el-form-item>
<el-form-item label="添加时间">
<el-date-picker
v-model="teacherQuery.begin"
type="datetime"
placeholder="选择开始时间"
value-format="yyyy-MM-dd HH:mm:ss"
default-time="00:00:00"
/>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="teacherQuery.end"
type="datetime"
placeholder="选择截止时间"
value-format="yyyy-MM-dd HH:mm:ss"
default-time="00:00:00"
/>
</el-form-item>
<el-button type="primary" icon="el-icon-search" @click="getTeacherPageQuery()">查询</el-button>
<el-button type="default" @click="resetData()">清空</el-button>
</el-form>
<el-table
v-loading="listLoading"
:data="list"
element-loading-text="数据加载中"
border
fit
highlight-current-row
>
<el-table-column label="序号" width="70" align="center">
<template slot-scope="scope">{{ (current - 1) * limit + scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="name" label="名称" width="80"/>
<el-table-column label="头衔" width="80">
<template slot-scope="scope">{{ scope.row.level===1?'高级讲师':'首席讲师' }}</template>
</el-table-column>
<el-table-column prop="intro" label="资历"/>
<el-table-column prop="gmtCreate" label="添加时间" width="160"/>
<el-table-column prop="sort" label="排序" width="60"/>
<el-table-column label="操作" width="200" align="center">
<template slot-scope="scope">
<router-link :to="'/teacher/add/'+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="removeDataById(scope.row.id)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<el-pagination
:current-page="current"
:page-size="limit"
:total="total"
style="padding: 30px 0; text-align: center;"
layout="total, prev, pager, next, jumper"
@current-change="getTeacherPageQuery"
/>
</div>
</template>
<script>
import teacher from "@/api/teacher";
export default {
data() {
return {
current: 1, // 当前页
limit: 10, // 每页显示多少行
teacherQuery: {}, //查询条件
list: [], //数据列表
total: 0
};
},
created() {
this.getTeacherPageQuery();
},
methods: {
// 带条件的分页查询讲师列表
getTeacherPageQuery(current = 1) {
this.current = current;
teacher
.getTeacherPageVo(this.current, this.limit, this.teacherQuery)
.then(response => {
console.log(response);
this.list = response.data.list;
this.total = response.data.total;
});
},
// 清空
resetData() {
this.teacherQuery = {};
this.getTeacherPageQuery();
},
// 删除讲师
removeDataById(id) {
this.$confirm("此操作将永久删除该讲师, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
teacher.delTeacher(id).then(response => {
console.log("删除成功...");
this.getTeacherPageQuery();
this.$message({
type: "success",
message: "删除成功!"
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
});
}
}
};
</script>
add.vue的文件内容如下
<template>
<div class="app-container">
讲师表单
<el-form label-width="120px">
<el-form-item label="讲师名称">
<el-input v-model="eduTeacher.name"/>
</el-form-item>
<el-form-item label="讲师排序">
<el-input-number v-model="eduTeacher.sort" controls-position="right" min="0"/>
</el-form-item>
<el-form-item label="讲师头衔">
<el-select v-model="eduTeacher.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="eduTeacher.career"/>
</el-form-item>
<el-form-item label="讲师简介">
<el-input v-model="eduTeacher.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>
import teacher from "@/api/teacher";
export default {
data() {
return {
eduTeacher: {}, //表单数据
saveBtnDisabled: false // 按钮是否不可操作
};
},
created() {
if (this.$route.params && this.$route.params.id) {
console.log("this.$route.params.id:" + this.$route.params.id);
teacher.getTeacherById(this.$route.params.id).then(response => {
this.eduTeacher = response.data.eduTeacher;
});
} else {
}
},
methods: {
saveOrUpdate() {
if(this.eduTeacher.id){
// 如果id存在就进行修改操作
this.updateTeacherInfo()
}else{
// 如果id不存在就进行添加操作
this.addTeacher()
}
},
// 添加讲师
saveTeacher() {
teacher.addTeacher(this.eduTeacher).then(response => {
// 提示成功
this.$message({
type: "success",
message: "添加成功!"
});
// 路由跳转
this.$router.push({ path: "/teacher/list" });
});
},
// 修改讲师
updateTeacherInfo() {
teacher.updateTeacher(this.eduTeacher).then(response => {
// 提示成功
this.$message({
type: "success",
message: "修改成功!"
});
// 路由跳转
this.$router.push({ path: "/teacher/list" });
});
}
}
};
</script>
对上面的添加和修改模块进行说明：因为添加和修改模块使用的是同一个组件add.vue。但是二者在使用该组件时使用方法不同。这个页面有一个保存按钮。当进行新增讲师的时候，进入该组件时表单里面的各项都是空的，再填写完成表单之后，点击保存按钮，会触发保存saveOrUpdate()的方法，但是执行该方法不能确定是进行新增操作还是进行修改操作。在讲师管理页面中有一个修改的按钮，点击后会进行路由跳转操作，并且这个路由跳转需要携带这一行记录的id。再点击修改按钮后会携带需要修改的这条记录的id然后跳转到新增页面并进行数据回显。要想完成此操作必须要在router中增加携带参数的路由
{
path: 'add',
name: '添加讲师',
component: () => import('@/views/teacher/add'),
meta: { title: '添加讲师', icon: 'tree' }
},
{
path: 'add/:id',
name: 'EduTeacherEdit',
component: () => import('@/views/teacher/add'),
meta: { title: '编辑讲师', noCache: true },
hidden: true
}这两个路由是路由到同一个页面，但是功能不同，一个是带参数一个不带参数。
this.$router.push({ path: "/teacher/list" });上面是进行路由跳转的语句。新增和修改都会使用上面的语句进行路由跳转。但是在跳转的过程中修改是带参数id的，新增不带参数直接跳转到该页面。如果携带了参数id要调用后台根据id查询的方法进行数据回显。数据回显的时候通过判断this.$route.params是否为空以this.$route.params.id是否存在来判断。如果这两个值都存在，说明是进行修改操作，在这个页面一加载时就进行数据回显；如果这两个值不存在就进行的新增操作，页面加载时所有的表单项都是空的。这个页面保存按钮如何判断是新增还是修改操作。通过判断id是否存在，存在就是进行修改操作，通过js调用后台的修改接口；不存在就是进行新增操作，通过后台调用js的新增接口。保存完成后又会进行页面跳转，跳转到讲师列表
扫一扫
882
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
