谷粒学院项目讲师管理

一、讲师列表
- 1、添加讲师列表路由
- 2、创建路由对应的vue页面
- 3、第三步在api文件夹创建teacher.js定义访问的接口地址
二、分页查询
三、条件查询
四、讲师添加
五、讲师删除
六、讲师修改

一、讲师列表

效果图

1、添加讲师列表路由

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' }},{path: 'edit/:id',   name: 'EduTeacherEdit',component: () => import('@/views/edu/teacher/save'),meta: { title: '编辑讲师', noCache: true },hidden: true}]},

2、创建路由对应的vue页面

views/edu/teacher/list

2.1 获取数据

created() { //页面渲染之前执行，一般调用methods定义的方法//调用this.getList() },

 getList(page=1) {this.page = pageteacher.getTeacherListPage(this.page,this.limit,this.teacherQuery).then(response =>{//请求成功//response接口返回的数据//console.log(response)this.list = response.data.rowsthis.total = response.data.totalconsole.log(this.list)   console.log(this.total)}) },

2.2 把请求接口获取的数据在页面进行显示

:data=“list” 绑定从后端获取的数据（this.list = response.data.rows）
prop=“name” json数据中的属性

    <!-- 表格 --><el-table:data="list"borderfithighlight-current-row><el-table-columnlabel="序号"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"/>

3、第三步在api文件夹创建teacher.js定义访问的接口地址

api/edu/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})}
}

二、分页查询

放在 el-table 标签的下方

<el-table>
</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"/>

 //讲师列表的方法getList(page=1) {this.page = pageteacher.getTeacherListPage(this.page,this.limit,this.teacherQuery).then(response =>{//请求成功//response接口返回的数据//console.log(response)this.list = response.data.rowsthis.total = response.data.totalconsole.log(this.list)   console.log(this.total)}) },

三、条件查询

效果图

 <!--查询表单--><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-pickerv-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-pickerv-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>

teacherQuery里面封装的属性，此处可以不定义

 data() { //定义变量和初始值return {teacherQuery:{} //条件封装对象}},

条件重置

 <el-button type="default" @click="resetData()">清空</el-button>

resetData() {//清空的方法//表单输入项数据清空this.teacherQuery = {}//查询所有讲师数据this.getList()},

四、讲师添加

在api文件夹创建teacher.js定义访问的接口地址

data: teacher 将teacher转换成json传到接口中，teacher就是保存的参数

 //添加讲师addTeacher(teacher) {return request({url: `/eduservice/teacher/addTeacher`,method: 'post',data: teacher})},

路由跳转：添加页面回到列表页面
this.$router.push({path:‘/teacher/table’})

//添加讲师的方法saveTeacher() {teacherApi.addTeacher(this.teacher).then(response => {//添加成功//提示信息this.$message({type: 'success',message: '添加成功!'});//回到列表页面 路由跳转this.$router.push({path:'/teacher/table'})})}

五、讲师删除

删除按钮绑定事件

 <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>

删除讲师方法

//引入调用teacher.js文件
import teacher from '@/api/edu/teacher'//删除讲师的方法removeDataById(id) {this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {  //点击确定，执行then方法//调用删除的方法teacher.deleteTeacherId(id).then(response =>{//删除成功//提示信息this.$message({type: 'success',message: '删除成功!'});//回到列表页面this.getList() })}) //点击取消，执行catch方法}

在api文件夹teacher.js定义删除接口的地址

//删除讲师deleteTeacherId(id) {return request({url: `/eduservice/teacher/${id}`,method: 'delete'})},

六、讲师修改

谷粒学院项目讲师管理（二）相关推荐

谷粒学院day5 讲师管理模块的前端实现
day5 讲师管理模块的前端实现目录 day5 讲师管理模块的前端实现 1.登录功能改造 2.跨域问题 3.前端框架开发过程 4.讲师列表的前端实现 5.讲师删除功能的前端实现 6.讲师添加 7. ...
谷粒学院项目对应知识点
前言: 学习的谷粒学院项目,地址:尚硅谷-全栈在线教育项目-谷粒学院[Spring Boot + Spring Cloud Alibaba + Vue.js]_哔哩哔哩_bilibili 根据所学内容 ...
谷粒学院项目笔记6——oss、EasyExcel、课程分类、nginx
尚硅谷谷粒学院项目第六天内容之对象存储oss服务.使用EasyExcel添加课程分类功能.课程列表分类.ningx的使用对象存储oss 打开阿里云官网--对象存储--oss管理控制台创建bucke ...
阿里云短信服务不对个人开放？如何在阿里云市场免费购买短信服务？云市场购买到的短信服务如何使用？（以谷粒学院项目为例）
问题描述: 在做谷粒学院项目时,需要使用阿里云的短信服务用于注册验证,但是阿里云的短信服务目前不对个人开放了,看到弹幕说可以在云市场购买,于是果断尝试了一把,这过程中又遇到头疼的依赖版本兼容问题,好在 ...
【谷粒学院项目开发44】课程大纲——小节的添删
1.后端 2.前端 2.1"添加小节"按钮 2.2点击"添加小节"按钮,弹出表单 2.3 api 2.4 chapter.vue 2.5 "删除小节& ...
尚硅谷项目谷粒学院
尚硅谷项目谷粒学院文章目录尚硅谷项目谷粒学院 Day01 项目介绍和Mybatis-plus 项目介绍: 1 什么是在线教育 1.1 基本概述 1.2 发展潜力 1.3 适用行业项目采用技术 ...
谷粒学院-数据库设计、搭建项目环境、Mybatis-Plus代码生成器
数据库设计规约以下规约只针对本模块,更全面的文档参考<阿里巴巴Java开发手册>:五.MySQL数据库1.库名与应用名称尽量一致2.表名.字段名必须使用小写字母或数字,禁止出现数字开头, ...
Day212.OAuth2、微信二维码登入注册功能、用户登录信息前后端供、讲师列表前后端 -谷粒学院
谷粒学院 OAuth2的使用场景一.OAuth2解决什么问题 1.OAuth2提出的背景照片拥有者想要在云冲印服务上打印照片,云冲印服务需要访问云存储服务上的资源 2.图例资源拥有者:照片拥有者 ...
谷粒学院16万字笔记+1600张配图(十二)——课程管理
项目源码与所需资料链接:https://pan.baidu.com/s/1azwRyyFwXz5elhQL0BhkCA?pwd=8z59 提取码:8z59 文章目录 demo12-课程管理 1.微服 ...

谷粒学院项目讲师管理（二）