基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端

🔎这里是在线教育，关注我学习Java不迷路
👍如果对你有帮助，给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️

👀专栏介绍

项目目前主要更新在线教育，一起学习一起进步。

👀本期介绍

本期主要介绍基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端

资料获取

链接：https://pan.baidu.com/s/12tchZo7zwmvMqWBNY9BLog 
提取码：8888 

文章目录

1.传智在线前端工程环境搭建

1.1 vue-element-admin 概述

1.2 安装

1.3 vue-admin-template介绍

1.4 安装

2.后台管理系统前端优化

2.1 修改项目信息

2.2 如果需要修改端口号

2.3 项目的目录结构

2.4 运行项目

2.5 登录页修改

2.6 页面零星修改

2.6.1 标题

2.6.2 国际化设置

2.6.3 导航栏文字

2.6.4 关闭校验(必做)

3.前端路由实现分析

3.1入口文件中调用路由

3.2 定义路由模块

3.3 编写路由模块文件

3.3.1 配置一个子路由

3.3.2 配置多个子路由

3.4 编写教师路由对应的文件

4. 后端接口分析

4.1 访问前缀

4.2 axios工具类配置

4.2.1 查看工具类

4.2.2 修改工具类

4.2.3 禁用模拟数据

4.3 自定义后端接口

4.3.1 修改用户登录文件

4.3.2 教师接口文件

4.3.2 使用接口

5.后台管理-讲师管理-前端实现

5.1 查询所有

5.1.1 需求

5.1.2 表格渲染

5.2分页列表

5.2.1定义api

5.2.2 分页实现

5.2.3 条件

5.2.4 条件表单

5.2.5 测试

5.3 新增

5.3.1 定义api

5.3.2 显示添加页面

5.3.3 实现新增功能

5.3.4 扩展：关闭选项卡分析

5.4 修改-回显

5.4.1 定义回显api

5.4.2 显示修改弹出框

5.4.3 调用回显api

5.4.4 测试回显

5.4.5 定义修改api

5.4.6 调用修改api 

5.4.7 测试修改

5.5 删除

5.5.1定义api 

5.5.2 调用删除api

5.5.3 测试

5.7 批量删除

5.7.1 后端实现 

5.7.2 定义 api 

5.7.3 前端多选

5.7.4 调用批量删除 api

5.7.5 批量按钮

5.7.6 测试

传智在线

1.传智在线前端工程环境搭建

1.1 vue-element-admin 概述

  • vue element admin 是 基于 Element ui一个半成品项目，已经完成了通用功能。

    • 封装了一些特有的js

    • 封装了一些组件

  • vue-element-admin是基于element-ui 的一套后台管理系统集成方案。

功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能

GitHub地址：GitHub - PanJiaChen/vue-element-admin: A magical vue admin https://panjiachen.github.io/vue-element-admin

项目在线预览：Vue Element Admin

1.2 安装

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"># 解压压缩包</span>
<span style="color:#aa5500"># 进入目录</span>
<span style="color:#3300aa">cd</span> vue-element-admin-master
<span style="color:#aa5500"># 安装依赖</span>
npm install
<span style="color:#aa5500"># 启动。执行后，浏览器自动弹出并访问http://localhost:9527/</span>
npm run dev</span></span>

1.3 vue-admin-template介绍

vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。

GitHub地址：GitHub - PanJiaChen/vue-admin-template: a vue2.0 minimal admin template

建议：你可以在 vue-Element-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

1.4 安装

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"># 解压压缩包</span>
<span style="color:#aa5500"># 进入目录</span>
<span style="color:#3300aa">cd</span> vue-admin-template-master
<span style="color:#aa5500"># 安装依赖</span>
npm install
<span style="color:#aa5500"># 启动。执行后，浏览器自动弹出并访问http://localhost:9527/</span>
npm run dev</span></span>

2.后台管理系统前端优化

2.1 修改项目信息

package.json

<span style="background-color:#f8f8f8"><span style="color:#333333">  <span style="color:#aa1111">"name"</span>: <span style="color:#aa1111">"zx-study"</span>,
  <span style="color:#aa1111">"version"</span>: <span style="color:#aa1111">"3.1.0"</span>,
  <span style="color:#aa1111">"description"</span>: <span style="color:#aa1111">"传智在线后台管理系统"</span>,
  <span style="color:#aa1111">"author"</span>: <span style="color:#aa1111">"liangtong <itcast_lt@163.com>"</span>,</span></span>

2.2 如果需要修改端口号

  • 在element-ui-admin 最新版本中，使用vue-cli@3构建项目，

  • vue-cli@3构建的项目，核心配置文件 ==vue.config.js==

  • 默认端口号

  • npm 配置端口号（注意=等左右没有空格）

    <span style="background-color:#f8f8f8">npm run dev --port=8888</span>

  • vue 运行环境中配置端口号

    <span style="background-color:#f8f8f8">port=7777</span>

2.3 项目的目录结构

  • 根目录：

.

├── build // 构建脚本

├── mock // 模拟数据服务

├── node_modules // 项目依赖模块 *

├── plop-templates // 模块生成工具

├── public // 静态资源目录，build之后，public目录下内容不合并，不压缩，直接拷贝到dist中

├── src //项目源代码 *

├── test // 测试程序目录

├── .env.development //开发环境下配置文件，VUE_APP_BASE_API访问路径前缀

├── .env.production //生产环境下配置文件，VUE_APP_BASE_API访问路径前缀

├── package.json // 项目信息和依赖配置 *

└── vue.config.js // vue的核心配置文件 *

  • src目录

src

├── api // 接口目录 ，发送ajax代码 *

├── assets //静态资源目录，在build时，资源进行压缩、合并等操作。

├── components //公共组件目录，非公共组件在各自view下维护

├── directive //指令目录

├── filters // 过滤器目录

├── icons //svg icon

├── router // 路由表 *

├── store // 存储 vuex *

├── styles // 各种样式

├── utils // 公共工具，非公共工具，在各自view下维护 *

├── views // 各种layout 项目中所有的页面都放在此处

├── vendor // 工具（excel、zip）

├── App.vue //项目顶层组件

├── main.js //项目入口文件

├── permission.js //认证入口

└── settings.js 项目内容配置文件（项目标题）

2.4 运行项目

<span style="background-color:#f8f8f8"><span style="color:#333333">npm run dev</span></span>

2.5 登录页修改

  • src/views/login/index.vue（登录组件），将Login修改成登录

2.6 页面零星修改

2.6.1 标题

2.6.2 国际化设置

打开 src/main.js，修改element ui 的语言为 zh-CN，使用中文语言环境，例如：日期时间组件

<span style="background-color:#f8f8f8"><span style="color:#333333">import enLang from 'element-ui/lib/locale/lang/zh-CN' //i18n</span></span>

2.6.3 导航栏文字

  • src/layout/index.vue 布局核心页面

    • src/layout/components/Navbar.vue 导航页面

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">el-dropdown-menu</span> <span style="color:#0000cc">slot</span>=<span style="color:#aa1111">"dropdown"</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">router-link</span> <span style="color:#0000cc">to</span>=<span style="color:#aa1111">"/profile/index"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>Profile<span style="color:#117700"></</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>
  <span style="color:#117700"></</span><span style="color:#117700">router-link</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">router-link</span> <span style="color:#0000cc">to</span>=<span style="color:#aa1111">"/"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>控制台<span style="color:#117700"></</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>
  <span style="color:#117700"></</span><span style="color:#117700">router-link</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">target</span>=<span style="color:#aa1111">"_blank"</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"https://github.com/PanJiaChen/vue-element-admin/"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>Github<span style="color:#117700"></</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>
  <span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">target</span>=<span style="color:#aa1111">"_blank"</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"https://panjiachen.gitee.io/vue-element-admin/"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>在线演示<span style="color:#117700"></</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>
  <span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">target</span>=<span style="color:#aa1111">"_blank"</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"https://panjiachen.github.io/vue-element-admin-site/#/"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>Docs帮助文档<span style="color:#117700"></</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>
  <span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">el-dropdown-item</span> <span style="color:#0000cc">divided</span> <span style="color:#0000cc">@click.native</span>=<span style="color:#aa1111">"logout"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">span</span> <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"display:block;"</span><span style="color:#117700">></span>退出<span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>
  <span style="color:#117700"></</span><span style="color:#117700">el-dropdown-item</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">el-dropdown-menu</span><span style="color:#117700">></span></span></span>

2.6.4 关闭校验(必做)

  • element-ui-admin 默认使用 eslint 代码检查工具

  • 例如：注释后面没有添加空格

  • 方式1：忽略所有文件的校验

  • 方式2：关闭提示，在vue.config.js文件中，将 lintOnSave 修改成 false

    <span style="background-color:#f8f8f8">  <span style="color:#aa5500">// 校验默认开发状态开启</span>
  <span style="color:#aa5500">// lintOnSave: process.env.NODE_ENV === 'development',</span>
  <span style="color:#000000">lintOnSave</span>: <span style="color:#221199">false</span>,</span>

3.前端路由实现分析

3.1入口文件中调用路由

  • src/main.js

3.2 定义路由模块

  • src/router/index.js

  • 步骤1：创建自定义路由文件 @/router/modules/teacher.js

  • 步骤2：导入自定义路由文件

    <span style="background-color:#f8f8f8">import teacherRouter from './modules/teacher'      //自定义模块--老师模块</span>

  • 步骤3：启用自定义模块路由

    <span style="background-color:#f8f8f8"> teacherRouter,      //自定义模块--老师模块</span>

3.3 编写路由模块文件

  • 创建 @/router/modules/teacher.js

3.3.1 配置一个子路由

  • 修改teacher.js

    <span style="background-color:#f8f8f8"><span style="color:#aa5500">/** When your routing table is too long, you can split it into small modules **/</span>
​
<span style="color:#770088">import</span> <span style="color:#0000ff">Layout</span> <span style="color:#770088">from</span> <span style="color:#aa1111">'@/layout'</span>
​
<span style="color:#770088">const</span> <span style="color:#0000ff">teacherRouter</span> <span style="color:#981a1a">=</span> {
  <span style="color:#000000">path</span>: <span style="color:#aa1111">'/teacher'</span>,           <span style="color:#aa5500">// 当前模块前缀路径，必须以/开头</span>
  <span style="color:#000000">component</span>: <span style="color:#000000">Layout</span>,          <span style="color:#aa5500">// 采用布局组件显示当前模块【默认】</span>
  <span style="color:#000000">redirect</span>: <span style="color:#aa1111">'/teacher/list'</span>,  <span style="color:#aa5500">// “教师管理”默认显示路由</span>
  <span style="color:#000000">name</span>: <span style="color:#aa1111">'教师管理'</span>,            <span style="color:#aa5500">// 路由名称</span>
  <span style="color:#000000">meta</span>: {
    <span style="color:#000000">title</span>: <span style="color:#aa1111">'教师管理'</span>,         <span style="color:#aa5500">// 一级菜单名称，children.length==0 隐藏</span>
    <span style="color:#000000">icon</span>: <span style="color:#aa1111">'table'</span>             <span style="color:#aa5500">// 一级菜单图标，children.length==0 隐藏</span>
  },
  <span style="color:#000000">children</span>: [
    {
      <span style="color:#000000">path</span>: <span style="color:#aa1111">'list'</span>,
      <span style="color:#000000">component</span>: () <span style="color:#981a1a">=></span> <span style="color:#770088">import</span>(<span style="color:#aa1111">'@/views/edu/teacher/list'</span>),
      <span style="color:#000000">name</span>: <span style="color:#aa1111">'教师列表'</span>,
      <span style="color:#000000">meta</span>: { <span style="color:#000000">title</span>: <span style="color:#aa1111">'教师列表'</span> }   <span style="color:#aa5500">//二级菜单名称</span>
    }
  ]
}
<span style="color:#770088">export</span> <span style="color:#770088">default</span> <span style="color:#000000">teacherRouter</span>
​</span>

3.3.2 配置多个子路由

  • 修改teacher.js，添加add子路由

    <span style="background-color:#f8f8f8">/** When your routing table is too long, you can split it into small modules **/

import Layout from '@/layout'

const teacherRouter = {
  path: '/teacher',           // 当前模块前缀路径，必须以/开头
  component: Layout,          // 采用布局组件显示当前模块【默认】
  redirect: '/teacher/list',  // “教师管理”默认显示路由
  name: '教师管理',            // 路由名称
  meta: {
    title: '教师管理',         // 一级菜单名称，children.length==0 隐藏
    icon: 'table'             // 一级菜单图标，children.length==0 隐藏
  },
  children: [
    {
      path: 'list',
      component: () => import('@/views/edu/teacher/list'),
      name: '教师列表',
      meta: { title: '教师列表', icon: 'list' }   //二级菜单名称
    },
    {
      path: 'add',
      component: () => import('@/views/edu/teacher/add'),
      name: '添加教师',
      meta: { title: '添加教师', icon: 'edit'  }   //二级菜单名称
    }
  ]
}
export default teacherRouter
</span>

3.4 编写教师路由对应的文件

创建列表页面 @/views/edu/teacher/list.vue

  • <span style="background-color:#f8f8f8"><template>
  <div>
    教师管理
  </div>
</template></span>

  • 创建添加页面 @/views/edu/teacher/list.vue

    <span style="background-color:#f8f8f8"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span>
    添加
  <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span></span>

4. 后端接口分析

4.1 访问前缀

  • 修改 .env.development

    <span style="background-color:#f8f8f8"># just a flag
ENV = 'development'
​
# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://localhost:10010/'</span>

4.2 axios工具类配置

4.2.1 查看工具类

  • element ui admin 提供了对原生axios进行了增强的工具类

    • 位置：@/utils/request.js

    • 内容：

      <span style="background-color:#f8f8f8"><span style="color:#aa5500">// 导入axios</span>
<span style="color:#770088">import</span> <span style="color:#0000ff">axios</span> <span style="color:#770088">from</span> <span style="color:#aa1111">'axios'</span>
​
<span style="color:#aa5500">// 创建axios实例，并使用 VUE_APP_BASE_API 确定的访问前缀</span>
<span style="color:#770088">const</span> <span style="color:#0000ff">service</span> <span style="color:#981a1a">=</span> <span style="color:#000000">axios</span>.<span style="color:#000000">create</span>({
  <span style="color:#000000">baseURL</span>: <span style="color:#000000">process</span>.<span style="color:#000000">env</span>.<span style="color:#000000">VUE_APP_BASE_API</span>, <span style="color:#aa5500">// url = base url + request url</span>
  <span style="color:#aa5500">// withCredentials: true, // send cookies when cross-domain requests</span>
  <span style="color:#000000">timeout</span>: <span style="color:#116644">5000</span> <span style="color:#aa5500">// request timeout</span>
})
​
<span style="color:#aa5500">// 请求处理（略）</span>
<span style="color:#000000">service</span>.<span style="color:#000000">interceptors</span>.<span style="color:#000000">request</span>.<span style="color:#000000">use</span>(<span style="color:#555555">...</span>)
                                 
<span style="color:#aa5500">// 响应处理（略）</span>
<span style="color:#000000">service</span>.<span style="color:#000000">interceptors</span>.<span style="color:#000000">response</span>.<span style="color:#000000">use</span>(<span style="color:#555555">...</span>)  
​
<span style="color:#aa5500">// 返回处理后的axios</span>
<span style="color:#770088">export</span> <span style="color:#770088">default</span> <span style="color:#000000">service</span></span>

4.2.2 修改工具类

  • 完善工具类，打印错误提示信息

    <span style="background-color:#f8f8f8"><span style="color:#aa5500">// 请求异常时，打印提示(路径等,数据等)</span>
<span style="color:#000000">console</span>.<span style="color:#000000">info</span>(<span style="color:#000000">response</span>.<span style="color:#000000">config</span>, <span style="color:#000000">res</span>)</span>

4.2.3 禁用模拟数据

4.3 自定义后端接口

为了方面后期程序的维护，统一将所有axios访问路径，抽取到 @/api下，且一个模块创建一个js文件。

4.3.1 修改用户登录文件

  • 修改 @/api/user.js 

<span style="background-color:#f8f8f8"><span style="color:#333333">import axios from '@/utils/request'

export function login(user) {
  //return axios.post('/user-service/user/login',user);
  // 临时模拟
  return axios.post('/teacher-service/user/login',user);
}

export function getInfo(token) {
  //return axios.get('/user-service/user/info',{
  return axios.get('/teacher-service/user/info',{
    params: {token}
  });
}

export function logout() {
  return axios({
    url: '/vue-element-admin/user/logout',
    method: 'post'
  })
}
</span></span>

  • 在 teacher服务中，创建临时登录处理类

  • JavaBean：User

    <span style="background-color:#f8f8f8">package com.czxy.zx.temp;

import lombok.Data;

/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 */
@Data
public class User {
    private String username;
    private String password;
}
</span>

  • 处理类：UserController，Element UI Admin

    <span style="background-color:#f8f8f8"><span style="color:#770088">package</span> <span style="color:#0000ff">com</span>.<span style="color:#000000">czxy</span>.<span style="color:#000000">zx</span>.<span style="color:#000000">temp</span>;
​
<span style="color:#770088">import</span> <span style="color:#000000">com</span>.<span style="color:#000000">czxy</span>.<span style="color:#000000">zx</span>.<span style="color:#000000">vo</span>.<span style="color:#000000">BaseResult</span>;
<span style="color:#770088">import</span> <span style="color:#000000">org</span>.<span style="color:#000000">springframework</span>.<span style="color:#000000">web</span>.<span style="color:#000000">bind</span>.<span style="color:#000000">annotation</span>.<span style="color:#981a1a">*</span>;
​
<span style="color:#770088">import</span> <span style="color:#000000">java</span>.<span style="color:#000000">util</span>.<span style="color:#000000">Arrays</span>;
<span style="color:#770088">import</span> <span style="color:#000000">java</span>.<span style="color:#000000">util</span>.<span style="color:#000000">HashMap</span>;
<span style="color:#770088">import</span> <span style="color:#000000">java</span>.<span style="color:#000000">util</span>.<span style="color:#000000">Map</span>;
​
<span style="color:#aa5500">/**</span>
 <span style="color:#aa5500">* @author 桐叔</span>
 <span style="color:#aa5500">* @email liangtong@itcast.cn</span>
 <span style="color:#aa5500">*/</span>
<span style="color:#555555">@RestController</span>
<span style="color:#555555">@RequestMapping</span>(<span style="color:#aa1111">"/user"</span>)
<span style="color:#770088">public</span> <span style="color:#770088">class</span> <span style="color:#0000ff">UserController</span> {
    <span style="color:#aa5500">/**</span>
     <span style="color:#aa5500">* 用户登录</span>
     <span style="color:#aa5500">* @param user</span>
     <span style="color:#aa5500">* @return</span>
     <span style="color:#aa5500">*/</span>
    <span style="color:#555555">@PostMapping</span>(<span style="color:#aa1111">"/login"</span>)
    <span style="color:#770088">public</span> <span style="color:#000000">BaseResult</span> <span style="color:#000000">login</span>(<span style="color:#555555">@RequestBody</span> <span style="color:#000000">User</span> <span style="color:#000000">user</span>) {
        <span style="color:#000000">Map</span><span style="color:#981a1a"><</span><span style="color:#008855">String</span>,<span style="color:#008855">Object</span><span style="color:#981a1a">></span> <span style="color:#000000">map</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">HashMap</span><span style="color:#981a1a"><></span>();
        <span style="color:#770088">if</span>(<span style="color:#aa1111">"admin"</span>.<span style="color:#000000">equals</span>(<span style="color:#000000">user</span>.<span style="color:#000000">getUsername</span>())) {
            <span style="color:#000000">map</span>.<span style="color:#000000">put</span>(<span style="color:#aa1111">"token"</span>, <span style="color:#aa1111">"admin-token"</span>);
        } <span style="color:#770088">else</span> {
            <span style="color:#000000">map</span>.<span style="color:#000000">put</span>(<span style="color:#aa1111">"token"</span>, <span style="color:#aa1111">"editor-token"</span>);
        }
        <span style="color:#770088">return</span> <span style="color:#000000">BaseResult</span>.<span style="color:#000000">ok</span>(<span style="color:#aa1111">"登录成功"</span>,<span style="color:#000000">map</span>);
    }
​
    <span style="color:#555555">@GetMapping</span>(<span style="color:#aa1111">"/info"</span>)
    <span style="color:#770088">public</span> <span style="color:#000000">BaseResult</span> <span style="color:#000000">login</span>(<span style="color:#008855">String</span> <span style="color:#000000">token</span>) {
        <span style="color:#000000">Map</span><span style="color:#981a1a"><</span><span style="color:#008855">String</span>,<span style="color:#008855">Object</span><span style="color:#981a1a">></span> <span style="color:#000000">map</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">HashMap</span><span style="color:#981a1a"><></span>();
        <span style="color:#770088">if</span>(<span style="color:#aa1111">"admin-token"</span>.<span style="color:#000000">equals</span>(<span style="color:#000000">token</span>)) {
            <span style="color:#000000">map</span>.<span style="color:#000000">put</span>(<span style="color:#aa1111">"roles"</span>, <span style="color:#000000">Arrays</span>.<span style="color:#000000">asList</span>(<span style="color:#aa1111">"admin"</span>));
            <span style="color:#000000">map</span>.<span style="color:#000000">put</span>(<span style="color:#aa1111">"avatar"</span>, <span style="color:#aa1111">"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"</span>);
            <span style="color:#000000">map</span>.<span style="color:#000000">put</span>(<span style="color:#aa1111">"name"</span>, <span style="color:#aa1111">"Super Admin"</span>);
        } <span style="color:#770088">else</span> {
            <span style="color:#000000">map</span>.<span style="color:#000000">put</span>(<span style="color:#aa1111">"roles"</span>, <span style="color:#000000">Arrays</span>.<span style="color:#000000">asList</span>(<span style="color:#aa1111">"editor"</span>));
            <span style="color:#000000">map</span>.<span style="color:#000000">put</span>(<span style="color:#aa1111">"avatar"</span>, <span style="color:#aa1111">"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"</span>);
            <span style="color:#000000">map</span>.<span style="color:#000000">put</span>(<span style="color:#aa1111">"name"</span>, <span style="color:#aa1111">"Normal Editor"</span>);
        }
        <span style="color:#770088">return</span> <span style="color:#000000">BaseResult</span>.<span style="color:#000000">ok</span>(<span style="color:#aa1111">"登录成功"</span>,<span style="color:#000000">map</span>);
    }
}
​</span>

  • 修改用户登录处理函数，打印错误信息，方便出错提示

4.3.2 教师接口文件

创建 @/api/edu/teacher.js 文件

  • <span style="background-color:#f8f8f8"><span style="color:#aa5500">// 导入axios工具类</span>
<span style="color:#770088">import</span> <span style="color:#0000ff">axios</span> <span style="color:#770088">from</span> <span style="color:#aa1111">'@/utils/request'</span>
​
<span style="color:#aa5500">//编写具体功能，一个功能一个函数，并使用export导出</span>
​
<span style="color:#aa5500">// 查询所有教师</span>
<span style="color:#770088">export</span> <span style="color:#770088">function</span> <span style="color:#0000ff">findAll</span>() {
  <span style="color:#770088">return</span> <span style="color:#000000">axios</span>.<span style="color:#000000">get</span>(<span style="color:#aa1111">'/teacher-service/teacher'</span>)
}
​
<span style="color:#aa5500">// 添加教师</span>
<span style="color:#770088">export</span> <span style="color:#770088">function</span> <span style="color:#0000ff">save</span>(<span style="color:#0000ff">teacher</span>) {
  <span style="color:#770088">return</span> <span style="color:#000000">axios</span>.<span style="color:#000000">post</span>(<span style="color:#aa1111">'/teacher-service/teacher'</span>, <span style="color:#0055aa">teacher</span>)
}
​</span>

4.3.2 使用接口

<span style="background-color:#f8f8f8"><span style="color:#333333"><template>
  <div>
    教师管理
  </div>
</template>

<script>
// 导入接口文件，并解构指定的方法
import { findAll } from '@/api/edu/teacher'

export default {
  methods: {
    async findAllTeacher() {
      // 调用接口文件中接口到的方法
      let { data } = await findAll()
    }
  },
  mounted() {
    // 页面加载成功，查询所有老师
    this.findAllTeacher()
  },
}
</script>

<style>

</style>
</span></span>

5.后台管理-讲师管理-前端实现

5.1 查询所有

5.1.1 需求

5.1.2 表格渲染

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">el-table</span>
      <span style="color:#0000cc">v-loading</span>=<span style="color:#aa1111">"listLoading"</span>
      <span style="color:#0000cc">:data</span>=<span style="color:#aa1111">"teacherList"</span>
      <span style="color:#0000cc">border</span>
      <span style="color:#0000cc">fit</span>
      <span style="color:#0000cc">highlight-current-row</span>
      <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"width: 100%;"</span>
    <span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"ID"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"id"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"80"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row}"</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#555555">{{ row.id }}</span><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>
        <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"姓名"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"name"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"80"</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"头衔"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"id"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"120"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row}"</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#555555">{{ row.level == 1 ? '高级讲师' : '首席讲师' }}</span><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>
        <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"资历"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"intro"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"350"</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"添加时间"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"150px"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row}"</span><span style="color:#117700">></span>
          <span style="color:#555555">{{row.gmtCreate}}</span>
          <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#555555">{{ row.gmtCreate | parseTime('{y}-{m}-{d} {h}:{i}') }}</span><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>
        <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"排序"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"sort"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"80px"</span> <span style="color:#0000cc">min-width</span>=<span style="color:#aa1111">"50px"</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"状态"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"100px"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row}"</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#555555">{{ row.isDeleted == 1 ? '已删除' : '未删除' }}</span><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>
        <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"操作"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"230"</span> <span style="color:#0000cc">class-name</span>=<span style="color:#aa1111">"small-padding fixed-width"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row,$index}"</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">el-button</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"primary"</span> <span style="color:#0000cc">size</span>=<span style="color:#aa1111">"mini"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"updateTeacher(row)"</span><span style="color:#117700">></span>
            修改
          <span style="color:#117700"></</span><span style="color:#117700">el-button</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">el-button</span> <span style="color:#0000cc">v-if</span>=<span style="color:#aa1111">"row.status!='deleted'"</span> <span style="color:#0000cc">size</span>=<span style="color:#aa1111">"mini"</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"danger"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"deleteTeacher(row,$index)"</span><span style="color:#117700">></span>
            删除
          <span style="color:#117700"></</span><span style="color:#117700">el-button</span><span style="color:#117700">></span>
        <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">el-table</span><span style="color:#117700">></span>
    {{teacherList}}
  <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
​
<span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#aa5500">// 导入接口文件，并解构指定的方法</span>
<span style="color:#770088">import</span> { <span style="color:#0000ff">findAll</span> } <span style="color:#770088">from</span> <span style="color:#aa1111">'@/api/teacher'</span>
<span style="color:#770088">import</span> { <span style="color:#0000ff">parseTime</span> } <span style="color:#770088">from</span> <span style="color:#aa1111">'@/utils'</span>
​
<span style="color:#770088">export</span> <span style="color:#770088">default</span> {
  <span style="color:#000000">data</span>() {
    <span style="color:#770088">return</span> {
      <span style="color:#000000">listLoading</span>: <span style="color:#221199">true</span>,
      <span style="color:#000000">teacherList</span>: []
    }
  },
  <span style="color:#000000">methods</span>: {
    <span style="color:#000000">async</span> <span style="color:#000000">findAllTeacher</span>() {
      <span style="color:#770088">this</span>.<span style="color:#000000">listLoading</span> <span style="color:#981a1a">=</span> <span style="color:#221199">true</span>
      <span style="color:#aa5500">// 调用接口文件中接口到的方法</span>
      <span style="color:#770088">let</span> { <span style="color:#0000ff">data</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">findAll</span>()
      <span style="color:#770088">this</span>.<span style="color:#000000">teacherList</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">data</span>
      <span style="color:#aa5500">// 恢复状态</span>
      <span style="color:#770088">this</span>.<span style="color:#000000">listLoading</span> <span style="color:#981a1a">=</span> <span style="color:#221199">false</span>
    },
    <span style="color:#000000">updateTeacher</span>() {
​
    },
    <span style="color:#000000">deleteTeacher</span>() {
​
    }
​
  },
  <span style="color:#000000">mounted</span>() {
    <span style="color:#aa5500">// 页面加载成功，查询所有老师</span>
    <span style="color:#770088">this</span>.<span style="color:#000000">findAllTeacher</span>()
  },
}
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
​
<span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
​
<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
​</span></span>

5.2分页列表

5.2.1定义api

  • 在 src/api/teacher.js 中添加

<span style="background-color:#f8f8f8"><span style="color:#333333">/*  条件查询
  @param teacherPage 分页对象
  @param teacherVo 条件对象
*/
export function condition(teacherPage,teacherVo) {
  return axios.post(`/teacher-service/teacher/condition/${teacherPage.size}/${teacherPage.current}`, teacherVo)
}
</span></span>

5.2.2 分页实现

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">div</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">el-table</span>
      <span style="color:#0000cc">v-loading</span>=<span style="color:#aa1111">"listLoading"</span>
      <span style="color:#0000cc">:data</span>=<span style="color:#aa1111">"teacherPage.records"</span>
      <span style="color:#0000cc">border</span>
      <span style="color:#0000cc">fit</span>
      <span style="color:#0000cc">highlight-current-row</span>
      <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"width: 100%;"</span>
    <span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"ID"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"id"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"80"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row}"</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#555555">{{ row.id }}</span><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>
        <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"姓名"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"name"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"80"</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"头衔"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"id"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"120"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row}"</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#555555">{{ row.level == 1 ? '高级讲师' : '首席讲师' }}</span><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>
        <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"资历"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"intro"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"350"</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"添加时间"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"150px"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row}"</span><span style="color:#117700">></span>
          <span style="color:#555555">{{row.gmtCreate}}</span>
          <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#555555">{{ row.gmtCreate | parseTime('{y}-{m}-{d} {h}:{i}') }}</span><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>
        <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"排序"</span> <span style="color:#0000cc">prop</span>=<span style="color:#aa1111">"sort"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"80px"</span> <span style="color:#0000cc">min-width</span>=<span style="color:#aa1111">"50px"</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"状态"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"100px"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row}"</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span><span style="color:#555555">{{ row.isDeleted == 1 ? '已删除' : '未删除' }}</span><span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span>
        <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"操作"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"230"</span> <span style="color:#0000cc">class-name</span>=<span style="color:#aa1111">"small-padding fixed-width"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">template</span> <span style="color:#0000cc">slot-scope</span>=<span style="color:#aa1111">"{row,$index}"</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">el-button</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"primary"</span> <span style="color:#0000cc">size</span>=<span style="color:#aa1111">"mini"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"updateTeacherPre(row)"</span><span style="color:#117700">></span>
            修改
          <span style="color:#117700"></</span><span style="color:#117700">el-button</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">el-button</span> <span style="color:#0000cc">v-if</span>=<span style="color:#aa1111">"row.status!='deleted'"</span> <span style="color:#0000cc">size</span>=<span style="color:#aa1111">"mini"</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"danger"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"deleteTeacher(row,$index)"</span><span style="color:#117700">></span>
            删除
          <span style="color:#117700"></</span><span style="color:#117700">el-button</span><span style="color:#117700">></span>
        <span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">el-table</span><span style="color:#117700">></span>
​
    <span style="color:#aa5500"><!-- 分页条 --></span>
    <span style="color:#117700"><</span><span style="color:#117700">pagination</span> <span style="color:#0000cc">v-show</span>=<span style="color:#aa1111">"teacherPage.total>0"</span> <span style="color:#0000cc">:total</span>=<span style="color:#aa1111">"teacherPage.total"</span> <span style="color:#0000cc">:pageSizes</span>=<span style="color:#aa1111">"[1,2,3,5]"</span> <span style="color:#0000cc">:page.sync</span>=<span style="color:#aa1111">"teacherPage.current"</span> <span style="color:#0000cc">:limit.sync</span>=<span style="color:#aa1111">"teacherPage.size"</span> <span style="color:#0000cc">@pagination</span>=<span style="color:#aa1111">"conditionTeacher"</span> <span style="color:#117700">/></span>
​
    <span style="color:#aa5500"><!--  --></span>
  <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
​
<span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#aa5500">// 导入接口文件，并解构指定的方法</span>
<span style="color:#770088">import</span> { <span style="color:#0000ff">findAll</span>,<span style="color:#0000ff">condition</span> } <span style="color:#770088">from</span> <span style="color:#aa1111">'@/api/teacher'</span>
<span style="color:#770088">import</span> { <span style="color:#0000ff">parseTime</span> } <span style="color:#770088">from</span> <span style="color:#aa1111">'@/utils'</span>
<span style="color:#770088">import</span> <span style="color:#0000ff">Pagination</span> <span style="color:#770088">from</span> <span style="color:#aa1111">'@/components/Pagination'</span> <span style="color:#aa5500">// secondary package based on el-pagination</span>
​
<span style="color:#770088">export</span> <span style="color:#770088">default</span> {
  <span style="color:#000000">components</span>: { <span style="color:#000000">Pagination</span> },
  <span style="color:#000000">data</span>() {
    <span style="color:#770088">return</span> {
      <span style="color:#000000">listLoading</span>: <span style="color:#221199">true</span>,
      <span style="color:#000000">teacherPage</span>: {    <span style="color:#aa5500">// 分页数据</span>
        <span style="color:#000000">current</span>: <span style="color:#116644">1</span>,
        <span style="color:#000000">size</span>: <span style="color:#116644">3</span>,
        <span style="color:#000000">total</span>: <span style="color:#116644">0</span>
      },
      <span style="color:#000000">teacherVo</span>: {      <span style="color:#aa5500">// 查询条件</span>
​
      }
    }
  },
  <span style="color:#000000">methods</span>: {
    <span style="color:#aa5500">/*</span>
<span style="color:#aa5500">    async findAllTeacher() {</span>
<span style="color:#aa5500">      this.listLoading = true</span>
<span style="color:#aa5500">      // 调用接口文件中接口到的方法</span>
<span style="color:#aa5500">      let { data } = await findAll()</span>
<span style="color:#aa5500">      this.teacherList = data</span>
<span style="color:#aa5500">      // 恢复状态</span>
<span style="color:#aa5500">      this.listLoading = false</span>
<span style="color:#aa5500">    },</span>
<span style="color:#aa5500">    */</span>
    <span style="color:#000000">async</span> <span style="color:#000000">conditionTeacher</span>() {
      <span style="color:#770088">this</span>.<span style="color:#000000">listLoading</span> <span style="color:#981a1a">=</span> <span style="color:#221199">true</span>
      <span style="color:#aa5500">// 调用接口文件中接口到的方法</span>
      <span style="color:#770088">let</span> { <span style="color:#0000ff">data</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">condition</span>(<span style="color:#770088">this</span>.<span style="color:#000000">teacherPage</span>,<span style="color:#770088">this</span>.<span style="color:#000000">teacherVo</span>)
      <span style="color:#770088">this</span>.<span style="color:#000000">teacherPage</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">data</span>
      <span style="color:#aa5500">// 恢复状态</span>
      <span style="color:#770088">this</span>.<span style="color:#000000">listLoading</span> <span style="color:#981a1a">=</span> <span style="color:#221199">false</span>
    },
    <span style="color:#000000">updateTeacherPre</span>() {
​
    },
    <span style="color:#000000">deleteTeacher</span>() {
​
    }
​
  },
  <span style="color:#000000">mounted</span>() {
    <span style="color:#aa5500">// 页面加载成功，查询所有老师</span>
    <span style="color:#aa5500">// this.findAllTeacher()</span>
    <span style="color:#770088">this</span>.<span style="color:#000000">conditionTeacher</span>()
  },
}
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
​
<span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
​
<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
​</span></span>

5.2.3 条件

<span style="background-color:#f8f8f8"><span style="color:#333333"><!-- 分页 -->
    <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="fetchData"
    /></span></span>

5.2.4 条件表单

通过 value-format="yyyy-MM-dd" 设置日期组件数据格式

<span style="background-color:#f8f8f8"><span style="color:#333333"><!-- 查询条件 -->
    <div class="filter-container">
      <el-form ref="conditionForm" :inline="true" :model="teacherVo" class="demo-form-inline">
        <el-form-item >
          <el-input v-model="teacherVo.name" placeholder="讲师名" style="width: 150px;" class="filter-item" @keyup.enter.native="handleFilter" />
          <el-select v-model="teacherVo.level" placeholder="讲师头衔" clearable style="width: 150px" class="filter-item">
            <el-option label="高级讲师" :value="1" />
            <el-option label="首席讲师" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="12">
            <el-date-picker type="date" placeholder="查询开始时间" v-model="teacherVo.beginDate" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col :span="12">
            <el-date-picker placeholder="查询结束时间" v-model="teacherVo.endDate" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item >
          <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="conditionTeacher">
            搜索
          </el-button>
          <el-button class="filter-item" style="margin-left: 10px;"  @click="clearCondition">
            清空
          </el-button>
        </el-form-item>
      </el-form>
    </div></span></span>

  • 清空函数

    <span style="background-color:#f8f8f8">    clearCondition() {
      this.teacherVo = {}
    }</span>

5.2.5 测试

ok

5.3 新增

5.3.1 定义api

  • src/api/edu/teacher.js （已有）

<span style="background-color:#f8f8f8"><span style="color:#333333">// 添加教师
export function save(teacher) {
  return axios.post('/teacher-service/teacher', teacher)
}</span></span>

5.3.2 显示添加页面

  • 编写路由 （已有） 

<span style="background-color:#f8f8f8">    {
      <span style="color:#000000">path</span>: <span style="color:#aa1111">'add'</span>,
      <span style="color:#000000">component</span>: () <span style="color:#981a1a">=></span> <span style="color:#770088">import</span>(<span style="color:#aa1111">'@/views/edu/teacher/add'</span>),
      <span style="color:#000000">name</span>: <span style="color:#aa1111">'添加教师'</span>,
      <span style="color:#000000">meta</span>: { <span style="color:#000000">title</span>: <span style="color:#aa1111">'添加教师'</span>, <span style="color:#000000">icon</span>: <span style="color:#aa1111">'edit'</span>  }   <span style="color:#aa5500">//二级菜单名称</span>
    }</span>

  • src/views/edu/teacher/add.vue

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">template</span><span style="color:#117700">></span>
  <span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"app-container"</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">el-form</span> <span style="color:#0000cc">label-width</span>=<span style="color:#aa1111">"120px"</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师名称"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">el-input</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.name"</span><span style="color:#117700">/></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师排序"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">el-input-number</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.sort"</span> <span style="color:#0000cc">controls-position</span>=<span style="color:#aa1111">"right"</span> <span style="color:#0000cc">:min</span>=<span style="color:#aa1111">"0"</span><span style="color:#117700">/></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师头衔"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">el-select</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.level"</span> <span style="color:#0000cc">clearable</span> <span style="color:#0000cc">placeholder</span>=<span style="color:#aa1111">"请选择"</span><span style="color:#117700">></span>
          <span style="color:#aa5500"><!--</span>
            <span style="color:#aa5500">数据类型一定要和取出的json中的一致，否则没法回填</span>
            <span style="color:#aa5500">因此，这里value使用动态绑定的值，保证其数据类型是number</span>
          <span style="color:#aa5500">--></span>
          <span style="color:#117700"><</span><span style="color:#117700">el-option</span> <span style="color:#0000cc">:value</span>=<span style="color:#aa1111">"1"</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"高级讲师"</span><span style="color:#117700">/></span>
          <span style="color:#117700"><</span><span style="color:#117700">el-option</span> <span style="color:#0000cc">:value</span>=<span style="color:#aa1111">"2"</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"首席讲师"</span><span style="color:#117700">/></span>
        <span style="color:#117700"></</span><span style="color:#117700">el-select</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师资历"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">el-input</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.career"</span><span style="color:#117700">/></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师简介"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">el-input</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.intro"</span> <span style="color:#0000cc">:rows</span>=<span style="color:#aa1111">"10"</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"textarea"</span><span style="color:#117700">/></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span>
​
      <span style="color:#aa5500"><!-- 讲师头像：TODO --></span>
​
      <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">el-button</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"primary"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"saveTeacher"</span><span style="color:#117700">></span>保存<span style="color:#117700"></</span><span style="color:#117700">el-button</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">el-form</span><span style="color:#117700">></span>
  <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">template</span><span style="color:#117700">></span>
​
<span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#770088">export</span> <span style="color:#770088">default</span> {
  <span style="color:#000000">data</span>() {
    <span style="color:#770088">return</span> {
      <span style="color:#000000">teacher</span>: {
​
      }
    }
  },
  <span style="color:#000000">methods</span>: {
    <span style="color:#000000">saveTeacher</span>() {
​
    }
  },
}
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span>
​
<span style="color:#117700"><</span><span style="color:#117700">style</span><span style="color:#117700">></span>
​
<span style="color:#117700"></</span><span style="color:#117700">style</span><span style="color:#117700">></span>
​</span></span>

5.3.3 实现新增功能

  • 导入 api，并修改 saveTeacher 发送ajax

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">script</span><span style="color:#117700">></span>
<span style="color:#aa5500">// 导入ajax方法</span>
<span style="color:#770088">import</span> { <span style="color:#0000ff">save</span> } <span style="color:#770088">from</span> <span style="color:#aa1111">'@/api/teacher'</span>
​
<span style="color:#770088">export</span> <span style="color:#770088">default</span> {
  <span style="color:#000000">data</span>() {
    <span style="color:#770088">return</span> {
      <span style="color:#000000">teacher</span>: {
​
      }
    }
  },
  <span style="color:#000000">methods</span>: {
    <span style="color:#000000">async</span> <span style="color:#000000">saveTeacher</span>() {
      <span style="color:#aa5500">// ajax 查询，返回结果为BaseResult</span>
      <span style="color:#770088">let</span> { <span style="color:#0000ff">message</span> , <span style="color:#0000ff">data</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">save</span>( <span style="color:#770088">this</span>.<span style="color:#000000">teacher</span> )
      <span style="color:#aa5500">// 成功提示</span>
      <span style="color:#770088">this</span>.<span style="color:#000000">$message</span>.<span style="color:#000000">success</span>( <span style="color:#0055aa">message</span> )
      <span style="color:#aa5500">// 关闭当前选项卡,【注意：必须放在跳转之前】</span>
      <span style="color:#770088">this</span>.<span style="color:#000000">$store</span>.<span style="color:#000000">dispatch</span>(<span style="color:#aa1111">'tagsView/delView'</span>, <span style="color:#770088">this</span>.<span style="color:#000000">$route</span>)
      <span style="color:#aa5500">// 跳转到列表页面</span>
      <span style="color:#770088">this</span>.<span style="color:#000000">$router</span>.<span style="color:#000000">push</span>(<span style="color:#aa1111">'/teacher/list'</span>)
    }
  },
  <span style="color:#000000">mounted</span>() {
    <span style="color:#000000">console</span>.<span style="color:#000000">info</span>(<span style="color:#770088">this</span>.<span style="color:#000000">$refs</span>)
  },
}
<span style="color:#117700"></</span><span style="color:#117700">script</span><span style="color:#117700">></span></span></span>

5.3.4 扩展：关闭选项卡分析

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">// 关闭当前选项卡,【注意：必须放在跳转之前】</span>
<span style="color:#770088">this</span>.<span style="color:#000000">$store</span>.<span style="color:#000000">dispatch</span>(<span style="color:#aa1111">'tagsView/delView'</span>, <span style="color:#770088">this</span>.<span style="color:#000000">$route</span>)</span></span>

  • 分析：

    <span style="background-color:#f8f8f8"><span style="color:#aa5500">//操作vuex的标准写法</span>
<span style="color:#770088">this</span>.<span style="color:#000000">$store</span>
​
<span style="color:#aa5500">//执行vuex的action的标准写法</span>
<span style="color:#770088">this</span>.<span style="color:#000000">$store</span>.<span style="color:#000000">dispatch</span>
​
<span style="color:#aa5500">// 执行模块“tagsView”中，名称为“delView”的action</span>
<span style="color:#000000">tagsView</span><span style="color:#981a1a">/</span><span style="color:#000000">delView</span>
​
<span style="color:#aa5500">// 参数为当前路由</span>
<span style="color:#770088">this</span>.<span style="color:#000000">$route</span></span>

  • vuex的位置

    • 模块文件的位置 

  • action的位置 

  • 代码出处

5.4 修改-回显

5.4.1 定义回显api

  • src/api/teacher.js 

<span style="background-color:#f8f8f8"><span style="color:#333333">// 查询详情
export function findById(id) {
  return axios.get(`/teacher-service/teacher/${id}`)
}</span></span>

5.4.2 显示修改弹出框

  • 添加弹出框

    <span style="background-color:#f8f8f8">    <span style="color:#aa5500"><!-- 修改弹出框 --></span>
    <span style="color:#117700"><</span><span style="color:#117700">el-dialog</span> <span style="color:#0000cc">title</span>=<span style="color:#aa1111">"修改讲师"</span> <span style="color:#0000cc">:visible.sync</span>=<span style="color:#aa1111">"editDialogVisible"</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">el-form</span> <span style="color:#0000cc">label-width</span>=<span style="color:#aa1111">"120px"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师名称"</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">el-input</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.name"</span><span style="color:#117700">/></span>
        <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师排序"</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">el-input-number</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.sort"</span> <span style="color:#0000cc">controls-position</span>=<span style="color:#aa1111">"right"</span> <span style="color:#0000cc">:min</span>=<span style="color:#aa1111">"0"</span><span style="color:#117700">/></span>
        <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师头衔"</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">el-select</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.level"</span> <span style="color:#0000cc">clearable</span> <span style="color:#0000cc">placeholder</span>=<span style="color:#aa1111">"请选择"</span><span style="color:#117700">></span>
            <span style="color:#aa5500"><!--</span>
              <span style="color:#aa5500">数据类型一定要和取出的json中的一致，否则没法回填</span>
              <span style="color:#aa5500">因此，这里value使用动态绑定的值，保证其数据类型是number</span>
            <span style="color:#aa5500">--></span>
            <span style="color:#117700"><</span><span style="color:#117700">el-option</span> <span style="color:#0000cc">:value</span>=<span style="color:#aa1111">"1"</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"高级讲师"</span><span style="color:#117700">/></span>
            <span style="color:#117700"><</span><span style="color:#117700">el-option</span> <span style="color:#0000cc">:value</span>=<span style="color:#aa1111">"2"</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"首席讲师"</span><span style="color:#117700">/></span>
          <span style="color:#117700"></</span><span style="color:#117700">el-select</span><span style="color:#117700">></span>
        <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师资历"</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">el-input</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.career"</span><span style="color:#117700">/></span>
        <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">el-form-item</span> <span style="color:#0000cc">label</span>=<span style="color:#aa1111">"讲师简介"</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">el-input</span> <span style="color:#0000cc">v-model</span>=<span style="color:#aa1111">"teacher.intro"</span> <span style="color:#0000cc">:rows</span>=<span style="color:#aa1111">"10"</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"textarea"</span><span style="color:#117700">/></span>
        <span style="color:#117700"></</span><span style="color:#117700">el-form-item</span><span style="color:#117700">></span>
        <span style="color:#aa5500"><!-- 讲师头像：TODO --></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-form</span><span style="color:#117700">></span>
      <span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">slot</span>=<span style="color:#aa1111">"footer"</span> <span style="color:#0000cc">class</span>=<span style="color:#aa1111">"dialog-footer"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">el-button</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"editDialogVisible = false"</span><span style="color:#117700">></span>取消<span style="color:#117700"></</span><span style="color:#117700">el-button</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">el-button</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"primary"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"updateTeacher"</span><span style="color:#117700">></span>修改<span style="color:#117700"></</span><span style="color:#117700">el-button</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">el-dialog</span><span style="color:#117700">></span></span>

  • 定义两个变量

    <span style="background-color:#f8f8f8">      <span style="color:#000000">editDialogVisible</span>: <span style="color:#221199">false</span>, <span style="color:#aa5500">// 修改弹出框</span>
      <span style="color:#000000">teacher</span>: {                <span style="color:#aa5500">// 表单对象</span>
​
      }</span>

5.4.3 调用回显api

  • 修改 src/views/edu/teacher/list.vue

  • 从api解构 findById

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">// 导入接口文件，并解构指定的方法</span>
<span style="color:#770088">import</span> { <span style="color:#0000ff">findAll</span>,<span style="color:#0000ff">condition</span>, <span style="color:#0000ff">findById</span> } <span style="color:#770088">from</span> <span style="color:#aa1111">'@/api/teacher'</span></span></span>

  • 编写 findTeacherById方法，调用ajax方法

<span style="background-color:#f8f8f8"><span style="color:#333333">    <span style="color:#770088">async</span> <span style="color:#000000">findTeacherById</span>(<span style="color:#000000">tid</span>) {
      <span style="color:#aa5500">// 查询结果 BaseResult</span>
      <span style="color:#770088">let</span> { <span style="color:#0000ff">message</span>, <span style="color:#0000ff">data</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">findById</span>(<span style="color:#000000">tid</span>)
      <span style="color:#aa5500">// 保存查询结果</span>
      <span style="color:#770088">this</span>.<span style="color:#000000">teacher</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">data</span>
    }</span></span>

  • 修改 updateTeacherPre 方法，显示弹出框，并回显表单

    <span style="background-color:#f8f8f8">    <span style="color:#000000">updateTeacherPre</span>( <span style="color:#000000">teacher</span> ) {
      <span style="color:#aa5500">// 显示弹出框</span>
      <span style="color:#770088">this</span>.<span style="color:#000000">editDialogVisible</span> <span style="color:#981a1a">=</span> <span style="color:#221199">true</span>
      <span style="color:#aa5500">// 查询详情</span>
      <span style="color:#770088">this</span>.<span style="color:#000000">findTeacherById</span>(<span style="color:#000000">teacher</span>.<span style="color:#000000">id</span>)
    },</span>

5.4.4 测试回显

5.4.5 定义修改api

<span style="background-color:#f8f8f8"><span style="color:#333333">// 修改讲师
export function update( teacher ) {
  return axios.put(`/teacher-service/teacher`, teacher)
}</span></span>

5.4.6 调用修改api 

<span style="background-color:#f8f8f8"><span style="color:#333333">    <span style="color:#770088">async</span> <span style="color:#000000">updateTeacher</span>() {
      <span style="color:#aa5500">// 发送ajax</span>
      <span style="color:#770088">let</span> { <span style="color:#0000ff">message</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">update</span>( <span style="color:#770088">this</span>.<span style="color:#000000">teacher</span> )
      <span style="color:#aa5500">// 提示</span>
      <span style="color:#770088">this</span>.<span style="color:#000000">$message</span>.<span style="color:#000000">success</span>(<span style="color:#0055aa">message</span>)
      <span style="color:#aa5500">// 刷新列表</span>
      <span style="color:#770088">this</span>.<span style="color:#000000">conditionTeacher</span>()
      <span style="color:#aa5500">// 关闭弹出框</span>
      <span style="color:#770088">this</span>.<span style="color:#000000">editDialogVisible</span> <span style="color:#981a1a">=</span> <span style="color:#221199">false</span>
​
    }</span></span>

5.4.7 测试修改

ok

5.5 删除

5.5.1定义api 

<span style="background-color:#f8f8f8"><span style="color:#333333">// 通过id删除
export function deleteById(id) {
  return axios.delete(`/teacher-service/teacher/${id}`)
}</span></span>

5.5.2 调用删除api

  • 解构删除方法 

<span style="background-color:#f8f8f8">// 导入接口文件，并解构指定的方法
import { findAll,condition, findById, update, deleteById } from '@/api/teacher'</span>

  • 定义方法deleteTeacherById

<span style="background-color:#f8f8f8"><span style="color:#333333">    <span style="color:#000000">deleteTeacher</span>( <span style="color:#000000">teacher</span> ) {
      <span style="color:#770088">this</span>.<span style="color:#000000">$confirm</span>(<span style="color:#aa1111">'您确定要删除么?'</span>, <span style="color:#aa1111">'删除提示'</span>, {<span style="color:#000000">type</span>: <span style="color:#aa1111">'warning'</span>})
      .<span style="color:#000000">then</span>(<span style="color:#770088">async</span> () <span style="color:#981a1a">=></span> {
        <span style="color:#aa5500">// 确定</span>
        <span style="color:#aa5500">// 发送ajax</span>
        <span style="color:#770088">let</span> { <span style="color:#0000ff">message</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">deleteById</span>( <span style="color:#000000">teacher</span>.<span style="color:#000000">id</span> )
        <span style="color:#aa5500">// 提示</span>
        <span style="color:#770088">this</span>.<span style="color:#000000">$message</span>.<span style="color:#000000">success</span>(<span style="color:#0055aa">message</span>)
        <span style="color:#aa5500">// 刷新列表</span>
        <span style="color:#770088">this</span>.<span style="color:#000000">conditionTeacher</span>()
      }).<span style="color:#000000">catch</span>(() <span style="color:#981a1a">=></span> {
        <span style="color:#aa5500">// 取消</span>
      });
    },</span></span>

5.5.3 测试

ok

5.7 批量删除

5.7.1 后端实现 

<span style="background-color:#f8f8f8"><span style="color:#333333">    <span style="color:#aa5500">/**</span>
     <span style="color:#aa5500">* 批量删除</span>
     <span style="color:#aa5500">* @param ids</span>
     <span style="color:#aa5500">* @return</span>
     <span style="color:#aa5500">*/</span>
    <span style="color:#555555">@PostMapping</span>(<span style="color:#aa1111">"/deleteBatch"</span>)
    <span style="color:#770088">public</span> <span style="color:#000000">BaseResult</span> <span style="color:#0000ff">deleteBatch</span>(<span style="color:#555555">@RequestBody</span> <span style="color:#000000">List</span><span style="color:#981a1a"><</span><span style="color:#008855">String</span><span style="color:#981a1a">></span> <span style="color:#000000">ids</span>) {
        <span style="color:#008855">boolean</span> <span style="color:#000000">result</span> <span style="color:#981a1a">=</span> <span style="color:#000000">eduTeacherService</span>.<span style="color:#000000">removeByIds</span>(<span style="color:#000000">ids</span>);
        <span style="color:#770088">if</span>(<span style="color:#000000">result</span>) {
            <span style="color:#770088">return</span> <span style="color:#000000">BaseResult</span>.<span style="color:#000000">ok</span>(<span style="color:#aa1111">"批量删除成功"</span>);
        }
        <span style="color:#770088">return</span> <span style="color:#000000">BaseResult</span>.<span style="color:#000000">error</span>(<span style="color:#aa1111">"批量删除失败"</span>);
    }</span></span>

5.7.2 定义 api 

<span style="background-color:#f8f8f8"><span style="color:#333333">​
<span style="color:#aa5500">// 批量删除</span>
<span style="color:#770088">export</span> <span style="color:#770088">function</span> <span style="color:#0000ff">deleteBatch</span>( <span style="color:#0000ff">ids</span> ) {
  <span style="color:#770088">return</span> <span style="color:#000000">axios</span>.<span style="color:#000000">post</span>(<span style="color:#ff5500">`/teacher-service/teacher/deleteBatch`</span>, <span style="color:#0055aa">ids</span> )
}</span></span>

5.7.3 前端多选

  • 添加多选框 

<span style="background-color:#f8f8f8">      <span style="color:#117700"><</span><span style="color:#117700">el-table-column</span>
        <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"selection"</span>
        <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"55"</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">el-table-column</span><span style="color:#117700">></span></span>

  • 添加多选事件 

<span style="background-color:#f8f8f8">    <span style="color:#000000">handleSelectionChange</span>(<span style="color:#000000">val</span>) {
      <span style="color:#770088">this</span>.<span style="color:#000000">multipleSelection</span> <span style="color:#981a1a">=</span> <span style="color:#000000">val</span>;
    }</span>

  • 添加多选变量

    <span style="background-color:#f8f8f8"><span style="color:#000000">multipleSelection</span>: [] ,   <span style="color:#aa5500">//多选内容</span></span>

5.7.4 调用批量删除 api

  • 解构 deleteBatch 

  • 批量删除方法

    <span style="background-color:#f8f8f8">    <span style="color:#000000">deleteTeacherBatch</span>() {
      <span style="color:#aa5500">// 校验</span>
      <span style="color:#770088">if</span>(<span style="color:#770088">this</span>.<span style="color:#000000">multipleSelection</span>.<span style="color:#000000">length</span> <span style="color:#981a1a"><=</span><span style="color:#116644">0</span>) {
        <span style="color:#770088">this</span>.<span style="color:#000000">$message</span>.<span style="color:#000000">warning</span>(<span style="color:#aa1111">'请选择删除项'</span>)
        <span style="color:#770088">return</span>
      }
      <span style="color:#aa5500">// 确认</span>
      <span style="color:#770088">this</span>.<span style="color:#000000">$confirm</span>(<span style="color:#aa1111">'您确定要删除所选讲师么?'</span>, <span style="color:#aa1111">'批量删除提示'</span>, {<span style="color:#000000">type</span>: <span style="color:#aa1111">'error'</span>})
      .<span style="color:#000000">then</span>(<span style="color:#770088">async</span> () <span style="color:#981a1a">=></span> {
        <span style="color:#aa5500">// 从选择内容中过滤所有的id</span>
        <span style="color:#770088">this</span>.<span style="color:#000000">ids</span> <span style="color:#981a1a">=</span> <span style="color:#770088">this</span>.<span style="color:#000000">multipleSelection</span>.<span style="color:#000000">map</span>(<span style="color:#0000ff">teacher</span><span style="color:#981a1a">=></span><span style="color:#0055aa">teacher</span>.<span style="color:#000000">id</span>)
        <span style="color:#aa5500">// 发送ajax</span>
        <span style="color:#770088">let</span> { <span style="color:#0000ff">message</span> } <span style="color:#981a1a">=</span> <span style="color:#770088">await</span> <span style="color:#000000">deleteBatch</span>( <span style="color:#770088">this</span>.<span style="color:#000000">ids</span> )
        <span style="color:#aa5500">// 提示</span>
        <span style="color:#770088">this</span>.<span style="color:#000000">$message</span>.<span style="color:#000000">success</span>(<span style="color:#0055aa">message</span>)
        <span style="color:#aa5500">// 刷新列表</span>
        <span style="color:#770088">this</span>.<span style="color:#000000">conditionTeacher</span>()
      }).<span style="color:#000000">catch</span>(() <span style="color:#981a1a">=></span> {
        <span style="color:#aa5500">// 取消</span>
      });
    }</span>

5.7.5 批量按钮

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500"><!-- 批量删除 --></span>
<span style="color:#117700"><</span><span style="color:#117700">el-button</span> <span style="color:#0000cc">size</span>=<span style="color:#aa1111">"mini"</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"danger"</span> <span style="color:#0000cc">@click</span>=<span style="color:#aa1111">"deleteTeacherBatch"</span><span style="color:#117700">></span>批量删除<span style="color:#117700"></</span><span style="color:#117700">el-button</span><span style="color:#117700">></span></span></span>

5.7.6 测试

posted @ 2022-11-09 08:13  陶然同学  阅读(240)  评论(0)    收藏  举报