request.js
import axios from 'axios' import { Message, MessageBox } from 'element-ui' import store from '../store' import { getToken } from '@/utils/auth' // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // api 的 base_url timeout: 5000 // 请求超时时间 }) // request拦截器 service.interceptors.request.use( config => { if (store.getters.token) { config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改 } return config }, error => { // Do something with request error console.log(error) // for debug Promise.reject(error) } ) // response 拦截器 service.interceptors.response.use( response => { /** * code为非20000是抛错 可结合自己业务进行修改 */ const res = response.data if (res.code !== 20000) { Message({ message: res.message, type: 'error', duration: 5 * 1000 }) // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; if (res.code === 50008 || res.code === 50012 || res.code === 50014) { MessageBox.confirm( '你已被登出,可以取消继续留在该页面,或者重新登录', '确定登出', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' } ).then(() => { store.dispatch('FedLogOut').then(() => { location.reload() // 为了重新实例化vue-router对象 避免bug }) }) } return Promise.reject('error') } else { return response.data } }, error => { console.log('err' + error) // for debug Message({ message: error.message, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } ) export default service
teacher.js
import request from '@/utils/request' export default { //1 讲师列表(条件查询分页) //current当前页 limit每页记录数 teacherQuery条件对象 getTeacherListPage(current,limit,teacherQuery) { return request({ //url: '/eduservice/teacher/pageTeacherCondition/'+current+"/"+limit, url: `/eduservice/teacher/pageTeacherCondition/${current}/${limit}`, method: 'post', //teacherQuery条件对象,后端使用RequestBody获取数据 //data表示把对象转换json进行传递到接口里面 data: teacherQuery }) }, //删除讲师 deleteTeacherId(id) { return request({ url: `/eduservice/teacher/${id}`, method: 'delete' }) }, //添加讲师 addTeacher(teacher) { return request({ url: `/eduservice/teacher/addTeacher`, method: 'post', data: teacher }) }, //根据id查询讲师 getTeacherInfo(id) { return request({ url: `/eduservice/teacher/getTeacher/${id}`, method: 'get' }) }, //修改讲师 updateTeacherInfo(teacher) { return request({ url: `/eduservice/teacher/updateTeacher`, method: 'post', data: teacher }) } }
list.vue
<template> <div class="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="getList()">查询</el-button> <el-button type="default" @click="resetData()">清空</el-button> </el-form> <!-- 表格 --> <el-table :data="list" border fit highlight-current-row> <el-table-column label="序号" width="70" align="center"> <template slot-scope="scope"> {{ (page - 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/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="removeDataById(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页 --> <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" /> </div> </template> <script> //引入调用teacher.js文件 import teacher from '@/api/edu/teacher' export default { //写核心代码位置 // data:{ // }, data() { //定义变量和初始值 return { list:null,//查询之后接口返回集合 page:1,//当前页 limit:10,//每页记录数 total:0,//总记录数 teacherQuery:{} //条件封装对象 } }, created() { //页面渲染之前执行,一般调用methods定义的方法 //调用 this.getList() }, methods:{ //创建具体的方法,调用teacher.js定义的方法 //讲师列表的方法 getList(page=1) { this.page = page teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery) .then(response =>{//请求成功 //response接口返回的数据 //console.log(response) this.list = response.data.rows this.total = response.data.total console.log(this.list) console.log(this.total) }) }, resetData() {//清空的方法 //表单输入项数据清空 this.teacherQuery = {} //查询所有讲师数据 this.getList() }, //删除讲师的方法 removeDataById(id) { this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { //点击确定,执行then方法 //调用删除的方法 teacher.deleteTeacherId(id) .then(response =>{//删除成功 //提示信息 this.$message({ type: 'success', message: '删除成功!' }); //回到列表页面 this.getList() }) }) //点击取消,执行catch方法 } } } </script>
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="请选择"> <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> import teacherApi from '@/api/edu/teacher' export default { data() { return { teacher:{ name: '', sort: 0, level: 1, career: '', intro: '', avatar: '' }, saveBtnDisabled:false // 保存按钮是否禁用, } }, created() { //页面渲染之前执行 this.init() }, watch: { //监听 $route(to, from) { //路由变化方式,路由发生变化,方法就会执行 this.init() } }, methods:{ init() { //判断路径有id值,做修改 if(this.$route.params && this.$route.params.id) { //从路径获取id值 const id = this.$route.params.id //调用根据id查询的方法 this.getInfo(id) } else { //路径没有id值,做添加 //清空表单 this.teacher = {} } }, //根据讲师id查询的方法 getInfo(id) { teacherApi.getTeacherInfo(id) .then(response => { this.teacher = response.data.teacher }) }, saveOrUpdate() { //判断修改还是添加 //根据teacher是否有id if(!this.teacher.id) { //添加 this.saveTeacher() } else { //修改 this.updateTeacher() } }, //修改讲师的方法 updateTeacher() { teacherApi.updateTeacherInfo(this.teacher) .then(response => { //提示信息 this.$message({ type: 'success', message: '修改成功!' }); //回到列表页面 路由跳转 this.$router.push({path:'/teacher/table'}) }) }, //添加讲师的方法 saveTeacher() { teacherApi.addTeacher(this.teacher) .then(response => {//添加成功 //提示信息 this.$message({ type: 'success', message: '添加成功!' }); //回到列表页面 路由跳转 this.$router.push({path:'/teacher/table'}) }) } } } </script>