当前位置: 首页 > news >正文

SpringBoot + Vue 微人事(十)

职位管理前后端接口对接

![在这里插入图片描述](https://img-blog.csdnimg.cn/8b94a804c8fc424180f31b44a10259fb.png

先把table中的数据展示出来,table里面的数据实际上是positions里面的数据,就是要给positions:[] 赋上值

可以在methods中定义一个initPosition方法

 methods:{//定义一个初始化positions的方法initPositions(){//发送一个get请求去获取数据 请求地址是"/system/basic/pos/"this.getRequest("/system/basic/pos/").then(resp =>{//判断如果resp存在的话,请求成功if (resp){//就把positions的值赋值歌resp就行了this.positions=resp;}})}}

定义好之后去看职位管理的页面看有没有渲染出数据。
在这里插入图片描述
为什么没数据呢?我们可以看到我们定义的initPositions并没有调用,我们以前是登录的时候要点击登录的按钮去调用方法,但是我们这个不应该点,应该是页面一加载就会自动的去执行。那么如果让方法自动去执行呢?这时候就要用到vue的生命周期里面的钩子函数
在这里插入图片描述
当这个组件初始化的时候,会自动执行mounted方法,我们在mounted方法里面去调用initPositions就行了

 mounted(){this.initPositions();},

在这里插入图片描述
要在表格的前面加上多选按钮的话呢,只需要加上如下一段代码即可

        <el-table-columntype="selection"width="55"></el-table-column>

在这里插入图片描述
在表格里面添加编辑和删除操作,新增代码如下:scope.$index:当前操作到第几行 scope.row:这一行对应的json对象

在这里插入图片描述

<el-table-column label="操作"><!--scope.$index:当前操作到第几行 scope.row:这一行对应的json对象 --><template slot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template>
</el-table-column>
//定义编辑按钮的方法
handleEdit(index,data){},
//定义删除按钮的方法
handleDelete(index,data){},

效果如下图所示:
在这里插入图片描述
如何实现添加方法,这个也挺简单,在下面html标签里面加上@click=“addPosition()”
在这里插入图片描述

<el-button type="primary" icon="el-icon-plus" size="small" @click="addPosition()">添加</el-button>

在methods中的定义的添加方法的代码如下;首先要判断用户是否输入了名字,输入了就去发送添加的请求地址,添加成功之后调用initPositions方法刷新数据,没有输入则弹出提示框。
在这里插入图片描述
添加成功之后调用initPositions方法刷新数据
在这里插入图片描述
也可以添加完成之后清空输入框 this.pos.name=’ ';

addPosition(){if (this.pos.name){//this.pos :参数是posthis.postRequest("/system/basic/pos/",this.pos).then(resp=>{if(resp){//添加成功之后需要把表格刷新一下  可以直接用initPositions,重新加载数据this.initPositions();this.pos.name='';}})} else {this.$message.error("职位名称不可以为空");}},

添加按钮已经做完了,开始做删除按钮,代码如下:借助Element UI里面的MessageBox弹框

//定义删除按钮的方法handleDelete(index,data){this.$confirm('此操作将永久删除【'+data.name+'】职位, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.deleteRequest("/system/basic/pos/"+data.id).then(resp=>{if (resp){this.initPositions();}})}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},

删除效果如下图:
在这里插入图片描述

相关文章:

SpringBoot + Vue 微人事(十)

职位管理前后端接口对接 先把table中的数据展示出来&#xff0c;table里面的数据实际上是positions里面的数据&#xff0c;就是要给positions:[] 赋上值 可以在methods中定义一个initPosition方法 methods:{//定义一个初始化positions的方法initPositions(){//发送一个get请求…...

【Redis】Redis哨兵模式

【Redis】Redis哨兵模式 Redis主从模式当主服务器宕机后&#xff0c;需要手动把一台从服务器切换为主服务器&#xff0c;需要人工干预费事费力&#xff0c;为了解决这个问题出现了哨兵模式。 哨兵模式是是一个管理多个 Redis 实例的工具&#xff0c;它可以实现对 Redis 的监控…...

系统架构师---软件重用、基于架构的软件设计、软件模型

目录 软件重用 构件技术 基于架构的软件设计 ABSD方法与生命周期 抽象功能需求 用例 抽象的质量和业务需求 架构选项 质量场景 约束 基于架构的软件开发模型 架构需求 需求获取 标识构件 需求评审 架构设计 架构文档 架构复审 架构实现 架构演化 前言&…...

【Web开发指南】MyEclipse XML编辑器的高级功能简介

MyEclipse v2023.1.2离线版下载 1. 在MyEclipse中编辑XML 本文档介绍MyEclipse XML编辑器中的一些可用的函数&#xff0c;MyEclipse XML编辑器包括高级XML编辑&#xff0c;例如&#xff1a; 语法高亮显示标签和属性内容辅助实时验证(当您输入时)文档内容的源&#xff08;Sou…...

设计模式-观察者模式(观察者模式的需求衍变过程详解,关于监听的理解)

目录 前言概念你有过这样的问题吗&#xff1f; 详细介绍原理&#xff1a;应用场景&#xff1a; 实现方式&#xff1a;类图代码 问题回答监听&#xff0c;为什么叫监听&#xff0c;具体代码是哪观察者模式的需求衍变过程观察者是为什么是行为型 总结&#xff1a; 前言 在软件设计…...

vue+electron中实现文件下载打开wps预览

下载事件 win.webContents.downloadURL(url) 触发session的will-download事件 win.webContents.session.on(will-download, (event, downloadItem, webContents) > {// 设置文件保存路径// 如果用户没有设置保存路径&#xff0c;Electron将使用默认方式来确定保存路径&am…...

第4章 性能分析中的术语和指标

Linux perf和Intel VTune Profiler工具。 4.1 退休指令与执行指令 考虑到投机执行&#xff0c;CPU执行的指令要不退休指令多。Linux perf使用perf stat -e instruction ./a.exe即可获得退休指令的数量。 4.2 CPU利用率 CPU利用率表示在一段时间内的繁忙程度&#xff0c;用时…...

数字化转型能带来哪些价值?_光点科技

随着科技的迅猛发展&#xff0c;数字化转型已成为企业和组织的一项重要战略。它不仅改变了商业模式和运营方式&#xff0c;还为各行各业带来了诸多新的机遇和价值。在这篇文章中&#xff0c;我们将探讨数字化转型所能带来的价值。 数字化转型能够显著提升效率和生产力。通过引入…...

适用于Android™的Windows子系统Windows Subsystem fo r Android™Win11安装指南

文章目录 一、需求二、Windows Subsystem for Android™Win11简介三、安装教程1.查看BIOS是否开启虚拟化2.安装Hyper-V、虚拟机平台3.启动虚拟机管理程序(可选)4.安装适用于Android™的Windows子系统5.相关设置 一、需求 需要在电脑上进行网课APP&#xff08;无客户端只有App&…...

hive高频使用的拼接函数及“避坑”

hive高频使用的拼接函数及“避坑” 说到拼接函数应用场景和使用频次还是非常高&#xff0c;比如一个员工在公司充当多个角色&#xff0c;我们在底层存数的时候往往是多行&#xff0c;但是应用的时候我们通常会只需要一行&#xff0c;角色字段进行拼接&#xff0c;这样join其他…...

windows ipv4 多ip地址设置,默认网关跃点和自动跃点是什么意思?(跃点数)

文章目录 Windows中的IPv4多IP地址设置以及默认网关跃点和自动跃点的含义引言IPv4和IPv6&#xff1a;简介多IP地址设置&#xff1a;Windows环境中的实现默认网关跃点&#xff1a;概念和作用自动跃点&#xff1a;何时使用&#xff1f;关于“跃点数”如何确定应该设置多少跃点数&…...

java_免费文本翻译API_小牛翻译

目录 前言 开始集成API 纯文本翻译接口 双语对照翻译接口 指定术语翻译接口 总结 前言 网络上对百度&#xff0c;有道等的文本翻译API集成的文章比较多&#xff0c;所以集成的第一篇选择了小牛翻译的文本翻译API。 小牛翻译文本翻译API&#xff0c;支持388个语种&#xff0…...

flink消费kafka数据,按照指定时间开始消费

kafka中根据时间戳开始消费数据 import org.apache.flink.api.java.utils.ParameterTool; import org.apache.flink.connector.kafka.source.enumerator.initializer.OffsetsInitializer; import org.apache.flink.kafka.shaded.org.apache.kafka.clients.consumer.OffsetRese…...

【SpringCloud】Feign使用

文章目录 配置maven启动类添加yml 使用添加Feign服务Controller 其他设置超时设置YML开启OpenFeign客户端超时控制&#xff08;Ribbon Timeout&#xff09;OpenFeign日志打印功能日志级别YML开启日志 配置 maven <dependencies><!--openfeign--><dependency&g…...

WebApIs 第五天

window对象 BOM&#xff08;浏览器对象模型&#xff09;定时器-延时函数JS执行机制location对象navigator对象histroy对象 本地存储 一.BOM&#xff08;浏览器对象模型&#xff09; ① BOM是浏览器对象模型 window 对象是一个全局对象&#xff0c;也可以说是JavaScript中的…...

按斤称的C++散知识

一、多线程 std::thread()、join() 的用法&#xff1a;使用std::thread()可以创建一个线程&#xff0c;同时指定线程执行函数以及参数&#xff0c;同时也可使用lamda表达式。 #include <iostream> #include <thread>void threadFunction(int num) {std::cout <…...

C++策略模式

1 简介&#xff1a; 策略模式是一种行为型设计模式&#xff0c;用于在运行时根据不同的情况选择不同的算法或行为。它将算法封装成一个个具体的策略类&#xff0c;并使这些策略类可以相互替换&#xff0c;以达到动态改变对象的行为的目的。 2 实现步骤&#xff1a; 以下是使用…...

如何在网页下载腾讯视频为本地MP4格式

1.打开腾讯视频官网地址 腾讯视频 2.搜索你想要下载的视频 3. 点击分享,选择复制通用代码 <iframe frameborder="0" src="ht...

opencv-yolov8-目标检测

import cv2 from ultralytics import YOLO# 模型加载权重model YOLO(yolov8n.pt)# 视频路径cap cv2.VideoCapture(0)# 对视频中检测到目标画框标出来 while cap.isOpened():# Read a frame from the videosuccess, frame cap.read()if success:# Run YOLOv8 inference on th…...

CRYPTO 密码学-笔记

一、古典密码学 1.替换法&#xff1a;用固定的信息&#xff0c;将原文替换成密文 替换法的加密方式&#xff1a;一种是单表替换&#xff0c;另一种是多表替换 单表替换&#xff1a;原文和密文使用同一张表 abcde---》sfdgh 多表替换&#xff1a;有多涨表&#xff0c;原文和密文…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...