基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端
基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端
陶然同学
发布于 2023-02-27 11:00:29
发布于 2023-02-27 11:00:29
👀专栏介绍
项目目前主要更新在线教育，一起学习一起进步。
👀本期介绍
本期主要介绍基于Vue+Vue-Router+Vuex+SPA+element ui admin实现在线教育前端
资料获取
链接：https://pan.baidu.com/s/12tchZo7zwmvMqWBNY9BLog 提取码：8888
传智在线
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/#功能
项目在线预览：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 测试
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-11-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
