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

基于springboot+mybatis+vue的项目实战之页面参数传递

news 2026/5/23 3:18:09

如图所示，删除操作可以用按钮实现，也可以用超链接来实现。

1、第一种情况，用按钮实现。

html页面相关：

 <button type="button" @click="deleteId(peot.id)">删除</button>

<script>new Vue({el:"#app",data() {return {peotList:[]}},methods:{findAll:function () {var _this = this;axios.post('/findAllJsoon', {}).then(function (response) {_this.peotList = response.data.data;//响应数据给peotList赋值}).catch(function (error) {console.log(error);});},deleteId:function (id) {var _thisd = this;if (window.confirm("确定要删除该条数据吗？？？")){axios.post('/deletePeot?id='+id).then(function (response) {alert("删除成功")_thisd.findAll();}).catch(function (error) {console.log(error);});}}},created() {// 获得参数id值// this.id = location.href.split("?id=")[1]// 通过id查询详情this.findAll();},})</script>

controller文件相关：

 @RequestMapping("/deletePeot")public void deletePeot(Integer id){peotService.deletePeot(id);}

可以看到，这里的controller文件中没有进行参数传递。这是因为，是在当前页面操作，参数直接传递给js，不需要通过url来传递。

2、第二种情况，通过超链接来删除，并跳转回查询所有的页面。

<a :href="'peot_delete.html?id='+peot.id">删除</a>
peot_delete.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><script src="./js/axios-0.18.0.js"></script></head>
<body>
<h1 align="center">诗人信息列表</h1>
<div id="app" align="center"><a href="peot_insert.html">新增</a><table  border="1"><tr><th>id</th><th>author</th><th>gender</th><th>dynasty</th><th>title</th><th>style</th><th>操作</th></tr><tr v-for="peot in peotList"><td>{{peot.id}}</td><td>{{peot.author}}</td><td>{{peot.gender}}</td><td>{{peot.dynasty}}</td><td>{{peot.title}}</td><td>{{peot.style}}</td><td><button type="button" @click="deleteId(peot.id)">删除</button><a :href="'peot_delete.html?id='+peot.id">删除</a><a :href="'peot_edit.html?id='+peot.id">修改</a></td></tr></table>
</div></body><script>new Vue({el:"#app",data() {return {peotList:[]}},methods:{findAll:function () {var _this = this;axios.post('/findAllJsoon', {}).then(function (response) {_this.peotList = response.data.data;//响应数据给peotList 赋值}).catch(function (error) {console.log(error);});},deleteId:function (id) {var _thisd = this;var url = `deletePeot_url/${this.id}`  //注意这里是反引号if (window.confirm("确定要删除该条数据吗？？？")){axios.post(url).then(function (response) {alert("删除成功")// _thisd.findAll();location.href = 'peot_listAll.html'}).catch(function (error) {console.log(error);});}}},created() {// 获得参数id值this.id = location.href.split("?id=")[1]// 通过id查询详情this.deleteId();},})</script></html>

controller页面相关：

    @RequestMapping("/deletePeot_url/{id}")public void deletePeot_url(@PathVariable("id") Integer id){peotService.deletePeot(id);}

可以看出，这里的controller是使用标准@PathVariable("id")进行了参数传递。

3、总结

从一个页面到另外一个页面，如果需要传递参数，需要在controller文件中进行相关的操作。

有关参数的传递，参见文章：Springboot之页面参数传递-CSDN博客

相关文章：

基于springboot+mybatis+vue的项目实战之页面参数传递

如图所示&#xff0c;删除操作可以用按钮实现&#xff0c;也可以用超链接来实现。 1、第一种情况&#xff0c;用按钮实现。 html页面相关&#xff1a; <button type"button" click"deleteId(peot.id)">删除</button> <script>new Vue(…...

编程日记 2024/5/14 7:44:47

CSS-浮动

float (浮动) 作用&#xff1a;盒子的顶点是一样的&#xff0c;具备行内块的特征&#xff0c;能设置宽高 属性&#xff1a;float 属性值&#xff1a;left 浮动在网页左边 right 浮动在网页右边 .a{width: 100px;height: 100px;float:left;background-color: red;}.b…...

编程日记 2024/5/14 7:42:44

MFC：字符串处理

例子 //多字节char* szTest "abc多字节";int nLen strlen(szTest);//9//宽字节wchar_t* szTest2 L"abc多字节";int nlen2 wcslen(szTest2);//6//测试项目配置为Unicodewchar_t* szTesz3 TEXT("abcd");//char* -> CStringCString strTes…...

编程日记 2024/5/14 7:41:43

虚拟仿真云平台在教育应用中的优势和意义

虚拟仿真云实验教学平台作为一种新型的教学方法&#xff0c;近年来在高校教育中得到了十分广泛的应用。它通过模拟真实的实验场景和实验操作&#xff0c;让学生在计算机上进行实验操作和数据处理&#xff0c;为学生提供了更加便捷、可靠、有效的实验学习环境。本文&#xff0c;…...

编程日记 2024/5/14 7:36:37

CPU的的处理流程如何快速记忆

为了快速记忆CPU的处理流程&#xff0c;可以将其简化成五个主要阶段&#xff0c;通常称为“冯诺依曼架构”的五个基本步骤&#xff0c;或者是流水线处理的几个阶段。下面是一种便于记忆的简化版本&#xff1a; CPU处理流程的五个阶段&#xff1a; 取指令&#xff08;Instructi…...

编程日记 2024/5/14 7:35:35

AI视频教程下载：基于OpenAl、LangChain、 Replicate开发AI应用程序

欢迎来到令人兴奋的 AI 应用世界&#xff01;在这门课程中&#xff0c;你将学习到创建一个能够与用户互动、理解自然语言、处理音频输入&#xff0c;甚至分析图像的真正智能应用所需的技能和技术。 AI 工具和技术 你将获得使用几个知名 AI API 和技术的实际经验。这些行业领先…...

编程日记 2024/5/14 7:33:33

【C++】继承相关（基类与派生类的继承关系以及细节整理）

目录 00.引言 01.继承的定义 02.基类和派生类对象 03.继承中的作用域 04.派生类的默认成员函数 05.友元、静态成员 00.引言 继承是面向对象编程中的一个重要概念&#xff0c;它的作用是创建一个新的类&#xff0c;该类可以从一个已存在的类&#xff08;父类/基类&#x…...

编程日记 2024/5/14 7:32:31

【Web后端】监听器Listener

1、简介 用来监听Servlet组件对象状态发生变化的组件可以监听的源包括:ServetRequest、HttpSession、ServletContext当监听到事件源状态发生变化时&#xff0c;会有对应的响应行为 2、使用方法 在web.xml文件中配置 <listener> <listener-class>com.coder.util.…...

编程日记 2024/5/14 7:31:28

C/C++ 初级球球大作战练手

效果演示&#xff1a; https://live.csdn.net/v/385490 游戏初始化 #include <stdbool.h> #include<stdio.h> #include<stdlib.h> #include<time.h> #include<graphics.h> #include <algorithm> #include<math.h> #include<mmsy…...

编程日记 2024/5/14 7:30:27

ES6之字符串的扩展

字符串的扩展 关键的扩展点及其示例&#xff1a; Unicode 表示与处理 JavaScript 共有6种方法可以表示一个字符。codePointAtpos&#xff1a;String.fromCodePoint…codePoints&#xff1a; **字符串的遍历 for … of **字符串方法的增强 includessearchString[, position]&…...

编程日记 2024/5/14 7:28:25

微信小程序开发，构建NPM报错解决

报错信息如下&#xff1a; message&#xff1a; NPM packages not found. Please confirm npm packages which need to build are belong to miniprogramRoot directory. Or you may edit project.config.jsons packNpmManually and packNpmRelationList appid: wx7144a5d5411…...

编程日记 2024/5/14 7:27:23

【异常】SpringBoot整合RabbitMQ-发送消息报错

错误信息 reply-code406, reply-textPRECONDITION_FAILED - inequivalent arg ‘x-message-ttl’ for queue ‘hello-queue’ in vhost ‘/lq’: received none but current is the value ‘10000’ of type ‘signedint’, class-id50, method-id10 错误原因 hello-queue这…...

编程日记 2024/5/14 7:26:22

通过钉钉卡片进行工单审批

我们通常通过钉钉机器人来发送通知&#xff0c;提醒审批人名下有待办工单需要处理。这种通知方式仅能提醒审批人到ITSM中处理&#xff0c;审批人需要打开电脑登陆平台处理&#xff0c;我们就考虑是否能有一种方式能够满足移动端审批&#xff1f; 这里我们可以使用ITSM的移动端版…...

编程日记 2024/5/14 7:23:20

C语言中的控制语句：深入解析与案例实践2

五、使用goto实现无条件跳转 虽然goto语句在现代编程实践中往往被避免使用&#xff0c;因为它可能导致代码难以理解和维护&#xff0c;但在某些特定情况下&#xff0c;它仍然可以作为一种解决方案。goto语句允许程序无条件地跳转到代码中指定的标签位置。 案例代码&#xff1a…...

编程日记 2024/5/14 7:21:17

【ARM Cortex-M 系列 2.1 -- Cortex-M7 Debug system registers】

请阅读【嵌入式开发学习必备专栏】 文章目录 Debug system registers中断控制状态寄存器&#xff08;ICSR&#xff09;Debug Halting Control and Status Register, DHCSR Debug 寄存器DCRSR与DCRDRCPU 寄存器读操作CPU 寄存器写操作CPU 寄存器选择CPU 寄存器读写示例 调试故障…...

编程日记 2024/5/14 7:19:15

深入解析C#中的async和await关键字

文章目录 一、异步编程的基本概念及其在C#中的实现二、async关键字的定义及其用法三、await关键字的定义及其用法示例代码&#xff1a;使用async和await编写一个简单的异步程序 四、async和await的优点注意事项 五、C#下async和await中常见问题汇总1. 异步方法中的await调用2. …...

编程日记 2024/5/14 7:16:11

【VUE.js】前端框架——未完成

基于脚手架创建前端工程 环境 当安装node.js时&#xff0c;它本身就携带有npm命令。&#xff08;-v 查版本号&#xff09;安装VUE CLI npm i vue/cli -g&#xff08;全局&#xff09; 创建 vue create 【project name】 镜像源解决方案 输入创建命令后&#xff0c;提示检查更…...

编程日记 2024/5/14 7:14:09

开源的文件压缩和解压缩软件7-Zip

7-Zip是一款开源的文件压缩和解压缩软件&#xff0c;它支持多种压缩格式&#xff0c;包括自有的7z格式以及常见的ZIP、RAR、TAR等格式。下面是对7-Zip的详细介绍&#xff0c;包括其功能特点、使用方法、优缺点等方面的内容。官网&#xff1a;7-Zip 1. 功能特点&#xff1a; 多…...

编程日记 2024/5/14 7:13:08

搜维尔科技：Patchwork 3D 新功能：爆炸视图动画

Patchwork 3D新功能&#xff1a;爆炸视图动画 为什么使用 Patchwork 3D&#xff1f; Patchwork 3D 软件有助于将 CAD 数据转换成真实感的 3D 模型以用于工业用途。 Patchwork 3D 可轻松进行实时渲染&#xff0c;有助于缩短设计周期&#xff0c;或者让您获得效果逼真的渲染图&…...

编程日记 2024/5/14 7:12:07

Redis——RedLock、Zookeeper及数据库实现分布式锁

在分布式系统中&#xff0c;实现分布式锁是确保数据一致性和防止并发问题的重要手段。以下是使用Redis的RedLock算法、ZooKeeper以及数据库实现分布式锁的基本概念和步骤&#xff1a; 1. Redis的RedLock算法 Redis的RedLock算法是Redis官方推荐的一种分布式锁实现方式&#x…...

编程日记 2024/5/14 7:11:05

AI时代什么建站软件功能强大？从GEO流量重构看CMS的智慧进化

2026年&#xff0c;互联网的底层逻辑正在发生一场“静默革命”。如果你的思维还停留在“建一个网站只是为了有个官网给客户看”&#xff0c;那么你可能正在被时代抛弃。当下的AI已经不仅仅是一个聊天工具&#xff0c;它正在重构整个信息的传播秩序。传统的SEO&#xff08;搜索引…...

编程新知 2026/5/23 3:04:09

为什么你的 Agent 总是跑着跑着就废了?聊聊 Loop 设计里那些坑（文末赠书）

"我的 Agent Demo 跑得挺顺的,一上生产就各种出问题。" 这句话我在不同场合听过太多次了。包括我自己最早写 Agent 的时候也是这样——一个简单的 ReAct 循环,本地测得好好的,放到真实场景里不是上下文爆了就是死循环,偶尔还给你来个"无限重试把 API 额度刷光&…...

编程新知 2026/5/23 2:54:07

在 LangGraph 里做动态路由：意图分类+置信度阈值+回退链路

LangGraph 生产级动态路由实战：意图分类+置信度校准+多级回退链路全栈实现 关键词 LangGraph, 大语言模型Agent, 动态路由, 意图分类, 置信度阈值校准, 多级回退机制, 可控Agent架构 摘要 当前大模型Agent开发已从玩具级Demo走向生产级落地，静态路由的固定执行逻辑无法适…...

编程新知 2026/5/23 0:58:57

鸿蒙同城兴趣圈页面构建：活动热区地图、话题动态与安全提示模块详解

鸿蒙同城兴趣圈页面构建&#xff1a;活动热区地图、话题动态与安全提示模块详解 前言 在 HarmonyOS 6.0 应用开发中&#xff0c;社交类页面的地理可视化、话题互动和安全提示是提升用户体验的关键补充模块。本文将以“同城兴趣圈”应用中的“活动热区”模拟地图、“话题动态”帖…...

编程新知 2026/5/23 0:29:03

精准监测，畅行无阻——DX-SZ3200系列在交通领域的应用

在铁路、高速及各类交通系统中&#xff0c;信号监测与管理的精准性和实时性至关重要。DX-SZ3200系列数字化射频实时频谱侦测接收机模块&#xff0c;凭借其卓越的性能和广泛的应用场景&#xff0c;成为了交通领域信号监测的得力助手。DX-SZ3200系列模块集成了先进的数字化射频接…...

编程新知 2026/5/23 0:22:31

别再用curl硬刚了！3种主流语言（Python/Node.js/Java）调用ChatGPT API的工业级封装方案

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;ChatGPT API调用方法概览与工业级封装核心原则 ChatGPT API 作为 OpenAI 提供的标准化接口&#xff0c;支持文本生成、对话管理、函数调用等多种能力。其核心调用方式基于 RESTful HTTP 请求&#xff0c;需通过…...

编程新知 2026/5/23 0:15:51

ISTA 3B-2013 全解析｜零担货物 (LTL) 综合模拟运输测试标准（CSDN 完整版）前言

前言 ISTA 3B-2013 是 ISTA 3 系列高级综合模拟测试&#xff0c;专门针对零担货物运输&#xff08;LTL&#xff09; 的包装件。 零担运输的特点是多货混装、多次中转、人工 / 叉车交叉搬运、环境复杂&#xff0c;因此 3B 是工业、设备、家电、汽配、大型包装最贴近真实物流的测…...

编程新知 2026/5/23 0:13:48

Node.js 服务端应用无缝集成 Taotoken API 的实践

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Node.js 服务端应用无缝集成 Taotoken API 的实践 对于 Node.js 后端开发者而言&#xff0c;将大模型能力集成到服务中已成为提升应…...

编程新知 2026/5/23 0:11:45

技术人的黄金十年：软件测试从业者25到35岁每一年该怎么规划？

对于每一位进入软件行业的技术人而言&#xff0c;25岁到35岁这十年几乎决定了整个职业生涯的上限&#xff0c;而软件测试作为产品质量的最后一道防线&#xff0c;这个岗位的能力积累、职业路径选择&#xff0c;更需要在这黄金十年里做好清晰的规划。不同于开发岗的技术迭代焦虑…...

编程新知 2026/5/22 23:12:01

ARM架构随机数生成机制与安全应用实践

1. ARM架构随机数生成机制深度解析 在计算机安全领域&#xff0c;高质量的随机数生成是加密算法、密钥生成和安全协议的基础支撑。ARMv8/v9架构通过FEAT_RNG&#xff08;Random Number Generation&#xff09;特性提供了硬件级的随机数生成支持&#xff0c;其设计遵循严格的密码…...

编程新知 2026/5/22 23:05:26